Apakah Anda ingin melayangkan posting blog di Divi?
Hari ini kami akan menunjukkan kepada Anda cara kreatif untuk menyajikan posting blog sebagai kartu mengambang di Divi. Setiap blog atau situs jaringan harus bertujuan untuk mendapatkan yang terbaik isi menarik dan, mungkin sama pentingnya atau dapat diakses.
Salah satu cara untuk memastikan bahwa isi tetap dapat diakses oleh pengguna adalah dengan membuatnya mengambang di halaman.
Dan bagi para blogger, kami akan menunjukkan cara menyajikan artikel dari blog Anda sebagai kartu mengambang sehingga tetap terlihat saat menggulir halaman.
Mari kita pergi.
penelitian
Berikut adalah ikhtisar singkat dari hasil yang akan kita peroleh di akhir tutorial ini.
Apa yang Anda butuhkan untuk memulai
Sebelum Anda mulai membuat desain ini di Divi, Anda harus melakukan hal berikut:
- Buat halaman baru, beri nama yang relevan dan klik 'Gunakan Divi Builder'
- Pilih opsi Pilih tata letak".
- Temukan dan pilih tata letak 'halaman arahan blogger'.
- Klik pada tombol Pilih tata letak untuk memuatnya ke halaman.
Setelah itu, Anda akan memiliki tata letak yang telah dibuat sebelumnya yang siap digunakan untuk tutorial ini.
Cara Membuat Kartu Mengambang Posting Blog Menggunakan Modul Blog Divi
Sekarang tata letak dimuat di halaman, kami siap untuk membuat kartu mengambang posting blog kami.
Baca juga: Cara Membuat Header Global yang Lengket di Divi
Buat bagian baru di bagian paling bawah tata letak.
Kemudian tambahkan baris satu kolom baru ke bagian tersebut.
Tambahkan modul Blog dan judul ke baris/kolom
Alih-alih membuat modul Blog baru di sini, gulir ke atas dan temukan modul Blog yang ada yang menampilkan tiga posting blog (ada di bagian ketiga dekat tengah halaman). Membuka " Parameter modul lainnya »Dan pilih« Salinan Modul".
Kemudian tempel modul ke baris satu kolom baru yang kita buat di bagian bawah halaman dengan mengklik kanan ikon plus abu-abu dan memilih “ Modul Tempel".
Selanjutnya, kita akan menambahkan judul di atas posting blog kita yang juga akan mengapung di atas kartu blog. Untuk melakukan ini, salin modul Teks yang ada dengan teks judul kecil " Gaya Hidup".
Kemudian tempel modul tepat di atas modul Blog baru yang baru saja kita tambahkan.
Selanjutnya, edit teks judul untuk menggambarkan jenis posting blog yang ingin Anda tampilkan. Dalam contoh ini, kita hanya akan menggunakan " Unggulan".
Menyesuaikan garis dengan posisi tetap dan lebar khusus
Kami ingin mengurangi ukuran posting blog mengambang sehingga tidak memakan terlalu banyak ruang pada halaman ketika mereka memiliki posisi tetap. Ini akan sangat menghibur. Untuk melakukannya, buka pengaturan baris dan perbarui yang berikut ini:
Untuk membuat item melayang, kita perlu memberi garis posisi tetap. Di bawah tab Lanjutan, perbarui yang berikut ini:
- Posisi: Tetap
- Lokasi: Kanan bawah
- Offset Vertikal: 20px
- Offset Horisontal: 20px
- Indeks Z: 12
Modul Blog yang diperbarui dengan konten minimal dan bayangan kotak
Umumnya, modul Blog sudah memiliki tata letak kotak tiga kolom dan gaya bagus yang disertakan dengan paket tata letak yang telah kita pilih. Tapi ada beberapa hal yang perlu kita lakukan.
Lihat juga: Cara membuat tajuk global dengan formulir masuk di Divi
Pertama-tama, kita perlu memperkecil ukuran peta (secara vertikal) dan menghapus beberapa elemen isi.
Untuk melakukan ini, buka pengaturan blog dan sembunyikan semua elemen kecuali gambar unggulan. Ini akan membuat postingan hanya menampilkan gambar dan judul unggulan.
Di bawah tab Gaya, konfigurasikan bayangan kotak sebagai berikut:
- Kotak bayangan: Lihat tangkapan layar
- Kekuatan Buram Bayangan Kotak: 28px
- Warna font subtitle: rgba (0,0,0,0.19)
penelitian
Berikut adalah preview dari hasil yang kita miliki sejauh ini.
Buat baris artikel muncul di hover
Terakhir, kita dapat menambahkan efek hover yang bagus yang mendorong pengguna untuk berinteraksi dengan artikel mengambang.
Baca juga: Cara membuat halaman blog dengan modul Blog di Divi
Buka pengaturan jalur dan opsi pembaruan:
Untuk kantor
- Transformasi: 50%
Untuk status melayang
- Transformasi: 0%
Ini awalnya akan membawa seluruh baris di luar viewport browser sebesar 50%. Setelah pengguna melayang di atas garis, itu benar-benar kembali terlihat.
Sembunyikan baris di ponsel
Kecuali jika Anda ingin menerbitkan satu posting blog, tidak masuk akal untuk melayangkan posting blog tersebut di perangkat seluler. Mungkin akan memakan terlalu banyak ruang dan menyebabkan masalah saat mencoba menggulir.
Lihat juga: Bagaimana cara menambahkan formulir kontak ke tajuk global di Divi
Untuk menyembunyikan peta di ponsel, buka setelan bagian dan matikan visibilitas bagian di ponsel dan tablet.
Hasil akhir
Unduh DIVI Sekarang!!!
Kesimpulan
Jadi ! Kami telah menunjukkan kepada Anda dalam tutorial ini cara kreatif dan orisinal untuk menyajikan posting blog yang ingin Anda soroti.
Jika Anda memiliki masalah atau saran, temukan kami di bagian komentar untuk mendiskusikannya.
Namun, Anda juga bisa berkonsultasi sumber daya kita, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
