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:
1 |
<!-- Stylesheets -->
|
2 |
<link rel="stylesheet" type="text/css" href="css/styles.css" /> |
3 |
<link rel="stylesheet" type="text/css" href="css/var-newsletter.css" /> |
4 |
|
5 |
<!-- Optional - for selectable topic colours -->
|
6 |
<link rel="stylesheet" type="text/css" href="css/topics.css" /> |
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:
1 |
Something not looking right? <a href="#">View the web version</a> |
Tautan itu akan berbeda setiap waktu, jadi mari kita beralih ke CM dinamis <webversion>:
1 |
Something not looking right? <webversion>View the web version</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:
1 |
<p>You’re subscribed to this newsletter because you’re part of the translation team. Not quite to your liking? No problem: <a href="#">update your email preferences</a> or <a href="#">unsubscribe</a>.</p> |
Mari kita gunakan <preferences> dan <unsubscribe> untuk membuat bagian itu dinamis:
1 |
<p>You’re subscribed to this newsletter because you’re part of the translation team. Not quite to your liking? No problem: <preferences>update your email preferences</preferences> or <unsubscribe>unsubscribe</unsubscribe>.</p> |
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.
Di sekitar garis 87, anda akan menemukannya ditandai seperti ini:
1 |
<p class="heading h1">Translation Project Newsletter</p> |
2 |
<p class="heading h2">Month 20XX</p> |
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>:
1 |
<p class="heading h1"> |
2 |
<singleline label='Newsletter title'>Translation Project Newsletter</singleline> |
3 |
</p>
|
4 |
<p class="heading h2"> |
5 |
<singleline label='Newsletter subtitle'>Month 20XX</singleline> |
6 |
</p>
|
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:
1 |
<p>In this translation project newsletter n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin a efficitur massa. In ac augue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.</p> |
2 |
|
3 |
<p>Ian Yates<br /> |
4 |
<strong>Editor, Envato Tuts+</strong></p> |
Mari kita buat dua bagian ini dinamis:
1 |
<multiline label='Intro blurb'> |
2 |
<p>In this translation project newsletter n tempus nunc ullamcorper at. Etiam eget turpis augue. Proin a efficitur massa. In ac augue libero. Nulla in tortor commodo, hendrerit nisl non, placerat nunc.</p> |
3 |
</multiline>
|
4 |
|
5 |
<multiline label='Your friendly host'> |
6 |
<p>Ian Yates<br /> |
7 |
<strong>Editor, Envato Tuts+</strong></p> |
8 |
</multiline>
|
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:
1 |
<td class="image"> |
2 |
<img src="images/onecol3.jpg" width="514" alt="" /> |
3 |
</td>
|
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!
1 |
<td class="image"> |
2 |
<img editable src="images/onecol3.jpg" width="514" label="section image" alt="" /> |
3 |
</td>
|
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:
1 |
<!-- Repeatable Article, Stroked at Top -->
|
2 |
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"> |
3 |
|
4 |
</table>
|
5 |
<!-- END Repeatable Article, Stroked at Top -->
|
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>:
1 |
<!-- Repeatable Article, Stroked at Top -->
|
2 |
<repeater>
|
3 |
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center"> |
4 |
|
5 |
</table>
|
6 |
</repeater>
|
7 |
<!-- END Repeatable Article, Stroked at Top -->
|
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:
1 |
<repeater>
|
2 |
|
3 |
<layout label='Topic: PHOTOGRAPHY & VIDEO'></layout> |
4 |
<layout label='Topic: WEB DESIGN'></layout> |
5 |
<layout label='Topic: DESIGN & ILLUSTRATION'></layout> |
6 |
<layout label='Topic: CODE'></layout> |
7 |
|
8 |
... |
9 |
|
10 |
</repeater>
|
Di sana, anda akan melihat elemen layout, masing-masing dengan label yang unik.
Penting: jangan gunakan entitas HTML yang lepas (seperti & 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!
