Ingin menampilkan konten dinamis seperti posting blog, produk, atau jenis posting khusus dalam tata letak yang sepenuhnya khusus - tanpa menyentuh baris kode? Modul loop di Beaver Builder memungkinkan.

Diperkenalkan di Beaver Themer 1.5 dan Beaver Builder 2.9, Modul Loop adalah alat yang ampuh yang memungkinkan Anda merancang tata letak yang berulang menggunakan modul Standard Beaver Builder. Apakah Anda sedang membangun blog, portofolio, daftar acara, atau toko WooCommerce, modul ini memberi Anda kontrol desain penuh dengan konten dinamis pada intinya.

Dalam panduan ini, kami akan memecah cara menggunakan modul loop untuk membangun tata letak modern dan dinamis yang meningkatkan desain, kinerja, dan fleksibilitas situs Anda.

Apa itu modul loop?

Modul loop adalah wadah fleksibel yang meluncur melalui konten yang ditanya dan menampilkannya menggunakan tata letak yang Anda buat. Alih -alih mengandalkan templat WordPress default, Anda dapat membangun desain khusus Anda sendiri - lengkap dengan modul, koneksi lapangan, dan logika bersyarat.

Modul loop tidak terbatas pada posting blog atau jenis posting khusus - itu dapat menangani berbagai konten dinamis. Berikut adalah beberapa cara kuat Anda dapat menggunakannya untuk membuat tata letak khusus dan meningkatkan situs Anda:

• Kategori atau Tag WooCommerce - Menampilkan Kategori Produk Terkait atau Tag pada Halaman Produk Individual Dengan Menggunakan Sumber Permintaan Taksonomi.
• Custom Content Grid - Tampilkan konten dinamis seperti anggota tim atau testimonial menggunakan sumber permintaan repeater ACF di halaman seperti "Meet the Team" atau daftar layanan.
• Posting Terkait - Fitur Konten Blog yang Relevan Pada Halaman Posting Tunggal dengan Sumber Permintaan Hubungan ACF, Membantu Meningkatkan Keterlibatan dan Mengurangi Tarif Bounce.

Setiap item dalam loop menggunakan desain khusus Anda dan menarik data dinamis seperti judul posting, gambar unggulan, kutipan, dan banyak lagi.

Fitur utama dari modul loop

Modul loop dikemas dengan kemampuan yang membuatnya ideal untuk membangun halaman yang fleksibel dan kaya konten:

• Konten dinamis kueri dari jenis pos apa pun (standar atau kustom)
• Gunakan modul Builder Beaver di dalam tata letak loop
• Connect Fields secara dinamis (misalnya, judul, gambar unggulan, post meta)
• Pilih dari beberapa jenis tata letak seperti kisi, daftar, atau korsel
• Tambahkan filter dan pagination untuk meningkatkan pengalaman pengguna

Kombinasi kustomisasi dan otomatisasi ini memungkinkan Anda membuat tata letak lanjutan tanpa menulis HTML, PHP, atau CSS.

Cara Membangun Loop Kustom

Membuat tata letak konten khusus dengan modul loop sederhana, fleksibel, dan tidak memerlukan kode. Apakah Anda ingin memulai dengan tata letak yang sudah jadi atau membangun sendiri dari awal, modul loop memberi Anda kontrol penuh atas bagaimana konten dinamis Anda ditampilkan.

Opsi Tata Letak Preset Modul Loop

Saat pertama kali menyeret modul loop ke halaman Anda, Anda akan diminta untuk memilih dari tata letak preset berikut: daftar, kolom, kategori, dan kategori produk.

Tata letak preset memberi Anda awal dengan menawarkan modul yang telah diatur sebelumnya Anda dapat sepenuhnya menyesuaikan. Sesuaikan pengaturan loop agar sesuai dengan kebutuhan Anda, mengatur ulang atau menghapus modul yang ada, dan menambahkan yang baru untuk menyempurnakan tata letak Anda. Desain siap pakai ini membantu Anda membuat tampilan konten yang dipoles dan responsif lebih cepat.

Bangun dari awal dengan tata letak kosong

Lebih suka membuat sesuatu yang benar -benar khusus? Pilih opsi tata letak kosong dan ikuti langkah -langkah ini:

1. Tambahkan modul loop ke halaman atau posting Anda di editor Beaver Builder.
   
2. Pilih tata letak kosong untuk memulai dengan wadah loop kosong.
   
3. Konfigurasikan pengaturan loop untuk menentukan konten apa yang ingin Anda tampilkan - seperti posting blog, produk WooCommerce, bidang repeater ACF, atau jenis posting khusus.
   
4. Seret modul ke dalam wadah loop untuk membangun tata letak Anda dari awal. Tambahkan modul Builder Beaver yang Anda butuhkan, seperti judul, foto, ikon, tombol, dan banyak lagi.
   
5. Gunakan koneksi lapangan untuk menarik konten dinamis seperti judul, gambar, harga, atau bidang khusus untuk setiap item loop.
   
6. Atur dan gaya modul Anda menggunakan alat drag-and-drop Beaver Builder.

Pengaturan ini berfungsi dengan baik untuk pengguna atau desainer tingkat lanjut yang menginginkan kontrol total.
Gunakan untuk membangun tata letak blog khusus, grid produk, atau direktori tim - tidak diperlukan kode.

Gunakan modul kotak untuk kontrol tata letak

Modul kotak adalah pendamping penting untuk modul loop ketika datang ke tata letak presisi dan fleksibilitas styling.

• Bungkus modul loop di dalam modul kotak untuk mengelola lebar wadah luar, bantalan, margin, dan gaya latar belakang. Ini memberi Anda kendali penuh atas bagaimana konten Anda berada di dalam tata letak halaman keseluruhan.
• Sarang modul kotak di dalam loop untuk mengelompokkan konten dalam setiap item loop. Pengaturan ini memungkinkan Anda untuk memanfaatkan teknik tata letak canggih seperti CSS Grid atau Flexbox . Misalnya, Anda dapat membuat tata letak dua kolom dalam setiap item loop. Tempatkan gambar di sebelah kiri dan teks di sebelah kanan - dengan kontrol penuh atas jarak dan penyelarasan.

Menggunakan modul kotak secara strategis membantu mempertahankan desain yang bersih dan responsif sambil meningkatkan struktur visual konten dinamis Anda.

Pengaturan Permintaan: Konten apa yang akan ditampilkan?

Tab konten dalam modul loop memungkinkan Anda mengontrol bagaimana konten loop ditanya dan ditampilkan seperti:

• Pilih jenis posting (posting, halaman, CPT, produk, dll.)
• Saring dengan taksonomi, kategori, tag, atau penulis
• Menampilkan konten berdasarkan status atau tanggal pos
• Atur offset, sort order, dan post batas

Ini termasuk sumber kueri, jumlah item untuk ditampilkan, pemesanan, dan opsi filter lanjutan.

Pagination

Tab pagination memungkinkan Anda mengontrol bagaimana konten dibagi dan ditampilkan di beberapa halaman - ideal untuk meningkatkan navigasi dan pengalaman pengguna.

• Nomor : Menampilkan tautan bernomor di bawah posting Anda. Mengklik nomor memuat halaman baru dengan set posting yang sesuai.
• Gulir : Secara otomatis memuat posting tambahan saat pengguna gulir, menyimpan konten pada satu halaman.
• Tidak ada : Menonaktifkan pagination. Gunakan opsi ini untuk menampilkan sejumlah posting - seperti tiga yang terbaru - tanpa kontrol navigasi.
• Posting per halaman : Mengatur berapa banyak item yang muncul per halaman. Standarnya adalah 10.

Opsi -opsi ini membantu menyesuaikan pengiriman konten ke tata letak dan tujuan interaksi pengguna Anda.

Data dinamis dengan koneksi lapangan

Di dalam tata letak loop Anda, Anda dapat menggunakan koneksi lapangan untuk secara dinamis menarik data pos seperti:

• Judul posting
• Gambar unggulan
• Kutipan atau konten lengkap
• Bidang khusus
• Penulis, tanggal, kategori, tag

Modul apa pun yang mendukung konten dinamis (seperti heading, foto, tombol, HTML, dll.) Dapat dihubungkan ke data POST.

Gaya canggih dan logika bersyarat

Ingin menata berbagai jenis posting yang berbeda atau menunjukkan/menyembunyikan elemen berdasarkan kondisi? Modul loop mendukung logika bersyarat dan kelas CSS khusus .

Misalnya, Anda bisa:

• Sembunyikan tombol jika bidang khusus kosong
• Tambahkan lencana untuk posting unggulan
• Terapkan warna atau gaya yang berbeda berdasarkan kategori POST

Ini memungkinkan Anda untuk menyempurnakan pengalaman pengguna dan mempertahankan branding yang konsisten di seluruh konten Anda.

Kasing Penggunaan Modul Loop Dunia Nyata

Modul loop di Beaver Builder sangat fleksibel, memungkinkan Anda menampilkan konten dinamis dalam tata letak yang sesuai dengan kebutuhan desain Anda. Berikut adalah beberapa cara yang kuat untuk menggunakannya:

• Arsip Blog: Buat kisi -kisi yang menarik secara visual atau daftar posting blog terbaru Anda dengan gambar dan kutipan unggulan.
• Produk WooCommerce: Showcase Produk WooCommerce dalam kisi yang dapat disesuaikan dengan harga dinamis, gambar, dan tombol add-to-cart.
• Portofolio Showcase: Sorot proyek Anda atau studi kasus dengan tata letak fleksibel yang mencerminkan gaya merek Anda.
• Testimonial: Tampilkan kesaksian klien dari jenis posting khusus dan gaya agar sesuai dengan desain situs web Anda.
• Daftar acara: Daftar acara mendatang atau webinar secara kronologis, dengan tanggal, lokasi, dan deskripsi acara.
• Anggota Tim: Perkenalkan tim Anda dengan foto, nama, judul, dan BIOS - tautan setiap item ke halaman profil terperinci.
• Daftar real estat: menyajikan daftar real estat dengan gambar properti, harga, dan detail utama menggunakan jenis pos khusus.
• Katalog Kursus: Menampilkan katalog kursus atau lokakarya online, lengkap dengan judul, deskripsi, dan tautan pendaftaran.
• Daftar Pekerjaan: Bangun papan pekerjaan khusus dengan daftar dinamis yang mencakup judul, lokasi, dan ringkasan peran singkat.
• Indeks Resep: Menampilkan kumpulan resep dengan gambar, judul, dan deskripsi - ideal untuk blogger makanan.

Kasus penggunaan ini menunjukkan fleksibilitas modul loop di Beaver Builder. Ini dapat digunakan di berbagai industri dan situs web, membantu Anda membuat tata letak konten yang dinamis, menarik, dan disesuaikan.

Pikiran Terakhir: Mengapa Menggunakan Modul Loop?

Modul loop di Beaver Builder memberi Anda kekuatan untuk membuat tata letak yang sepenuhnya kustom dan dinamis dengan mudah. Apakah Anda sedang membangun blog, toko, atau direktori konten yang kompleks, modul ini memungkinkan Anda mengontrol bagaimana data Anda ditampilkan-sambil menjaga alur kerja Anda bebas visual dan kode.

Jika Anda serius tentang membangun situs WordPress modern dengan Beaver Builder, modul loop harus dimiliki di toolkit Anda. Jelajahi dokumentasi modul loop lengkap di sini.