Membuat posting blog yang berharga membutuhkan waktu dan usaha. Selain menemukan topik terbaik untuk ditulis di ceruk pasar Anda, penting juga untuk membuat pembaca tetap terlibat dan memungkinkan mereka dengan cepat menemukan informasi yang mereka cari.
Sekarang, cara yang baik untuk mendekati jenis pengalaman pengguna ini adalah dengan membagikan kotak ringkasan visual di akhir posting blog Anda, tepat sebelum pemikiran akhir.
Dengan blok tata letak baru Divi, Anda sekarang dapat dengan mudah membuat kotak ringkasan dengan opsi bawaan Divi. Dalam tutorial ini, kami akan memandu Anda melalui prosesnya, dan Anda juga akan dapat mengunduh file layout JSON secara gratis!
Ayo mulai menciptakan!
Gunakan templat publikasi untuk paket tema keenam
Unduh Paket Pembuat Tema Keenam
Kotak ringkasan yang akan kita buat ulang sepanjang tutorial ini sangat cocok dengan templat postingan Paket Pembuat Tema Keenam gratis. Aksesartikel blog dan unduh seluruh paket.
Pergi ke Pembuat Tema Divi
Lalu pergi ke Pembuat Tema Divi.
Unduh template publikasi
Klik ikon di sudut kanan atas dan unduh templat kiriman dari Theme Building Pack. Pastikan untuk mengedit setiap perubahan pada pembuat tema sesudahnya.
Buka publikasi Gutenberg yang ada atau buat yang baru
Sekarang, setelah Anda menambahkan template posting yang sesuai, sekarang saatnya membuat kotak ringkasan. Buka atau buat postingan baru menggunakan Gutenberg.
Tambahkan ringkasan judul H2
Menjelang akhir posting blog, kami akan menambahkan judul H2 baru.
Tambahkan blok Divi baru secara online
Selanjutnya kita akan menambahkan blok tata letak Divi baru.
Buat tata letak baru di dalam blok Divi
Setelah Anda menambahkan blok, Anda akan memiliki dua opsi. Pilih untuk membuat tata letak baru.
Pengaturan bagian
Warna latar belakang
Di dalam editor blok tata letak Divi, Anda akan melihat sebuah bagian. Buka bagian ini dan gunakan latar belakang putih untuk itu.
- Warna Latar Belakang: #FFFFFF
jarak
Beralih ke tab desain bagian dan tambahkan margin kustom dan nilai padding.
- Margin atas: 100px
- Margin kiri: -10% (kantor), 0% (tablet dan telepon)
- Margin kanan: -10% (kantor), 0% (tablet dan telepon)
- Lapisan atas: 0px
- Lapisan bawah: 0px
Batas
Tambahkan juga radius batas.
- Kiri bawah: 16px
- Kanan bawah: 16px
Kotak bayangan
Dengan bayangan halus kotak.
- Kekuatan Box Shadow Blur: 60px
- Kekuatan propagasi bayangan kotak: 10px
- Warna bayangan: rgba (0,0,0,0,08)
Tambahkan baris baru
Struktur kolom
Lanjutkan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:
perekat
Tanpa menambahkan modul, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar wadah bagian.
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Menyamakan ketinggian kolom: Ya
- Lebar: 100%
- Lebar maks: 100%
jarak
Kemudian hapus padding atas dan bawah default dari baris.
- Lapisan atas: 0px
- Lapisan bawah: 0px
Pengaturan kolom 1
Warna latar belakang
Kemudian buka pengaturan di kolom 1 dan gunakan warna latar belakang putih untuk ini.
- Warna Latar Belakang: #FFFFFF
jarak
Juga tambahkan nilai isian khusus.
- Lapisan atas: 70px
- Lapisan bawah: 70px
- Padding kiri: 70 px
- Padding kanan: 70px
Kotak bayangan
Lanjutkan dengan menambahkan bayangan kotak halus dengan warna bayangan default dan bayangan yang berbeda.
- Kekuatan Box Shadow Blur: 50px
- Warna bayangan default: rgba (0,0,0,0)
- Warna bayangan melayang: rgba (0,0,0,0,15)
Arahkan skala transformasi
Saat mengarahkan kursor, kami juga ingin mengubah skala kolom sedikit.
- Kanan: 105%
- Rendah: 105%
Arahkan Indeks Z
Lengkapi parameter kolom dengan menambahkan indeks hover z.
- Arahkan Indeks Z: 11
Tambahkan modul teks # 1 ke kolom
Tambahkan nomor ke area konten
Saatnya menambahkan modul, dimulai dengan modul teks pertama. Tambahkan nomor ke kotak isi.
Latar belakang gradien
Kemudian tambahkan latar belakang gradien.
- Warna 1: # ff5e92
- Warna 2: # ffd4b6
- Arah gradien: 165 derajat
Pengaturan teks
Buka tab desain modul dan ubah pengaturan teks sebagai berikut:
- Font teks: Poppins
- Warna teks: #ffffff
- Ukuran teks: 26px
- Penyelarasan teks: pusat
perekat
Kemudian tetapkan lebar dan tinggi.
- Lebar: 150px
- Tinggi: 150px
Batas
Tambahkan juga radius batas.
- Kiri bawah, kanan atas dan kanan bawah: 100 piksel
Elemen utama CSS
Untuk memusatkan teks di wadah kita, kita perlu menambahkan beberapa baris kode CSS ke elemen modul utama di tab lanjutan.
display: flex;align-items: center;justify-content: center;
Posisi
Dan kita akan mengakhiri parameter modul dengan memposisikan ulang modul.
- Posisi: absolut
- Lokasi: kiri atas
Tambahkan modul teks # 2 ke kolom
Tambahkan konten H3
Mari beralih ke modul teks berikutnya. Tambahkan beberapa isi H3 pilihan Anda.
Pengaturan teks H3
Kemudian modifikasi ukuran teks H3 modul.
- Judul 3 Ukuran Teks: 23px
jarak
Ubah juga pengaturan jarak.
- Margin atas: 100px
- Margin bawah: 20px
Tambahkan modul pemisahan ke kolom
jarak penglihatan
Modul selanjutnya yang kita butuhkan adalah modul separasi. Pastikan opsi "Tampilkan Pemisah" diaktifkan.
- Tampilkan pemisah: Ya
Pengaturan saluran
Beralih ke tab desain modul dan ubah pengaturan baris sebagai berikut:
- Warna garis: # ff5e92
- Gaya garis: solid
- Posisi garis: tinggi
perekat
Juga memodifikasi ukuran modul.
- Berat pembagi: 2px
- Lebar: 20%
Tambahkan modul teks # 3 ke kolom
Tambahkan konten
Mari beralih ke modul teks berikutnya dan terakhir. Tambahkan beberapa isi pilih pemilih.
Kolom kloning
Setelah Anda menyelesaikan kolom dan semua modulnya, Anda dapat mengkloning seluruh kolom.
Ubah warna bayangan kotak default
Buka pengaturan di kolom 2 dan ubah warna bayangan default.
- Warna bayangan: rgba (0,0,0,0,06)
Ubah latar belakang gradien modul teks n ° 1
Buka modul teks pertama di 2 kolom berikutnya dan ubah latar belakang gradien.
- Warna 1: # 7e5ce6
- Warna 2: # 25b8ee
Ubah batas modul teks n ° 1
Juga ubah pengaturan batas modul.
- Kiri atas, kiri bawah dan kanan bawah: 100 piksel
Ubah posisi modul teks # 1
Dan reposisi modul di tab lanjutan.
- Lokasi: kanan atas
Ubah warna pemisah
Lanjutkan dengan membuka pengaturan untuk modul pemisah. Ubah warna garis agar sesuai dengan skema warna baru.
- Warna garis: # 7e5ce6
Ubah semua konten
Terakhir, modifikasi seluruh konten modul di kolom 2.
Kloning seluruh bagian dua kali
Setelah Anda menyelesaikan bagian pertama, Anda dapat mengkloningnya dua kali.
Ubah spasi dari bagian duplikat pertama
Buka pengaturan di bagian duplikat pertama dan ubah nilai margin sesuai:
- Margin kiri: -5% (komputer desktop), 0% (tablet dan telepon)
- Margin kanan: -5% (kantor), 0% (tablet dan telepon)
Ubah spasi dari bagian duplikat kedua
Juga buka duplikat kedua, hapus semua nilai margin dan tambahkan margin yang lebih rendah sebagai gantinya.
- Margin bawah: 100px
Ubah semua konten
Akhirnya, modifikasi seluruh konten modul.
Simpan tata letak di perpustakaan Divi untuk digunakan kembali
Jika Anda berencana menggunakan kotak ringkasan ini di postingan blog lainnya, pastikan untuk menyimpannya ke perpustakaan Divi agar Anda dapat mengaksesnya dengan mudah! Itu dia !
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
final pikiran
Dalam artikel ini, kami menunjukkan cara menambahkan kotak ringkasan ke postingan Gutenberg Anda dengan blok tata letak baru Divi. Kotak ringkasan adalah cara visual yang bagus untuk membantu Anda pengunjung untuk menemukan informasi yang mereka cari.
Anda juga dapat mengunduh file JSON untuk tata letak secara gratis! Jika Anda memiliki pertanyaan, silakan tinggalkan komentar di bagian komentar di bawah.
