Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Email Design

Bagaimana Kami Melakukannya: Mengubah Tuts + Email ke dalam Template Campaign Monitor

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called How We Made Our Shiny New Envato Tuts+ Emails.
How We Did It: Building the New Tuts+ Email Templates

Indonesian (Bahasa Indonesia) translation by Wasmia Mia (you can also view the original English article)

Dalam dua bagian pertama dari seri studi kasus ini, kami telah melihat bagaimana  Tuts Envato  + email baru dirancang, lalu dibangun sebagai kiriman HTML / CSS statis.  Dalam bagian akhir dari teka-teki ini, saya akan menunjukkan bagaimana kami mengubah file-file itu menjadi template campaign monitor.

Pada tahap ini ada beberapa anggota tim yang terlibat dalam proses tersebut: Cameron dan saya.  Cam mengambil alih pengintegrasian intisari ke dalam Campaign Monitor, saya menangani buletin, yang akan saya jelaskan di postingan ini.

1. Siapkan File Anda

Nicole mengirimkan serangkaian file di akhir proses pembuatan, termasuk aset HTML, CSS, dan gambar.  Bersama-sama, mereka melayani sejumlah jenis email yang berbeda, jadi saya hanya perlu mengambil sedikit bagian yang diperlukan untuk template newsletter dan bekerja dari situ.

Tip: Download file sumber jika anda ingin ikuti.

Hero lokal

Saat ini, jalur dalam file semuanya relatif.  Ada beberapa tautan ke file CSS, beberapa tautan di dalamnya hingga gambar, dan semuanya mengarah ke direktori file lokal seperti yang kami lihat.  Contohnya:

Saat kami mengupload file kami di akhir tutorial, Campaign Monitor akan mengenali semua jalur-jalur ini dan mengubahnya sesuai dengan itu.

2. Mulai dari Atas

Proses kami adalah begini: kami akan mengambil semua bit statis dari template email kami dan menukarnya untuk cuplikan sedinamis mungkin.  Bergulir ke bawah, penyebab pertama yang saya temukan ada di sekitar baris 73: tautan ke versi web:

Tautan itu akan berbeda setiap waktu, jadi mari kita beralih ke CM dinamis <webversion>:

cukup mudah.  Berikutnya!

3. Tautan yang Lebih Penting

<webversion> yang kami jaga adalah salah satu dari beberapa tautan penting yang disediakan oleh Campaign Monitor.  Saat kita sedang dalam mood, mari kita gunakan satu atau dua .  Preferensi email paragraf dapat ditemukan di sekitar garis 346, dan terlihat seperti ini:

Mari kita gunakan <preferences> dan <unsubscribe> untuk membuat bagian itu dinamis:

Ada beberapa tautan penting lainnya, seperti <forwardtoafriend>, namun kami tidak akan menggunakannya dalam hal ini.

4. Garis tunggal

Hal berikutnya yang perlu kita sertai adalah judul email utama.

tuts email heading
Tuts judul email Judul dan sub-judul 

Di sekitar garis 87,  anda akan menemukannya ditandai seperti ini:

Paragraf, dengan kelas judul dan h1 atau h2 (terima kasih email HTML).  Masing-masing dari ini perlu diedit dari dalam Campaign Monitor, jadi, mengingat bahwa kita hanya perlu mengedit konten teks dan tidak ada yang lain, kita dapat menggunakan elemen template <singleline>:

Paragraf tetap utuh sempurna, kita hanya akan menambahkan daerah yang dapat diedit dalam masing-masing paragraf.  Setiap singleline memiliki atribut label opsional, yang akan ditampilkan dari dalam editor Campaign Monitor:

5. Multi Lines

Untuk konten yang sedikit lebih kompleks daripada judul dan straplines, kita akan menggunakan elemen <multiline>.  Pada baris 134,  anda akan menemukan konten "artikel pertama" kami yang akan kami gunakan sebagai pengantar untuk setiap email:

Mari kita buat dua bagian ini dinamis:

Ia mengikuti pola yang sama seperti sebelumnya: daerah yang dapat diedit, dengan label opsional - tapi kali ini mereka mengizinkan editor WYSIWYG:

6. Gambar yang dapat diedit

Gulir ke bawah ke baris 168 dan anda akan menemukan gambar di dalam sel tabel, semuanya dengan sendirinya:

Ini akan menjadi bagian dari bagian berulang (yang akan kita urus sebentar lagi), jadi mari kita buat terlebih dahulu gambar ini secara dinamis.  Saya tidak suka menggunakan kata "sederhana" dalam tutorial, namun dalam kasus ini saya akan membiarkannya keluar: cukup tambahkan atribut yang dapat diedit ke tag gambar.  Selesai!

Atribut lebar diperlukan, namun src (yang memberi kita gambar default) bersifat opsional, seperti atribut label teman kita.

Dengan itu selesai, editor memungkinkan kita untuk menghapus gambar default, mengunggah yang baru, menambahkan teks alt, dan (yang terpenting) menambahkan sebuah tautan.

"Data sukar mengatakan: email dengan gambar mengkonversi hampir dua kali juga."  - Chris Hexton, CEO dan Co-founder Vero

Catatan: ingatlah bahwa jika kita memilih untuk menghapus gambar sepenuhnya, markup yang berisi akan tetap ada.  Hal ini dapat mengakibatkan area berlapis besar tidak berkonten, jadi pertimbangkanlah bagaimana anda menandai gambar anda dalam desain.

7. Area yang dapat diulang

Gambar itu adalah bagian dari bagian yang ingin kita ulangi sebanyak yang dibutuhkan. Ia dimulai pada garis 146 dan berakhir pada baris 176, dengan komentar:

Seperti yang kami lakukan sebelumnya dengan area lain, kami perlu membuat judul dalam bagian ini sebagai <singleline> dan kontennya <multiline> , jadi lakukan itu sebelum melangkah lebih jauh.

Untuk membuat seluruh potongan ini bisa dlakukan iulang, kita bungkus potongan-potongan yang diperlukan dalam elemen <repeater>:

Hal ini akan memberi kami beberapa kontrol tambahan di editor Campaign Monitor, yang memungkinkan kami menduplikat bagian ini, memindahkannya (berguna untuk pemesanan ulang), atau menghapusnya.

Catatan: <repeater> harus berisi wadah baik <singleline> , <multiline>, atau <img editable>.

Catatan lain: anda tidak bisa mengumpulkan elemen <repeater> !

8. Layout

Sekarang untuk bagian berulang dengan perbedaan.  Ini adalah bagian topik khusus, dan masing-masing topik memiliki satu topik, dengan warna topik yang sesuai.

Dalam kasus buletin proyek terjemahan kami, terkadang kami bisa menampilkan bagian Fotografi & Video, bersama dengan Kode, dan Pengembangan Game.  Terkadang kita bisa melewati kode.  Terkadang,  kita bisa menampilkan kesembilan topik.  Jadi bagaimana baiknya untuk mengatur ini?  Masukkan elemen <layout> .

Kita bisa menggunakan beberapa elemen layout dalam satu blok  <repeater>, sehingga setiap kali kita menduplikat blok , kita diberi pilihan layout.  Dalam kasus kami, kami ingin memilih topik yang tersedia, jadi markup kami akan terlihat sedikit seperti ini:

Di sana, anda akan melihat elemen layout, masing-masing dengan label yang unik.

Penting: jangan gunakan entitas HTML yang lepas (seperti &amp; bukan &) di dalam label layout.

Mulailah dengan baris 183 dengan merangkum blok topik kita di <repeater>.  Kemudian bungkus setiap blok topik dalam elemen <layout label=''>, pastikan untuk memberi label unik.

Sekarang, saat kami mengunggah semuanya ke Campaign Monitor, editor akan memberi kami semua opsi layout kami ketika kami ingin mengulang sebuah bagian:

9. Unggah ke Campaign Monitor

Semua kerja keras kami selesai, sekarang kami perlu mengunggah file kami ke Campaign Monitor agar bisa menggunakan template kami dalam perjalanan email!

Di dasbor Campaign Monitor anda, buka Template> Impor.

Selanjutnya, masukkan nama untuk template anda, pilih file HTML anda yang telah selesai, lalu pilih semua aset penting lainnya (CSS dan gambar) sebagai satu file zip.

File anda akan diunggah dan diproses, itu akan memakan waktu lama.  Styles akan dioptimalkan (beberapa inline, beberapa disuntikkan ke dalam <head> dari HTML), dan jalur akan diperbarui.  Setelah semuanya selesai, template anda akan tersedia untuk dipilih saat anda memulai perjalanan baru!

Kesimpulan

Hal itu merangkum studi kasus email ini; sebuah wawasan tentang bagaimana kami merancang dan membangun Envato Tuts + email.  Saya harap anda menikmati mengikuti prosesnya, dan jika anda memerlukan inspirasi email untuk proyek anda berikutnya, pastikan untuk memeriksa template email terbaru yang ada di Envato Market!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.