Cara Menambahkan Blok Tata Letak CTA Divi Sebaris & Animasi ke Posting Blog Gutenberg Anda

Saat Anda merampingkan cara Anda membuat posting blog di situs web Anda, kemungkinan besar Anda ingin memasukkan CTA yang menarik di suatu tempat di dalam posting Anda. Sekarang, dengan integrasi blok tata letak Gutenberg baru Divi, Anda dapat dengan mudah menambahkan blok buatan Divi baru di mana saja di dalam posting blog Gutenberg Anda. Ini memungkinkan Anda untuk menyimpan keseluruhan konten posting blog di dalam lingkungan Gutenberg, sambil tetap membangun CTA Divi khusus menggunakan opsi bawaan Divi-s. Terbaik dari kedua dunia! Dalam tutorial ini, kami akan menunjukkan cara menambahkan blok tata letak Divi CTA sebaris & animasi ke pos Gutenberg Anda. Kami juga akan membagikan file JSON blok tata letak Divi CTA secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Blok Tata Letak CTA Divi Sebaris & Animasi GRATIS

Untuk mendapatkan bagian pahlawan gratis, pertama-tama Anda harus mengunduhnya 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!

Mari Mulai Berkreasi!

Gunakan Template Posting Paket Pembuat Tema Ketiga

Unduh Paket Pembuat Tema Ketiga

Saatnya mulai berkreasi dari awal! Pertama-tama, desain yang kami buat ulang cocok dengan paket pembuat tema ketiga yang dirilis di blog Divi. Buka pos dan unduh file JSON dari paket pembuat tema ini.

Pergi ke Divi Theme Builder

Setelah mengunduh paket pembuat tema ketiga, Anda dapat membuka Divi Theme Builder.

Unggah Templat Posting

Unggah templat posting paket pembuat tema dengan mengklik ikon di sudut kanan atas.

Kemudian, pilih template posting dan klik 'Import Divi Theme Builder Templates'. Pastikan Anda juga menyimpan perubahan pembuat tema. Pada titik ini, kami telah menetapkan template posting blog theme builder pack ke semua posting kami.

Buka Pos Gutenberg yang Ada atau Buat Yang Baru

Langkah selanjutnya adalah menambahkan blok tata letak Divi CTA ke pos Gutenberg kami. Untuk melakukannya, buka postingan yang sudah ada atau buat yang baru.

Tambahkan Blok Divi Sebaris Baru

Setelah berada di dalam pos, Anda dapat menambahkan blok tata letak Divi baru.

Bangun Tata Letak Baru Di Dalam Blok Divi

Kemudian, Anda akan mendapatkan dua opsi. Pilih opsi 'Bangun Tata Letak Baru'.

Pengaturan Bagian

Jarak

Begitu berada di dalam editor blok tata letak Divi, Anda akan melihat sebuah bagian. Buka bagian itu dan tambahkan beberapa nilai margin khusus untuk membuat ruang di sekitar wadah bagian.

• Margin Atas: 50px
• Margin Bawah: 50px
• Margin Kiri: -10%
• Margin Kanan: -10%

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambah lebar dan lebar maksimal.

• Lebar: 100%
• Lebar Maks: 100%

Tambahkan Pembagi #1 ke Kolom

Visibilitas

Saatnya menambahkan modul, dimulai dengan Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Pindah ke tab desain modul dan ubah pengaturan baris sebagai berikut:

• Warna Garis: #fc526e
• Gaya Garis: Padat
• Posisi Garis: Atas

Perekat

Ubah juga pengaturan ukuran.

• Berat Pembagi: 3px
• Lebar: 30%
• Penyelarasan Modul: Kanan
• Tinggi: 3px

Animasi

Dan ubah pengaturan animasi yang sesuai:

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Durasi Animasi: 2000ms
• Penundaan Animasi: 500ms
• Intensitas Animasi: 100%
• Animasi Mulai Opacity: 100%

Tambahkan Pembagi #2 ke Kolom

Visibilitas

Ke Modul Pembagi berikutnya. Sekali lagi, pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Kemudian, buka tab desain modul dan ubah pengaturan baris sebagai berikut:

• Warna Garis: #e1e3e8
• Gaya Garis: Padat
• Posisi Garis: Atas

Perekat

Ubah pengaturan ukuran modul berikutnya.

• Berat Pembagi: 3px
• Tinggi: 3px

Jarak

Tambahkan beberapa nilai spasi kustom juga.

• Margin Kiri: 10%
• Margin Kanan: -20%

Animasi

Dan selesaikan pengaturan modul dengan memodifikasi pengaturan animasi sebagai berikut:

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Durasi Animasi: 2000ms
• Penundaan Animasi: 500ms
• Intensitas Animasi: 100%
• Animasi Mulai Opacity: 100%

Tambahkan Pembagi #3 ke Kolom

Visibilitas

Ke Modul Pembagi berikutnya dan terakhir yang kita butuhkan di baris ini. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Kemudian, buka tab desain dan ubah pengaturan garis sebagai berikut:

• Warna Garis: #fc526e
• Gaya Garis: Padat
• Posisi Garis: Atas

Perekat

Ubah juga ukuran modul.

• Berat Pembagi: 3px
• Tinggi: 3px

Jarak

Seiring dengan pengaturan spasi.

• Margin Bawah: 100px
• Margin Kiri: -20%
• Margin Kanan: 10%

Animasi

Dan selesaikan pengaturan modul dengan mengubah pengaturan animasi.

• Gaya Animasi: Slide
• Arah Animasi: Kanan
• Durasi Animasi: 2000ms
• Intensitas Animasi: 100%
• Animasi Mulai Opacity: 100%

Tambahkan Baris #2

Struktur Kolom

Tambahkan baris lain ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 70%
• Penjajaran Baris: Pusat

Tambahkan Modul Teks #1 ke Kolom

Tambahkan Konten H2

Kemudian, tambahkan Modul Teks pertama ke kolom baris dengan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Pindah ke tab desain dan ubah pengaturan teks H2 yang sesuai:

• Judul 2 Warna Teks: #fc526e
• Judul 2 Ukuran Teks: 28px

Jarak

Tambahkan beberapa nilai padding kustom berikutnya.

• Padding Atas: 50px
• Padding Bawah: 50px
• Padding Kiri: 50px

Berbatasan

Kami menggunakan batas kiri juga.

• Lebar Batas Kiri: 2px
• Warna Batas Kiri: #fc526e

Animasi

Dan selesaikan pengaturan modul dengan menambahkan animasi khusus.

• Gaya Animasi: Balik
• Arah Animasi: Pusat
• Penundaan Animasi: 1500ms

Tambahkan Modul Teks #2 ke Kolom

Tambah isi

Tambahkan Modul Teks lain tepat di bawah yang sebelumnya dengan beberapa konten pilihan Anda.

Jarak

Pindah pada tab desain modul dan ubah nilai padding yang sesuai:

• Padding Atas: 50px
• Padding Bawah: 50px
• Padding Kanan: 50px

Berbatasan

Tambahkan batas atas dan kanan berikutnya.

• Batas Atas & Kanan: 2px
• Warna Batas Atas & Kanan: #fc526e

Animasi

Dan selesaikan pengaturan modul dengan memodifikasi pengaturan animasi sebagai berikut:

• Gaya Animasi: Balik
• Arah Animasi: Pusat
• Penundaan Animasi: 1700ms

Tambahkan Modul Tombol ke Kolom

Tambahkan Salinan

Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Pindah ke tab desain modul dan ubah pengaturan tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 13px
• Warna Teks Tombol: #ffffff
• Warna Gradien 1: #ff5b84
• Warna Gradien 2: #f94857
• Tipe Gradien: Linier
• Arah Gradien: 165 derajat
• Lebar Batas Tombol: 0px

• Radius Perbatasan Tombol: 0px
• Jarak Huruf Tombol: 1px
• Font Tombol: Montserrat
• Berat Huruf Tombol: Semi Tebal
• Gaya Font Tombol: Huruf Besar

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus berikutnya.

• Padding Atas: 16px
• Padding Bawah: 16px

Animasi

Dan selesaikan pengaturan modul dengan menambahkan animasi berikut:

• Gaya Animasi: Balik
• Penundaan Animasi: 1900ms

Baris Klon #1 & Tempatkan di Bagian Bawah

Setelah Anda menyelesaikan baris pertama dan kedua, Anda dapat mengkloning baris pertama dan menempatkan duplikatnya di bagian bawah.

Ubah Urutan Pembagi

Beralih tempat untuk Modul Pembagi pertama dan terakhir.

Ubah Spasi Pembagi #1

Kemudian, buka Modul Pembagi pertama di baris Anda dan ubah pengaturan spasi.

• Margin Atas: 100px
• Margin Kiri: 10%
• Margin Kanan: -20%

Ubah Spasi Pembagi #2

Ubah juga pengaturan jarak Modul Pembagi kedua.

• Margin Kiri: -20%
• Margin Kanan: 10%

Ubah Ukuran Pembagi #3

Kemudian, buka Modul Pembagi ketiga dan gunakan perataan modul kiri dalam pengaturan ukuran.

• Penyelarasan Modul: Kiri

Hapus Penundaan Animasi Pembagi #3

Hapus penundaan animasi Modul Pembagi ketiga juga dan Anda siap! Setelah Anda menyelesaikan blok tata letak Divi CTA, pastikan Anda menyimpan perubahan dan memperbarui posting Anda.

• Penundaan Animasi: 0ms

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana memanfaatkan integrasi Gutenberg baru Divi dan menambahkan blok tata letak CTA Divi sebaris & animasi ke posting blog Gutenberg Anda. Ini adalah cara yang bagus untuk menyoroti CTA pilihan Anda saat pengunjung membaca konten posting blog Anda. Anda juga dapat mengunduh file JSON blok tata letak Divi CTA secara gratis! Jika Anda memiliki pertanyaan, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.