Pengaturan Editor Email Seret dan Lepas Stripo

Published: 22 Oktober 2024 · Last updated: 21 Juli 2026 · By Marcus Biel

Di sisi kanan editor email Maildroppa, Anda akan menemukan Kolom Pengaturan Email, yang menyediakan berbagai alat untuk membantu Anda menyusun dan menyesuaikan konten serta tampilan email. Kolom ini terbagi menjadi dua tab: Konten dan Tampilan.

Tab Konten

Tab Konten adalah tempat Anda merancang dan mengatur konten email. Tab ini memiliki dua bagian utama: Struktur dan Blok.

1. Struktur

Struktur menentukan tata letak email dengan mengatur konten ke dalam baris dan kolom. Anda dapat memilih dari berbagai tata letak yang telah dirancang sebelumnya, seperti:

• Satu kolom
• Dua kolom
• Beberapa kolom

Anda tidak terbatas pada opsi-opsi ini—Anda dapat menggabungkan beberapa blok untuk membuat tata letak khusus sesuai keinginan, sehingga memiliki fleksibilitas penuh untuk memenuhi kebutuhan desain Anda.

• Seret dan Lepas: Cukup seret struktur dari bagian ini dan lepaskan ke area desain email untuk mulai menambahkan konten.
• Kustomisasi: Setelah struktur ditambahkan, Anda dapat mengisinya dengan berbagai blok konten seperti gambar, teks, atau tombol.

2. Blok

Blok adalah elemen konten yang ditempatkan di dalam struktur untuk menyusun email.

Jenis blok yang tersedia adalah:

• Gambar: Unggah gambar (PNG, JPG, GIF) dan sesuaikan tampilannya.
• Teks: Tambahkan dan format teks untuk menyampaikan pesan Anda.
• Tombol: Tambahkan tombol yang dapat diklik dengan teks, tautan, dan gaya yang dapat disesuaikan.
• Pengatur jarak: Sisipkan ruang kosong untuk menyesuaikan tata letak di antara blok lainnya.
• Video: Sematkan konten video dari platform seperti YouTube, Vimeo, dan lainnya.
• HTML: Tambahkan kode HTML dan CSS khusus untuk kustomisasi konten email tingkat lanjut.

Setiap blok dirancang agar fleksibel dan dapat disesuaikan, sehingga Anda dapat membuat email yang selaras dengan tampilan dan nuansa merek Anda.

Penjelasan Detail tentang Blok Konten

Blok Gambar

Blok Gambar pada editor email seret dan lepas Stripo memungkinkan Anda menambahkan dan menyesuaikan gambar dalam kampanye email.

Menambahkan Blok Gambar

Anda dapat menambahkan Blok Gambar ke email dengan dua cara:

Opsi 1

Arahkan kursor ke area "Letakkan Konten di Sini" dalam struktur, lalu klik ikon Gambar. Struktur yang dipilih akan langsung berubah menjadi blok gambar.

Opsi 2

Buka bagian Blok di bawah Tab Konten. Seret Blok Gambar ke struktur yang diinginkan dalam tata letak email. Metode ini memberi Anda kontrol lebih besar untuk menentukan lokasi gambar secara tepat.

Mengunggah Gambar

Setelah menambahkan Blok Gambar, Anda memiliki dua metode untuk mengunggah gambar:

Seret dan Lepas

Anda dapat langsung menyeret dan melepaskan file gambar (PNG, JPG, GIF) dari komputer ke kotak unggah yang muncul di dalam Blok Gambar.

Unggah dari Komputer

Sebagai alternatif, Anda dapat mengeklik ikon awan di Blok Gambar untuk membuka penjelajah file, lalu memilih gambar dari komputer (hingga 2 MB). Setelah dipilih, gambar akan muncul di dalam blok dan di tab konten di sebelah kanan.

Mengganti Gambar

Untuk mengganti gambar, gunakan opsi Ganti Gambar yang terdapat di tab konten. Klik ikon lingkaran Ganti Gambar, lalu unggah gambar baru atau tautkan gambar dari URL eksternal.

Mengedit Gambar

Setelah mengunggah gambar, Anda mungkin ingin melakukan pengeditan tambahan langsung di dalam platform. Editor Gambar bawaan Stripo memungkinkan Anda menyempurnakan dan menyesuaikan gambar tanpa meninggalkan editor email.

Mengakses Editor Gambar

1. Setelah gambar diunggah, klik tombol Edit Gambar. Antarmuka Editor Gambar akan terbuka.
2. Editor menyediakan berbagai alat yang ditampilkan di bilah menu bagian atas.

Alat Pengeditan Gambar yang Tersedia

• Filter Terapkan berbagai filter dengan satu klik, seperti:

  • Skala abu-abu
  • Hitam & Putih
  • Pertajam
  • Balik
  • Sepia
  • Kecerahan
  • Warna

• Ubah Ukuran Sesuaikan dimensi gambar. Anda dapat:

  • Menentukan lebar dan tinggi tertentu.
  • Mempertahankan rasio aspek.

• Pangkas Pilih bagian gambar yang ingin dipertahankan dan hapus bagian yang tidak diinginkan.

• Transformasi Putar atau balik gambar:

  • Secara horizontal
  • Secara vertikal

• Gambar Gunakan alat gambar untuk menambahkan elemen secara bebas, seperti garis atau bentuk khusus, di atas gambar.

• Teks Tambahkan teks langsung ke gambar. Sesuaikan:

  • Font
  • Ukuran
  • Warna
  • Perataan

• Bentuk dan Stiker Sempurnakan gambar dengan menambahkan:

  • Bentuk siap pakai
  • Stiker yang menarik

• Bingkai Pilih dari berbagai bingkai untuk memberikan batas bergaya pada gambar.

• Sudut Sesuaikan gaya sudut agar tampak lebih rapi.

• Latar belakang Hapus atau ganti latar belakang gambar agar tampil lebih bersih.

Menyimpan Pengeditan

Setelah membuat perubahan yang diinginkan, klik tombol Simpan di kiri atas editor. Gambar yang telah diedit akan otomatis menggantikan gambar asli dalam tata letak email.

Pengaturan Gambar

Setelah mengunggah gambar, Anda dapat menyesuaikannya menggunakan opsi Pengaturan Gambar yang tersedia di Tab Konten di sisi kanan.

Tautan

Tambahkan tautan ke gambar. Anda dapat memilih dari berbagai jenis tautan, seperti:

• Situs web (HTTP, HTTPS)
• Email (mailto:)
• File (ftp)
• Berbagi di media sosial (Facebook, X (sebelumnya Twitter), LinkedIn, Pinterest)

Anda dapat menemukan opsi-opsi ini di menu tarik-turun pengaturan tautan.

Teks Alternatif

Tambahkan teks alternatif yang akan ditampilkan jika gambar tidak dimuat. Teks ini juga berguna untuk aksesibilitas karena memungkinkan pembaca layar mendeskripsikan gambar kepada penerima dengan gangguan penglihatan.

Perataan

Pilih bagaimana gambar harus diratakan di dalam wadahnya. Anda dapat meratakannya ke Kiri, Tengah, atau Kanan.

Ukuran

Sesuaikan lebar dan tinggi gambar secara manual menggunakan tombol plus/minus atau dengan mengetikkan dimensi yang diinginkan.

Anda juga dapat mengaktifkan opsi "Sesuaikan dengan Lebar" agar gambar otomatis memenuhi seluruh lebar wadah.

Gambar Responsif

Aktifkan opsi "Gambar Responsif" untuk memastikan gambar menyesuaikan diri dengan berbagai ukuran layar, terutama pada perangkat seluler.

Padding

Sesuaikan padding di sekitar gambar untuk mengatur jarak antara gambar dan konten di sekitarnya. Anda dapat menerapkan padding secara seragam atau menyesuaikannya untuk setiap sisi (Atas, Bawah, Kiri, Kanan).

Tautan Jangkar

Anda dapat menetapkan tautan jangkar pada gambar, yang memungkinkan penerima berpindah ke bagian tertentu dalam email yang sama ketika mengeklik gambar. Namun, perlu diperhatikan bahwa tautan jangkar mungkin tidak berfungsi di klien email tertentu seperti Gmail dan Apple Mail.

Blok Teks

Sempurnakan blok teks dengan menyesuaikan tampilan dan fungsinya menggunakan pengaturan berikut. Setiap opsi memungkinkan Anda menyempurnakan cara teks ditampilkan agar benar-benar sesuai dengan preferensi desain Anda.

Bilah Alat Teks

Saat Anda mengeklik blok teks, Bilah Alat Teks muncul di atas area konten dan menyediakan akses cepat ke berbagai opsi pemformatan teks umum. Berikut fitur yang tersedia di bilah alat:

1. Format Paragraf

Atur gaya paragraf dengan memilih opsi seperti Normal untuk teks biasa, atau berbagai tingkat judul (Judul 1 hingga Judul 6) untuk membuat hierarki terstruktur dalam email. Hal ini membantu membuat konten lebih mudah dibaca dan terorganisasi.

2. Jenis Font

Font default adalah Arial, tetapi Anda dapat memilih dari berbagai font, termasuk opsi umum seperti Georgia, Helvetica, dan Courier New. Tersedia juga fungsi pencarian untuk menemukan font tertentu dengan cepat.

3. Ukuran Font

Sesuaikan ukuran font dari 8pt hingga 72pt. Ukuran default adalah 14pt, yang cocok untuk sebagian besar teks isi email. Gunakan menu tarik-turun untuk mengatur ukuran font yang diinginkan dengan cepat.

4. Gaya Teks

Gaya teks Anda menggunakan opsi berikut:

• Tebal (B): Menekankan teks dengan membuatnya tebal.
• Miring (I): Memiringkan teks agar tampil lebih bergaya.
• Garis bawah (U): Memberi garis bawah pada teks, biasanya digunakan untuk hyperlink.
• Coret (S): Membuat garis melintasi teks, berguna untuk pengeditan atau konten yang dihapus.

5. Gaya Teks Lanjutan (Menu Tiga Titik)

Mengeklik tiga titik di bilah alat akan menampilkan opsi tambahan:

• Subskrip: Menurunkan teks di bawah garis dasar (berguna untuk catatan kaki atau rumus kimia).
• Superskrip: Menaikkan teks di atas garis dasar (umumnya digunakan untuk eksponen atau bilangan bertingkat).
• Hapus Pemformatan: Menghapus semua pemformatan yang diterapkan dan mengembalikan teks ke gaya default.

6. Warna Teks dan Latar Belakang

• Warna Teks: Klik tombol Warna Teks untuk memilih dari palet atau memasukkan kode hex guna mengatur warna teks secara presisi.
• Warna Latar Belakang: Pilih warna latar belakang (sorotan) untuk teks.

7. Perataan Teks

Ratakan teks di dalam blok:

• Rata Kiri: Meratakan teks ke kiri.
• Tengah: Menempatkan teks di tengah.
• Rata Kanan: Meratakan teks ke kanan.
• Rata Kiri-Kanan: Menyebarkan teks secara merata di seluruh lebar blok.

8. Daftar

Buat daftar bernomor dan berpoin:

• Sisipkan/Hapus Daftar Berpoin: Menambahkan atau menghapus poin.
• Sisipkan/Hapus Daftar Bernomor: Menambahkan atau menghapus daftar bernomor.

9. Pembungkusan Baris

Aktifkan atau nonaktifkan pembungkusan baris di dalam blok teks. Jika diaktifkan, baris teks yang panjang akan otomatis berpindah ke baris berikutnya.

10. Indentasi

Sesuaikan indentasi teks:
- **Tambah Indentasi**: Memindahkan teks lebih jauh dari margin, berguna untuk subpoin atau kutipan.
- **Kurangi Indentasi**: Mengurangi indentasi dan mendekatkan teks ke margin kiri.
![Indentasi Teks](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Sisipkan Hyperlink

Pelajari cara menambahkan, mengedit, dan mengelola hyperlink dalam konten email.

Langkah Menambahkan atau Mengedit Tautan

a) Sorot Teks

Pilih teks yang ingin diubah menjadi hyperlink.

b) Klik Ikon Tautan

Di Bilah Alat Teks, klik Ikon Tautan.

c) Edit Tautan di Panel Pengaturan

Panel Pengaturan di Sisi Kanan akan muncul dengan opsi tautan:

• Kolom Tautan: Masukkan URL atau pilih dari opsi yang telah ditentukan.
• Tag: Tambahkan tag untuk memberi label pada pelanggan atau memicu otomatisasi.

Memperbaiki Tautan Setelah Pengiriman

Tidak ada yang lebih buruk daripada mengirim kampanye baru kepada 2.365 pelanggan, lalu menemukan salah satu tautannya rusak karena kesalahan ketik sederhana. Selamat tinggal, penjualan Black Friday!

Untungnya, kami memungkinkan Anda memperbaiki tautan yang rusak—bahkan setelah email dikirim kepada pelanggan.

a) Lihat Kampanye

Temukan kampanye yang telah dikirim di ikhtisar, klik tiga titik, lalu pilih Lihat Kampanye.

b) Ubah Tautan atau Tag

Gulir ke daftar tautan di detail kampanye untuk:

• Memperbarui Target Tautan: Memperbaiki URL yang salah.
• Mengelola Tag: Menambahkan atau menghapus tag untuk otomatisasi.

Catatan: Pastikan Pelacakan Klik diaktifkan dalam pengaturan kampanye agar dapat menggunakan fitur penargetan ulang tautan.

Menyesuaikan Tampilan Tautan

Di Panel Pengaturan di Sisi Kanan, Anda dapat menyesuaikan tampilan tautan:

• Warna Tautan: Pilih warna atau masukkan kode hex.

• Garis Bawah Tautan: Aktifkan atau nonaktifkan garis bawah untuk tampilan yang lebih rapi.

12. Tag Personalisasi

Gunakan Tag Personalisasi untuk menambahkan konten dinamis, seperti nama depan penerima atau kolom khusus lainnya.

• Buka menu tarik-turun Tag Personalisasi di bilah alat untuk memilih kolom umum seperti Nama Depan, Email, atau Negara, atau tentukan kolom khusus untuk menyesuaikan email bagi setiap penerima.

13. Emoji

Tambahkan daya tarik visual pada teks dengan menyertakan emoji.

• Klik Ikon Emoji di bilah alat untuk membuka daftar emoji yang dikategorikan agar mudah ditelusuri.
• Catatan Kompatibilitas: Uji email di klien tertentu seperti Outlook karena beberapa klien mungkin tidak menampilkan emoji dengan benar.

14. Tabel dan Karakter Khusus

Di ujung bilah alat, klik tiga titik untuk menampilkan opsi lanjutan lainnya.

Penyisipan Tabel

Buat dan sesuaikan tabel untuk menyempurnakan tata letak email.

• Tentukan baris, kolom, jarak sel, padding, dan ukuran batas sesuai kebutuhan.

Sisipkan Karakter Khusus

Sempurnakan teks dengan simbol, karakter beraksen, dan karakter nonstandar lainnya.

• Buka opsi Karakter Khusus untuk menelusuri berbagai macam karakter.

Pengaturan Blok Teks Tambahan (Panel Kanan)

Panel kanan menyediakan kontrol luas atas tampilan dan fungsi blok teks. Berikut pengaturan yang tersedia:

1. Warna Teks

Tentukan warna teks menggunakan pemilih warna atau dengan memasukkan kode hex.

2. Warna Latar Belakang

Atur warna latar belakang khusus untuk blok teks. Secara default, latar belakang bersifat transparan.

3. Pengaturan Khusus Tautan

Jika blok teks berisi tautan, opsi tambahan akan muncul dalam pengaturan:

• Warna Tautan: Sesuaikan warna tautan menggunakan pemilih warna atau kode hex.

• Garis Bawah Tautan: Aktifkan atau nonaktifkan opsi garis bawah untuk tautan di dalam blok teks.

• Pengeditan Tautan: Pilih tautan di area konten untuk mengedit URL-nya di panel pengaturan. Anda juga dapat menetapkan atau memperbarui tag untuk tautan menggunakan menu tarik-turun berlabel "Tags."

4. Perataan

Ratakan blok teks di dalam wadahnya: Kiri, Tengah, atau Kanan.

5. Tinggi Tetap

Atur tinggi tetap untuk blok teks dengan mengaktifkan opsi ini. Anda juga dapat mengontrol perataan teks secara vertikal: Atas, Tengah, atau Bawah.

6. Jarak Baris

Kontrol jarak antarbaris teks. Pilih Rapat, Normal, atau Lebar.

7. Padding

Sesuaikan ruang di sekitar blok teks. Terapkan padding seragam atau sesuaikan setiap sisi: Atas, Bawah, Kiri, dan Kanan.

8. Tautan Jangkar

Buat tautan jangkar agar pembaca dapat berpindah ke bagian tertentu dalam email. Perhatikan bahwa beberapa klien email tidak mendukung tautan jangkar.

Blok Tombol

Blok Tombol memungkinkan Anda menambahkan tombol yang dapat diklik ke email dengan pengaturan fungsi dan gaya yang dapat disesuaikan.

Pengaturan Tautan

Opsi Tautan menentukan tindakan yang dipicu ketika penerima mengeklik tombol.

Jenis Tautan yang Tersedia

• Tautan Situs Normal (HTTP atau HTTPS): Mengarahkan pengguna ke halaman web.
• Tautan Email: Membuka klien email pengguna untuk menulis email baru.
• Tautan File (FTP, FTPS): Menautkan ke file di server FTP.
• Skype: Memulai panggilan atau obrolan Skype.
• Telepon (tel): Memulai panggilan telepon di perangkat yang kompatibel.
• SMS: Membuka aplikasi pesan dengan nomor penerima yang telah diisi.
• Viber: Membuka aplikasi Viber untuk pesan atau panggilan.
• Jenis Protokol Lain: Tentukan protokol khusus yang tidak tercantum di atas.

Opsi Berbagi di Media Sosial

Anda juga dapat mengatur tombol untuk berbagi di media sosial atau melalui email:

• Facebook
• X (sebelumnya Twitter)
• LinkedIn
• Pinterest
• Berbagi melalui Email

Kolom URL

Di samping jenis tautan, Kolom URL (biasanya diawali https://) memungkinkan Anda memasukkan alamat spesifik yang sesuai dengan jenis tautan.

Label Tombol

Sesuaikan label tombol agar mencerminkan ajakan bertindak Anda. Label default adalah "Button", tetapi Anda dapat mengubahnya menjadi opsi seperti "Pelajari Selengkapnya", "Berlangganan Sekarang", atau "Belanja Sekarang".

Gaya Teks

Pengaturan Gaya Teks memungkinkan Anda menyesuaikan tampilan teks tombol.

Pemilihan Font

Pilih dari berbagai font standar, termasuk:

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Untuk font nonstandar, opsi tambahan meliputi:

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

Di bagian atas daftar font terdapat kotak pencarian untuk membantu Anda menemukan font tertentu dengan cepat.

Ukuran dan Pemformatan Font

• Ukuran Font: Pilih dari 8 hingga 72, sesuai seberapa menonjol teks tombol yang Anda inginkan.
• Pemformatan Teks: Terapkan gaya Tebal atau Miring menggunakan ikon "B" atau "I" untuk menekankan teks tombol.

Pengaturan Warna

Sesuaikan tampilan tombol dengan mengatur pengaturan warnanya.

1. Warna Tombol: Ubah warna latar belakang tombol. Default-nya adalah hijau (#31cb4b). Gunakan kolom kode hex atau pemilih warna untuk memilih warna baru.

2. Warna Teks: Tentukan warna teks tombol. Default-nya adalah putih (#ffffff). Pilih warna yang kontras dengan latar belakang tombol agar mudah dibaca.

3. Warna Latar Belakang: Sesuaikan latar belakang wadah tombol. Secara default, latar belakang ini transparan, tetapi Anda dapat mengubahnya agar tombol lebih menonjol dibandingkan latar belakang email.

Radius Batas

Kontrol tingkat kebulatan sudut tombol menggunakan pengaturan Radius Batas.

• Nilai Default: 30 (sudut cukup membulat).
• Rentang: 0 (sudut persegi) hingga 100 (tombol berbentuk kapsul).

Catatan: Untuk memastikan sudut membulat ditampilkan dengan benar di Microsoft Outlook, aktifkan opsi "Dukungan Outlook" di tab Tampilan.

Perataan

Posisikan tombol di dalam area kontennya menggunakan pengaturan Perataan.

• Opsi: Kiri, Tengah, Kanan.
• Penggunaan Umum: Perataan tengah untuk penekanan, perataan kiri atau kanan untuk konsistensi desain.

Tinggi Tetap

Aktifkan opsi Tinggi Tetap untuk mempertahankan dimensi tombol yang konsisten.

1. Default: Dinonaktifkan.
2. Tinggi Minimum: 44 piksel.
3. Perataan Vertikal Konten: Saat tinggi tetap diaktifkan, ratakan konten tombol ke Atas, Tengah, atau Bawah untuk penempatan yang presisi.

Tombol dengan Ikon

Opsi Tombol dengan Ikon memungkinkan Anda menyertakan ikon di samping teks tombol, sehingga meningkatkan daya tarik visual dan memperkuat ajakan bertindak. Fitur ini dinonaktifkan secara default.

• Format yang Didukung: Unggah ikon dalam format PNG, JPG, atau GIF, dengan ukuran file maksimum 2 MB.
• Posisi Ikon: Pilih untuk menampilkan ikon di sisi Kiri atau Kanan teks tombol.

Catatan: Ikon tidak ditampilkan pada versi tertentu Microsoft Outlook di Windows, termasuk:

• Outlook 2002, 2007, 2010, 2013, 2016, dan 2019. Keterbatasan ini disebabkan oleh cara klien email tersebut merender email HTML. Pertimbangkan hal ini jika sebagian besar audiens Anda menggunakan klien tersebut.

Pengaturan Batas

Sesuaikan batas tombol untuk menambahkan gaya dan penekanan.

• Lebar Batas: Atur lebar setiap sisi (kiri, kanan, atas, dan bawah) secara terpisah, hingga 40 piksel.
• Gaya Batas: Pilih gaya Solid, Putus-putus, atau Titik-titik.
• Warna Batas: Gunakan pemilih warna atau masukkan kode hex agar warna batas sesuai dengan merek atau skema desain Anda.

Padding Internal

Sesuaikan ruang di dalam tombol, antara konten (teks dan ikon) dan batas tombol.

• Opsi Kustomisasi: Tentukan nilai padding untuk sisi Kiri, Kanan, Atas, dan Bawah, hingga maksimum 99 piksel.
• Dampak: Padding internal memengaruhi ukuran keseluruhan tombol dan posisi konten di dalam tombol.

Padding Eksternal

Kontrol ruang di luar tombol untuk menyesuaikan posisinya relatif terhadap elemen lain dalam tata letak email.

• Opsi Kustomisasi: Atur nilai padding eksternal untuk sisi Kiri, Kanan, Atas, dan Bawah, hingga maksimum 40 piksel.
• Kasus Penggunaan: Memastikan tombol tidak tampak terlalu dekat dengan konten lain atau tepi email.

Tambahkan Tautan Jangkar

Gunakan tautan jangkar untuk mengarahkan pembaca ke bagian tertentu dalam email yang sama, sehingga menyediakan navigasi cepat dalam buletin yang panjang.

• Nama Jangkar: Tentukan target dalam email dan tautkan tombol ke jangkar ini. Saat diklik, email akan bergulir ke bagian yang ditentukan sehingga navigasi pengguna menjadi lebih mudah.

Penting: Tautan jangkar tidak didukung pada klien email tertentu, termasuk:

• Aplikasi Gmail untuk iOS
• Apple Mail untuk iOS
• Aplikasi Outlook untuk Android
• Aplikasi Outlook untuk macOS
• Email AMP

Uji email secara menyeluruh untuk memastikan fungsionalitas di berbagai klien email dan menentukan apakah fitur ini sesuai untuk audiens Anda.

Blok Pengatur Jarak

Blok Pengatur Jarak memungkinkan Anda menambahkan ruang yang dapat disesuaikan dalam konten email, dengan kontrol atas ukuran, perataan, tampilan, dan jarak internalnya. Di bawah ini adalah detail tentang dua jenis pengatur jarak: Pengatur Jarak Normal dan Pengatur Jarak Dinamis.

1. Pengatur Jarak Normal

Pengatur Jarak Normal adalah elemen garis yang memisahkan bagian-bagian dalam email secara visual.

Pengaturan Utama

1. Ketebalan dan Gaya Garis Sesuaikan ketebalan, gaya, dan warna garis:

   • Ketebalan: Sesuaikan menggunakan tombol + dan - (dimulai dari 1).
   • Gaya: Pilih antara solid, putus-putus, atau titik-titik.
   • Warna: Atur warna khusus menggunakan kode hex atau pemilih warna (default: #cccccc).

2. Lebar Tentukan seberapa jauh garis pengatur jarak membentang di seluruh konten. Sesuaikan lebar dalam piksel menggunakan tombol + dan -.

3. Perataan Ratakan garis ke kiri, tengah, atau kanan agar sesuai dengan tata letak Anda.

4. Padding Kontrol jarak internal di sekitar pengatur jarak:

   • Default: Padding diatur ke 20 pada semua sisi.
   • Gunakan toggle Lainnya untuk menentukan padding pada setiap sisi:
     • Atas
     • Kanan
     • Bawah
     • Kiri

Kasus Penggunaan

Pengatur Jarak Normal ideal untuk membuat pemisah visual yang bersih antarbagian dalam email, sehingga menghasilkan tata letak yang terorganisasi dan profesional.

2. Pengatur Jarak Dinamis

Pengatur Jarak Dinamis adalah blok ruang kosong yang tidak terlihat dan dirancang untuk menciptakan ruang bernapas dalam tata letak email.

Fitur Utama

1. Penyesuaian Tinggi Sesuaikan tinggi langsung di area konten atau melalui panel kontrol menggunakan tombol + dan -. Tinggi menentukan seberapa banyak ruang vertikal yang ditambahkan di antara bagian-bagian.

2. Warna Latar Belakang Secara default, pengatur jarak memiliki latar belakang transparan, tetapi Anda dapat menerapkan warna latar belakang khusus menggunakan kode hex atau pemilih warna. Dengan demikian, pengatur jarak dapat berfungsi sebagai blok yang terlihat jika diperlukan.

3. Perilaku Responsif Opsi Pengatur Jarak Responsif memastikan pengatur jarak menyesuaikan diri secara dinamis dengan berbagai ukuran layar untuk menghasilkan tata letak optimal di berbagai perangkat. Fitur ini diaktifkan secara default.

Perbedaan Utama antara Pengatur Jarak Normal dan Dinamis

• Pengatur Jarak Dinamis: Menambahkan ruang kosong tanpa garis yang terlihat.
• Pengatur Jarak Normal: Menyertakan pengaturan khusus garis seperti:
  • Lebar garis
  • Perataan
  • Gaya garis
  • Padding

Pengatur Jarak Dinamis tidak mendukung fitur-fitur ini dan dirancang murni untuk memberikan pemisah tanpa elemen visual.

3. Tambahkan Tautan Jangkar

Tautan jangkar dapat diterapkan pada kedua jenis pengatur jarak, sehingga pengguna dapat berpindah langsung ke lokasi pengatur jarak dari bagian lain email. Fitur ini sangat berguna untuk membuat navigasi di dalam email pada buletin yang panjang.

Catatan: Tautan jangkar tidak didukung oleh klien email tertentu, termasuk:

• Microsoft Outlook
• Gmail (di perangkat seluler)

Blok Video

Blok Video memungkinkan Anda menyematkan video ke dalam email serta menyesuaikan tampilan dan perilakunya. Blok ini mendukung tautan video dari platform seperti YouTube dan Vimeo, sehingga memberikan fleksibilitas dan kontrol atas cara video ditampilkan.

1. Tautan ke Video

Tambahkan URL video di kolom Tautan ke Video. Platform yang didukung mencakup YouTube, Vimeo, dan layanan lain yang mendukung penyematan.

• Perilaku Otomatis: Saat URL yang valid ditambahkan:

  • Gambar pratinjau otomatis dibuat menggunakan thumbnail video dari platform tersebut.
  • Kolom Teks Alternatif otomatis diisi dengan judul atau deskripsi video (jika tersedia).

• Kolom yang Dapat Diedit: Anda dapat mengedit atau mengganti gambar pratinjau dan teks yang dibuat secara otomatis jika diperlukan.

2. Teks Alternatif

Kolom Teks Alternatif memastikan aksesibilitas dengan menampilkan deskripsi video jika video gagal dimuat.

• Terisi otomatis ketika URL video yang didukung ditambahkan.
• Dapat disesuaikan dengan kebutuhan konten Anda.

3. Thumbnail Khusus

Unggah gambar khusus untuk menggantikan pratinjau video default.

• Cara Mengaktifkan: Aktifkan opsi Thumbnail Khusus.
• Format yang Didukung: PNG, JPG, atau GIF.
• Kapan Digunakan: Ganti thumbnail yang dibuat otomatis jika tidak sesuai dengan desain email Anda.

4. Tombol Putar

Sesuaikan Tombol Putar yang ditampilkan di atas thumbnail video.

• Opsi yang Tersedia:
  • Pilih dari gaya tombol putar YouTube, Vimeo, atau lainnya.
  • Pilih “Tidak ada” untuk menyembunyikan tombol putar sepenuhnya.

5. Ukuran

Sesuaikan dimensi video agar sesuai dengan desain email.

• Lebar dan Tinggi: Gunakan tombol + dan - atau masukkan nilai secara manual untuk mengontrol ukuran.
• Desain Responsif: Pastikan video tampil dengan baik di berbagai perangkat.

6. Sesuaikan dengan Lebar

Aktifkan toggle Sesuaikan dengan Lebar agar video otomatis memenuhi lebar wadahnya. Hal ini memastikan video mempertahankan desain responsif di berbagai perangkat.

7. Gambar Responsif

Toggle Gambar Responsif memastikan thumbnail video menyesuaikan diri dengan lebar layar pada perangkat seluler.

• Catatan: Responsivitas bergantung pada dukungan perangkat dan klien email.

8. Perataan

Gunakan pengaturan Perataan untuk mengontrol posisi horizontal video di dalam blok:

• Kiri: Meratakan video ke kiri.
• Tengah: Menempatkan video di tengah.
• Kanan: Meratakan video ke kanan.

9. Opsi Khusus Seluler

Sesuaikan perilaku dan tampilan video pada perangkat seluler:

1. Sembunyikan Elemen di Seluler Sembunyikan blok video di perangkat seluler jika diperlukan.

   • Catatan: Fitur ini bergantung pada dukungan kueri media dan mungkin tidak berfungsi di semua klien email.

2. Padding Seluler Sesuaikan padding di sekitar video untuk tampilan seluler.

   • Gunakan toggle Lainnya untuk mengatur nilai padding individual untuk:
     • Atas
     • Kanan
     • Bawah
     • Kiri

10. Sertakan dalam AMPHTML atau HTML

Pilih apakah blok video akan muncul dalam versi email tertentu:

• AMPHTML dan HTML
• Hanya AMPHTML
• Hanya HTML

Opsi ini memastikan video disertakan dengan tepat berdasarkan versi email yang dikirimkan.

Blok HTML

Blok HTML memungkinkan Anda menyisipkan kode HTML dan CSS khusus ke dalam email, sehingga memberikan fleksibilitas untuk kustomisasi tingkat lanjut dengan tetap memperhatikan kompatibilitas klien email. Baik Anda menambahkan satu elemen HTML maupun merancang seluruh email, blok ini adalah alat untuk membuat desain yang sesuai kebutuhan.

1. Antarmuka Editor Kode

Saat memilih Blok HTML, jendela editor kode berwarna hitam akan muncul di panel konten. Editor ini memungkinkan Anda menulis, menempelkan, atau mengubah kode khusus. Editor memiliki dua bagian:

• Bagian HTML: Tambahkan atau edit struktur HTML email.
• Bagian CSS: Buka editor CSS terpisah untuk menata gaya konten.

2. Penyesuaian Ukuran Font

Sesuaikan ukuran font kode di editor agar lebih mudah dibaca:

• Gunakan tombol A+ untuk memperbesar ukuran font.
• Gunakan tombol A- untuk memperkecil ukuran font.

3. Penyesuaian Ukuran Jendela Editor

Ubah ukuran jendela editor kode sesuai preferensi kerja Anda:

• Cara Menyesuaikan:
  • Arahkan kursor ke tiga titik di bagian tengah atas jendela editor.
  • Seret kontrol penggeser ke atas atau bawah untuk memperbesar atau memperkecil ukuran editor.

Fitur ini sangat berguna untuk mengelola blok kode yang lebih besar atau lebih detail.

4. Editor CSS

Editor CSS memungkinkan Anda mengelola gaya untuk konten HTML dan dapat diakses melalui tombol di sudut kanan atas editor kode.

Pertimbangan Penting:

• Dukungan Terbatas: Banyak klien email tidak mendukung fitur CSS tingkat lanjut seperti Flexbox, Grid, atau kueri media.
• Gunakan Dasar-Dasarnya: Gunakan CSS inline dasar untuk kompatibilitas maksimum.
• Gaya yang Telah Dikonfigurasi: Hindari menghapus gaya yang telah dikonfigurasi sebelumnya karena gaya tersebut memastikan rendering yang tepat di berbagai klien email utama.

5. Kompatibilitas Klien Email

HTML email memerlukan perhatian khusus karena banyak klien email menggunakan mesin rendering yang sudah usang.

Panduan Utama:

• Gunakan tata letak berbasis tabel, bukan tata letak berbasis <div>, untuk dukungan yang lebih baik.
• Hindari fitur CSS tingkat lanjut seperti animasi, Flexbox, atau Grid.
• Perkirakan perilaku yang tidak konsisten untuk kueri media dan properti CSS kecil.
• Pengujian: Selalu uji email di beberapa klien (misalnya Gmail, Outlook, Apple Mail) untuk memastikan rendering yang tepat.

6. Padding

Pengaturan Padding menyesuaikan ruang di sekitar konten HTML Anda:

• Padding Default: Diatur ke 0 secara default.
• Padding Khusus: Aktifkan toggle Lainnya untuk menyesuaikan padding individual pada:
  • Atas
  • Kanan
  • Bawah
  • Kiri

Fitur ini ideal untuk meratakan konten HTML dalam tata letak email.

7. Tambahkan Tautan Jangkar

Fitur Tambahkan Tautan Jangkar memungkinkan Anda membuat tautan yang dapat diklik di tempat lain dalam email untuk menuju ke Blok HTML.

Cara Menggunakan:

• Aktifkan opsi dan masukkan nama jangkar di kolom.

Keterbatasan:

• Tautan jangkar tidak didukung oleh beberapa klien email, seperti:
  • Aplikasi Gmail untuk iOS
  • Apple Mail untuk iOS
  • Aplikasi Outlook (Android dan macOS)
  • Email AMP

8. Menulis HTML Khusus

Editor HTML dirancang untuk menulis atau menempelkan struktur HTML khusus email Anda.

Praktik Terbaik:

• Gunakan HTML sederhana yang didukung secara luas.
• Hindari tata letak atau fitur kompleks seperti elemen <div>.
• Gunakan desain berbasis tabel untuk memastikan kompatibilitas yang lebih baik.

9. Tips agar Berhasil

1. Mulai dari Hal Kecil: Gunakan Blok HTML untuk bagian tertentu jika Anda masih baru dalam pengembangan email.
2. Validasi Kode: Pastikan HTML Anda memenuhi persyaratan klien email.
3. Uji Secara Menyeluruh: Gunakan alat untuk melihat pratinjau dan menguji email di berbagai klien dan perangkat.