Cara Mendesain Postingan Terbaru berdasarkan Tata Letak Kategori dengan Efek Arahkan Arah Keren di Divi
Diterbitkan: 2019-12-18Kita semua terbiasa melihat posting terbaru ditampilkan di situs web. Mereka biasanya dibuat menggunakan widget Posting Terbaru WordPress atau plugin untuk menampilkan artikel terbaru yang diterbitkan di blog. Dan mereka biasanya muncul di halaman blog, di bagian bawah posting, di sidebar, atau sebagai bagian unggulan dari halaman arahan (sesuatu seperti ini).
Untuk tutorial ini, kami akan menunjukkan cara menampilkan postingan terbaru berdasarkan kategori. Hanya dengan menggunakan Divi Builder (dan beberapa modul blog), kita akan membuat bagian yang menampilkan postingan terbaru dari empat kategori berbeda. Posting terbaru berdasarkan bagian kategori ini akan menyertakan tag kategori unik, animasi, dan efek hover – semuanya tanpa plugin.
Coba lihat!
Sneak Peek
Berikut ini sekilas desain dan fungsionalitas Posting Terbaru berdasarkan Tata Letak Kategori yang akan kita buat bersama.
Unduh Posting Terbaru berdasarkan Tata Letak Kategori GRATIS
Untuk mendapatkan desain dari tutorial ini, Anda harus mengunduhnya terlebih dahulu 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 di daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan berlangganan atau menerima email tambahan.
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.
Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!
Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.
Mari kita ke tutorialnya ya?
Apa yang Anda Butuhkan untuk Memulai
Untuk memulai, Anda perlu melakukan hal berikut:
- Jika belum, instal dan aktifkan Tema Divi.
- Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
- Selain itu, fungsionalitas bagian kiriman terbaru bergantung pada kiriman blog aktual di situs Anda dengan kategori yang ditetapkan untuknya. Jadi, pastikan Anda memiliki beberapa pengaturan posting blog tiruan jika Anda menggunakan situs uji.
Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.
Membuat Posting Terbaru berdasarkan Bagian Kategori di Divi
Buat Baris 4 Kolom
Untuk memulai sesuatu di Divi Builder, buat baris 4 kolom.
Membuat Modul Blog 1
Masing-masing dari empat kolom akan menampung modul blog terpisah. Tambahkan modul blog pertama ke kolom 1.
Setiap modul blog akan menampilkan posting terbaru dari situs Anda secara default. Yang akan kita lakukan adalah memilih kategori tertentu untuk disertakan untuk modul blog tertentu. Kemudian kami akan membatasi jumlah postingan menjadi 1 sehingga hanya satu postingan yang akan ditampilkan. Ini akan memberi kita posting blog terbaru untuk kategori itu secara dinamis.
Konten Blog
Perbarui opsi Konten Blog sebagai berikut:
- Jenis Posting: Posting
- Jumlah Postingan: 1
- Termasuk Kategori: Berita (atau salah satu dari Anda sendiri)
- Gunakan Kutipan Postingan: TIDAK
- Panjang Kutipan: 120
Opsi Elemen
Kemudian perbarui opsi elemen sebagai berikut:
- Tampilkan Kategori: TIDAK
- Tampilkan Kutipan: TIDAK (desktop), YA (Hover dan Tablet)
- Tampilkan Pagination: TIDAK
Desain Blog
Kemudian perbarui desain sebagai berikut:
- Warna Latar Belakang (desktop): #ffffff
- Warna Latar Belakang (arahkan kursor): #8ac829
- Judul Font Berat: Semi Tebal
- Judul Font Gaya: TT
- Ukuran Teks Judul: 24px
- Spasi Huruf Judul: 1px
- Tinggi Baris Judul: 1.4em
- Warna Teks Tubuh: #ffffff
- Berat Font Meta: Ringan
- Spasi Huruf Meta: 3px
- Tinggi Min: 450 piksel (desktop), otomatis (tablet)
- Padding: 5% atas, 5% bawah, 5% kiri, 5% kanan
- Bayangan Kotak: Lihat Tangkapan Layar
- Gaya Animasi: Zoom
Itu menangani desain modul blog pertama kami. Sekarang kita perlu membuat tag kategori kustom kita.
Membuat Tag Kategori 1
Untuk membuat tag, tambahkan modul teks baru di bawah modul blog, lalu seret ke atas modul blog.
Konten Teks
Perbarui konten isi dengan nama kategori yang Anda pilih untuk modul blog. Dalam contoh saya, saya menampilkan posting terbaru dari kategori Berita jadi saya akan menambahkan kata "Berita" ke konten isi.
Merancang Tag Kategori
Di bawah pengaturan desain teks, perbarui yang berikut ini:
- Warna Latar Belakang: #8ac829
- Berat Font Teks: Sangat Tebal
- Warna Teks Teks: #ffffff
- Perataan Teks: tengah
- Lebar: 120px
- Margin: 80px atas, -80px bawah
- Padding: 10px atas, 10px bawah
- Gaya Animasi: Memudar
- Penundaan Animasi: 1000ms
- Indeks Z: 1
Karena kita menggunakan margin negatif untuk meletakkan tag di atas kartu blog, kita perlu mengatur indeks z ke 1 agar tag tetap berada di atas modul blog.
Sekarang setelah satu posting selesai, kita dapat menggunakan mode tampilan wireframe dan menyalin modul tersebut ke kolom lainnya.
Salin teks dan modul blog di kolom 1 dan rekatkan ke kolom 2,3, dan 4 sehingga Anda memiliki modul yang sama persis di setiap kolom.
Untuk setiap modul blog duplikat, kita perlu memberinya kategori blog baru dan warna latar belakang. Dan untuk setiap tag kategori duplikat, kita perlu memperbarui nama kategori agar sesuai dengan kategori yang dipilih untuk modul blog dan kemudian memperbarui warna latar belakang agar sesuai dengan warna latar belakang hover modul blog.
Perbarui Modul di Kolom 2
Tetap dalam tampilan wireframe, buka pengaturan untuk modul blog di kolom 2, dan perbarui yang berikut:
- Termasuk Kategori: Bisnis (atau milik Anda sendiri)
- Warna Latar Belakang (arahkan kursor): #f64937
Kemudian perbarui pengaturan untuk modul teks di kolom 2 sebagai berikut:
- Tubuh: “Bisnis”
- Warna Latar Belakang: #f64937
Perbarui Modul di Kolom 3
Kemudian buka pengaturan untuk modul blog di kolom 3, dan perbarui yang berikut:
- Termasuk Kategori: Uang (atau milik Anda sendiri)
- Warna Latar Belakang (arahkan kursor): #6529c7
Kemudian perbarui pengaturan untuk modul teks di kolom 3 sebagai berikut:
- Tubuh: “Uang”
- Warna Latar Belakang: #6529c7
Perbarui Modul di Kolom 4
Kemudian buka pengaturan untuk modul blog di kolom 4, dan perbarui yang berikut:
- Termasuk Kategori: Pelatihan (atau Anda sendiri)
- Warna Latar Belakang (arahkan kursor): #f17809
Kemudian perbarui pengaturan untuk modul teks di kolom 4 sebagai berikut:
- Tubuh: “Pelatihan”
- Warna Latar Belakang: #f17809
Memperbarui Pengaturan Baris
Ada beberapa penyesuaian yang perlu kita lakukan pada baris kita, termasuk tinggi yang ditetapkan dan lebar talang khusus. Perbarui pengaturan baris berikut:
- Gunakan Lebar Talang Kustom: YA
- Lebar Talang: 2
- Lebar: 94%
- Lebar Maks: 1400px
- Tinggi: 540 piksel (desktop), otomatis (tablet)
- Padding: 0px atas, 0px bawah
Kami menyetel tinggi baris ke 540px di desktop agar baris tidak meluas dan memindahkan konten lain di halaman saat mengarahkan kursor ke kartu blog. Pastikan untuk menyetel ketinggian ke otomatis di tablet sehingga Anda tidak akan menyembunyikan konten apa pun.
Memperbarui Pengaturan untuk Setiap Kolom
Untuk memberikan efek hover pada posting blog terbaru yang diterapkan ke kedua modul secara bersamaan, kita dapat menambahkan efek hover ke kolom yang berisi dua modul yang membentuk posting blog. Buka pengaturan untuk setiap kolom dan perbarui yang berikut:
- Skala Transform (Hover): 115%
Kemudian tambahkan CSS khusus berikut ke elemen utama hanya pada tampilan tablet:
transform: none !important
Cuplikan kecil ini akan menonaktifkan efek hover skala transformasi untuk seluler.
Sekarang setiap kali posting terbaru siap dengan tag kategori yang sesuai dan warna latar belakang yang cocok yang ditampilkan saat mengarahkan kursor ke kartu. Juga, kartu akan menjadi lebih besar dan menunjukkan kutipan saat melayang juga.
Memperbarui Pengaturan Bagian
Untuk bagiannya, mari berikan gradien latar belakang baru dan beberapa padding. Buka pengaturan bagian dan perbarui yang berikut ini:
- Warna Kiri Gradien Latar Belakang: #6529c7
- Warna Kanan Gradien Latar Belakang: #f64937
- Arah Gradien: 270deg
- Padding: 10vw atas, 10vw bawah
Hasil Akhir
Itu dia! Mari kita lihat hasil akhirnya. Gambar ini menyertakan judul yang dapat dengan mudah ditambahkan untuk melengkapi desain.
Dan inilah animasi dan efek hover.
Pikiran Akhir
Membuat Posting Terbaru berdasarkan Tata Letak Kategori benar-benar merupakan proses yang mudah setelah Anda sedikit berpikir di luar kotak. Yang perlu Anda lakukan hanyalah membuat modul blog untuk setiap kategori yang ingin Anda tampilkan. Kemudian batasi modul itu hanya untuk menampilkan posting terbaru untuk kategori tertentu. Setelah itu, Anda memiliki kekuatan Divi di sisi Anda untuk mengurus desain.
Tata letak ini dapat digunakan di mana saja di situs Anda, termasuk Template Pembuat Tema. Jadi jangan ragu untuk mengimpornya di mana pun Anda membutuhkannya menggunakan opsi portabilitas. Saya harap ini berguna untuk proyek Anda berikutnya atau setidaknya memberi Anda sedikit inspirasi untuk membuat roda itu berputar untuk desain Divi yang lebih baik.
Saya berharap untuk mendengar dari Anda di komentar.
Bersulang!