Template Email Transaksional Sumber Terbuka

Saat Anda menyiapkan akun SendGrid baru, membuat satu set templat email untuk akun Anda adalah salah satu tugas terpenting yang harus diselesaikan. Jika Anda berencana mengirim email melalui API kami untuk aplikasi atau layanan Anda, kemungkinan besar Anda akan memerlukan beberapa jenis template email yang berbeda. Beberapa yang paling umum adalah pengaturan ulang kata sandi, konfirmasi email, dan tanda terima.

Meskipun ada banyak pilihan template email siap pakai di web, menemukan satu set yang mudah disesuaikan agar sesuai dengan merek Anda tidak selalu mudah.

Penting juga untuk menguji template secara menyeluruh di klien email umum. Proses ini dapat memakan waktu dan memperlambat proses pengaturan akun SendGrid Anda dan mulai mengirim email.

Saya menyadari tim di SendGrid dapat memberikan nilai kepada pelanggan kami dengan membuat kumpulan templat email open source yang dapat dimanfaatkan pengguna untuk mencakup kasus penggunaan umum ini. Tidak hanya template yang mudah disesuaikan, tetapi Anda akan siap dan mengirim dengan cepat!

Kumpulan template kami, yang kami sebut "Tempel", mencakup 5 kasus penggunaan:

• Reset kata sandi
• Konfirmasi email
• Surat selamat datang
• tanda terima
• Intisari (harian, mingguan, atau bulanan)

Unduh template di GitHub

Untuk memulai dengan templat Tempel kami, buka GitHub dan klon repositori atau unduh folder Tempel templat. Perlu juga disebutkan bahwa template ini berada di repositori open source template email yang telah dibantu oleh pengguna SendGrid lainnya selama Hacktoberfest terbaru kami.

Menyesuaikan template Tempel

Setelah Anda memiliki salinan lokal dari template Tempel, buka di editor kode pilihan Anda (saya akan merekomendasikan VSCode atau Atom; keduanya gratis).

Saya akan merekomendasikan memulai dengan base.html karena berisi sebagian besar komponen yang dapat digunakan kembali yang ditemukan di banyak template lainnya. Semua template ini memiliki struktur yang sama untuk HTML, dan meskipun ada beberapa gaya dasar dalam dokumen, sebagian besar gaya ditemukan sebaris.

Saat Anda menyisir HTML, Anda akan melihat banyak komentar HTML untuk menunjukkan di mana blok dimulai dan diakhiri. Ini adalah catatan penting yang akan membantu Anda memindai templat dan mulai memodifikasinya.

Anda juga akan melihat gaya pada elemen HTML untuk warna latar belakang, tipografi, spasi, dll. Saya mendorong Anda untuk bereksperimen dengan mereka untuk memahami bagaimana mereka mengubah tampilan dan nuansa template ini.

Tambahkan logo Anda ke template

Salah satu hal pertama yang ingin Anda lakukan adalah mengganti logo Tempel template dengan logo Anda sendiri. Anda dapat dengan cepat menemukan blok logo dengan mencari komentar HTML-nya, yang menunjukkan tempat awalnya:

Di dalam blok ini, Anda ingin menemukan tag jangkar (<a> ) dan mengubah HREF ke URL Anda. Template harus ditautkan ke beranda SendGrid secara default.

Setelah menyesuaikan URL, mari kita ganti logo Tempel dengan milik Anda. Saya akan merekomendasikan agar logo Anda disimpan di suatu tempat yang dapat Anda tautkan dengan mudah, seperti server web atau CDN Anda. Setelah Anda mengganti logo src, sesuaikan gaya sebaris sehingga lebar/tingginya benar—ini akan bergantung pada rasio aspek logo Anda. Secara default, logo Tempel adalah persegi 48px, jadi kami telah menetapkan gaya lebar menjadi 48px.

Contoh:

Dalam contoh ini, URL logo Tempel direferensikan bersama dengan beberapa gaya lebar untuk menyetelnya ke ukuran yang diinginkan yaitu 48 piksel. Sesuaikan nilai ini untuk logo Anda sendiri untuk memastikannya terlihat tajam.

Menyesuaikan warna latar belakang

Seperti disebutkan di atas, warna latar belakang diatur pada berbagai blok untuk menetapkan gaya default template Tempel (abu-abu dan putih). Anda dapat dengan mudah mengubah ini (dan Anda harus) agar sesuai dengan warna merek Anda.

Cara termudah untuk beralih di antara gaya ini adalah dengan menggunakan editor Anda untuk mencari gaya sebaris, bgcolor, dan warna latar belakang. Nilai properti ini dapat diganti dengan nilai hex (misalnya #000000) atau nama warna (misalnya hitam). Saat Anda mengerjakan perubahan ini, mudah untuk mengawasi hal-hal jika Anda membuka salah satu template di browser pilihan Anda dan menyegarkan saat Anda membuat perubahan.

Contoh:

Dalam contoh ini, tag tubuh ditata dengan warna latar abu-abu terang. Nilai warna ini dan lainnya dalam template harus disesuaikan agar sesuai dengan merek Anda.

Menyesuaikan tombol

Tombol adalah salah satu komponen antarmuka yang paling umum dalam template email. Anda akan menggunakan ini sebagai ajakan bertindak, menyoroti tindakan terpenting yang Anda ingin dilakukan pengguna, seperti mengonfirmasi alamat email mereka.

Secara default, tombol Tempel ditata sebagai blok biru dengan radius batas yang halus untuk membulatkan sudut. Menyesuaikan tombol ini agar sesuai dengan merek Anda mirip dengan modifikasi yang telah kami buat pada warna latar belakang template kami. Cari blok menggunakan komentar HTML yang kami tambahkan untuk Anda:

Kami memiliki beberapa sel tabel yang memiliki latar belakang putih yang diterapkan (#ffffff) untuk membuat blok di sekitar tombol, tetapi Anda akan ingin menemukan sel tabel yang memiliki gaya berikut di bawah ini.

Contoh:

Dalam contoh ini, <td> memiliki bgcolor yang digunakan untuk mengatur warna tombol, bersama dengan radius batas untuk membulatkan sudut secara halus. Bereksperimenlah dengan gaya ini untuk mendapatkan tampilan unik untuk tombol Anda yang cocok dengan merek Anda.

Bagian kedua dari tombol kita adalah jangkar (<a> ) di dalam sel tabel yang ditunjukkan di atas.

Jangkar ini mengontrol URL ke mana tombol Anda akan pergi saat diklik, tetapi juga gaya teks untuk label. Anda dapat menyesuaikan gaya untuk menyesuaikan label berdasarkan preferensi Anda dan apa yang cocok dengan merek Anda.

Menyesuaikan tipografi

Secara default, template Tempel dimuat di webfont, Source Sans Pro, melalui Google Font. Anda dapat menggunakan font web yang berbeda dari koleksi Google, atau menggunakan kumpulan font standar yang ditemukan di sebagian besar komputer saat ini (Arial, Georgia, Times, dll).

Jika Anda berencana menggunakan webfont yang berbeda, lihat posting tips dan trik pengembangan email saya untuk beberapa petunjuk bermanfaat. Pastikan Anda menyisir HTML untuk mencari gaya sebaris apa pun yang mereferensikan keluarga font dan menyesuaikan berdasarkan preferensi Anda.

Contoh:

Dalam contoh ini, <td> memiliki gaya font-family yang diatur untuk menggunakan Source Sans Pro, dengan beberapa mundur ke font yang lebih standar jika webfont tidak dimuat.

Mengakhiri pikiran

Saya harap petunjuk ini membantu Anda menyesuaikan template ini agar sesuai dengan merek Anda dan membuat Anda aktif dan berjalan di platform SendGrid. Di masa mendatang, saya berharap untuk memperluas repositori template email kami dengan lebih banyak template, tetapi juga alat pembuatan yang akan membuat proses penyesuaian lebih cepat.

Jika Anda mengalami masalah apa pun selama proses berlangsung, kirimkan masalah terkait repo GitHub, dan jika Anda ingin berkontribusi, kirimkan permintaan penarikan. Mencari lebih banyak template untuk bereksperimen? Cobalah template email HTML responsif gratis dari SendGrid.