Cara membuat loop posting blog khusus dengan pembangun loop divi 5

Merek Anda tidak boleh dibatasi oleh tata letak statis, jadi kami bertujuan untuk memberi Anda fleksibilitas penuh karena Divi 5 terus berkembang. Pembuat loop baru Divi 5 adalah langkah yang bagus ke arah itu; Ini memungkinkan Anda mendesain item sekali dan lilingkan ke dalam kisi -kisi dinamis atau daftar.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara mengatur loop posting blog khusus. Kami akan merancang daftar, menghubungkan bidang dinamis, mengatur kueri, dan memperbaiki tata letak untuk kotak atau daftar yang bersih. Ayo sampai ke sana!

Apa pembangun loop divi 5

Dengan pembangun loop Divi 5, Anda merancang tata letak "kartu" tunggal di pembangun visual menggunakan modul divi sebanyak yang Anda inginkan, kemudian divi loop untuk setiap item yang Anda pilih untuk ditampilkan.

Berlangganan saluran YouTube kami

Aktifkan elemen loop pada kolom, atur kueri (posting, jenis posting khusus seperti proyek, istilah, atau pengguna), dan memetakan bidang dinamis seperti judul, gambar unggulan, kategori, bidang khusus, dan tombol. Anda dapat memesan ulang elemen, mengontrol jarak, dan membiarkan semuanya mewarisi gaya global Anda.

Hasilnya adalah daftar yang responsif dan dapat digunakan kembali yang cocok dengan sistem Anda tanpa perlu plugin tambahan atau kode khusus.

Bagaimana pembangun loop bekerja

Anda dapat menyalakan mode loop di bagian mana pun, baris, kolom, atau modul dengan membuka tab kontennya dan mengaktifkan loop.

Dari titik itu, Divi secara otomatis mengulangi elemen untuk setiap posting yang cocok dengan pengaturan Anda.

Di sinilah kontrol sebenarnya masuk. Di pengaturan loop, Anda dapat:

• Jenis kueri: Pilih antara kueri posting dasar atau kueri meta, penyaringan berdasarkan kategori, tag, bidang khusus, atau metadata lainnya.
• Jenis posting: Pilih jenis konten yang akan ditampilkan, dari posting blog ke produk hingga jenis posting khusus.
• Hanya sertakan posting dengan istilah spesifik: Tampilkan hanya posting yang cocok dengan kategori tertentu, tag, atau istilah taksonomi lainnya.
• Kecualikan posting dengan istilah spesifik: Hapus posting yang cocok dengan kategori, tag, atau istilah yang dipilih.
• Hanya sertakan posting spesifik: Pilih posting individual untuk dimasukkan.
• Kecualikan posting spesifik: Sembunyikan posting individual yang tidak Anda inginkan di loop.
• Meta Query: Tambahkan kondisi bidang khusus untuk mengontrol apa yang muncul.
• Pesan oleh: Pilih jika hasilnya diurutkan berdasarkan tanggal, judul, pesanan menu, atau nilai bidang khusus.
• Pesanan: Tunjukkan hasil dalam pesanan naik atau turun.
• Posting per halaman: Putuskan berapa banyak posting yang ditampilkan sebelum pagination.
• POST OFFSET: Lewati sejumlah posting dari awal, berguna untuk menghindari duplikat dengan bagian unggulan.
• Abaikan posting Sticky: Pilih apakah posting lengket mendapatkan prioritas atau diperlakukan seperti posting normal.

Setelah Anda menentukan kueri, Divi secara otomatis mengisi setiap kartu pos dengan konten yang tepat sambil menjaga tata letak dan gaya identik. Anda sepenuhnya fokus pada penampilan kartu, dan Divi menangani populasi dan pengulangan. Dengan semua yang dikendalikan dari satu panel, beberapa pengaturan adalah semua yang diperlukan untuk menjaga daftar blog Anda diperbarui tanpa pengeditan manual.

Pelajari segalanya tentang pembangun loop Divi 5

Membuat loop posting blog khusus dengan Divi 5

Membangun loop posting blog khusus dengan Loop Builder memiliki dua bagian. Pertama, Anda mendesain tata letak kartu posting, memilih dengan tepat konten apa yang muncul dan bagaimana tampilannya. Kemudian, Anda menempatkan desain itu di dalam loop sehingga Divi mengulanginya secara otomatis untuk setiap posting yang ingin Anda tunjukkan.

Kami akan melewatinya langkah demi langkah, dimulai dengan tata letak kartu dan kemudian menyiapkan loop.

Sebelum Anda mulai

Jika Anda pindah dari modul blog ke Loop Builder dan sudah memiliki halaman daftar blog, Anda dapat melompat untuk membuat tata letak loop Anda. Jika tidak, inilah pengaturan cepatnya:

1. Tambahkan halaman blog

Dari dasbor WordPress Anda, buka halaman> Tambahkan yang baru , sebut saja "Blog," dan publikasikannya.

Halaman ini akan menjadi hub utama untuk posting Anda.

2. Atur halaman blog Anda di Pengaturan WordPress

Di Pengaturan> Membaca , pilih halaman statis . Tetapkan beranda Anda ke rumah dan halaman blog baru Anda ke halaman posting.

Ini hanya diperlukan jika Anda menggunakan beranda terpisah dan halaman daftar blog.

3. Buat template pembangun tema

Selanjutnya, Anda akan membuat templat baru untuk halaman daftar blog Anda. Jika Anda sudah memilikinya, Anda dapat menyesuaikannya. Pastikan Anda menggunakan versi Divi 5 terbaru untuk mengakses Loop Builder.

Di Divi> Tema Builder , klik Tambahkan Template Baru> Bangun Template Baru.

Tetapkan ke halaman blog Anda dan klik Buat Template.

Untuk merancang halaman daftar posting blog Anda, klik Tambahkan Badan Kustom> Bangun Badan Kustom.

Sekarang Anda akan memasuki pembangun divi, di mana kami akan mulai membangun tata letak loop.

1. Impor tata letak

Dimulai dengan tata letak dapat menghemat banyak waktu dan membantu Anda menjaga desain yang konsisten sejak awal. Untuk tutorial ini, saya menggunakan tata letak halaman blog agensi pemasaran untuk branding.

Anda dapat memilih yang sama atau mengimpor tata letak apa pun yang memberi Anda dasar yang baik untuk bekerja. Setelah berada di template Anda, Anda akan memiliki struktur siap pakai, Anda dapat beradaptasi dengan kebutuhan Anda alih-alih membangun semuanya dari awal.

2. Desain satu kartu posting blog

Di sinilah fleksibilitas Loop Builder benar -benar muncul. Alih -alih dikunci ke tata letak tetap modul blog, Anda memutuskan dengan tepat apa yang terjadi pada kartu posting Anda dan bagaimana itu diatur.

Tambahkan bagian baru ke template Anda. Anda dapat memilih dari struktur yang dirancang sebelumnya atau membuat sendiri menggunakan opsi satu kolom.

Untuk contoh ini, mari kita pilih bagian struktur baris tiga kolom .

Di kolom pertama, kami akan membuat kartu posting kami. Kami akan menggunakan grup modul untuk menampung semua elemen.

Kemudian tambahkan modul gambar untuk gambar unggulan, modul heading untuk judul posting, dan modul teks untuk kutipan. Kami juga akan menambahkan informasi meta dan tombol baca lebih banyak sehingga pengunjung dapat mengklik ke posting lengkap.

Setelah struktur dasar ada, sesuaikan desain kartu sehingga cocok dengan merek Anda. Tweak warna, font, jarak, dan detail visual unik apa pun yang menjadikannya milik Anda.

3. Aktifkan pembungkus baris

Untuk memastikan kartu Anda ditampilkan dengan rapi dalam barisan di berbagai ukuran layar, Anda ingin mengaktifkan pembungkus fleksibel. Pilih baris utama dan buka tab Desain .

Pergi ke tata letak. Pastikan gaya tata letak diatur untuk melenturkan.

Aktifkan pembungkus tata letak sehingga kartu dapat pindah ke jalur baru saat dibutuhkan, lalu pilih perataan pembungkus yang paling sesuai dengan desain Anda.

4. Nyalakan Loop

Sekarang datang langkah yang membuat semuanya otomatis. Pilih kolom kartu.

Kemudian, nyalakan opsi loop di bawah tab Konten . Setelah Loop diaktifkan, Divi akan mengulangi desain kartu Anda untuk setiap posting yang memenuhi pengaturan kueri Anda.

Untuk tata letak ini, saya sudah mengatur:

• Jenis posting: Posting
• Posting per halaman: 10
• Pesan oleh: Tanggal
• Pesanan: Turun (yang terbaru pertama)
• POST Offset: 0 (Tampilkan semua mulai dari yang terbaru)
• Abaikan posting lengket: ya

Penyesuaian kecil ini memastikan kisi -kisi menampilkan dengan tepat posting yang Anda inginkan, sesuai urutan yang Anda inginkan. Anda dapat mengubah nilai -nilai ini kapan saja untuk mengadaptasi tata letak dengan kebutuhan yang berbeda.

5. Tambahkan Konten Dinamis

Langkah terakhir untuk menghidupkan loop adalah menghubungkan setiap modul di kartu Anda ke data pasca hidup. Inilah yang mengubah kartu statis menjadi daftar otomatis yang selalu meningkat. Misalnya:

• Tautkan modul gambar ke gambar unggulan posting.
• Tautkan modul heading ke judul posting.
• Tautkan modul teks ke kutipan posting.
• Hubungkan tombol Baca lebih lanjut ke URL POST.

Saat diulang, Divi akan mengganti konten placeholder dengan data yang benar untuk setiap posting di loop.

Untuk mengatur gambar yang ditampilkan, buka modul gambar, arahkan kursor ke opsi gambar, dan klik ikon konten dinamis . Pilih gambar unggulan Loop dan semua gambar yang relevan akan terisi secara instan.

Ulangi ini untuk judul posting, tanggal yang diterbitkan, kutipan, dan bidang lain yang ingin Anda tampilkan.

Saat Anda mengklik ikon konten dinamis untuk sebuah modul, Anda akan melihat berbagai opsi spesifik loop. Anda tidak terbatas pada judul dan gambar; Anda juga dapat menampilkan tanggal publikasi, tanggal yang dimodifikasi, nama penulis, jumlah komentar, kategori, tag, dan bahkan bidang khusus.

Ini berarti kartu pos Anda bisa minim atau sedetail yang Anda inginkan. Bangun kisi yang bersih dan berfokus pada gambar, tata letak yang kaya konten, atau bahkan menyoroti bidang tipe pos kustom niche. Desain sekali, dan Divi membuatnya akurat dan konsisten di seluruh loop.

6. Simpan Template dan Pratinjau Anda

Setelah semuanya terlihat benar, buat tweak terakhir dan simpan perubahan baik di Divi Builder dan Tema Builder.

Pratinjau halaman Anda untuk melihat loop beraksi. Inilah halaman daftar blog yang sudah selesai:

Modul blog memiliki batas, pembangun loop tidak

Modul blog berfungsi dengan baik, jadi mengapa kita mendorong pembangun loop? Karena "baik" berarti diperbaiki. Modul blog mengunci Anda ke dalam templatnya, tetapi pembangun loop memberi Anda kanvas kosong. Anda memilih tata letak, pesanan, gaya, dan divi loop secara otomatis.

Itulah pergeseran sebenarnya: Anda tidak menyesuaikan template orang lain, Anda merancang sendiri. Mari kita praktikkan sekali lagi dan rancang tata letak yang berbeda dari struktur modul blog yang khas.

Pertama, tambahkan baris dan bagian satu kolom. Sesuaikan ukuran dan pastikan pembungkus fleksibel dan fleksibel diaktifkan untuk baris.

Baris ini akan berisi kartu blog Anda. Sekarang, tambahkan baris bersarang di dalam kolom untuk membuat struktur kartu Anda, dengan gambar di sebelah kiri dan metadata pos di sebelah kanan.

Rancang struktur Anda persis seperti yang Anda inginkan, tidak perlu mengikuti urutan modul blog. Biarkan kolom kiri kosong untuk saat ini. Kami akan menambahkan gambar unggulan sebagai gambar latar belakang kolom.

Kustomisasi kartu daftar blog Anda.

Anda juga dapat memodifikasi celah vertikal grup modul Anda di kolom kanan dalam desain> tata letak> opsi celah vertikal .

Selanjutnya, kami mengaktifkan opsi loop . Pilih kolom pertama dari baris induk.

Sekali lagi, kami mengulang konten dinamis. Dimulai dengan gambar, buka opsi latar belakang kolom kiri, dan sisanya akan sama.

Ini adalah loop blog bergaya daftar Anda. Sekarang, jika Anda ingin mengubah ini menjadi kisi, cukup ubah lebar kolom. Karena kami memiliki pembungkus fleksibel yang diaktifkan di barisan, kartu akan dibungkus sendiri saat kami mengubah ukurannya.

Jika ini membuat gambar Anda terlalu besar, Anda dapat menghapus kutipan, mengubah struktur kolom baris, dan bahkan menyesuaikan celah horizontal menjadi nol.

Dan seperti itu kisi -kisi Anda juga siap.

Contoh ini hanya sekilas tentang apa yang dimungkinkan oleh pembangun loop. Takeaway yang sebenarnya adalah bahwa Anda tidak terbatas pada beberapa tata letak yang telah ditetapkan lagi. Setiap bagian dari kartu pos adalah milik Anda untuk mengatur, gaya, dan reimagine, dan Divi menangani mengulanginya secara otomatis. Fleksibilitas itulah yang mengubah daftar blog sederhana menjadi sesuatu yang terasa dirancang untuk situs Anda.

Gunakan modul pagination

Jika Anda membatasi posting per halaman dalam permintaan loop Anda, Anda mungkin ingin cara bagi pembaca untuk melihat sisanya. Tambahkan modul pagination di bawah jaringan Anda dan atur loop targetnya ke elemen tempat Anda mengaktifkan loop. Untuk walkthrough lengkap, lihat Cara Menggunakan Pembangun Loop Divi 5 & Modul Pagination Together: Baca tutorial.

Unduh Template Blog

Jika Anda ingin bereksperimen dengan kisi -kisi di dalam templat blog, unduh templat yang digunakan dalam tutorial di bawah ini. Untuk mengimpor ini, navigasikan ke pembangun tema divi Anda. Anda dapat mengimpor ini menggunakan ikon impor/ekspor di sudut kanan.

Unduh file

Unduh secara gratis

Bergabunglah dengan The Divi Newsletter dan kami akan mengirimi Anda email salinan paket tata letak halaman pendaratan Ultimate Divi, ditambah banyak sumber daya divi yang luar biasa dan gratis, tips, dan trik. Ikuti bersama 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 mendapatkan akses ke paket tata letak divi mingguan gratis!

Bangun Loop Posting Blog Kustom Anda di Divi 5 Hari Ini

Sebelum pembangun loop Divi 5, membuat loop posting blog yang benar -benar khusus sering berarti bergulat dengan templat yang kaku atau menulis kode khusus untuk setiap perubahan kecil. Sekarang, ini adalah proses visual dari awal hingga akhir. Anda merancang kartu sekali, menautkan modulnya ke data posting langsung, dan membiarkan Divi menangani sisanya.

Jika Anda telah bekerja di sekitar batas modul blog, Loop Builder adalah peningkatan yang telah Anda tunggu. Cobalah di proyek Anda berikutnya dan lihat betapa lebih mudahnya membuat blog (atau produk, acara, atau daftar) yang terlihat persis seperti yang Anda inginkan!