Cara Mendesain Tombol CTA Antipeluru Di Email

Tombol CTA antipeluru dirancang untuk ditampilkan dengan sempurna di semua kotak masuk dan ditampilkan apa pun yang terjadi. Ikuti kami ke dalam tutorial langsung untuk membuat email antipeluru Anda sendiri.

Dalam lokakarya hari ini, kita akan fokus pada elemen desain utama email dari Skillcrush: tombol CTA antipeluru . Tapi pertama-tama, apa artinya antipeluru ? Ini adalah istilah yang digunakan oleh profesional email untuk tombol CTA, yang ditulis dalam HTML, yang ditampilkan di semua kotak masuk dan, karena ini adalah kode HTML dan bukan gambar, tombol CTA akan selalu ditampilkan, apa pun yang terjadi.

Sekarang kita tahu apa itu tombol antipeluru, langkah selanjutnya adalah mencari tahu: bagaimana kita mendesainnya? Dan di sinilah mungkin sedikit rumit bagi sebagian orang. Anda dapat mengubah tombol CTA standar antipeluru dengan menambahkan beberapa baris kode HTML atau memeriksa apakah editor email yang Anda gunakan menghasilkan tombol antipeluru (dan tombol itu bukan sekadar gambar). Kita akan melihat bagaimana merancang tombol antipeluru dengan menggunakan editor email BEE.

Bagaimana tampilan tombol CTA antipeluru

Mari kita mulai dengan melihat tombol CTA antipeluru dari email Skillcrush . Untuk referensi, ini email lengkapnya:

Dan inilah close-up tombol ajakan bertindak yang unik:

Ini adalah perubahan kecepatan yang menyegarkan dari tombol "webinar biru" yang sering kita lihat, seperti ini:

Perhatikan bagaimana Skillcrush menggunakan taktik desain cerdas untuk tombol CTA-nya, yang pada gilirannya mencerminkan mereknya yang modern, feminin, dan menarik:

• Tombolnya berwarna pink merek dengan teks putih cerah
• Ini adalah lebar penuh email dan tidak memiliki garis besar (seperti yang hitam di sekitar tombol "Daftar Sekarang"), membangkitkan nuansa modern yang ringan
• “Klaim tempat Anda,” dengan penggunaan kata ganti pribadi “Anda,” memiliki nada yang ramah dan mudah didekati sambil tetap mengarahkan pembaca untuk bertindak

Tapi mungkin fitur desain yang paling penting dari tombol CTA adalah antipeluru , artinya tombol tersebut ditulis dalam HTML sehingga sepenuhnya ditampilkan di semua kotak masuk. Kita dapat melihat bagaimana tombol ditampilkan bahkan dengan gambar dimatikan di iPhone:

Sekarang mari kita dapatkan lebih banyak lagi dan lihat bagaimana merancang tombol CTA antipeluru sendiri dan membuat ulang tombol CTA Skillcrush. Kami akan menggunakan editor email BEE, yang menghasilkan tombol CTA antipeluru.

Ikhtisar Video: Cara mendesain tombol CTA antipeluru

Sebagai gambaran singkat, inilah video tutorial kami tentang cara mendesain tombol CTA antipeluru dari email Skillcrush di editor email BEE:

[post_video_embed url=”https://www.youtube.com/embed/x5NiClm8iLA” height=”” width=””]

Panduan langkah demi langkah di editor BEE

Mari kita telusuri cara mudah membuat tombol CTA bintang di editor BEE, di mana kita memiliki kustomisasi penuh lebar, radius batas, warna batas, padding, dan gaya warna dan teks.

Untuk memulai, kami membutuhkan beberapa menit untuk membuat ulang bagian atas email Skillcrush, mengisi template satu kolom dasar dengan gambar header dan konten intro. Sekarang, mari kita buat tombol kita!

Di menu Struktur di sebelah kanan, kami akan mengambil blok konten tombol dan cukup menyeretnya ke badan email kami.

Perhatikan bahwa tombol default berwarna biru, persegi panjang, dan berada di tengah halaman:

Tapi ada banyak yang bisa kita lakukan untuk menyesuaikannya ! Untuk mencocokkan tombol Skillcrush, kita harus:

• Ubah warna latar belakang
• Perbarui dan gaya teks
• Tambah lebar dan sesuaikan padding
• Sisipkan tautan

Di badan email, kita akan mengklik struktur tombol untuk mengaktifkannya, lalu mulai melakukan penyesuaian di menu Konten di sebelah kanan.

Warna tombol

Pertama, kita akan mengatur warna tombol menjadi merah muda (#F16059 dalam format heksadesimal) agar sesuai dengan Skillcrush.

Kemudian, kami akan memperbarui teks . Saat kami mengetik, tombol secara otomatis melebar untuk mengakomodasi konten kami:

Kami dapat mempertahankan warna font default kami (putih #ffffff), keluarga font (Arial), dan ukuran font (16px), tetapi kami akan membuat pesan kami tebal (dan pastikan untuk mengetikkan huruf besar semua).

Lebar tombol penuh

Membuat tombol meregang ke lebar penuh badan email itu mudah. Kembali ke menu Content Properties , kita akan menyesuaikan slider lebar ke kanan, hingga 100%. Dari perspektif desain, lebar penuh masuk akal : ini mencerminkan header Skillcrush di bagian atas email, memberikan keseimbangan yang estetis, dan juga memberi pembaca seluler lebih banyak ruang untuk mengklik.

Sentuhan akhir

Di bawah Content Padding , kami akan memastikan bahwa kami memiliki padding 5 px atas dan bawah. Ingat juga untuk menyisipkan tautan ke tombol : di menu Properti Konten yang sama dengan tempat kami bekerja, kami akan menggulir ke bagian Tindakan dan menempelkan tautan kami.

Sekarang, kami memiliki tombol CTA antipeluru yang berfungsi penuh , identik dengan email Skillcrush! Bukankah itu mudah?

Jika Anda ingin menyesuaikan tombol CTA lebih lanjut, berikut adalah beberapa pengaturan desain tombol tambahan di editor BEE:

radius perbatasan

Anda dapat menyesuaikan Border Radius untuk mengubah bentuk tombol Anda . Dari perspektif desain, elemen persegi panjang umumnya berkonotasi rasa tradisionalisme, kepraktisan, dan keseimbangan, sedangkan elemen melingkar dapat dianggap lebih lembut dan menenangkan.

Berikut adalah versi bulat dari tombol CTA kami setelah menyesuaikan radius menjadi 25 px:

Bantalan tombol

Kami juga dapat membuat tombol lebih tinggi (atau lebih pendek) : pastikan tombol "Opsi lainnya" diaktifkan di bagian Padding Konten , dan naikkan padding atas dan bawah.

Inilah tombol kami dengan padding atas dan bawah 20 px.

perbatasan

Penyesuaian lain yang dapat kita lakukan adalah warna dan lebar tepi tombol , ditemukan di bawah Properti Konten di editor BEE. Perhatikan bagaimana kami memiliki kontrol granular di perbatasan.

Tombol "Daftar Sekarang" tradisional yang kita lihat sebelumnya memiliki garis hitam tipis di sekitarnya. Di pengaturan Border di editor BEE, kita bisa bermain dengan warna dan ketebalan yang berbeda . Batas tipis dan ringan menambahkan sedikit kedalaman:

Dan sedikit lebih tebal, batas yang lebih gelap lebih menonjol tetapi memiliki efek yang serupa:

Beralih ke warna yang sama sekali berbeda biasanya mengurangi nuansa tombol yang ringan dan modern:

Tapi border juga bisa berguna untuk mempertahankan tampilan yang ringan, lapang, dan modern jika kita menghilangkan warna background , seperti ini:

Seperti yang Anda lihat, kami mungkin menghabiskan sepanjang hari untuk menyesuaikan tombol CTA di editor BEE!

Takeaways desain tombol CTA antipeluru kami

Saat Anda mendesain email Anda sendiri dan menyesuaikan tombol CTA antipeluru Anda, berikut adalah hal-hal penting yang perlu diingat:

• Tombol juga harus sesuai merek . Skillcrush melakukan pekerjaan yang baik untuk menunjukkan bagaimana tombol yang dirancang dengan baik dapat sangat membantu dalam mencerminkan merek Anda sehingga Anda dapat terhubung dengan audiens Anda . Bermainlah dengan warna dan gaya untuk mendapatkan tampilan yang cocok dengan identitas merek dan estetika email Anda. Tombol harus menarik perhatian (harus jelas bahwa itu tombol) tetapi tidak menonjol seperti ibu jari yang sakit.
• Seimbangkan ukuran tombol Anda. Lebih besar tidak selalu lebih baik. Jangan membuat pembaca Anda merasa seperti Anda mendorong permintaan di wajah mereka. Seimbangkan dengan membuat kancing Anda lebar jika tidak terlalu tinggi, atau dengan membuatnya sedikit lebih tinggi jika tidak terlalu lebar. Ingat, pembaca di perangkat seluler atau tablet harus dapat dengan mudah mengeklik dengan ujung jari, jadi sediakan ruang kosong yang cukup di sekitar tombol Anda.
• Jangan lupa isinya! “Daftar”, “Pelajari lebih lanjut”, “Daftar”, dan CTA serupa digunakan secara berlebihan. Pikirkan tentang bagaimana Anda dapat menyesuaikan pesan Anda dengan cara yang mencerminkan nada merek Anda. Pastikan untuk menggunakan kata kerja tindakan langsung yang jelas—dan ringkas. Coba gunakan kata ganti orang seperti “saya” dan “milik Anda” yang membuat pesan Anda ramah dan menarik. Anda dapat mencoba: “Pesan tempat saya sekarang” atau “Dapatkan tiket gratis saya”.
• Penempatan adalah kuncinya. Penelitian telah menunjukkan bahwa menempatkan tombol CTA di paro bawah sebenarnya meningkatkan klik sebesar 304%! Beri tahu pembaca untuk apa mereka mendaftar terlebih dahulu—dengan salinan dan visual yang bagus— lalu undang mereka untuk bertindak. Skillcrush melakukan hal ini dengan menempatkan tombol CTA mereka terakhir.
• Jadilah anti peluru. Di atas segalanya, sangat penting bahwa tombol Anda terlihat bagus dan berfungsi sebagaimana mestinya, terlepas dari perangkat atau kotak masuk email. Selalu gunakan HTML alih-alih gambar. Kami telah melihat bahwa di editor BEE, semua tombol antipeluru, jadi Anda tidak perlu khawatir tentang bagaimana mereka akan merender!

Kami harus bertanya: apakah tombol CTA Anda antipeluru? Apa pendapat Anda tentang tips desain tombol kami? Bagikan ide dan pemikiran Anda di komentar di bawah!