Blok Tata Letak Divi membuka pintu ke banyak cara mudah untuk mengintegrasikan fitur desain canggih Divi Builder dengan editor blok default WordPress (Gutenberg). Ini memungkinkan Anda untuk menulis sebagian besar isi posting blog Anda menggunakan antarmuka blok Gutenberg yang sudah dikenal, lalu masukkan tata letak Divi yang memerlukan desain atau fungsionalitas khusus. Blok tata letak Divi dapat menyertakan apa pun yang dapat Anda buat di Divi Builder, namun juga bagus untuk menyertakan sesuatu yang sederhana dan penting seperti bentuk berlangganan.
Dalam tutorial ini, kita akan melihat cara menambahkan a bentuk berlangganan posting blog Gutenberg menggunakan blok tata letak Divi.
Kemungkinan Hasil
Mengimpor blok tata letak JSON
Unduh tata letak di 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 dan ekspor'.
Kemudian pilih file JSON di folder unduhan Anda dan klik "Import Layout Builder Layouts".
Tambahkan Blok Divi baru di dalam pos Gutenberg
Setelah tata letak Anda telah diimpor, Anda dapat mengakses pesan Gutenberg Anda dan menambahkan blok tata letak Divi baru.
Impor file JSON dari presentasi yang disimpan
Kemudian, klik "Muat dari perpustakaan", buka "Tata letak tersimpan Anda" dan pilih tata letak untuk mengimpor blok tata letak Divi CTA ke dalam posting blog Anda. Itu dia !
Dan itu saja!
Lanjut ke tutorialnya ya.
Tambahkan modul email Optin ke posting blog Gutenberg Anda
Buat atau edit posting blog
Untuk memulai, kita perlu membuat postingan blog baru atau mengedit yang sudah ada. Untuk contoh ini, mari tambahkan isi tiru judul dan isi artikel menggunakan beberapa blok header dan paragraf. Selanjutnya, tambahkan gambar unggulan dan pilih “Tanpa Sidebar” untuk tata letak di bawah pengaturan halaman Divi.
Tambahkan blok tata letak Divi online
Setelah sebagian besar postingan dibuat, yang perlu kita lakukan hanyalah menambahkan blok tata letak Divi baru di mana pun kita inginkan di area postingan. isi publikasi. Kami mungkin menambahkannya di dekat akhir pesan untuk menangkap prospek berkualitas yang jelas-jelas tertarik dengan konten pesan.
Untuk menambahkannya, arahkan mouse ke area tempat Anda ingin menambahkan email opsi, lalu klik ikon plus biru untuk menambahkan blok baru. Dalam daftar blok kontekstual, pilih blok Tata Letak Divi.
Buat tata letak baru di blok tata letak Divi
Setelah blok tata letak Divi dipilih, kami akan memiliki opsi "Buat tata letak baru" atau "Muat dari perpustakaan". Karena kita perlu membuat opsi email dari awal, pilih optin "Buat Tata Letak Baru".
Desain bagian
Di editor tata letak, kita dapat mulai mendesain optin email untuk dimasukkan ke dalam posting kita. Semua yang kami desain di editor ini akan ditampilkan di area Blok Tata Letak Divi pada kiriman.
Untuk memulai, buka pengaturan bagian dari bagian default yang sudah ada.
Untuk tata letak, kita akan memilih tata letak dua kolom.
Kemudian kami akan menambahkan modul Email Optin ke salah satu kolom, saya tinggalkan Anda pilihan kolomnya.
Selanjutnya, kami akan menyesuaikan latar belakang bagian tersebut. Anda selalu dapat mengubah nilainya untuk membuat desain Anda unik. Namun, kami menggunakan nilai-nilai berikut:
- Latar belakang: # ff6100
- Pemisah Atas & Bawah: penghitungan ke-13 dari atas.
- Lebar elemen pembagi: 40px (atas dan bawah).
Kami sekarang akan menambahkan teks ke kolom sebaliknya. Di sini, Anda akan menggunakan teks insentif untuk menghadirkan pengunjung untuk berlangganan.
Anda kemudian harus melakukan modifikasi yang berbeda:
- Teks font: Montserrat
- Warna font: #FFF
- Subtitle Huruf Teks H2: Montserrat
- Subtitle Teks H2 Ukuran: 2.5em
- Subtitle Teks H2 Warna: #FFF
Ingatlah untuk mengkonfigurasi sistem email yang akan Anda gunakan. Anda harus tahu bahwa Gutenberg kompatibel dengan MailChimp.
final pikiran
Menambahkan email optin ke pesan Gutenberg Anda menjadi sangat mudah dengan blok tata letak Divi. Anda tidak hanya dapat menambahkan opsi 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!
