Saat Anda merampingkan cara Anda membuat posting blog di situs jaringan, kemungkinan besar Anda ingin menyertakan CTA yang menarik di suatu tempat di artikel Anda. Sekarang dengan integrasi Blok Tata Letak Gutenberg baru dari Divi, Anda dapat dengan mudah menambahkan blok baru yang dibuat oleh Divi di mana saja di postingan blog Gutenberg Anda. Hal ini memungkinkan Anda untuk menyimpan isi keseluruhan postingan blog di lingkungan Gutenberg, sambil terus membuat Divi CTA khusus menggunakan opsi bawaan Divi. Terbaik dari kedua dunia! Dalam tutorial ini, kami akan menunjukkan cara menambahkan blok tata letak Divi CTA animasi sebaris ke postingan Gutenberg Anda. Kami juga akan membagikan file JSON blok tata letak Divi CTA secara gratis!
Mari kita pergi.
Kemungkinan Hasil
Sebelum kita menyelami tutorialnya, mari kita lihat hasilnya pada ukuran layar yang berbeda.
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 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 entri blog Anda. Itu dia!
Ayo mulai menciptakan!
Gunakan template penerbitan untuk paket tema ketiga
Gunakan Paket Pembuat Tema Ketiga
Saatnya mulai membuat dari awal! Pertama-tama, desain yang kami buat ulang sesuai dengan paket pembuatan tema ketiga yang diterbitkan di blog Divi. Buka artikelnya dan unduh file JSON untuk paket kreasi tema ini.
Pergi ke Pembuat Tema Divi
Setelah mengunduh paket pembuatan tema ketiga, Anda dapat mengakses Divi Theme Builder.
Unduh template publikasi
Unduh templat kiriman Paket Pembuat Tema dengan mengeklik ikon di sudut kanan atas.
Kemudian pilih template posting dan klik "Import Divi Theme Builder templates". Pastikan untuk menyimpan perubahan ke pembuat tema juga. Pada titik ini, kami telah menetapkan template posting blog dari Theme Building Pack ke semua posting kita.
Buka publikasi Gutenberg yang ada atau buat yang baru
Langkah selanjutnya adalah menambahkan blok tata letak Divi CTA ke pos Gutenberg kami. Untuk melakukan ini, buka artikel yang ada atau buat yang baru.
Tambahkan blok Divi baru secara online
Setelah masuk ke dalam pesan, Anda dapat menambahkan blok tata letak Divi baru.
Buat tata letak baru di dalam blok Divi
Kemudian Anda akan memiliki dua opsi. Pilih opsi "Buat tata letak baru".
Pengaturan bagian
jarak
Begitu berada di dalam editor blok tata letak Divi, Anda akan melihat sebuah bagian. Buka bagian ini dan tambahkan nilai margin kustom untuk membuat ruang di sekitar penampung bagian.
- Margin atas: 50px
- Margin bawah: 50px
- Margin kiri: -10%
- Margin kanan: -10%
Tambahkan baris # 1
Struktur kolom
Lanjutkan menambahkan baris baru menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan lebih banyak modul, buka parameter garis dan tambah lebar dan lebar maksimum.
- Lebar: 100%
- Lebar maks: 100%
Tambahkan Pemisah # 1 ke kolom
jarak penglihatan
Saatnya menambahkan modul, dimulai dengan modul pemisahan. Pastikan opsi "Tampilkan Pemisah" diaktifkan.
- Tampilkan pemisah: Ya
Baris
Beralih ke tab desain modul dan ubah pengaturan baris sebagai berikut:
- Warna garis: # fc526e
- Gaya garis: solid
- Posisi garis: tinggi
perekat
Juga ubah parameter ukuran.
- Berat pembagi: 3px
- Lebar: 30%
- Penyelarasan modul: benar
- Tinggi: 3px
animasi
Dan ubah pengaturan animasi sesuai:
- Gaya Animasi: Slide
- Arah animasi: kiri
- Durasi animasi: 2000ms
- Penundaan animasi: 500 ms
- Intensitas animasi: 100%
- Opasitas mulai animasi: 0%
Tambahkan pembagi # 2 ke kolom
jarak penglihatan
Mari beralih ke modul pemisahan berikutnya. Sekali lagi, pastikan opsi "Tampilkan Pemisah" diaktifkan.
- Tampilkan pemisah: Ya
Baris
Lalu pergi ke tab desain modul dan ubah pengaturan baris sebagai berikut:
- Warna garis: # e1e3e8
- Gaya garis: solid
- Posisi garis: tinggi
perekat
Kemudian modifikasi parameter ukuran modul.
- Berat pembagi: 3px
- Tinggi: 3px
jarak
Tambahkan juga nilai spasi kustom.
- Margin kiri: 10%
- Margin kanan: -20%
animasi
Dan lengkapi parameter modul dengan mengubah parameter animasi sebagai berikut:
- Gaya Animasi: Slide
- Arah animasi: kiri
- Durasi animasi: 2000ms
- Penundaan animasi: 500 ms
- Intensitas animasi: 100%
- Opasitas mulai animasi: 100%
Anda dapat menambahkan pemisah sebanyak yang Anda inginkan untuk mengubah animasi Anda.
Tambahkan baris # 2
Struktur kolom
Tambahkan baris lain ke bagian menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul, buka parameter garis dan modifikasi parameter dimensi sebagai berikut:
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Lebar: 70%
- Penjajaran garis: tengah
Tambahkan modul teks # 1 ke kolom
Tambahkan konten H2
Selanjutnya, tambahkan modul teks pertama ke kolom baris dengan isi H2 pilihan Anda.
Pengaturan teks H2
Beralih ke tab desain dan ubah pengaturan teks H2 sesuai:
- Warna teks item 2: # fc526e
- Header 2 Ukuran teks: 28px
jarak
Kemudian tambahkan nilai isian khusus.
- Lapisan atas: 50px
- Lapisan bawah: 50px
- Padding kiri: 50px
Batas
Kami juga menggunakan perbatasan kiri.
- Lebar batas kiri: 2px
- Warna batas kiri: # fc526e
animasi
Dan lengkapi parameter modul dengan menambahkan animasi yang dipersonalisasi.
- Gaya Animasi: Flip
- Arah animasi: Tengah
- Penundaan animasi: 1500 ms
Tambahkan modul teks # 2 ke kolom
Tambahkan konten
Tambahkan modul teks lain tepat di bawah modul sebelumnya dengan isi pilih pemilih.
jarak
Pindah ke tab desain modul dan ubah nilai padding sesuai:
- Lapisan atas: 50px
- Lapisan bawah: 50px
- Padding kanan: 50px
Perbatasan
Kemudian tambahkan batas atas dan kanan.
- Batas atas dan kanan: 2 piksel
- Warna batas atas dan kanan: # fc526e
animasi
Dan lengkapi parameter modul dengan mengubah parameter animasi sebagai berikut:
- Gaya Animasi: Flip
- Arah animasi: Tengah
- Penundaan animasi: 1700 ms
Tambahkan modul tombol ke kolom
Tambahkan salinan
Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah modul tombol. Tambahkan salinan pilihan Anda.
Pengaturan tombol
Beralih ke tab desain modul dan ubah pengaturan tombol sebagai berikut:
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran teks tombol: 13px
- Warna teks tombol: #ffffff
- Gradien warna 1: # ff5b84
- Gradien warna 2: # f94857
- Jenis gradien: linier
- Arah gradien: 165 derajat
- Lebar batas tombol: 0px
- Jari-jari batas tombol: 0px
- Penempatan huruf tombol: 1px
- Font tombol: Montserrat
- Berat font tombol: Setengah tebal
- Gaya font tombol: huruf besar
jarak
Kemudian tambahkan padding khusus atas dan bawah.
- Lapisan atas: 16px
- Lapisan bawah: 16px
animasi
Dan lengkapi parameter modul dengan menambahkan animasi berikut:
- Gaya Animasi: Flip
- Penundaan animasi: 1900 ms
Klonkan baris # 1 dan letakkan di bagian bawah
Setelah Anda menyelesaikan baris pertama dan kedua, Anda dapat mengkloning baris pertama dan menempatkan duplikat di bagian bawah bagian.
Ubah urutan pemisah
Ubah tempat untuk modul pemisahan pertama dan terakhir.
final pikiran
Dalam artikel ini, kami telah menunjukkan kepada Anda cara memanfaatkan integrasi Gutenberg baru Divi dan menambahkan blok pitch Divi CTA animasi sebaris ke entri blog Gutenberg Anda. Ini adalah cara yang bagus untuk menyoroti Ajakan Bertindak pilihan Anda saat ini pengunjung membaca isi posting blog Anda.
