Jak używać razem Divi 5's Loop Builder & Pagination Modure

Listy statyczne treści postów są w porządku, jeśli wyświetlasz wybrany i ograniczony zestaw tych postów. Ale często chcesz, aby użytkownicy uzyskali dostęp do większej zawartości niż pokazuje oryginalna pętla. Chcesz zdecydować, ile obciążeń treści początkowo i dać czytelnikom jasny sposób poruszania się między partiami. Właśnie tam tworzą idealną parę Divi 5's Builder i Pagination Module.

Ten post poprowadzi Cię przez to, jak każdy działa, a następnie pokaże, jak je podłączyć. Do końca będziesz wiedział, jak budować zapętlone układy z odpowiednią paginacją.

Poznaj budownicę pętli Divi 5

Builder pętli jest jedną z największych ulepszeń Divi 5. Daje ci swobodę, której stary moduł blogowy nigdy nie mógł. Każdy element może stać się „zapętlonym” pojemnikiem. Oznacza to, że Divi automatycznie powtórzy to dla każdego postu, produktu lub niestandardowego typu postu, który pasuje do Twojego zapytania.

Zamiast utknąć w wstępnie zaprojektowanej listy postów, projektujesz jeden element „szablonu” jako pętlę. Divi używa tego dla każdego wyniku, zamieniając dynamiczną zawartość z zapytania pętli. To może być:

• Tytuły wyciągane z danych postu
• Polecane obrazy
• Pola niestandardowe
• Linki do pełnych postów lub produktów

Możesz użyć dowolnego modułu do wyświetlania tych danych, a nie tylko specyficznego dla bloga. Chcesz fantazyjny moduł Blub pokazujący najnowsze oferty kursów? Zrobione. Potrzebujesz niestandardowego układu karty produktu dla elementów WooCommerce? Też skończone.

Jest to elastyczne, ponieważ sam budujesz strukturę projektu i treści. Divi obsługuje powtórzenie.

Przełączanie z modułu bloga na konstruktor pętli oznacza przejście ze standardowego szablonu do w pełni konfigurowalnego systemu układu. Naprawdę podobało mi się budowanie z tym i wiem, że ty też!

Poznaj moduł paginacji

Pagination to fantazyjny sposób, aby powiedzieć „podziel wyniki na strony”. Zamiast zrzucić wszystkie elementy na jedną stronę, rozbijasz je na mniejsze zestawy. To pomaga w:

• Czas ładowania strony
• Czytelność
• Skanowość

Moduł paginacji w Divi 5 robi dokładnie to, ale z pewną inteligentną integracją. To nie jest powiązane tylko z postami na blogu. Zamiast tego może łączyć się z każdą pętlą zbudowaną na stronie.

Działa poprzez dodanie dwóch elementów nawigacyjnych - powtórnych i następnych linków - których etykiety można dostosować. Jeśli nad bieżącym zestawem jest starsze elementy, „starszy” (lub wybrany tekst) będzie aktywny. Jeśli istnieją nowsze elementy, „nowsze” będą aktywne.

Budowanie pętli + układ paginacji

Przejdźmy przez pełną konfigurację. W tym przykładzie zakłada, że ​​chcesz mieć niestandardową pętlę z paginacją. Oto utworzony przeze mnie układ Flex, który wyświetli naszą pętlę. Możesz pobrać w pełni zbudowany układ poniżej.

Należy pamiętać, że karta jest ustawiona na ~ 50% szerokości i flex, więc gdy karta zapętlona jest sama w flex-rzędu, stanie się pełna szerokość wewnątrz pojemnika.

Krok 1: Utwórz pojemnik pętli

Dodaj sekcję do swojej strony. Wewnątrz dodaj moduł, który chcesz powtórzyć. Może to być pojedynczy moduł (np. Blurb) lub bardziej złożony układ wielu modułów w kolumnie lub grupie.

Po wybranym kontenerze otwórz jego ustawienia i włącz opcję pętli .

Wybierz źródło danych. To jest „zapytanie”, które będzie działać pętla.

Najpierw wybierz typ zapytania. W zależności od konfiguracji witryny możesz zobaczyć te opcje:

• Typ postu (jak posty na blogu lub niestandardowe typy postów, takie jak „Projekty”)
• Warunki (kategorie i taksonomie)
• Użytkownicy (zwróć listę użytkowników witryn, takich jak autorzy)
• Pole repeater (pole niestandardowe utworzone przez wtyczkę do tworzenia pętli w pętli)

Następnie, w zależności od rodzaju zapytania powyżej, będziesz miał szansę być bardziej szczegółowym. Wybór „Typu postu” może pozwolić na korzystanie z takich typów postów, jak:

• Posty na blogu
• Projektowanie
• Produkty
• Niezależnie od CPT dla siebie zbudowałeś

Stamtąd możesz być jeszcze bardziej szczegółowy z tym, co powinno pojawić się w twojej pętli. Możesz:

• Dołącz elementy z określoną kategorią lub tagiem
• Wyklucz elementy z określoną kategorią lub tagiem
• Dołącz określone elementy (według identyfikatora postu)
• Wyklucz określone elementy (według ID post)
• Zbuduj własne zapytanie meta (przydatne do tworzenia wtrąceń/wykluczeń na podstawie niestandardowych danych pola)
• Ustaw kolejność pasujących zapytań (takich jak alfabetyczne i zstępujące)
• Elementy na stronę Wartość kontroluje, ile pojawia się w pętli
• Post Offset, na wypadek, gdybyś chciał rozpocząć pętlę później w cyklu
• Zignoruj ​​lepkie posty

Tak wygląda nasz przykład w tym momencie. Utworzyliśmy pętlę i przypisaliśmy ją do naszego typu postu na blogu. Ustawiam limit wyświetlania na 3.

Teraz musimy przypisać różne pola tekstowe i elementy, które chcemy, aby hiperłącza z dynamiczną zawartością pętli.

Krok 2: Dodaj dynamiczną zawartość wewnątrz pętli

Naszym następnym zadaniem jest kliknięcie w każdy z modułów pętli i zastąpienie statycznego tekstu lub obrazów na dynamiczne pola zawartości. Na przykład:

• W module tekstowym wybierz „Post Tytuł” ​​z dynamicznego zbieracza treści
• W module obrazu możesz wybrać „Wyróżniony obraz”
• W module przycisku ustaw link na „POSTRU URL”
• W całym kontenerze zapętlonym ustaw link na „Post URL”

To każe Divi, aby pociągnęła właściwą zawartość dla każdego zapętlonego elementu.

Pamiętaj - wszystko w pętli jest powtarzane dla każdego wyniku. Zachowaj zawartość nie pętli (takie jak nagłówki, reklamy lub CTA) poza nią. Jeśli masz zawartość w pętli, która nie jest połączona z danymi dynamicznymi, każdy element w pętli wyświetli to, że tekst „odczyt →” w prawym dolnym rogu karty przykładowej).

Krok 3: Dodaj moduł paginacji

Poniżej sekcji pętli dodaj nowy wiersz. Włóż moduł paginacji . W ustawieniach modułu zlokalizuj pole docelowe . Użyj go, aby wybrać pętlę z rozwijanej listy pętli na stronie. To łączy kontrole paginacji z tą konkretną pętlą. Wskazówka: jeśli używasz etykiet administratora, łatwiej jest wybrać odpowiedni cel. Dotyczy to również interakcji.

Dostosuj etykiety do „poprzednich” i „Następnie”. Możesz użyć „starszych postów / nowszych postów”, „Back / Forward”, a nawet „← / →” dla minimalnego stylu.

Kluczem jest to, że moduł paginacji musi usiąść poza pętlą, którą kontroluje. To i upewnienie się, że jest przypisany do odpowiedniego celu (jeśli masz wiele pętli na tej samej stronie/szablonie).

Krok 4: Przetestuj interakcję

Zapisz swoją stronę i podgląd. Kliknij „starszy”, aby przejść do następnego zestawu elementów pętli.

Zwróć uwagę, w jaki sposób URL zmienia się z parametrem zapytania, który identyfikuje stronę pętli. Należy również zauważyć, że tylko tony/zmiany zawartości pętli - koło, stopki i paski boczne powinny pozostać takie same.

Zdobądź ten układ pętli

Chcesz przeanalizować ten układ i zobaczyć, jak sprawy są budowane dla siebie? Pobierz go tutaj!

Po rozpakowaniu folderu przejdź do biblioteki Divi, aby przesłać plik. Po przesłaniu będziesz mógł dodać sekcję do dowolnej strony, nad którą pracujesz.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a my wysyłamy Ci e -mailem kopię pakietu układu Ultimate Divi Landing Page, a także ton innych niesamowitych i bezpłatnych zasobów, wskazówek i wskazówek. Śledź dalej, a będziesz mistrzem Divi w krótkim czasie. Jeśli jesteś już subskrybowany, po prostu wpisz swój adres e -mail poniżej i kliknij Pobierz, aby uzyskać dostęp do pakietu układu.

POBIERAĆ

Udało ci się zasubskrybować. Sprawdź swój adres e -mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układu Divi!

Ciesz się bardziej dynamiczną Divi

Moduł pętli Divi 5 i moduł paginacji to duży skok do przodu z elastycznością. Builder pętli uwalnia Cię z sztywnych projektów starszych modułów, umożliwiając zbudowanie własnych powtarzanych układów z dynamiczną zawartością. Moduł paginacji utrzymuje te układy szybkie i zarządzane, rozkładając je na fragmenty przyjazne dla użytkownika.

Builder pętli i moduł paginacji, w połączeniu z innymi nowymi funkcjami Divi 5 (Flexbox, interakcje, sterowanie kolorami HSL), jest tak potężny jak zawsze. Możesz zrobić z tym wszystkim niesamowite projekty stron.

Po zbudowaniu pierwszej paginowanej pętli zobaczysz, jak łatwo jest ponownie wykorzystać podejście na blogach, siatkach produktów, portfeli lub dowolnym typu treści, którego potrzebujesz do uporządkowania.