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

Bagaimana Kami Memiliki Ini: Menukarkan Kekunci + E-mel Ke Templat Monitor Kempen

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

Malay (Melayu) translation by Fariz Alfarizki (you can also view the original English article)

Dalam dua bahagian pertama siri kajian ini, kami telah melihat bagaimana e-mel Envato Tuts + baru direka, kemudian dibina sebagai penghantaran HTML / CSS statik. Dalam bahagian akhir teka-teki ini, saya akan menunjukkan kepada anda bagaimana kami menukar fail tersebut ke dalam templat Monitor Kempen.

Pada peringkat ini terdapat beberapa ahli pasukan yang terlibat dalam proses itu: Cameron dan saya.  Cam mengambil alih menggabungkan pencerobohan ke dalam Pemantauan Kempen, saya mengendalikan surat berita, yang akan saya jelaskan dalam catatan ini.

1. Sediakan Fail Anda

Dalam dua bahagian pertama siri kajian ini, kami telah melihat bagaimana e-mel Envato Tuts + baru direka, kemudian dibina sebagai penghantaran HTML / CSS statik . Dalam bahagian akhir teka-teki ini, saya akan menunjukkan kepada anda bagaimana kami menukar fail tersebut ke dalam templat Monitor Kempen.

Petua : Muat turun fail sumber jika anda mahu mengikutinya.

Hero tempatan

Pada masa ini, laluan dalam fail adalah semua relatif.  Terdapat beberapa pautan ke fail CSS, beberapa pautan dalam imej tersebut, dan mereka semua mengarahkan direktori fail setempat seperti yang kita lihat.  Sebagai contoh:

Apabila kami memuat naik fail kami di hujung tutorial, Monitor Kempen akan mengenali semua laluan ini dan mengubahnya dengan sewajarnya.

2. Mula di Atas

Proses kami adalah ini: kami akan mengambil semua bit statik template e-mel kami dan menukarnya untuk coretan dinamik di mana mungkin.  Menggulung ke bawah, penjahat pertama yang saya dapati adalah sekitar baris 73: pautan ke versi web:

Pautan itu akan berbeza setiap kali, jadi mari tukarnya untuk dinamik <webversion> CM:

Mudah seperti itu.  Seterusnya!

3. Pautan Lebih Penting

The <webversion> yang kami baru jaga adalah salah satu daripada beberapa pautan penting yangdisediakan oleh Monitor Kempen.  Walaupun kita berada dalam mood, mari kita gunakan satu atau dua orang lain.  Perenggan keutamaan e - mel boleh didapati di sekitar baris 346, dan kelihatan seperti ini:

Mari gunakan <preferences>  dan <unsubscribe>  untuk membuat bahagian itu dinamik

Terdapat beberapa pautan penting lain, seperti <forwardtoafrriends> , tetapi kami tidak akan menggunakannya dalam kes ini.

4. Baris Tunggal

Perkara seterusnya yang perlu kita hadapi adalah tajuk utama e-mel.

tuts email heading
Tajuk dan sub tajuk

Sekitar talian 87 anda akan mendapati ia ditandakan seperti itu:

Perenggan, dengan kelas heading dan h1 atau h2 (terima kasih e-mel HTML).:  Setiap satu daripada ini perlu diedit dari dalam Pemantauan Kempen, jadi, memandangkan kita hanya perlu mengedit kandungan teks dan tidak ada yang lain, kita boleh menggunakan elemen template  <singleline>

Perenggan tetap sempurna utuh, kami hanya akan menambah wilayah yang boleh diedit dalam setiap satu.  Setiap singleline mempunyai atribut label pilihan, yang akan membantu dipaparkan dari dalam editor Kempen Monitor:

5. Multi Lines

Untuk kandungan yang sedikit lebih rumit daripada tajuk dan tali, kita akan menggunakan elemen <multiline> .  Pada baris 134, anda akan dapati kandungan "artikel pertama" kami yang akan digunakan sebagai pengenalan untuk setiap e-mel:

Mari kita buat kedua-dua bahagian dinamik:

Ini mengikuti corak yang sama seperti dahulu: kawasan yang boleh diedit, dengan label pilihan-tetapi kali ini mereka membenarkan kami editor WYSIWYG:

6. Imej yang boleh diedit

Tatal ke bawah ke baris 168 dan anda akan menemui imej dalam sel jadual, semuanya sendiri:

Ini akan menjadi sebahagian daripada seksyen yang boleh diulang (yang akan kita hadapi dalam satu minit) jadi mari buat pertama kali membuat imej ini dinamik.  Saya tidak suka menggunakan perkataan "semata-mata" dalam tutorial, tetapi dalam kes ini saya akan membiarkannya slaid: hanya tambah atribut yang editable pada tag imej.  Selesai!

Atribut width diperlukan, tetapi src (yang memberi kita imej lalai) adalah pilihan, seperti juga kawan kami atribut label .

Dengan yang dilakukan, editor membenarkan kami untuk memadam imej lalai, memuat naik yang baru, menambah teks alt, dan (dengan kritikal) menambah pautan.

"Data keras mengatakan: e-mel dengan imej mengalihkan hampir dua kali juga."  - Chris Hexton , Ketua Pegawai Eksekutif dan Pengasas Vero

Nota : ambil perhatian bahawa jika kami memilih untuk menghapus imej sepenuhnya, markup yang mengandungi akan tetap.  Ini boleh menyebabkan kawasan empuk besar tanpa kandungan, jadi pertimbangkan bagaimana anda menanda imej anda dalam reka bentuk.

7. Kawasan UlangImej 

itu adalah sebahagian daripada seksyen yang kita mahu dapat mengulangi sebanyak yang diperlukan. Ia bermula pada baris 146 dan berakhir pada baris 176, dengan komen:

Sebagaimana yang kita lakukan sebelum ini dengan bahagian-bahagian lain, kita perlu membuat tajuk dalam seksyen ini <singleline> dan kandungan yang <multiline> , jadi lakukannya sebelum pergi lagi.

Untuk membuat kesemua bahagian ini berulang, kami membungkus bit yang diperlukan dalam elemen <repeater> :

Ini akan memberi kami beberapa kawalan tambahan dalam editor Monitor Kempen, yang membolehkan kami menduplikasi seksyen, memindahkannya (berguna untuk penyesuaian semula), atau memadamkannya.

Nota :<repeater>  mesti bekas sama ada <singleline> , <multiline> , atau <img editable> .

Nota lain : anda tidak boleh bersarang <repeater> elemen!

8. Layout

Sekarang untuk seksyen berulang dengan perbezaan.  Ia adalah bahagian khusus topik, dan setiap topik mempunyai satu, dengan warna tema yang sesuai.

Dalam kes buletin projek terjemahan kami, kadangkala kami mungkin menampilkan bahagian Fotografi & Video, bersama dengan Kod, dan Pembangunan Permainan.  Kadang-kadang kita boleh melangkau Kod. Kadang-kadang kita mungkin mempunyai sembilan topik.  Jadi apa yang terbaik untuk mengatur ini? Masukkan elemen <layout> .

Kita boleh menggunakan beberapa elemen susun atur dalam blok tunggal <repeater> , supaya setiap kali kita menduplikasi blok, kita diberi pilihan susun atur.  Dalam kes kami, kami ingin memilih topik yang tersedia, jadi markup kami akan kelihatan seperti ini:

Di sana anda akan melihat elemen susun atur, masing-masing dengan label unik.

Penting : jangan gunakan entiti HTML yang melarikan diri (seperti & bukan ) dalam label susun atur.

Mulakan talian 183 dengan membungkus blok topik kami dalam <repeater> .  Kemudian bungkus setiap blok topik dalam <layout label=' '> elemen, pastikan untuk memberi mereka label yang unik.

Sekarang, sebaik sahaja kita memuat naik segala-galanya ke Monitor Kempen, editor akan memberi kita semua pilihan susun atur apabila kita ingin mengulangi bahagian:

9. Muat naik ke Monitor Kempen

Semua kerja keras kami selesai, kini kami perlu memuat naik fail kami ke Monitor Kempen untuk menggunakan templat kami dalam kempen e-mel!

Di papan pemantauan Kempen Kempen anda pergi ke Templat> Import .

Seterusnya, masukkan nama untuk templat anda, pilih fail HTML selesai anda, kemudian pilih semua aset yang diperlukan (CSS dan imej) yang diperlukan sebagai satu fail zip.

Fail anda akan dimuat naik dan diproses yang akan mengambil sedikit masa.  Gaya akan dioptimumkan (ada yang digariskan, ada yang disuntik ke dalam <head> HTML), dan laluan akan dikemas kini.  Apabila itu selesai, templat anda akan tersedia untuk dipilih apabila anda memulakan kempen baru!

Kesimpulann

yaItu membungkus kajian kes e-mel ini; satu wawasan tentang bagaimana kami merancang dan membina e-mel Envato Tuts +.  Saya berharap anda menikmati mengikuti proses ini, dan jika anda memerlukan inspirasi e-mel untuk projek anda yang seterusnya pastikan anda menyemak templat e-mel terkini yang terdapat di Pasar Envato !

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.