Cara Membuat Bagian Pahlawan Postingan Blog Dinamis yang Cantik & Menarik dengan Divi

Setiap kali pembaruan baru keluar, kemungkinan desain yang Anda miliki meningkat. Menggabungkan konten dinamis dan opsi hover, misalnya, dapat memberikan hasil yang menakjubkan. Untuk mendemonstrasikannya, kami akan menunjukkan cara membuat 3 bagian pahlawan posting blog dinamis yang menakjubkan menggunakan opsi bawaan Divi saja. Kami akan memandu Anda langkah demi langkah melalui setiap contoh yang akan menginspirasi Anda untuk membuat variasi Anda sendiri juga.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat hasil akhir dari ketiga contoh yang akan kita buat.

Contoh 1

Contoh #2

Contoh #3

Tambahkan Posting Blog Baru

Detail Posting

Hal pertama yang pertama, mulailah dengan membuat posting blog baru. Tambahkan judul, kategori pilihan dan gambar unggulan. Setelah selesai, aktifkan Divi Builder.

Pengaturan Halaman Divi

Sebelum beralih ke Visual Builder, ubah Pengaturan Halaman Divi di sudut kanan atas posting blog baru.

• Tata Letak Halaman: Lebar Penuh
• Judul Postingan: Sembunyikan

Beralih ke Visual Builder

Saatnya beralih ke Visual Builder untuk mulai membuat berbagai contoh!

Membuat Modul

Tambahkan Bagian Baru + Baris Satu Kolom

Sebelum kita menyelami masing-masing contoh secara terpisah, kita akan mulai dengan membuat Modul Teks yang berisi konten dinamis. Sepanjang ketiga contoh, kami akan menggunakan modul premade ini untuk menyelesaikan desain. Setelah Anda menambahkan bagian baru, tambahkan baris baru ke dalamnya menggunakan struktur kolom berikut:

Modul Teks Judul Posting

Pilih Konten Dinamis Judul Posting

Modul dinamis pertama yang kita butuhkan akan berisi Judul Postingan. Tambahkan Modul Teks baru dan pilih Judul Postingan dalam daftar konten dinamis.

Pengaturan Teks

Kemudian, buka pengaturan teks dan buat beberapa perubahan.

• Font Teks: Lato
• Berat Font Teks: Tebal
• Warna Teks: #000000
• Ukuran Teks: 58px (Desktop), 45px (Tablet), 35px (Telepon)
• Tinggi Baris Teks: 1em
• Orientasi Teks: Tengah

Jarak

Ubah juga nilai spasi.

• Margin Bawah: 50px
• Padding Atas: 10px
• Padding Bawah: 10px

Modul Teks Tanggal Penerbitan Posting

Pilih Posting Publish Date Dynamic Content

Modul kedua yang kita perlukan adalah Modul Teks yang berisi Tanggal Penerbitan Postingan. Silakan tambahkan satu dan pilih Post Publish Date di daftar konten dinamis.

Pengaturan Teks

Ubah pengaturan teks modul ini selanjutnya.

• Berat Font Teks: Ringan
• Warna Teks: #000000
• Ukuran Teks: 30px (Desktop), 20px (Tablet), 16px (Ponsel)
• Spasi Huruf Teks: 14px
• Orientasi Teks: Tengah

Jarak

Tambahkan beberapa margin bawah juga.

• Margin Bawah: 50px

Modul Teks Kategori Posting

Pilih Kategori Konten Dinamis

Modul terakhir yang akan kita tambahkan adalah Modul Teks yang berisi konten dinamis Kategori Postingan.

Pengaturan Teks

Buka pengaturan teks dan ubah orientasi teks.

• Orientasi Teks: Tengah

Pengaturan Teks Tautan

Kemudian, terapkan beberapa modifikasi pada pengaturan teks tautan.

• Berat Huruf Tautan: Sangat Tebal
• Gaya Font Tautan: Huruf Besar
• Warna Teks Tautan: #000000
• Ukuran Teks Tautan: 15px
• Jarak Huruf Tautan: 5px

Jarak

Tambahkan padding bawah berikutnya.

• Padding Bawah: 20px

Berbatasan

Dan selesaikan dengan batas bawah yang halus.

• Lebar Batas Bawah: 1px
• Warna Batas Bawah: #000000

Membuat Contoh #1

Tambahkan Bagian Baru

Jarak

Mari kita mulai membuat contoh pertama! Tepat di bawah bagian sebelumnya yang telah Anda buat, lanjutkan dan tambahkan yang baru. Buka pengaturannya dan hapus semua padding kustom default.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru dengan struktur kolom berikut:

Perekat

Buka pengaturan ukuran baris ini dan ubah banyak hal.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Tambahkan beberapa nilai spasi kustom berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px
• Kolom 2 Padding Atas: 130px
• Kolom 2 Padding Bawah: 130px
• Kolom 2 Padding Kiri: 50px
• Kolom 2 Padding Kanan: 50px

Tambahkan Modul Gambar ke Kolom 1

Pilih Konten Dinamis Gambar Unggulan

Lanjutkan dengan menambahkan Modul Gambar ke kolom pertama. Alih-alih mengunggah gambar, tautkan modul ke Gambar Unggulan dinamis.

Default Perbatasan

Kami juga menambahkan batas kanan saat mengarahkan kursor. Untuk melakukannya, pilih lebar batas default berikut terlebih dahulu:

• Lebar Batas Kanan: 0px

Arahkan Perbatasan

Dan tambahkan pengaturan berikut saat mengarahkan kursor:

• Lebar Batas Kanan: 24px
• Warna Tepi Kanan: #FFFFFF

Kotak Bayangan Default

Hal yang sama berlaku untuk bayangan kotak, terapkan pengaturan bayangan kotak default berikut:

• Posisi Vertikal Bayangan Kotak: 0px
• Kekuatan Buram Bayangan Kotak: 0px
• Kekuatan Penyebaran Bayangan Kotak: 80px
• Warna Bayangan: rgba (255,255,255,0)

Arahkan Bayangan Kotak

Dan ubah hal-hal di sekitar saat melayang:

• Posisi Horizontal Bayangan Kotak: 600px
• Posisi Vertikal Bayangan Kotak: 0px
• Kekuatan Buram Bayangan Kotak: 0px
• Kekuatan Penyebaran Bayangan Kotak: 80px
• Warna Bayangan: #E4BAC7

Transisi

Untuk membuat transisi yang mulus, ubah durasi transisi di tab lanjutan.

• Durasi Transisi: 1200ms

Tempatkan Modul Dinamis di Kolom 2

Satu-satunya hal yang harus dilakukan untuk menyelesaikan contoh ini adalah menempatkan modul yang telah kita buat di bagian pertama tutorial ini di kolom kedua.

Membuat Contoh #2

Tambahkan Bagian Baru

Default Pembagi Atas

Ke yang berikutnya! Tambahkan bagian baru dengan pembagi atas berikut:

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: #FFFFFF
• Tinggi Pembagi: 50px
• Pengaturan Pembagi: Di ​​Atas Konten Bagian

Arahkan Pembagi Atas

Ubah ketinggian pembagi saat mengarahkan kursor.

• Tinggi Pembagi: 174px

Jarak

Hapus semua bantalan khusus bagian berikutnya. Ini akan memungkinkan baris dan bagian bertabrakan di salah satu langkah berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Transisi

Untuk membuat transisi pembagi yang mulus, ubah durasi transisi di tab lanjutan.

• Durasi Transisi: 500ms

Tambahkan Baris Baru

Struktur Kolom

Sekarang, lanjutkan dan tambahkan baris ke bagian Anda menggunakan struktur kolom berikut:

Default Warna Latar Belakang

Tambahkan warna latar belakang berikut ke dalamnya:

• Warna Latar Belakang: #FFFFFF

Arahkan Warna Latar Belakang

Ubah warna latar belakang saat melayang.

• Warna Latar Belakang: rgba(255,255,255,0.56)

Gambar Dinamis Gambar Latar Belakang Unggulan

Unggah Gambar Unggulan sebagai gambar latar baris dinamis juga. Setelah Anda melakukannya, ubah campuran gambar latar belakang.

• Campuran Gambar Latar Belakang: Layar

Perekat

Biarkan baris memenuhi seluruh lebar layar dengan mengubah pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Khusus: Ya
• Lebar Talang: 1

Jarak

Dan tambahkan beberapa nilai spasi padding khusus.

• Padding Atas: 200px
• Padding Bawah: 200px
• Padding Kiri: 100px (Desktop), 50px (Tablet), 20px (Ponsel)
• Padding Kanan: 100px (Desktop), 50px (Tablet), 20px (Ponsel)

Transisi

Last but not least, buat transisi yang mulus dengan mengubah durasi transisi.

• Durasi Transisi: 700ms

Tempatkan Modul Dinamis di Kolom

Anda sekarang dapat menempatkan semua modul dinamis di kolom baris dan Anda selesai dengan contoh kedua!

Membuat Contoh #3

Tambahkan Bagian Baru

Gambar Dinamis Gambar Latar Belakang Unggulan

Ke contoh terakhir! Tambahkan bagian baru dan pilih Gambar Unggulan sebagai gambar latar bagian.

Spasi Default

Kemudian, hapus semua padding kustom default dari bagian tersebut.

• Padding Atas: 0px
• Padding Bawah: 0px

Arahkan Spasi

Tambahkan beberapa margin khusus saat mengarahkan kursor untuk membuat efek menyusut.

• Padding Kiri: 150px (Desktop), 50px (Tablet), 30px (Ponsel)
• Padding Kanan: 150px (Desktop), 50px (Tablet), 30px (Ponsel)

Transisi

Ubah durasi transisi juga.

• Durasi Transisi: 500ms

Tambahkan Baris Baru

Struktur Kolom

Setelah Anda selesai mengubah pengaturan bagian, lanjutkan dengan menambahkan baris baru dengan struktur kolom berikut:

Default Warna Latar Belakang

Tambahkan warna latar belakang berikut:

• Warna Latar Belakang: #ffffff

Arahkan Warna Latar Belakang

Ubah warna latar belakang saat melayang.

• Warna Latar Belakang: rgba (255,255,255,0.46)

Latar Belakang Gradien

Tambahkan latar belakang gradien radial juga.

• Warna 1: rgba(41.196.169,0)
• Warna 2: #ffffff
• Tipe Gradien: Radial
• Posisi Awal: 29%
• Posisi Akhir: 29%

Perekat

Ubah pengaturan ukuran baris berikutnya.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 200px
• Padding Bawah: 200px
• Padding Kiri: 100px (Desktop), 50px (Tablet), 20px (Ponsel)
• Padding Kanan: 100px (Desktop), 50px (Tablet), 20px (Ponsel)

Transisi

Last but not least, ubah durasi transisi untuk transisi yang mulus.

• Durasi Transisi: 500ms

Tempatkan Modul Dinamis di Kolom

Silakan dan tempatkan semua modul premade di kolom baris.

Ubah Orientasi Teks Semua Modul

Satu-satunya hal yang perlu Anda ubah tentang modul ini adalah orientasi teks dan selesai!

• Orientasi Teks: Kiri

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat ketiga contoh yang telah kita buat.

Contoh 1

Contoh #2

Contoh #3

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara menggabungkan konten dinamis dengan opsi hover Divi untuk membuat bagian pahlawan posting blog yang menakjubkan. Contoh-contoh ini tidak dapat disangkal akan menginspirasi Anda untuk membuat variasi Anda sendiri dan mempersonalisasi posting blog yang Anda taruh di sana. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!