Cara Menambahkan Kutipan Sorotan Divi-Built Di Seluruh Pos Gutenberg Anda

Saat menulis posting blog, Anda akan sering menemukan diri Anda ingin mengutip seseorang atau menyoroti kalimat yang digunakan dalam paragraf biasa. Sekarang, di dalam editor Gutenberg, Anda dapat menambahkan blok kutipan langsung, tetapi itu tidak memberi Anda kebebasan desain sebanyak yang Anda inginkan. Dengan blok tata letak Divi, itu bukan masalah lagi. Anda dapat dengan mudah membangun blok tertentu dengan Divi sambil tetap mempertahankan lingkungan Gutenberg di tempat lain. Dalam tutorial ini, kami akan menunjukkan cara menambahkan kutipan yang disorot sebaris ke posting blog Anda menggunakan Divi. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

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

Contoh 1

Desktop

Seluler

Contoh #2

Desktop

Seluler

Unduh Tata Letak Kutipan Sorotan Divi-Built secara GRATIS

Untuk mendapatkan tata letak kutipan tersorot yang dibuat oleh Divi secara gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

https://youtu.be/zScpa4-I7-8

Berlangganan Saluran Youtube Kami

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 tata letak kutipan yang disorot ke posting blog Anda. Itu dia!

Langkah Umum

Gunakan Template Posting Blog Sederhana & Ramah UX

Unduh Template

Untuk menentukan gaya tutorial ini, kita akan menggunakan template posting dari posting sebelumnya. Buka pos itu dan unduh templatnya.

Pergi ke Divi Theme Builder

Lalu, buka Divi Theme Builder.

Unggah Templat Posting

Klik ikon di sudut kanan atas, buka tab impor dan impor template posting yang telah Anda unduh pada langkah pertama tutorial ini.

Buka Pos Gutenberg yang Ada atau Buat Yang Baru

Setelah Anda mengatur template posting, Anda dapat membuat posting Gutenberg baru atau membuka yang sudah ada.

Tambahkan Blok Divi Sebaris Baru

Tambahkan blok Divi baru di suatu tempat di dalam pos Anda.

Bangun Tata Letak Baru Di Dalam Blok Divi

Setelah Anda menambahkan blok, Anda akan mendapatkan dua opsi. Pilih salah satu yang mengatakan 'Build New Layout'.

Buat Ulang Contoh #1

Pengaturan Bagian

Jarak

Setelah Anda berada di dalam editor blok tata letak Divi, Anda akan melihat sebuah bagian. Untuk membuat ulang desain contoh pertama, buka pengaturan bagian dan ubah nilai margin yang sesuai:

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

Berbatasan

Tambahkan batas kiri ke bagian berikutnya.

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

Animasi

Dan gunakan pengaturan animasi berikut:

• Gaya Animasi: Slide
• Arah Animasi: Bawah
• Durasi Animasi: 1500ms
• Intensitas Animasi: 200%
• Animasi Mulai Opacity: 100%
• Kurva Kecepatan Animasi: Ease-In-Out

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:

• Lebar: 90%
• Lebar Maks: 100%

Animasi

Selesaikan pengaturan baris dengan mengubah pengaturan animasi sebagai berikut:

• Gaya Animasi: Memudar
• Penundaan Animasi: 1500ms
• Kurva Kecepatan Animasi: Ease-In-Out

Tambahkan Modul Teks ke Kolom

Masukkan Konten H3

Satu-satunya modul yang kita butuhkan adalah Modul Teks. Masukkan konten kutipan yang disorot H3.

Pengaturan Teks H3

Selesaikan pengaturan modul dengan memodifikasi pengaturan teks H3 sebagai berikut:

• Gaya Huruf H3: Miring
• Ukuran Teks H3: 2.1rem (Desktop), 1.5rem (Tablet), 1.3rem (Ponsel)
• Tinggi Garis H3: 1.5em

Buat Ulang Contoh #2

Pengaturan Bagian

Jarak

Ingin membuat ulang contoh desain kedua? Buka pengaturan bagian dan ubah nilai spasi sebagai berikut:

• Margin Atas: 50px
• Margin Bawah: 50px
• Margin Kiri: -5%
• Margin Kanan: -5%
• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Kemudian, tambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris mengambil lebar seluruh bagian penampung.

• Lebar: 100%
• Lebar Maks: 100%

Tambahkan Modul Teks #1 ke Kolom

Tambah isi

Saatnya menambahkan modul, dimulai dengan Modul Teks pertama. Tambahkan kutipan ke kotak konten.

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks sebagai berikut:

• Font Teks: Tampilan Playfair
• Warna Teks: #eaeaea
• Ukuran Teks: 500px
• Tinggi Baris Teks: 0em

Jarak

Kami juga menambahkan beberapa margin atas.

• Margin Atas: 150px

Animasi

Kemudian, kita akan mengubah pengaturan animasi.

• Gaya Animasi: Balik
• Arah Animasi: Pusat
• Penundaan Animasi: 500ms
• Intensitas Animasi: 200%
• Kurva Kecepatan Animasi: Ease-In-Out

Posisi

Kami akan memastikan kutipan ditempatkan di sudut kiri atas penampung baris dengan mengubah pengaturan posisi juga.

• Posisi: Absolut
• Lokasi: Kiri Atas

Tambahkan Modul Teks #2 ke Kolom

Tambahkan Konten H3

Ke Modul Teks berikutnya. Tambahkan konten kutipan yang disorot H3 ke kotak konten.

Pengaturan Teks H3

Pindah ke tab desain modul dan ubah pengaturan teks H3 sebagai berikut:

• Judul 3 Gaya Font: Miring
• Judul 3 Ukuran Teks: 2.6rem (Desktop), 1.7rem (Tablet), 1.3rem (Ponsel)
• Pos 3 Tinggi Baris: 1.4em

Jarak

Tambahkan beberapa nilai margin khusus di berbagai ukuran layar juga.

• Margin Atas: 150px
• Margin Bawah: 150px
• Margin Kiri: 150px (Desktop), 70px (Tablet), 30px (Telepon)
• Margin Kanan: 150px (Desktop), 70px (Tablet), 30px (Telepon)

Animasi

Dan selesaikan pengaturan modul dengan mengubah pengaturan animasi sebagai berikut:

• Gaya Animasi: Memudar
• Penundaan Animasi: 2000ms
• Kurva Kecepatan Animasi: Ease-In-Out

Tambahkan Modul Teks #3 ke Kolom

Tambah isi

Ke modul berikutnya dan terakhir, yang merupakan Modul Teks lainnya. Tambahkan simbol kutipan ke kotak konten.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks.

• Font Teks: Tampilan Playfair
• Warna Teks: #eaeaea
• Ukuran Teks: 500px
• Tinggi Baris Teks: 0em
• Perataan Teks: Kanan

Animasi

Gunakan pengaturan animasi berikut selanjutnya:

• Gaya Animasi: Balik
• Arah Animasi: Pusat
• Penundaan Animasi: 1000ms
• Intensitas Animasi: 200%
• Kurva Kecepatan Animasi: Ease-In-Out

Posisi

Dan pastikan kutipan ditempatkan di sudut kanan bawah wadah baris.

• Posisi: Absolut
• Lokasi: Kanan Bawah

Simpan Tata Letak Kutipan ke Perpustakaan Divi untuk Digunakan Kembali

Setelah Anda menyelesaikan tata letak kutipan pilihan Anda, pastikan Anda menyimpannya ke Perpustakaan Divi Anda sehingga Anda dapat menggunakannya untuk posting mendatang juga!

Pratinjau

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

Contoh 1

Desktop

Seluler

Contoh #2

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan blok tata letak Divi. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menambahkan kutipan animasi yang disorot di seluruh posting blog Gutenberg Anda. Kemungkinan desain tidak terbatas, tetapi kami telah memberi Anda dua contoh yang dapat Anda mulai. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, 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.