Generator Templat Email HTML
Memandu
Generator Templat Email HTML
Buat email HTML yang responsif dengan CSS inline melalui penggabungan blok modular – header, hero, gambar, teks tubuh, tombol, pembagi, dan footer – dengan tampilan desktop dan mobile yang langsung. Output menggunakan tata letak berbasis tabel dan kondisional MSO sehingga tampilan konsisten di Outlook, Gmail, Apple Mail, dan klien email lainnya.
Cara Penggunaan
- Tetapkan baris subjek, preheader, keluarga font, merek, warna latar belakang, dan warna teks di bagian atas formulir.
- Aktifkan blok yang ingin Anda sertakan dan isi konten per-blok – logo dan tagline, judul hero dan subjudul, URL gambar, paragraf tubuh, tombol ajak bertindak, pembagi, dan footer.
- Perhatikan perubahan tampilan langsung di kanan. Beralih antara lebar desktop dan mobile untuk memverifikasi kedua tampilan.
- Klik Salin HTML untuk mengambil HTML dengan CSS inline, atau Unduh .html untuk menyimpannya sebagai file siap dipasang ke dalam sistem pengiriman email (ESP), pengirim transaksi, atau alat kampanye.
Fitur
- Blok modular – Aktifkan atau nonaktifkan secara terpisah header, hero, gambar, teks tubuh, tombol, pembagi, dan footer.
- Output CSS inline – Setiap gaya disisipkan secara langsung dan berbasis tabel, sehingga tidak ada stylesheet eksternal dan tidak ada tampilan yang rusak di Outlook atau Gmail.
- Kondisional MSO – Markup khusus Outlook (Word engine) dimasukkan untuk mempertahankan lebar dan jarak di Windows Outlook.
- Pratinjau langsung – Tampilan desktop (600px) dan mobile (360px) dihasilkan dalam frame yang terisolasi (sandboxed iframe).
- Kustomisasi merek – Pilihan warna untuk akent, latar belakang, dan teks, ditambah empat preset font stack.
- Ekspor satu klik – Salin HTML ke clipboard atau unduh versi siap dikirim
.htmlfile. - Berjalan di browser Anda – Tidak ada yang diunggah atau disimpan. Penghasilan terjadi sepenuhnya di sisi klien.
Tanya Jawab Umum
-
Mengapa email HTML menggunakan tabel alih-alih tata letak modern seperti flexbox atau grid?
Banyak klien email – terutama Microsoft Outlook di Windows – menampilkan pesan dengan mesin Word, yang memiliki dukungan CSS yang sangat terbatas dan mengabaikan flexbox, grid, serta sebagian besar aturan posisi. Tabel HTML yang saling bersarang tetap menjadi satu-satunya sistem tata letak yang dapat diprediksi di seluruh klien, termasuk Gmail, Outlook, Apple Mail, Yahoo, dan email web mobile. Karena itu, email produksi tetap terlihat seperti markup web dari tahun 2003: ini adalah nilai terendah yang bertahan di setiap mesin tampilan.
-
Apa itu kondisional MSO dan mengapa email membutuhkannya?
Kondisional MSO adalah komentar HTML yang hanya diparsing oleh Microsoft Outlook (mesin Word). Mereka terlihat seperti
<!--[if mso]> ... <![endif]-->dan memungkinkan Anda mengirim markup atau gaya yang ditargetkan khusus untuk Outlook tanpa memengaruhi klien lain. Mereka umum digunakan untuk menetapkan lebar kontainer tetap dengan tabel fiktif, memperbaiki VML untuk tombol dan latar belakang, serta menonaktifkan fitur yang ditampilkan secara salah oleh Outlook. Tanpa kondisional ini, tata letak seringkali runtuh atau memanjang secara tidak nyaman di Outlook bahkan ketika tampilan sempurna di tempat lain. -
Mengapa CSS email harus disisipkan alih-alih dideklarasikan dalam tag style?
Beberapa klien email utama – terutama Gmail sejarahnya – menghapus
<style>blok atau menerapkannya secara tidak konsisten, terutama di perangkat mobile dan pesan yang dikirim ulang. Sisipan memindahkan setiap aturan ke elemen yang ditargetkan melalui atributstyle, yang dihormati oleh setiap klien. Kompromi ini adalah kepadatan dan pemeliharaan yang lebih sulit, yang sebabnya alat bantu – termasuk generator ini – ada untuk menyisipkan gaya secara otomatis dari template tingkat lebih tinggi. -
Apa itu preheader dan bagaimana preheader memengaruhi tingkat pembukaan email?
Preheader adalah potongan singkat teks yang ditampilkan setelah baris subjek di sebagian besar tampilan kotak surat. Secara default, ini diambil dari teks pertama yang terlihat di tubuh email, yang sering kali adalah salam atau boilerplate yang membuang slot tersebut. Menyisipkan elemen preheader tersembunyi di bagian atas HTML memungkinkan Anda mengontrol tepatnya apa yang muncul di sana. Preheader yang ditulis dengan baik melengkapi baris subjek dan dikorelasikan dengan tingkat pembukaan yang lebih tinggi dalam sebagian besar uji A/B yang dijalankan oleh penyedia layanan email utama.
Instal Ekstensi Kami
Tambahkan alat IO ke browser favorit Anda untuk akses instan dan pencarian lebih cepat
恵 Papan Skor Telah Tiba!
Papan Skor adalah cara yang menyenangkan untuk melacak permainan Anda, semua data disimpan di browser Anda. Lebih banyak fitur akan segera hadir!
Alat Wajib Coba
Lihat semua Pendatang baru
Lihat semuaMemperbarui: Kita alat terbaru ditambahkan pada 15 Juni 2026
