Cara Menambahkan Optin Email Divi ke Posting Blog Gutenberg Anda

Blok Tata Letak Divi membuka pintu bagi banyak cara mudah untuk menghadirkan fitur desain yang kuat dari Divi Builder ke editor blok default WordPress (Gutenberg). Ini memungkinkan Anda untuk menulis sebagian besar konten posting blog Anda menggunakan antarmuka blok Gutenberg yang sudah dikenal dan kemudian menyuntikkan Tata Letak Divi di mana desain atau fungsionalitas khusus diperlukan. Blok Tata Letak Divi dapat menyertakan apa pun yang dapat Anda buat di dalam Divi Builder, tetapi juga bagus untuk menyertakan sesuatu yang sederhana dan penting seperti Email Optin.

Dalam tutorial ini, kita akan membahas cara menambahkan Divi Email Optin yang indah ke Posting Blog Gutenberg menggunakan Divi Layout Block.

Mari kita mulai!

Sneak Peek

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Mengimpor Blok Tata Letak JSON

Unggah Tata Letak ke Perpustakaan Divi

Untuk mengimpor file JSON yang dapat Anda unduh di atas, buka Perpustakaan Divi Anda di bagian belakang dasbor WordPress Anda dan klik 'Impor & Ekspor'.

Kemudian, pilih file JSON di dalam folder unduhan Anda dan klik 'Impor Divi Builder Layouts'.

Tambahkan Blok Blok Divi Baru Di Dalam Gutenberg Post

Setelah tata letak Anda diimpor, Anda dapat membuka pos Gutenberg Anda dan menambahkan blok tata letak Divi baru.

Impor File JSON Dari Tata Letak Tersimpan

Kemudian, klik 'Muat Dari Perpustakaan', navigasikan ke 'Tata Letak Tersimpan Anda' dan pilih tata letak untuk mengimpor Blok Tata Letak CTA Divi ke posting blog Anda. Itu dia!

Dan itu saja!

Langsung saja ke tutorialnya ya?

Menambahkan Optin Email Divi ke Posting Blog Gutenberg Anda

Buat atau Edit Posting Blog

Untuk memulai, kita perlu membuat posting blog baru atau mengedit yang sudah ada. Untuk contoh ini, mari tambahkan beberapa konten tiruan ke judul dan isi postingan menggunakan beberapa Blok Judul dan Paragraf. Kemudian tambahkan gambar unggulan dan pilih "Tidak Ada Bilah Sisi" untuk Tata Letak Halaman di bawah Pengaturan Halaman Divi.

Tambahkan Blok Tata Letak Divi Sebaris

Setelah Anda memiliki sebagian besar posting yang dibuat, yang perlu kita lakukan adalah menambahkan Blok Tata Letak Divi baru di mana pun kita inginkan dalam area konten posting. Kami dapat menambahkannya di suatu tempat lebih dekat ke akhir posting untuk menangkap prospek berkualitas yang jelas tertarik dengan konten posting.

Untuk menambahkannya, arahkan kursor ke area yang ingin Anda tambahkan optin email dan kemudian klik ikon plus biru untuk menambahkan blok baru. Di daftar blokir popup, pilih blok Divi Layout.

Bangun Tata Letak Baru Dalam Blok Tata Letak Divi

Setelah Blok Tata Letak Divi dipilih, kita akan memiliki opsi untuk "Membangun Tata Letak Baru" atau "Memuat dari Perpustakaan". Karena kita perlu membangun optin email dari awal, pilih opsi, "Build New Layout".

Desain Bagian

Di dalam editor Layout Block, kita dapat mulai mendesain optin email untuk dimasukkan ke dalam postingan kita. Apa pun yang kami desain di editor ini akan ditampilkan di area Blok Tata Letak Divi dari pos.

Untuk memulai, buka pengaturan bagian dari bagian default yang sudah ada.

Gradien Latar Belakang

Kemudian tambahkan gradien latar belakang sebagai berikut:

• Warna Kiri Gradien Latar Belakang: #ff9945
• Warna Kanan Gradien Latar Belakang: #f86a4c

Jangka pembagi garis

Selanjutnya, buka tab desain dan pembagi bagian atas dan bawah sebagai berikut:

• Gaya Pembagi Atas: lihat tangkapan layar
• Warna Pembagi Atas: #f86a4c
• Pengulangan Horizontal Pembagi Atas: 0.8x

• Gaya Pembagi Bawah: lihat tangkapan layar
• Warna Pembagi Bawah: #ff9945
• Pengulangan Horizontal Pembagi Bawah: 0.8x
• Balik Pembagi Bawah: horizontal dan vertikal

Margin dan Batas

Setelah pembagi terpasang, beri bagian sedikit margin di atas dan di bawah lalu selesaikan dengan batas dan animasi sebagai berikut:

• Margin: 20px atas, 20px bawah
• Sudut Bulat: 30px
• Lebar Perbatasan: 2px
• Warna Batas: #ff9945
• Gaya Animasi: Balik

Tambahkan Kolom dan Tetapkan Lebar Baris

Sekarang setelah bagian selesai, tambahkan struktur satu kolom ke baris.

Kemudian perbarui pengaturan baris sebagai berikut:

• Lebar: 100%
• Lebar Maks: 100%

Bangun Optin Email

Tambahkan Modul Optin Email

Selanjutnya, tambahkan modul optin email ke baris.

Konten Keikutsertaan Email

Untuk pengaturan konten email optin, perbarui berikut ini:

• Judul: “Dapatkan Tips GRATIS Setiap Minggu!”
• Isi: [simpan konten tiruan default]
• Daftar Mailchimp: [tambahkan daftar]
• Gunakan Bidang Nama Tunggal: YA
• Gunakan Warna Latar Belakang: TIDAK

Desain Optin Email

bidang

Lompat ke tab desain dan rancang bidang optin email dengan memperbarui yang berikut:

• Tata Letak: Badan di Kanan, Bentuk di Kiri
• Warna Latar Belakang Bidang: #f86a4c
• Warna Teks Bidang: #ffffff
• Font Bidang: IBM Plex Sans
• Ukuran Teks Bidang: 18px
• Spasi Huruf Bidang: 2px
• Tinggi Garis Bidang: 2em

Judul

Perbarui pengaturan teks judul sebagai berikut:

• Judul Font: IBM Plex Sans Condensed
• Judul Font Berat: Semi Tebal
• Warna Teks Judul: #ffffff
• Judul Teks Ukuran: 60px (desktop), 30px (ponsel)
• Judul Baris Tinggi: 1.2em (desktop), 1.6 (telepon)

Tombol

Untuk tombol, perbarui yang berikut ini:

• Gunakan Gaya Kustom untuk Tombol: YA
• Warna Teks Tombol: #ff9945
• Tombol Latar Belakang Gradien Warna Kiri: #ff9945
• Tombol Latar Belakang Gradien Warna Kanan: #ffffff
• Arah Gradien: 90 derajat
• Posisi Akhir: 34%
• Lebar Batas Tombol: 0px
• Jarak Huruf Tombol: 2px
• Font Tombol: IBM Plex Sans
• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: TT
• Padding Tombol: 15px atas, 15px bawah

Lapisan

Dan untuk satu sentuhan terakhir, tambahkan padding berikut:

• Padding: 5% kiri, 5% kanan

Hasil Akhir

Setelah kita selesai mendesain layout di dalam Divi Layout editor, pastikan dan simpan layoutnya. Kemudian simpan postingan tersebut sehingga Anda dapat melihat pratinjau email optin di halaman langsung. Berikut adalah tampilannya.

Berikut adalah sedikit animasi dari email optin saat Anda menggulir ke bawah posting.

Pikiran Akhir

Menambahkan optin email ke posting Gutenberg Anda menjadi sangat sederhana dengan Divi Layout Block. Anda tidak hanya dapat menambahkan optin email yang berfungsi penuh (dan mudah digunakan) dalam hitungan detik, tetapi Anda juga dapat menggunakan Divi Builder untuk menambahkan desain khusus, efek hover, dan animasi. Semua ini tanpa harus menggunakan plugin!

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!