Jak utworzyć niestandardową pętlę postów na blogu z Builder Loop Divi 5

Twoja marka nie powinna być ograniczona przez układ statyczny, dlatego staramy się zapewnić pełną elastyczność w miarę rozwoju Divi 5. Nowy konstruktor pętli Divi 5 jest świetnym krokiem w tym kierunku; Umożliwia zaprojektowanie elementu raz i zapętlanie go w dynamicznych siatkach lub listach.

W tym samouczku pokażemy, jak skonfigurować niestandardową pętlę postów na blogu. Zaprojektujemy listę, połączymy pola dynamiczne, ustawmy zapytanie i udoskonalimy układ czystej siatki lub listy. Przejdźmy do tego!

Co to jest Builder Loop Divi 5

Dzięki Builder Loop Divi 5 projektujesz pojedynczy układ „karty” w konstruktorze wizualnym, używając jak największej liczby modułów Divi, a następnie Divi zapętla go dla każdego elementu, który wyświetlisz.

Subskrybuj nasz kanał YouTube

Włącz element pętli na kolumnie, ustaw zapytanie (posty, niestandardowe typy postów, takie jak projekty, warunki lub użytkownicy) i mapuj pól dynamicznych, takich jak tytuły, wyróżnione obrazy, kategorie, pola niestandardowe i przyciski. Możesz ponownie zamówić elementy, kontrolować odstępy i pozwolić, aby wszystko odziedziczyło twoje globalne style.

Rezultatem jest responsywna lista wielokrotnego użytku, która pasuje do systemu bez potrzeby dodatkowych wtyczek lub niestandardowego kodu.

Jak działa budowniczy pętli

Możesz włączyć tryb pętli w dowolnej sekcji, wierszu, kolumnie lub module, otwierając kartę zawartości i włączając pętlę.

Od tego momentu Divi automatycznie powtarza element dla każdego postu, który pasuje do twoich ustawień.

Tutaj pojawia się prawdziwa kontrola. W ustawieniach pętli możesz:

• Typ zapytania: Wybierz między podstawowym zapytaniem postu lub zapytaniem meta, filtrowanie według kategorii, tagów, pola niestandardowych lub innych metadanych.
• Typ postu: Wybierz typ treści do wyświetlania, od postów na blogu po produkty po dowolny niestandardowy typ postu.
• Dołącz tylko posty o określonych warunkach: Pokaż tylko posty, które pasują do niektórych kategorii, tagów lub innych warunków taksonomii.
• Wyklucz posty z określonymi terminami: Usuń posty, które pasują do wybranych kategorii, tagów lub warunków.
• Dołącz tylko określone posty: Wybierz poszczególne posty, które należy dołączyć.
• Wyklucz określone posty: ukryj poszczególne posty, których nie chcesz w pętli.
• META CYTERY: Dodaj niestandardowe warunki pola, aby kontrolować to, co się pojawi.
• Zamów: Wybierz, jeśli wyniki są sortowane według daty, tytułu, zamówienia menu lub niestandardowej wartości pola.
• Zamówienie: Pokaż wyniki w kolejności rosnącej lub malejącej.
• Posty na stronę: Zdecyduj, ile postów wyświetla się przed paginacją.
• Post Offset: Pomiń pewną liczbę postów od samego początku, przydatne do unikania duplikatów z wyświetlonymi sekcjami.
• Zignoruj ​​lepkie posty: Wybierz, czy lepkie posty mają pierwszeństwo, czy są traktowane jak normalne posty.

Po zdefiniowaniu zapytania Divi automatycznie wypełnia każdą kartę pocztową odpowiednią zawartością, jednocześnie utrzymując identyczne układ i stylizację. Koncentrujesz się całkowicie na tym, jak wygląda karta, a Divi obsługuje populację i powtórzenie. Wszystko, co jest kontrolowane z jednego panelu, wystarczy kilka ustawień, aby mieć aktualizację na blogu bez ręcznych edycji.

Dowiedz się wszystkiego o konstruktorze pętli Divi 5

Tworzenie niestandardowej pętli postów na blogu z Divi 5

Budowanie niestandardowej pętli postów na blogu z Builder pętli ma dwie części. Najpierw projektujesz układ kart pocztowych, wybierając dokładnie to, co pojawia się treść i jak ona wygląda. Następnie umieszczasz ten projekt wewnątrz pętli, więc Divi powtarza go automatycznie dla każdego postu, który chcesz pokazać.

Przejdziemy przez niego krok po kroku, zaczynając od układu karty, a następnie konfigurując pętlę.

Zanim zaczniesz

Jeśli przechodzisz z modułu blogu do Buildera pętli i masz już stronę z listą blogów, możesz pominąć, aby tworzyć układ pętli. Jeśli nie, oto szybka konfiguracja:

1. Dodaj stronę blogu

Z deski rozdzielczej WordPress przejdź do stron> Dodaj nowe , nazwij to „Blog” i opublikuj go.

Ta strona będzie głównym centrum twoich postów.

2. Ustaw swoją stronę bloga w ustawieniach WordPress

W ustawieniach> Czytanie wybierz stronę statyczną . Przypisz swoją stronę główną do domu i nowej strony blogu na stronie postów.

Jest to potrzebne tylko wtedy, gdy korzystasz z osobnej strony strony głównej i listy blogów.

3. Utwórz szablon konstruktora motywów

Następnie utworzysz nowy szablon dla swojej strony z listą blogów. Jeśli już go masz, możesz to dostosować. Upewnij się, że używasz najnowszej wersji Divi 5, aby uzyskać dostęp do Builder Loop.

W Divi> Builder motywów kliknij Dodaj nowy szablon> Zbuduj nowy szablon.

Przypisz go na swojej stronie blogu i kliknij Utwórz szablon.

Aby zaprojektować stronę z listą postów na blogu, kliknij Dodaj niestandardowe nadwozie> Buduj niestandardowe nadwozie.

Wejdziesz teraz do Divi Builder, gdzie zaczniemy budować układ pętli.

1. Zaimportuj układ

Zaczynając od układu może zaoszczędzić dużo czasu i pomóc w utrzymaniu spójnego projektu od samego początku. W tym samouczku korzystam z układu strony blogu agencji marketingowej do brandingu.

Możesz wybrać ten sam lub zaimportować dowolny układ, który daje dobrą bazę do pracy. Gdy znajdzie się w szablonie, będziesz mieć gotową strukturę, którą możesz dostosować do swoich potrzeb zamiast budować wszystko od podstaw.

2. Zaprojektuj jedną kartę postu na blogu

W tym miejscu naprawdę przechodzi elastyczność Buildera Loop. Zamiast być zamkniętym w ustalonym układzie modułu blogu, zdecydujesz, co dzieje się na Twojej karcie postu i jak jest ono ułożone.

Dodaj nową sekcję do swojego szablonu. Możesz wybrać ze wstępnie zaprojektowanych struktur lub tworzyć własne za pomocą opcji One Column.

W tym przykładzie wybierzmy sekcję struktury wiersza trzykolumnowego .

W pierwszej kolumnie utworzymy naszą kartę pocztową. Użyjemy grupy modułowej do przechowywania wszystkich elementów.

Następnie dodaj moduł obrazu dla wyświetlonego obrazu, moduł nagłówka dla tytułu postu i moduł tekstowy dla fragmentu. Dodamy również meta informacje i przycisk Przeczytaj więcej , aby goście mogli kliknąć do pełnego postu.

Gdy jest tam podstawowa struktura, dostosuj projekt karty, aby pasował do Twojej marki. Ulepsz kolory, czcionki, odstępy i wszelkie unikalne szczegóły wizualne, które sprawiają, że są twoje.

3. Włącz owijanie wierszy

Aby upewnić się, że karty wyświetlają się starannie w rzędach na różnych rozmiarach ekranu, chcesz włączyć elastyczność. Wybierz główny wiersz i otwórz kartę Projekt .

Przejdź do układu. Upewnij się, że styl układu jest ustawiony na elastyczność.

Włącz owijanie układu , aby karty mogły przenieść się na nową linię w razie potrzeby, a następnie wybierz wyrównanie pakowania , które najlepiej pasuje do Twojego projektu.

4. Włącz pętlę

Teraz przychodzi krok, który sprawia, że ​​wszystko jest automatyczne. Wybierz kolumnę karty.

Następnie włącz opcję pętli w zakładce zawartości . Po włączeniu pętli Divi powtórzy projekt karty dla każdego postu, który spełnia ustawienia zapytania.

W tym układzie ustawiłem:

• Typ postu: Posty
• Posty na stronę: 10
• Zamów: data
• Zamówienie: zejście (najnowszy pierwszy)
• Post Offset: 0 (Pokaż wszystko, co zaczyna się od najnowszych)
• Ignoruj ​​lepkie posty: tak

Te małe korekty upewniają się, że siatka wyświetla dokładnie żądane posty w żądanej kolejności. Możesz zmienić te wartości w dowolnym momencie, aby dostosować układ do różnych potrzeb.

5. Dodaj dynamiczną zawartość

Ostatnim krokiem do ożywienia pętli jest podłączenie każdego modułu w karcie do danych na żywo. To zamienia kartę statyczną w zautomatyzowaną, zawsze aktualną listę. Na przykład:

• Połącz moduł obrazu z wyróżnionym obrazem postu.
• Połącz moduł nagłówka do tytułu postu.
• Połącz moduł tekstowy do fragmentu postu.
• Podłącz przycisk Odczyt więcej do adresu URL postu.

Po zapętleniu Divi zastąpi zawartość symboliczną właściwymi danymi dla każdego postu w pętli.

Aby ustawić wyróżniony obraz, otwórz moduł obrazu, unosić się na opcję obrazu i kliknij ikonę treści dynamicznej . Wybierz obraz z LOOP , a wszystkie odpowiednie obrazy zostaną natychmiast zapełniane.

Powtórz to dla tytułu postu, opublikowanej daty, fragmentu i wszelkich innych dziedzin, które chcesz wyświetlić.

Po kliknięciu ikonę treści dynamicznej dla modułu zobaczysz pełny zakres opcji specyficznych dla pętli. Nie ograniczasz się do tytułów i obrazów; Możesz także wyświetlać daty publikacji, zmodyfikowane daty, nazwy autorów, liczby komentarzy, kategorie, tagi, a nawet pola niestandardowe.

Oznacza to, że karta pocztowa może być tak minimalna lub tak szczegółowa, jak chcesz. Zbuduj czystą, ukierunkowaną na obraz siatkę, bogaty w treść układ, a nawet wyróżnij niszowe pola typu postu. Zaprojektuj go raz, a Divi utrzymuje go dokładne i spójne w całej pętli.

6. Zapisz szablon i podgląd

Gdy wszystko wygląda dobrze, dokonaj ostatecznych poprawek i zapisz zmiany zarówno w budowniczym Divi, jak i Buildera Motyw.

Wyświetl podgląd swojej strony, aby zobaczyć pętlę w akcji. Oto gotowa strona z listą blogów:

Moduł blogowy miał granice, Builder Loop nie

Moduł blogowy działał dobrze, więc dlaczego naciskamy na konstruktora pętli? Ponieważ „dobrze” oznaczało ustalone. Moduł blogowy zablokował cię w swoim szablonie, ale konstruktor pętli daje puste płótno. Wybierasz układ, zamówienie, styl i pętle Divi automatycznie.

To jest prawdziwa zmiana: nie dostosowujesz czyjegoś szablonu, projektujesz własny. Załóżmy to jeszcze raz w praktyce i zaprojektuj układ różny od typowej struktury modułu bloga.

Najpierw dodaj jedną kolumnę i sekcję. Dostosuj rozmiary i upewnij się, że elasty Flex i Flex są włączone dla wiersza.

Ten rząd będzie zawierał Twoje karty blogów. Teraz dodaj kolejny zagnieżdżony wiersz wewnątrz kolumny, aby utworzyć strukturę karty, z obrazem po lewej i metadanych słupka po prawej.

Zaprojektuj swoją strukturę dokładnie tak, jak chcesz, nie trzeba śledzić sekwencji modułu blogu. Na razie pozostaw lewą kolumnę. Dodamy wyświetlony obraz jako obraz tła kolumny.

Dostosuj swoją kartę na blogu.

Możesz także zmodyfikować pionową szczelinę grupy modułów w prawej kolumnie w projektowaniu> Układ> Pionowa opcja szczeliny .

Następnie włączamy opcję pętli . Wybierz pierwszą kolumnę z wiersza nadrzędnego.

Ponownie zapętlimy dynamiczną zawartość. Począwszy od obrazu, przejdź do opcji tła lewej kolumny, a reszta będzie taka sama.

To jest twoja pętla blogu w stylu listy. Teraz, jeśli chcesz przekonwertować to w siatkę, po prostu zmień szerokość kolumny. Ponieważ w wierszu włączamy owijanie Flex , karty będą owijają się same, gdy zmienimy ich rozmiar.

Jeśli to sprawiają, że Twoje obrazy są zbyt duże, możesz usunąć fragment, zmienić strukturę kolumny wiersza, a nawet dostosować poziomą szczelinę do zera.

I tak po prostu twoja siatka jest również gotowa.

Ten przykład jest tylko widokiem na to, co umożliwia Builder Loop. Prawdziwym wynosem jest to, że nie ograniczasz się już do garstki ustalonych układów. Każda część karty pocztowej jest twoja, aby zorganizować, stylizować i ponownie wyobrazić sobie, a Divi dba o powtarzanie jej automatycznie. Ta elastyczność zamienia prostą listę blogów w coś, co wydaje się zaprojektowane dla Twojej witryny.

Użyj modułu paginacji

Jeśli ograniczysz posty na stronę w zapytaniu pętli, prawdopodobnie będziesz chciał, aby czytelnicy zobaczyli resztę. Dodaj moduł paginacji pod siatką i ustaw swoją pętlę docelową na element, w którym włączyłeś pętlę. Aby uzyskać pełny instruktaż, zobacz, jak razem używać modułu Loop Builder i paginacji Divi 5: Przeczytaj samouczek.

Pobierz szablony blogów

Jeśli chcesz eksperymentować z siatkami w szablonie blogu, pobierz szablony użyte w tym samouczku poniżej. Aby je zaimportować, przejdź do konstruktora motywów Divi. Będziesz mógł je zaimportować za pomocą ikony importu/eksportu w prawym rogu.

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!

Zbuduj swoją niestandardową pętlę postu na blogu w Divi 5

Przed konstruktorem pętli Divi 5 tworzenie naprawdę niestandardowej pętli postu na blogu często oznaczało zapasy sztywnym szablonami lub pisanie niestandardowego kodu dla każdej małej zmiany. Teraz jest to proces wizualny od początku do końca. Raz projektujesz kartę, łączą jej moduły do ​​danych na żywo i pozwól Divi obsługiwać resztę.

Jeśli pracujesz nad granicami modułu bloga, Builder Loop to aktualizacja, na którą czekałeś. Wypróbuj w następnym projekcie i zobacz, o ile łatwiej jest stworzyć blog (lub produkt, wydarzenie lub listę), który wygląda dokładnie tak, jak chcesz!