surat HTML. Membuat Template Email HTML Responsif Sederhana Cara Membuat Email dalam HTML
Ada banyak cara untuk mengirim surat html melalui klien email dan, tentu saja, melalui layanan pengiriman surat. Tetapi bagaimana jika Anda perlu mengirim beberapa surat, tetapi tidak memiliki program apa pun? Ada cara cerdas untuk mengirim surat html melalui Yandex Mail.
Langkah 1. Mempersiapkan surat
Aturan penting saat mengirim surat dengan cara ini adalah tautan ke gambar dalam kode harus ditulis lengkap, dan gambar itu sendiri harus ada di server. Jika tautan mengarah ke gambar dari komputer Anda, program tidak akan melihatnya.
Jika Anda memesan template dari kami, maka kami telah mengurus semuanya sendiri dan sumber Anda sudah berisi template yang telah disiapkan sebelumnya dengan tautan yang ditulis dengan benar.
Buka template menggunakan notepad biasa dan salin seluruh isi surat. Maka kita perlu memasukkan semua kode ini ke badan surat di Yandex Mail.
Langkah 2. Memasukkan surat ke Yandex
Masuk ke Yandex Mail dan buat surat baru. Berikutnya adalah triknya. Klik tombol "Format huruf" untuk mengalihkan Yandex Mail ke mode yang mendukung pemformatan.
Anda akan melihat panel seperti ini (disorot dengan warna biru). Sekarang antarmuka mendukung desain yang berbeda, dan juga kode hurufnya. Memang benar, Anda tidak bisa memasukkannya begitu saja.
Kami akan menggunakan trik dan memasukkan kode template kami langsung ke kode halaman. Untuk melakukan ini, Anda perlu menemukan sepotong kode yang bertanggung jawab atas isi surat itu, dan menggantinya dengan konten kami.
Untuk melakukan ini, klik kanan pada area kosong surat itu dan pilih "lihat kode" (Di setiap browser item ini disebut berbeda, tetapi artinya sama).
Kami melakukan semua manipulasi licik ini agar blok ini muncul, yang bertanggung jawab atas isi surat itu. (Panel mungkin terlihat berbeda tergantung pada browser Anda. Kami menampilkan Google Chrome sebagai contoh).
Sekarang kita perlu menghapus blok ini dan memasukkan kode surat kita sebagai gantinya. Untuk melakukan ini, klik kanan pada blok ini dan pilih "Edit sebagai HTML",
sekarang kita perlu menghapus kode saat ini...
...dan masukkan kode surat kita pada tempatnya. Setelah itu tutup panel dengan mengklik tanda silang di pojok kanan atas panel.
Jika Anda melakukan semuanya dengan benar, template akan muncul di badan email saat ini tidak ada gambar di dalamnya, tapi jangan khawatir. Surat yang dikirimkan akan berisi gambar, asalkan link ke gambar tersebut benar (lihat Langkah 1). Jika Anda khawatir dengan hasilnya, kirimkan saja surat ini kepada diri Anda sendiri, dan Anda akan melihat bahwa semuanya berjalan sebagaimana mestinya.
Langkah 3. Mengirim surat html di Yandex Mail
Buat perubahan yang diperlukan pada isi surat hanya dengan mengetik ulang teks dan menerapkan gaya yang berbeda. Anda dapat menggunakan semua alat dari panel atas.
Setelah surat siap, masukkan email penerima, subjek surat dan kirim!
Diperbarui: 12 bulan yang lalu
Tata letak email HTML dari awal bukanlah pekerjaan mudah. Tugas utamanya adalah membuat kode universal yang dapat dimengerti oleh berbagai klien email dan akan ditampilkan dengan indah baik di ponsel, tablet, dan komputer.
Biasanya, semakin kuno kodenya, semakin tinggi kemungkinan kode tersebut akan berfungsi dengan benar. Meskipun saat ini ada editor blok yang menyederhanakan tata letak huruf, pekerjaan mereka didasarkan pada prinsip lama yang sama dalam mengembangkan templat HTML.
Ada dua aturan dasar yang harus selalu Anda ingat saat mulai menata surat:
Mari kita lihat lebih dekat.
Di mana menulis kode template? Tidak di Microsoft Word, kan? Ini nyaman dan dapat dimengerti ketika Anda segera melihat seperti apa kode tertulis itu dan dalam bentuk apa klien akan menerimanya. Program untuk pengiriman email massal ePochta Mailer memiliki fungsionalitas luar biasa untuk menulis kode paralel dan melihat template yang dibuat secara real time. Oleh karena itu, selanjutnya semua contoh pembuatan, pengeditan, dan pengiriman surat akan disajikan dengan bantuannya. Anda dapat mencoba versi demo gratis dari program ini dan, saat membaca artikel, segera berlatih membuat template email Anda sendiri.
Format templat email HTML
Hal pertama yang perlu Anda lakukan adalah memutuskan struktur berbasis tabel. Untuk buletin, tata letak satu dan dua kolom berfungsi paling baik karena memungkinkan Anda menyusun sejumlah besar informasi dengan cara yang paling jelas dan mudah diakses. Tata letak kolom tunggal Selain itu, ini ditampilkan dengan sempurna di versi seluler dan di tablet.
Paling sering, tata letak satu kolom meliputi:
- Tajuk(header) yang memuat logo dan link navigasi dari website induk.
- Dasar-dasar tubuh surat yang isinya, gambar dan link ke halaman web dengan informasi lengkap, gambaran umum disediakan dalam surat.
- catatan kaki(footer) surat, yang terkadang menduplikasi link navigasi, dan juga menyertakan instruksi untuk berhenti berlangganan dan link berhenti berlangganan secara langsung.
Berisi elemen yang sama tata letak dua kolom, satu-satunya perbedaan adalah ia memiliki dua kolom dan ketika menampilkan huruf di perangkat seluler, kolom-kolom tersebut dapat digeser satu di bawah yang lain (prinsip daya tanggap), atau dapat diubah skalanya sesuai dengan ukuran layar (yang tidak selalu nyaman jika fontnya terlalu kecil).
Cara membuat template surat HTML: Membuat dokumen.
Kode HTML pesan email apa pun terdiri dari dua bagian:
- Tajuk. Segala sesuatu yang akan dibungkus dalam sebuah tag Dan, klien email akan menganggapnya sebagai tajuk surat.
- Tubuh. Kode ditempatkan di dalam tag Dan akan digunakan untuk membuat struktur pesan email Anda.
Menulis kode HTML untuk pesan email dimulai dengan membuat dokumen XHTML:
1.
2.
3.
4.
5.
6.
7.
menjelaskan kepada pengirim tag HTML apa yang diharapkan untuk selanjutnya, dan rangkaian aturan HTML dan CSS apa yang Anda ikuti saat membuat email. Meskipun beberapa klien email (Gmail, Google Apps, Yahoo! Mail, dan Outlook.com) akan mengganti header Anda dengan milik mereka sendiri, sebaiknya sertakan kode ini dalam dokumen Anda.
menentukan cara menangani teks dan karakter khusus di email Anda.
"teks/html" memperjelas mekanisme bahwa baris teks berikut harus diperlakukan sebagai html.
Menentukan perangkat tempat email dilihat untuk mengatur area pesan yang terlihat agar sesuai dengan lebar layar.
Header pesan email tertulis di dalam tag
Tata letak isi pesan email. Membuat tabel
Struktur umum surat dibuat menggunakan tag .
Pertama-tama, atur padding ke nol (tags
Lebar tabel utama harus 100% (lebar tabel = "100%"). Ini sebenarnya bertindak sebagai bingkai utama, “badan” pesan email. Berbeda dengan tagnya
Nilai tanda
1.
2.
5. Halo! 6. |
9.
Sejauh ini surat kami terlihat seperti ini:
(adanya frame merupakan hasil dari tag border=”1″)
Lebar maksimum yang mungkin dan nyaman untuk pesan email yang dilihat di klien email di komputer pribadi adalah 600px. Untuk mencegah huruf meluas ke seluruh layar, Anda perlu membuat tabel bersarang lainnya di dalam tabel utama yang sudah dibuat, dengan menentukan secara ketat nilai lebarnya: width=”600″.
Aturan emas dalam membuat kode HTML untuk pesan email adalah: jika atribut (tag) yang diinginkan ada di HTML, gunakanlah dan tidak perlu menggunakan CSS.
Kode tabel bertumpuk ini harus disisipkan sebagai pengganti kata "Halo!"
1.
Halo! |
Sekarang suratnya terlihat seperti ini:
Anda memperhatikan bahwa tabel bersarang menggunakan atribut
Kami telah mengatakan bahwa setiap email terdiri dari tiga bagian logis: header, badan surat dengan konten utama, dan footer.
Sekarang kita perlu menampilkan ini secara struktural di template yang telah kita buat. Mari tambahkan dua baris lagi. Mari kita salin bagian tabel bersarang dari kode yang bertanggung jawab untuk baris tersebut
1.
2.
3. Halo!
4.
5.
dan duplikat beberapa kali, ganti salam dengan nomor seri baris.
Seharusnya terlihat seperti ini:
1.
4. Jalur 1 5. |
9. Jalur 2 10. |
14.Baris 3 15. |
Secara visual:
Mari kita tambahkan warna latar belakang secara terpisah untuk setiap baris. Karena di HTML ada tag khusus untuk ini
1.
4. Jalur 1 5. |
9. Jalur 2 10. |
14. Jalur 3 15. |
Mari kita fokus pada baris pertama - ini akan menjadi header surat itu.
Baris 1. Tata letak header email.
Rencananya akan ditempatkan gambar dengan logo dan nama perusahaan di baris pertama. Tapi pertama-tama Anda perlu sesuaikan lekukan s, yang akan berada di semua sisi gambar hingga batas internal sel. Bertanggung jawab untuk ini menandai -
Bekerja dengan
Saat menentukan parameter, cukup dapat diterima untuk menggunakan notasi versi singkat, seperti bantalan: 10px 10px 5px 5px;.
Jika masalah muncul, rekaman versi panjang akan menyelesaikannya, misalnya padding-atas: 10 piksel; padding-kanan: 10px; bantalan-bawah: 5px; padding-kiri: 5px;.
Jika klien email menghapus CSS sebaris Anda atau melakukan pengeditan sendiri pada email Anda, Anda dapat membukanya licik. Daripada menggunakan tag
Misalnya:
Harap dicatat bahwa akan lebih tepat jika menulis gaya di dalam tag
Atau
Dalam contoh email kami, kami menggunakan CSS internal untuk menyesuaikan padding gambar. Setelah memasukkan gambar, Anda perlu menulis teks alternatif, yang akan dilihat penerima sebagai pengganti gambar jika gambar tersebut dinonaktifkan oleh pengirim. Dan penting untuk menambahkan parameter style="display:block;" yang keberadaannya memastikan bahwa klien email tidak menambahkan spasi tambahan di bawah gambar. Jika perlu, Anda dapat memusatkan gambar dengan menambahkan align="center" ke tag
Catatan. Ingatlah bahwa sebagian besar klien email memblokir gambar secara default. Oleh karena itu, tulislah di teks alternatif sebuah petunjuk kepada klien, gambar tentang topik apa yang seharusnya, bukan ruang kosong. Selain itu, sebaiknya jangan menuliskan informasi unik yang penting pada gambar yang tidak terduplikasi di surat. Lagi pula, jika gambar diblokir, surat Anda sama sekali tidak berguna.
Contoh kode untuk Baris 1 dengan gambar yang disisipkan:
1.
2.
3.
Secara visual:
Baris 2. Bekerja dengan konten dalam template email HTML
Pertama, Anda harus melakukannya tentukan padding di dalam sel tengah(baris kedua) agar tabel baru dengan konten yang disarangkan di dalamnya terlihat indah tanpa menyatu dengan batas utama. Anda sudah tahu bahwa indentasi dari sisi elemen yang akan berada di dalam sel diatur menggunakan tag
Secara visual akan terlihat seperti ini:
Sekarang kita perlu bersiap tempat untuk konten. Seperti disebutkan di atas, Anda perlu menambahkan tabel bersarang lainnya. Ini akan menjadi tabel dengan tiga baris:
- satu untuk judul,
- yang kedua untuk penjelasan singkat artikel,
- yang ketiga untuk garis dengan dua kolom.
Lebar tabel yang akan berada di baris kedua tidak boleh dalam piksel, tetapi dalam persentase (100%). Hal ini diperlukan jika Anda ingin suratnya responsif.
Kode untuk Baris 2 dengan tabel bersarang:
1.
2.
5. Jalur 1 6. |
10. Jalur 2 11. |
15. Jalur 3 16. |
19.
Secara visual:
Kami menulis judul artikel dan uraian singkatnya. Anda dapat menambahkan indentasi pada baris deskripsi untuk membuat teks tampak lebih bagus. Harap diperhatikan bahwa ePochta Mailer memungkinkan Anda menambahkan dan mengubah teks langsung di editor visual, tanpa membuka tab kode HTML.
Tabel bersarang dengan teks:
1.
5. Promosi merek di Viber: pengiriman massal melalui messenger 6. |
10. Kini Viber tidak hanya menjadi aplikasi korespondensi pribadi, tetapi juga saluran efektif untuk promosi komersial barang dan jasa. 11. Hanya orang malas yang tidak mengatakan bahwa Viber untuk bisnis adalah alat yang benar-benar efektif dan murah. Apakah begitu? Kami mengundang Anda untuk memeriksa keakuratan pernyataan ini. 12. |
16. Jalur 3 17. |
Secara visual:
Untuk baris terakhir tabel, kami telah menyiapkan dua kolom dengan gambar dan teks.
Ayo berangkat secara berurutan.
Pertama, karena kita membutuhkan jarak antara kolom tabel, dan atributnya
Parameter kolom utama adalah lebar. Dalam hal ini, kita akan fokus pada lebar gambar yang akan ditempatkan di dalamnya. Lebarnya 260px. Dan agar tidak bingung saat menghitung berapa persentase 260 piksel dari tabel pada 540px* (dan ini akan menjadi 48,1%), akan lebih mudah untuk menunjukkan lebar yang diketahui.
*Lebar tabel bersarang 540px adalah lebar tabel utama 600px dikurangi padding, 30px di setiap sisinya.
Total, dua kolom 260 piksel + kolom kosong tengah 20 piksel.
Kami juga menentukan nilai valign="top" untuk kedua kolom, yang akan menyelaraskan teks secara vertikal, di sepanjang tepi atas garis, berapa pun jumlah teks di setiap kolom. Secara default, nilai valign dianggap tengah; jangan lupa untuk mengubahnya.
1.
4. Kolom 1 5. | 7. 8. | 10. Kolom 3 11. |
Secara visual:
Menambahkan gambar dan konten.
Karena kita membutuhkan dua baris lagi, kita memasukkan tabel lain ke setiap kolom, tidak melupakan indentasi.
1.
5.
16. | 18. 19. | 21.
33. |
Secara visual:
Baris 3. Membuat kode HMTL untuk footer buletin email
Komponen utama footer adalah kontak perusahaan dan tautan berhenti berlangganan. Seperti yang Anda lihat, ini adalah dua elemen berbeda dan sekali lagi kita perlu membagi baris menjadi dua kolom menggunakan tabel tambahan.
Agar tidak lupa, pertama-tama kita akan menambahkan indentasi, lalu tabel.
Jalur 3
Secara visual:
Kami membagi baris menjadi dua kolom menggunakan tabel tambahan.
1.
4. Kolom 1 5. | 7. Kolom 2 8. |
Dalam templat ini, kolom pertama untuk informasi kontak perusahaan, kolom kedua untuk tautan berhenti berlangganan. Anda dapat menambahkan ikon jejaring sosial, mengubah jumlah kolom, dan susunan informasi dalam format apa pun.
Tabel tambahan dengan informasi footer:
1.
4. Perusahaan ePochta 6. | 8. Anda menerima surat ini sebagai klien perusahaan kami. Untuk berhenti berlangganan dari milis, klik tautan di bawah. 9. |
Secara visual:
Pernahkah Anda memperhatikan hal itu teks di kolom footer kedua sejajar kanan? Hal ini dimungkinkan berkat atributnya sejajar=”benar” untuk tag
Templatnya sudah siap!
Tata letak desain templat buletin email
Bagian pertama artikel membahas struktur tata letak email. Sekarang kita akan berbicara sedikit tentang desain dan desain.
Dengan kemampuan inline CSS Anda dapat mengubahnya pilihan font– gunakan tanda atau untuk font tebal, masukkan langsung ukuran dan nama keluarga font.
Mari kita ambil, misalnya, judul artikel “Promosi Merek di Viber: Pengiriman Massal di Messenger” di template yang sudah dibuat dan berikan parameter berikut:
1.
2. Promosi merek di Viber:
surat massal di messenger
3.
Lihat bagaimana teksnya berubah:
Sekarang mari kita hapus batas tabel yang kita tinggalkan sehingga secara visual mudah untuk melacak perubahan dalam struktur. Caranya, pada tab kode HTML, tekan CTRL+F atau masuk ke menu Edit – Temukan. Pada kotak dialog yang terbuka, pilih fungsi Ganti dan atur nilai border=”1″ untuk diganti dengan border=”0″. Buka tab Pesan - semua batas hilang, dan Anda memiliki tata letak pesan email yang bersih dan siap pakai.
Jika diinginkan, Anda dapat membiarkan batas tabel utama sebesar 600 piksel, sehingga tidak terlalu terlihat, misalnya:
Dan sekarang - ujian pena: kami mengirim surat ke alamat email percobaan. Anda dapat membuat daftar selusin alamat di berbagai klien email dan meluncurkan surat percobaan, atau mengirim satu surat menggunakan menu Tes, dengan menentukan satu alamat penerima pesan. Seperti inilah tampilan template yang dibuat di Gmail Buat templat email bermerek Anda sendiri, uji dan puaskan pelanggan Anda dengan buletin warna-warni. ePochta Mailer memiliki fungsionalitas yang kuat untuk membuat pesan. Dalam artikel tersebut, tugas utamanya adalah menulis kode template sendiri, jadi kami tidak menyentuh kemampuan program. Anda dapat membaca lebih lanjut tentang ePochta Mailer di. Dan biarkan pelanggan Anda membaca buletin Anda dengan senang hati! Pemasaran email masih merupakan alat pemasaran yang efektif. Menurut statistik, manusia modern menerima sekitar 10 email setiap hari, banyak di antaranya adalah spam biasa. Mengingat pengguna membuat keputusan tentang pentingnya informasi hanya dalam beberapa detik, semua yang ada di surat itu penting: mulai dari tata letak surat dan daya tarik visual hingga struktur teks penjualan. Untuk menarik minat pengguna dalam 5-6 detik, surat Anda harus sempurna dalam segala hal, oleh karena itu penting untuk berhati-hati dalam membuat dan tata letak surat untuk didistribusikan. Namun sebelum Anda mulai bekerja dengan kode, kenali masalah yang menanti Anda. Bagaimana menghindari kesalahan dan tidak melakukan hal bodoh Jika Anda seorang ahli tata letak dan mengetahui semua trik modern, kami akan mengecewakan Anda - semua ini tidak berhasil di sini. Layanan pengiriman surat tidak memiliki format yang seragam untuk menampilkan surat, jadi menggunakan float, margin, dan padding yang sama tidak akan berfungsi. Ya, secara teori, Anda menerima surat yang indah dengan beberapa kolom, tetapi penerima akan mencampuradukkan semua kolom ini dan mendapatkan kekacauan yang akan dengan cepat masuk ke spam. Dan banyak layanan yang mematikan dukungan untuk gaya, dengan alasan bahwa teks dalam surat itu penting, bukan pembungkusnya. Ya, mungkin mereka benar, tapi tunjukkan pada saya seseorang yang membaca “lembar” panjang dari teks sepanjang hari... Dan yang paling menarik adalah masih ada email client yang tidak mendukung tampilan gambar dalam huruf. Tentu saja, hal ini dapat dengan mudah diperbaiki hanya dengan mencentang kotak di parameter, tetapi tidak semua orang akan menyadari bahwa ini semua tentang pengaturan default. Oleh karena itu, saat mendesain gambar dalam huruf, jangan lupa untuk memberi alt. Dalam hal ini, penerima setidaknya akan melihat teks Anda dalam bingkai, dan bukan sesuatu yang kosong dan menakutkan.
Menguji tata letak emailSetelah mendesain template html, saatnya menguji kreasi kita. Untuk melakukan ini, Anda dapat menggunakan layanan khusus, misalnya PutsMail atau surat Yandex biasa. Dalam kasus pertama, semuanya jelas - kami membaca instruksi dan melihat bagaimana kami membuat buletin.
|