Zanim był Loop Builder, wyświetlenie listy wpisów blogowych w niestandardowym układzie wymagało albo modułu Blog z ograniczonymi opcjami stylowania, albo wtyczki, albo własnego kodu. Żadna z tych opcji nie była idealna.
Loop Builder zmienia to całkowicie. Budujesz dokładnie taki układ karty wpisu jaki chcesz — i Divi powtarza go automatycznie dla każdego wpisu z bazy. Bez wtyczek, bez kodu.
W tym artykule budujesz siatkę wpisów blogowych od zera.
Co będziesz budować
Trzykolumnowa siatka kart blogowych. Każda karta zawiera miniaturę wpisu, kategorię, tytuł i link „czytaj dalej”. Układ zmienia się na jednokolumnowy na telefonie.
Gotowe w kilkanaście minut.
Krok 1 — przygotuj stronę
Otwórz stronę archiwum bloga w Divi Builderze albo utwórz nową stronę do testów.
Dodaj nową sekcję i wiersz z jedną kolumną. W tej kolumnie będziesz budować szablon pojedynczej karty — Loop Builder zajmie się resztą.
Loop Builder zajmie się resztą.
Krok 2 — włącz Loop Builder na kolumnie
Kliknij na ustawienia kolumny. W zakładce Content znajdź opcję „Loop” — przełącz ją na włączoną.
Pojawi się panel ustawień Loop Buildera. Kilka rzeczy do skonfigurowania:
Post Type — wybierz „Posts” żeby pobierać wpisy blogowe.
Posts Per Page — ile wpisów na stronę. Dla siatki trójkolumnowej ustaw wielokrotność trzech — 6, 9 albo 12.
Order By — „Date” i „Descending” żeby najnowsze wpisy były pierwsze.
Exclude Current Post — włącz jeśli budujesz sekcję powiązanych artykułów na stronie wpisu. Przy archiwum bloga zostaw wyłączone.
Zatwierdź ustawienia. Kolumna jest teraz kontenerem Loop Buildera.
Krok 3 — zbuduj układ karty
Dodaj moduł Image. W ustawieniach Content → Image Source wybierz „Featured Image” z listy Dynamic Content. Miniatura każdego wpisu załaduje się automatycznie.
Ten krok może być za pierwszym razem trudny bo przycisk treści dynamicznej jest słabo wyeksponowany w interfejsie buildera.
Przycisk treści dynamicznej dla obrazu
Ustaw proporcje obrazka — w Design → Image ustaw Height na stałą wartość, na przykład 220px, i Fit na „Cover”. Dzięki temu wszystkie miniatury będą miały identyczne proporcje niezależnie od oryginalnych rozmiarów zdjęć.
Dodaj moduł Text pod obrazkiem. W polu treści kliknij ikonę Dynamic Content — wybierz „Post Categories”. Ustaw mały font, 12–13px, kolor akcentu z Design Variables. To będzie etykieta kategorii nad tytułem.
Dodaj moduł Heading. Kliknij w pole tytułu, usuń domyślny tekst, kliknij ikonę Dynamic Content i wybierz „Post Title”. Ustaw H3, odpowiedni rozmiar i kolor z typografii globalnej.
Dodaj moduł Button. Wpisz tekst „Czytaj dalej”. W ustawieniach Link kliknij ikonę Dynamic Content i wybierz „Post URL”. Przycisk każdej karty będzie automatycznie linkował do właściwego wpisu.
Krok 4 — ustaw układ siatki
Masz szablon jednej karty. Teraz powiedz Divi żeby ułożył karty w siatkę.
Wejdź w ustawienia wiersza (tego zewnętrznego, który jest kontenerem Loop). W zakładce Design → Layout zmień Layout Style na „Grid”.
Ustaw Columns Count na 3 — trzy kolumny na desktopie.
Ustaw Gap — odstęp między kartami. Zazwyczaj 24–32px wygląda dobrze.
Krok 5 — responsywność
Przełącz builder na widok tabletowy.
W ustawieniach wiersza zmień Columns Count na 2 dla tabletu.
Przełącz na widok mobilny. Zmień Columns Count na 1.
Trzy kliknięcia i siatka jest w pełni responsywna.
Krok 6 — dodaj paginację
Jeśli masz więcej wpisów niż Posts Per Page, potrzebujesz paginacji.
Wyjdź z kolumny Loop Buildera i dodaj nowy wiersz pod siatką. Dodaj moduł Post Navigation albo moduł Posts Pagination — znajdziesz go w liście modułów Divi 5.
Ustyluj go zgodnie z resztą projektu — kolor linków ze zmiennych, font z typografii globalnej.
Krok 7 — sprawdź efekt
Zapisz stronę i wejdź na nią wylogowany z WordPressa.
Powinieneś zobaczyć siatkę kart z prawdziwymi danymi z bazy — miniatury wpisów, tytuły, kategorie, linki. Każda karta wygląda identycznie bo wszystkie korzystają z tego samego szablonu.
Dodasz nowy wpis blogowy — pojawi się automatycznie na siatce. Zmienisz układ karty — zmiana pojawi się dla wszystkich wpisów naraz.
Kilka wariantów które warto znać
Lista zamiast siatki — zmień Layout Style na Flex i Direction na Column. Karty układają się jedna pod drugą zamiast w siatkę. Przydatne dla sidebara z ostatnimi wpisami.
Filtrowanie po kategorii — w ustawieniach Loop Buildera możesz ograniczyć wpisy do konkretnej kategorii. Przydatne gdy chcesz pokazać tylko wpisy z wybranego tematu na stronie usługi.
Wpisy na stronie głównej — trzy najnowsze wpisy jako sekcja „Aktualności” na home page. Ustaw Posts Per Page na 3, wyłącz paginację.
Powiązane artykuły na końcu wpisu — w szablonie wpisu w Theme Builderze dodaj sekcję z Loop Builderem, filtruj po tej samej kategorii co bieżący wpis i włącz Exclude Current Post.