Chcesz wyświetlać dynamiczne treści, takie jak posty na blogu, produkty lub niestandardowe typy postów w całkowicie niestandardowych układach - bez dotykania linii kodu? Moduł pętli w Beaver Builder umożliwia to.

Wprowadzony w Beaver Themer 1.5 i Beaver Builder 2.9, moduł pętli jest potężnym narzędziem, które pozwala projektować powtarzalne układy za pomocą standardowych modułów Beaver Builder. Niezależnie od tego, czy budujesz blog, portfolio, listę wydarzeń, czy WooCommerce Shop, ten moduł zapewnia pełną kontrolę projektowania z dynamiczną treścią.

W tym przewodniku rozbijemy sposób korzystania z modułu pętli do budowy nowoczesnych, dynamicznych układów, które poprawiają projekt, wydajność i elastyczność Twojej witryny.

Jaki jest moduł pętli?

Moduł pętli to elastyczny pojemnik, który zapętla się przez zapytaną zawartość i wyświetla go za pomocą utworzonego układu. Zamiast polegać na domyślnych szablonach WordPress, możesz budować własne niestandardowe projekty - kompleksowe z modułami, połączeniami terenowymi i logiką warunkową.

Moduł pętli nie jest ograniczony do postów na blogu lub niestandardowych typów postów - może obsłużyć szeroki zakres treści dynamicznej. Oto kilka potężnych sposobów korzystania z niego do tworzenia niestandardowych układów i ulepszania witryny:

• Kategorie lub tagi WooCommerce - wyświetlane kategorie produktów lub tagi na poszczególnych stronach produktów za pomocą źródła zapytania taksonomii.
• Niestandardowa siatka treści - pokaż treści dynamiczne, takie jak członkowie zespołu lub referencje za pomocą źródła zapytania ACF Repeater na stronach takich jak „Meet the Team” lub oferty usług.
• Powiązane posty - zawierają odpowiednie treści na blogu na stronach jednopozadowych ze źródłem zapytania o relacje ACF, pomagając zwiększyć zaangażowanie i obniżyć wskaźniki odrzuceń.

Każdy element w pętli wykorzystuje niestandardowy projekt i pobiera dane dynamiczne, takie jak tytuł postu, wizerunek, fragment i wiele innych.

Kluczowe funkcje modułu pętli

Moduł pętli jest pełen możliwości, które sprawiają, że idealnie nadaje się do budowania elastycznych, bogatych w treść stron:

• Zapytanie treści dynamiczne z dowolnego typu postu (standard lub niestandardowe)
• Użyj dowolnego modułu Beaver Builder w układzie pętli
• Połącz pola dynamicznie (np. Title, wyróżniony obraz, post meta)
• Wybierz spośród wielu typów układu, takich jak siatka, lista lub karuzela
• Dodaj filtry i paginację, aby poprawić wrażenia użytkownika

Ta kombinacja dostosowywania i automatyzacji pozwala tworzyć zaawansowane układy bez pisania HTML, PHP lub CSS.

Jak zbudować niestandardową pętlę

Tworzenie niestandardowego układu treści z modułem pętli jest proste, elastyczne i nie wymaga kodu. Niezależnie od tego, czy chcesz zacząć od gotowego układu, czy zbudować własny od zera, moduł pętli zapewnia pełną kontrolę nad tym, jak wyświetlana jest treść dynamiczna.

Opcje ustalania modułu pętli

Gdy po raz pierwszy przeciągniesz moduł pętli na swoją stronę, otrzymasz monit o wybór z następujących ustawień ustawowych: lista, kolumny, kategorie i kategorie produktów.

Wstępne układy zapewniają przewagę, oferując moduły wstępnie aranżonowe, które możesz w pełni dostosować. Dostosuj ustawienia pętli, aby pasowały do ​​swoich potrzeb, zmień zmianę lub usuń istniejące moduły i dodaj nowe, aby dopracować układ. Te gotowe projekty pomagają szybciej tworzyć dopracowane, responsywne wyświetlacze treści.

Buduj od zera z pustym układem

Wolisz tworzyć coś całkowicie niestandardowego? Wybierz opcję pustego układu i wykonaj następujące kroki:

1. Dodaj moduł pętli do swojej strony lub opublikuj w edytorze Beaver Builder.
   
2. Wybierz pusty układ , aby zacząć od pustej pętli.
   
3. Skonfiguruj ustawienia pętli , aby zdefiniować, jaką zawartość chcesz wyświetlić - takie jak posty na blogu, produkty WooCommerce, pola repeatera ACF lub niestandardowe typy postów.
   
4. Przeciągnij moduły do ​​kontenera pętli, aby zbudować układ od zera. Dodaj wszelkie potrzebne moduły Beaver Builder, takie jak nagłówki, zdjęcia, ikony, przyciski i wiele innych.
   
5. Użyj połączeń terenowych , aby przyciągnąć dynamiczną zawartość, takie jak tytuły, obrazy, ceny lub pola niestandardowe dla każdego elementu pętli.
   
6. Ułóż i układaj moduły za pomocą narzędzi przeciągania i upuszczania Beaver Builder.

Ta konfiguracja świetnie działa dla zaawansowanych użytkowników lub projektantów, którzy chcą całkowitej kontroli.
Użyj go, aby zbudować niestandardowe układy blogów, siatki produktów lub katalogi zespołu - nie wymaga kodu.

Użyj modułu skrzynki do kontroli układu

Moduł pudełkowy jest niezbędnym towarzyszem modułu pętli, jeśli chodzi o precyzję układu i elastyczności stylizacji.

• Owinąć moduł pętli w module pudełka, aby zarządzać szerokością zewnętrznego pojemnika, wyściółka, margines i stylizacji tła. Daje to pełną kontrolę nad tym, w jaki sposób zapętlona treść znajduje się w ramach ogólnego układu strony.
• Zestaw moduł pudełkowy wewnątrz pętli, aby zgrupować wewnętrzną zawartość każdego elementu pętli. Ta konfiguracja pozwala skorzystać z zaawansowanych technik układu, takich jak CSS Grid lub FlexBox . Na przykład możesz utworzyć układ dwukolumnowy w każdym elemencie pętli. Umieść obraz po lewej i tekst po prawej - z całkowitą kontrolą odstępu i wyrównania.

Używanie modułu pudełkowego strategiczne pomaga utrzymać czyste, responsywne projekty, jednocześnie ulepszając wizualną strukturę dynamicznej treści.

Ustawienia zapytania: jaka treść wyświetli się?

Karta zawartości w module pętli pozwala kontrolować, w jaki sposób zawartość pętli jest zapytana i wyświetlana, na przykład:

• Wybierz typ postu (posty, strony, CPTS, produkty itp.)
• Filtr według taksonomii, kategorii, tagów lub autora
• Wyświetl zawartość na podstawie statusu lub daty postu
• Wyznacz offsety, sortuj zamówienie i limity po

Obejmuje to źródło zapytania, liczbę elementów do wyświetlenia, zamawianie i zaawansowane opcje filtra.

Paginacja

Karta Pagination pozwala kontrolować, w jaki sposób treść jest podzielona i wyświetlana na wielu stronach - idealna dla poprawy nawigacji i wrażenia użytkownika.

• Liczby : Wyświetla ponumerowane linki pod twoimi postami. Kliknięcie liczby ładuje nową stronę z odpowiednim zestawem postów.
• Scroll : Automatycznie ładuje dodatkowe posty jako przewijanie użytkownika, utrzymując treść na jednej stronie.
• Brak : wyłącza paginację. Użyj tej opcji, aby wyświetlić ograniczoną liczbę postów - takich jak najnowsze trzy - bez kontroli nawigacyjnych.
• Posty na stronę : Ustaw, ile elementów pojawia się na stronę. Domyślnie to 10.

Te opcje pomagają dostarczyć dostarczanie treści do celów układu i interakcji użytkownika.

Dynamiczne dane z połączeniami terenowymi

Wewnątrz układu pętli możesz użyć połączeń pola, aby dynamicznie pobierać dane post, takie jak:

• Tytuł post
• Wyróżniony obraz
• Fragment lub pełna treść
• Pola niestandardowe
• Autor, data, kategoria, tagi

Każdy moduł obsługujący dynamiczną zawartość (np. Nagłówek, zdjęcie, przycisk, HTML itp.) Można podłączyć do danych post.

Zaawansowana stylizacja i logika warunkowa

Chcesz stylizować różne typy postów inaczej lub pokazać/ukrywać elementy w oparciu o warunki? Moduł pętli obsługuje logikę warunkową i niestandardowe klasy CSS .

Na przykład możesz:

• Ukryj przyciski, jeśli pole niestandardowe jest puste
• Dodaj odznaki do polecanych postów
• Zastosuj różne kolory lub style na podstawie kategorii post

Umożliwia to dostosowanie wrażenia użytkownika i utrzymanie spójnego marki w całej treści.

Przypadki użycia modułu pętli w świecie rzeczywistym

Moduł pętli w Beaver Builder jest niezwykle wszechstronny, co pozwala wyświetlać dynamiczne treści w układach odpowiadających Twoim potrzebom projektowania. Oto kilka potężnych sposobów go użycia:

• Archiwa Blog: Utwórz wizualnie angażującą siatkę lub listę najnowszych postów na blogu z wyświetlonymi obrazami i fragmentami.
• Produkty WooCommerce: prezentuj produkty WooCommerce w konfigurowalnej siatce z dynamicznymi cenami, obrazami i przyciskami dodawania do kart.
• Prezentacja portfolio: podkreśl swoje projekty lub studia przypadków z elastycznymi układami odzwierciedlającymi styl marki.
• Referencje: Wyświetl referencje klienta z niestandardowego typu postu i stylizuj je, aby pasowały do ​​projektu Twojej witryny.
• Listy wydarzeń: lista nadchodzących wydarzeń lub seminariańsów chronologicznie, z datami, lokalizacjami i opisami wydarzeń.
• Członkowie zespołu: Przedstaw swój zespół ze zdjęciami, nazwiskami, tytułami i BIOS - połącz każdy element do szczegółowej strony profilu.
• Listy nieruchomości: Prezentuj oferty nieruchomości z obrazami nieruchomości, cen i kluczowymi szczegółami przy użyciu niestandardowego typu postu.
• Katalog kursów: Wyświetl katalog kursów lub warsztatów online, wraz z tytułami, opisami i linkami do rejestracji.
• Oferty zadań: Zbuduj niestandardową tablicę zadań z dynamicznymi ofertami, które zawierają tytuły, lokalizacje i krótkie streszczenia ról.
• Indeks przepisów: zawiera zbiór przepisów z obrazami, tytułami i opisami - ideal dla blogerów żywności.

Te przypadki użycia pokazują wszechstronność modułu pętli w Beaver Builder. Może być używany w różnych branżach i stronach internetowych, pomagając tworzyć dynamiczne, angażujące i dostosowane układy treści.

Ostateczne myśli: Po co używać modułu pętli?

Moduł pętli w Beaver Builder daje moc, aby z łatwością tworzyć w pełni niestandardowe, dynamiczne układy. Niezależnie od tego, czy budujesz blog, sklep, czy złożony katalog treści, ten moduł pozwala kontrolować sposób wyświetlania danych-jednocześnie utrzymując wizualne i wolne od kodu przepływ pracy.

Jeśli poważnie poważnie podchodzisz do budowania nowoczesnych, niestandardowych witryn WordPress z Beaver Builder, moduł pętli jest niezbędny w twoim zestawie narzędzi. Przeglądaj tutaj dokumentację modułu pełnej pętli.