Cara menggunakan Builder Loop Divi 5 Modul Pagination

Daftar statis konten posting baik -baik saja jika Anda menunjukkan set posting tersebut yang dipilih dan terbatas. Namun seringkali, Anda ingin pengguna mengakses lebih banyak konten daripada acara loop asli Anda. Anda ingin memutuskan berapa banyak beban konten pada awalnya dan memberi pembaca cara yang jelas untuk bergerak di antara batch. Di situlah pembangun loop Divi 5 dan modul pagination menjadi pasangan yang sempurna.

Posting ini akan memandu Anda melalui cara kerja masing -masing, kemudian menunjukkan kepada Anda cara menghubungkannya. Pada akhirnya, Anda akan tahu cara membangun tata letak yang dililitkan dengan pagination yang tepat.

Temui Pembuat Loop Divi 5

Loop Builder adalah salah satu peningkatan terbesar Divi 5. Ini memberi Anda kebebasan bahwa modul blog lama tidak pernah bisa. Elemen apa pun dapat menjadi wadah "looped". Itu berarti Divi secara otomatis akan mengulanginya untuk setiap posting, produk, atau jenis posting khusus yang cocok dengan kueri Anda.

Alih-alih terjebak dengan daftar posting yang dirancang sebelumnya, Anda mendesain satu item "templat" sebagai loop. Divi menggunakannya untuk setiap hasil, bertukar konten dinamis dari kueri loop. Ini bisa jadi:

• Judul ditarik dari data post
• Gambar unggulan
• Bidang khusus
• Tautan ke posting atau produk lengkap

Anda dapat menggunakan modul apa pun untuk menampilkan data ini, bukan hanya yang spesifik blog. Ingin modul uraian mewah yang menunjukkan daftar kursus terbaru Anda? Selesai. Butuh tata letak kartu produk khusus untuk item WooCommerce? Juga selesai.

Ini fleksibel karena Anda sedang membangun desain dan struktur konten sendiri. Divi menangani pengulangan.

Beralih dari modul blog ke pembangun loop berarti pindah dari templat standar ke sistem tata letak yang sepenuhnya dapat disesuaikan. Saya sangat menikmati membangunnya, dan saya tahu Anda juga akan!

Temui Modul Pagination

Pagination adalah cara mewah untuk mengatakan "membagi hasil menjadi halaman." Alih -alih membuang semua item pada satu halaman, Anda memecahnya menjadi set yang lebih kecil. Itu membantu dengan:

• Waktu pemuatan halaman
• Keterbacaan
• Scanability

Modul pagination di Divi 5 melakukan hal itu, tetapi dengan beberapa integrasi cerdas. Ini tidak terikat hanya pada posting blog. Sebaliknya, dapat terhubung ke loop apa pun yang telah Anda bangun di halaman.

Ini bekerja dengan menambahkan dua elemen navigasi - tautannya yang ternak dan berikutnya - label yang dapat Anda sesuaikan. Jika ada item yang lebih tua melewati set saat ini, "lebih tua" (atau teks yang Anda pilih) akan aktif. Jika ada item yang lebih baru, "lebih baru" akan aktif.

Membangun Tata Letak Loop + Pagination

Mari kita jalankan melalui pengaturan lengkap. Contoh ini mengasumsikan Anda ingin loop khusus dengan pagination di bawahnya. Inilah tata letak fleksibel yang saya buat yang akan menampilkan loop kami. Anda dapat mengunduh tata letak yang sepenuhnya dibangun di bawah ini.

Perhatikan bahwa kartu diatur ke ~ 50% lebar dan fleksibel, jadi ketika kartu looped berada di baris fleksibel dengan sendirinya, itu akan menjadi lebar penuh di dalam wadahnya.

Langkah 1: Buat wadah loop

Tambahkan bagian ke halaman Anda. Di dalamnya, tambahkan modul yang ingin Anda ulangi. Ini bisa berupa modul tunggal (seperti uraian) atau tata letak beberapa modul yang lebih kompleks dalam kolom atau grup.

Dengan wadah Anda dipilih, buka pengaturannya dan aktifkan opsi Loop .

Pilih sumber data Anda. Ini adalah "kueri" loop yang akan dijalankan.

Pertama, pilih jenis kueri. Bergantung pada konfigurasi situs web Anda, Anda mungkin melihat opsi ini:

• Jenis posting (seperti posting blog Anda atau jenis posting khusus seperti 'proyek')
• Ketentuan (kategori dan taksonomi)
• Pengguna (mengembalikan daftar pengguna situs, seperti penulis)
• Bidang Repeater (bidang khusus yang dibuat oleh plugin untuk membuat loop di dalam loop)

Selanjutnya, tergantung pada jenis kueri apa yang Anda pilih di atas, Anda akan mendapatkan kesempatan untuk lebih spesifik. Memilih "Tipe Posting" mungkin memungkinkan Anda untuk menggunakan tipe posting seperti:

• Posting Blog
• Proyek
• Produk
• Apapun CPT yang Anda buat sendiri untuk diri sendiri

Dari sana, Anda bisa menjadi lebih spesifik dengan apa yang muncul di loop Anda. Anda bisa:

• Sertakan item dengan kategori atau tag tertentu
• Mengecualikan item dengan kategori atau tag tertentu
• Sertakan item tertentu (berdasarkan ID pos)
• Kecualikan item tertentu (berdasarkan ID pos)
• Bangun kueri meta Anda sendiri (berguna untuk membuat inklusi/pengecualian berdasarkan data bidang khusus)
• Atur urutan kueri yang cocok (seperti abjad dan turun)
• Item per halaman mengontrol berapa banyak yang muncul di loop
• Posting Offset, jika Anda ingin memulai loop Anda nanti dalam siklus
• Abaikan posting lengket

Beginilah contoh kami terlihat pada titik ini. Kami membuat loop dan menugaskannya ke jenis posting posting blog kami. Saya mengatur batas tampilan ke 3.

Sekarang, kita harus menetapkan berbagai bidang teks dan item yang ingin kita hyperlink dengan konten loop dinamis.

Langkah 2: Tambahkan konten dinamis di dalam loop

Tugas kami berikutnya adalah mengklik ke masing -masing modul loop dan mengganti teks atau gambar statis dengan bidang konten dinamis. Misalnya:

• Dalam modul teks, pilih "Posting Judul" dari pemetik konten dinamis
• Dalam modul gambar, Anda dapat memilih "Fitur Gambar"
• Dalam modul tombol, atur tautan ke "Posting URL"
• Di seluruh wadah yang diulang, juga atur tautan ke "Posting URL"

Ini memberitahu Divi untuk menarik konten yang tepat untuk setiap item yang dililitkan.

Ingat - apa pun di dalam loop diulang untuk setiap hasil. Simpan konten non-loop (seperti judul, iklan, atau CTA) di luarnya. Jika Anda memiliki sepotong konten dalam loop yang tidak terhubung dengan data dinamis, setiap item dalam loop akan menampilkan adanya adanya (seperti teks "baca →" di kanan bawah kartu contoh).

Langkah 3: Tambahkan modul pagination

Di bawah bagian loop Anda, tambahkan baris baru. Masukkan modul pagination . Dalam pengaturan modul, cari bidang target . Gunakan untuk memilih loop Anda dari daftar dropdown loop pada halaman. Ini menghubungkan kontrol pagination ke loop spesifik itu. Kiat Pro: Jika Anda menggunakan label admin, lebih mudah untuk memilih target yang tepat. Ini berlaku untuk interaksi juga.

Kustomisasi label untuk "sebelumnya" dan "selanjutnya." Anda dapat menggunakan "posting lama / posting baru," "back / forward," atau bahkan "← / →" untuk gaya minimal.

Kuncinya adalah bahwa modul pagination harus duduk di luar loop yang dikendalikannya. Itu dan memastikan itu ditugaskan ke target yang tepat (jika Anda memiliki beberapa loop pada halaman/templat yang sama).

Langkah 4: Uji interaksi

Simpan halaman Anda dan pratinjau. Klik "Lebih Lama" untuk pergi ke set item loop berikutnya.

Perhatikan bagaimana URL berubah dengan parameter kueri yang mengidentifikasi halaman loop. Perhatikan juga bahwa hanya konten loop yang mengocok/perubahan - header, footer, dan bilah samping harus tetap sama.

Dapatkan Tata Letak Loop Ini

Ingin membedah tata letak ini dan melihat bagaimana hal -hal dibangun untuk diri sendiri? Unduh di sini!

Setelah Anda membuka ritsleting folder Anda, navigasikan ke perpustakaan divi Anda untuk mengunggah file. Setelah diunggah, Anda akan dapat menambahkan bagian ke halaman apa pun yang sedang Anda kerjakan.

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!

Nikmati Divi yang Lebih Dinamis

Pembangun loop Divi 5 dan modul pagination adalah lompatan besar ke depan dalam fleksibilitas. Loop Builder membebaskan Anda dari desain kaku modul yang lebih lama, memungkinkan Anda membangun tata letak berulang Anda sendiri dengan konten dinamis. Modul pagination membuat tata letak tersebut cepat dan dapat dikelola dengan memecahnya menjadi potongan yang ramah pengguna.

Loop Builder dan Modul Pagination, dipasangkan dengan fitur Divi 5 baru lainnya (Flexbox, Interactions, HSL Color Controls), sama kuatnya dengan sebelumnya. Anda dapat membuat beberapa desain halaman yang luar biasa dengan semua ini.

Setelah Anda membangun loop paginated pertama Anda, Anda akan melihat betapa mudahnya menggunakan kembali pendekatan di seluruh blog, kisi produk, portofolio, atau jenis konten apa pun yang perlu Anda atur.