Cara Membuat Template Mailchimp Kustom yang Benar-benar Bekerja dengan Sempurna

Diterbitkan: 2021-06-22

Mengkodekan setiap email dari awal membutuhkan waktu terlalu lama, jadi memiliki template email yang dapat digunakan kembali dan benar dapat melakukan keajaiban untuk efisiensi alur kerja Anda. Tetapi membangun template Anda sendiri juga bisa menjadi petualangan tersendiri—bahkan untuk Mailchimp, penyedia layanan email (ESP) terpopuler kedua menurut laporan State of Email Service Providers kami.

Anda mungkin memiliki cara yang lebih disukai untuk mengembangkan email, tetapi ketika datang ke templat khusus untuk Mailchimp, penting untuk mengikuti beberapa panduan yang sangat spesifik untuk memastikan Anda tidak kehilangan waktu untuk membuat templat Anda berfungsi. Dan saya mengatakan ini telah kehilangan banyak jam sendiri!

Saat saya memandu Anda dalam membuat template Mailchimp kustom, ketahuilah bahwa cara Anda menyusun kode, cara Anda membuat tombol, dan bahkan ukuran citra Anda, semuanya perlu ditangani dengan sudut pandang teknis Mailchimp.

Itulah mengapa kami berkolaborasi dengan Mailchimp dan pakar lainnya di postingan blog ini untuk memastikan template Mailchimp Anda benar-benar berfungsi dengan sempurna.

Perbedaan antara template bawaan Mailchimp dan template khusus

Mailchimp memiliki perpustakaan template yang dapat Anda gunakan untuk membuat email. Masing-masing dapat diedit dalam editor drag-and-drop dan beberapa modul email untuk dipilih untuk menata konten Anda.

Jadi mengapa membuat template khusus?

Template Mailchimp sangat dapat diedit sehingga merek mana pun dapat menggunakannya dengan warna dan gaya merek mereka sendiri. Ini dapat menyulitkan untuk memantau penggunaannya, dan identitas merek tetap konsisten dari email ke email. Membuat template kustom memastikan bahwa banyak gaya yang Anda buat ke dalam template tidak diubah.

Selain itu, lingkungan pengeditan untuk templat khusus berbeda. Tidak ada editor drag-and-drop. Sebagai gantinya, buat modul dan elemen yang dapat diduplikasi, dialihkan, atau dihapus bergantung pada bahasa template yang Anda terapkan. Ini adalah cara lain untuk menjaga dari tata letak dan pengeditan yang tidak diinginkan.

Cara membuat kode template Mailchimp khusus

Siap membuat template email Mailchimp Anda sendiri? Teruslah membaca untuk tips dan trik yang Anda butuhkan untuk melakukannya dengan benar.

Pikirkan tentang tujuan dan pengguna akhir Anda

Sebelum Anda mulai, penting untuk terlebih dahulu memikirkan tujuan template dan orang-orang yang akan menggunakannya. Misalnya, Anda mungkin memerlukan template dengan banyak detail dan fleksibilitas. Atau, mungkin perlu sederhana dan mudah untuk diadopsi oleh anggota tim Anda yang kurang teknis.

Joolz Joseph, konsultan pemasaran email dan motivator pemasaran, mengatakan:

Joolz Joseph

“Tanyakan pada diri sendiri 'Apa yang ingin kita capai dengan ini?'

Apakah ini template catch-all yang dapat digunakan untuk beberapa jenis email sehingga membutuhkan banyak fleksibilitas dengan blok yang berbeda? Atau sesuatu yang lebih kaku seperti template promosi, seri orientasi, atau buletin?

Ada keuntungan besar untuk template dengan banyak blok yang dapat disesuaikan, tetapi terkadang 2 atau 3 template yang lebih pendek lebih mudah dikelola untuk orang yang mungkin kewalahan dengan banyak pilihan.

Pertimbangan singkat di awal ini memungkinkan Anda membuat template dengan mempertimbangkan tujuan dan pengguna akhir.

Misalnya, template promosi perlu difokuskan pada tujuan utama dan ajakan bertindak (CTA), sedangkan buletin mungkin memiliki beberapa CTA yang semuanya berbeda.

Ini semua perlu tercermin dalam desain template Anda. Ini juga akan memudahkan seseorang yang menjalankan promosi untuk memasukkan konten yang relevan jika pilihan mereka terbatas!

Melakukan satu template yang menangkap setiap kemungkinan dapat menghasilkan email yang bermerek tetapi tidak seefektif mungkin, jadi ada baiknya mengambil langkah mundur terlebih dahulu dan melihat apa yang ingin Anda capai dan jenis template (atau templates) akan sangat membantu Anda melakukan ini.”

Terima kasih, Joolz, untuk tipnya! Setelah Anda mengetahui tujuan untuk template Anda, Anda bisa mulai membangun.

Sematkan gaya CSS Anda

Salah satu hal pertama yang perlu disebutkan adalah Mailchimp menyejajarkan gaya CSS tersemat Anda secara otomatis saat Anda menyimpan template di dalam platform. Jadi saat Anda memulai pekerjaan pengembangan, Anda mungkin merasa lebih mudah untuk menyematkan semua gaya Anda, dan membatasi pengasapan kode.

Buat deretan modul

Saat Anda menyusun kode, pikirkan blok yang ingin Anda edit, terutama blok yang ingin Anda pesan ulang. Blok-blok ini harus berada dalam barisan, misalnya:

<!--modules that can be re-ordered-->
<!--module 1-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 1-->
<!--module 2-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 2-->

Setelah Anda menutup tabel induk, Anda tidak akan dapat mengurutkan ulang baris Anda melewati titik ini.

Pertimbangkan batasan tombol

Ada banyak cara untuk mengkodekan tombol. Namun, hanya tombol empuk yang akan berfungsi di template Mailchimp kustom Anda. Ini karena banyak gaya yang diterapkan pada tag jangkar dari tombol yang dapat diedit dihapus secara otomatis. Format kode VML dan rentang apa pun yang Anda tempatkan dalam tag jangkar Anda juga dapat disesuaikan.

Metode tombol empuk berarti bahwa hanya teks tombol Anda yang dapat diklik, karena Anda perlu menerapkan bantalan dan gaya tombol lainnya ke sel tabel induk. Dokumentasi ekstensif Mailchimp memberikan detail lebih lanjut tentang kode tombol (dan batasan email HTML lainnya jika Anda penasaran).

Gunakan gambar berukuran tepat untuk placeholder yang dapat diedit

Seperti tombol, gambar menumpahkan sedikit kode saat dibuat dapat diedit. Kali ini, atribut HTML yang menentukan lebar dan tinggi yang dihapus. Outlook bergantung pada ini, dan lingkungan pengeditan Mailchimp juga akan membuat ukuran sebenarnya dari gambar hingga Anda memasukkan kembali atribut ini menggunakan editor.

Ini membuatnya sedikit sulit untuk menggunakan gambar retina, alias gambar dengan ukuran dua kali lipat, untuk diperkecil dalam email.

Saya sarankan menggunakan citra 1x untuk setiap placeholder yang Anda kodekan ke dalam template Anda. Kemudian ketika template digunakan untuk kampanye, ganti placeholder Anda untuk gambar 2x (gambar retina), tentukan lebar dan tinggi di tab pengaturan editor gambar.

Terapkan bahasa template Mailchimp

Untuk menentukan area yang dapat diedit dalam template Anda, Anda perlu mengimplementasikan bahasa template Mailchimp. Ada banyak dokumentasi yang tersedia yang menguraikan hal-hal yang perlu Anda sertakan, tergantung pada jenis template yang Anda buat.

Untuk template yang sangat dapat disesuaikan yang dapat digunakan oleh banyak merek, Anda dapat membuat gaya CSS dapat diedit. Untuk melakukannya, ikuti panduan Mailchimp tentang gaya yang dapat diedit.

Untuk tujuan panduan ini, kita akan melihat cara membuat template yang membatasi kemampuan edit hanya pada konten. Dan untuk melakukan ini, kita perlu menambahkan bahasa berikut ke elemen HTML di dalam template:

mc:edit digunakan untuk menyediakan tindakan pengeditan konten untuk elemen tertentu dalam template. Pastikan Anda menggunakan nama unik untuk setiap contoh ini dalam template Anda.

mc:hideable digunakan untuk memberikan tindakan sembunyikan/tampilkan untuk elemen tertentu dalam template.

mc:label adalah tag opsional yang digunakan untuk memberi nama bagian yang dapat diedit dalam aplikasi.

mc:repeatable digunakan untuk menyediakan aksi duplikasi untuk elemen tertentu dalam sebuah template.

mc:variant digunakan untuk menyediakan cara untuk beralih di antara blok-blok diskrit HTML.

Untuk informasi lebih rinci tentang bahasa template Mailchimp, ini adalah dokumen masuk saya.

Sertakan tag gabungan Mailchimp

Ada banyak tag gabungan yang dapat Anda manfaatkan dalam template dan kampanye. Tag yang saya sarankan untuk diterapkan adalah:

*|MC_PREVIEW_TEXT|*
Tambahkan tag penggabungan teks pratinjau ini ke bangunan Anda untuk memastikan bahwa selama penyiapan kampanye, konten yang ditambahkan ke bidang teks pratinjau dimasukkan ke dalam email. Peretasan teks pratinjau yang biasanya kami tambahkan ke email Litmus untuk membuat spasi putih setelah teks pratinjau kami tidak berfungsi di dalam Mailchimp. Jangan takut. Mailchimp telah mendokumentasikan cara ideal untuk melakukan ini untuk templat khusus.

**UNSUB|*
Di header dan/atau footer template Anda, tambahkan tag gabungan ini ke tautan berhenti berlangganan Anda untuk memastikan bahwa orang-orang dapat keluar dari daftar Anda jika mereka mau. Plus, ini adalah persyaratan hukum, jadi Anda pasti tidak ingin melupakan ini.

**UPDATE_PROFILE|*
Beri pelanggan kesempatan untuk memperbarui informasi mereka atau mengelola preferensi mereka.

**ARSIP|*
Tambahkan tag gabungan ini ke tautan 'lihat online' untuk menawarkan kesempatan kepada orang-orang untuk melihat email Anda dalam browser web mereka.

Bagaimana cara menambahkan template Anda ke Mailchimp

Sekarang setelah template Anda dikodekan, Anda siap untuk menjalankannya.

Buka 'Kampanye > Template email' dan klik tombol 'Buat template' untuk mengimpor template Anda.

Cara termudah untuk membawa template Anda ke Mailchimp adalah dengan mengunggah zip yang berisi HTML dan gambar Anda, karena Mailchimp akan mengelola jalur gambar untuk Anda.

Mailchimp: pilih titik awal untuk template Anda

Setelah Anda menamai template Anda dan menavigasi ke file zip Anda, template Anda akan terbuka di editor template. Di sini, Anda dapat melakukan penyesuaian, mengakses studio konten tempat gambar dan aset lainnya disimpan, dan menguji rendering template Anda.

Setelah selesai di editor ini, Anda dapat menyimpan dan menutup, dan template Anda siap digunakan.

Pastikan template Anda berfungsi di Mailchimp

Ada banyak kesalahan HTML umum, jadi ada baiknya untuk melihat seperti apa pengalaman mengedit di Mailchimp sebelum Anda mengirimkannya ke tim, klien, atau orang lain untuk digunakan. Untuk melakukan ini, buka 'Buat' di menu utama, lalu pilih 'email' dan tetap menggunakan 'kampanye biasa'.

Anda dapat menambahkan beberapa detail kampanye, seperti baris subjek dan teks pratinjau. Ini akan memberi Anda kesempatan untuk memeriksa apakah Anda telah menerapkan tag gabungan dan kode teks pratinjau dengan benar.

Saat mengklik 'Desain Email', Anda akan dapat memilih template yang ingin Anda gunakan. Temukan template khusus Anda di tab 'Template Tersimpan'.

Pilih template di Mailchimp

Setelah memilih template, Anda akan dibawa ke lingkungan pengeditan Mailchimp tempat Anda dapat menguji semua bagian yang dapat diedit.

Untuk mengedit elemen yang dapat diedit, cukup klik di atasnya, dan panel pengeditan akan muncul di sisi kanan.

Mengedit elemen di template Mailchimp Anda

Sesuatu yang perlu diperhatikan : Terkadang mengatur ulang blok konten saya tidak berhasil, jadi jika Anda tidak dapat melihat ikon dengan panah atas dan bawah saat Anda mengklik blok, coba duplikasi blok yang ingin Anda pesan ulang. Anda dapat menghapus blok tambahan yang tidak diinginkan setelah Anda menyeret blok yang ingin Anda pindahkan ke lokasi barunya.

Menata ulang blok di template Mailchimp Anda

Jangan lupa untuk menguji rendering email

Seperti biasa, sangat penting untuk melihat bagaimana klien email yang berbeda merender template Anda, terutama setelah digunakan untuk membuat kampanye email.

Melalui pengujian seperti itulah saya mengidentifikasi masalah dengan templat saya dan menemukan beberapa kebiasaan penghapusan kode Mailchimp. Anda dapat dengan mudah menguji di editor kampanye dan template dengan membuka 'Pratinjau' dan 'Kirim email percobaan' ke kotak masuk atau alamat pengujian Litmus Anda untuk pengujian pra-pengiriman otomatis yang menyeluruh.

Litmus dan Mailchimp juga terintegrasi dalam beberapa cara untuk membantu Anda menguji email Anda secara menyeluruh dan seefisien mungkin. Buka 'Masuk ke mode pratinjau' dan pilih tab 'Kotak Masuk' untuk menjalankan pengujian email bertenaga lakmus dalam Pratinjau Kotak Masuk di Mailchimp. Dengan paket Litmus Plus atau Enterprise, Anda mendapatkan akses ke pengujian tambahan dan integrasi hemat waktu, termasuk kemampuan untuk menguji elemen pra-kirim yang penting saat Anda membuat dengan Ekstensi Litmus di Chrome dan menyinkronkan email antara Litmus dan Mailchimp.

Dapatkan template kustom siap pakai

Jika Anda mencari template Mailchimp yang dapat diedit yang dapat Anda gunakan segera, kami mendukung Anda.

Template Mailchimp buatan Litmus gratis

Untuk membantu Anda memulai, kami telah membuat template Mailchimp kustom yang dioptimalkan untuk Mode Gelap. Ini memiliki baris yang dapat diulang, blok konten variabel, dan tombol ramah Mailchimp.

Unduh template Mailchimp kami →

templat email Mailchimp gratis oleh Litmus

Ambil template Mailchimp buatan Litmus (file .zip) gratis Anda. Kemudian, gali kode untuk melihat bagaimana kami menerapkan kode template Mailchimp untuk membuat versi mini template email Subscriber Love gratis kami dapat diedit di Mailchimp.

Template email buatan mitra Mailchimp

Untuk opsi lebih banyak lagi, lihat Mailchimp Marketplace dengan template email cantik yang dirancang oleh Mitra Layanan Mailchimp.

Template Mailchimp di Mailchimp Marketplace

Anda dapat mencari template email berdasarkan tujuan pemasaran Anda, apakah itu untuk merekrut pelanggan baru atau mempromosikan produk baru. Pilih dan beli template yang cocok untuk Anda, lalu mulai sesuaikan agar sesuai dengan merek Anda. Tidak diperlukan instalasi atau pengkodean.

Template Mailchimp kustom Anda yang sempurna ada dalam jangkauan

Baik Anda membuat kode template Anda sendiri yang dapat diedit atau menyesuaikan milik orang lain, Anda sedang dalam proses menuju proses pembuatan email yang lebih efisien—dan yang dapat Anda percayai untuk membuat email sesuai merek dan bebas kesalahan.

grafik email dengan tanda centang hijau dan wajah tersenyum

Pastikan template Mailchimp Anda terlihat bagus

Pratinjau email Anda di lebih dari 90+ klien email, aplikasi, dan perangkat dengan Litmus untuk memastikan pengalaman pelanggan sesuai merek dan bebas kesalahan. Setiap saat.

Dapatkan uji coba Litmus gratis →