Jak zbudować siatkę portfolio z Builder Loop Divi 5

Siatka portfolio to prosty, skuteczny sposób na zaprezentowanie swojej pracy. Dzięki Builderowi Loop Divi 5 możesz zaprojektować układ kart wielokrotnego użytku i pozwolić mu automatycznie zamieszczać z treści bezpośrednio w wizualnym budowniczym.

W przeciwieństwie do modułów jednoosobowych, Loop Builder pozwala używać dowolnego elementu Divi, ustawić zapytanie dla postów lub niestandardowych typów postów i wysyłać responsywną siatkę, która dziedziczy twoje globalne style. W tym samouczku zbudujemy krok po kroku siatkę portfela za pomocą niestandardowego typu postu.

Zrozumienie Builder Loop Divi 5

Divi 5's Loop Builder to nowa funkcja, która pozwala łatwo tworzyć dynamiczne, zapętlane układy treści. W przeciwieństwie do modułów blogów lub portfolio, Loop Builder pozwala łatwo zapętlił dowolny element Divi do wyświetlania postów, terminów lub użytkowników. Oznacza to, że możesz zbudować pojedynczy szablon, który automatycznie wypełnia zawartość ze swojej witryny WordPress.

Builder Loop obsługuje różne typy treści, w tym niestandardowe typy postów (CPTS), produkty WooCommerce i Advanced Custom Fields (ACF), umożliwiając wyświetlanie portfela dokładnie tak, jak chcesz.

Kluczowe korzyści konstruktora pętli

Dzięki solidnym opcjom dostosowywania, Loop Builder idealnie nadaje się do tworzenia sieci portfolio. Oto jego wyjątkowe funkcje:

• Elastyczność w projektowaniu niestandardowych szablonów pętli: W przypadku Builder pętli nie jesteś ograniczony do predefiniowanych układów. Możesz użyć dowolnego modułu Divi do zaprojektowania unikalnego szablonu dla każdego elementu portfela.
• Pytania konfigurowalne: Builder pętli pozwala dostosować, która zawartość pojawia się w siatce. Filtruj według kategorii, typu postu lub niestandardowych pola, aby wyświetlić tylko żądane elementy w preferowanej kolejności.
• Integracja treści dynamiczna: bezproblemowo pobieraj dynamiczne dane treści, takie jak tytuły projektów, wyświetlone obrazy, opisy lub niestandardowe metadane, aby każdy element portfela był zaangażowany.

Funkcje te sprawiają, że Builder Loop Divi 5 jest idealnym narzędziem do tworzenia dopracowanego, profesjonalnego portfela, które jest w pełni konfigurowalne i łatwe w nawigacji.

Budowanie portfela z Builder pętli

Użyjemy wbudowanych projektów Divi niestandardowy typ postu (CPT), aby utworzyć portfolio z Builder Loop. Projects CPT został zaprojektowany w celu zaprezentowania treści w stylu portfolio, co czyni go idealnym wyborem dla naszego układu. Chociaż Divi oferuje moduł portfolio, użyjemy Builder Loop, ponieważ daje nam nieograniczone opcje tworzenia unikalnego portfolio.

Zacznij od dodania nowego wiersza do strony. W tym celu użyjemy 3-kolumnowego układu.

Dodamy moduł nagłówka do pierwszej kolumny .

Wprowadź tytuł lub użyj Divi AI, aby wygenerować jeden dla Ciebie.

Przejdź do zakładki Projekt , wybierz interfejs czcionki nagłówka , światło na masę czcionki nagłówka , ustaw rozmiar tekstu na 2EM i przypisz wysokość linii nagłówka 1,3EM .

Teraz zbudujmy naszą pętlę. Przejdź do drugiej kolumny naszego wiersza.

Znajdź kartę pętli , rozwinąć ją i włącz przełącznik elementu pętli .

Następnie wybierz typ zapytania . W tym samouczku użyjemy wbudowanych projektów CPT Divi. W ramach typu post wybierz projekty . Chcemy zaprezentować wszystkie projekty, więc zostawimy wszystko, co jest.

Możesz wybrać zamówienie według ustawień, postów na stronę i wysyłkę przesunięcia . Ponieważ nasza pierwsza kolumna zawiera moduł nagłówka , ustawym posty na stronę na 8 . W ten sposób wyjście będzie nawet w naszym trzykolumnowym rzędzie.

Zauważysz, że nasza pętla próbuje ułożyć wszystkie kolumny. Aby to naprawić, musimy przejść do ustawień wierszy. Przejdź do 3-kolumnowego wiersza, kliknij kartę Projekt i zlokalizuj ustawienia układu .

Rozwiń kartę Ustawienia układu . Znajdź ustawienie pakowania układu i wybierz opakowanie . To zawiną naszą pętlę z powrotem do 3 kolumn.

Stylowanie kolumny pętli

Teraz, gdy ustawienia pętli są na miejscu, czas stylizować nasze kolumny. Ustawienia stylu, które tutaj wybieramy, wpłyną na pozostałe kolumny w pętli. W 3-kolumnowym wierszu kliknij w drugą kolumnę i kliknij kartę Projekt . Przejdź do rozwijania granicy i przypisz promień granicy 15px do kolumny. W stylach granicznych dodaj szerokość granicy 1Px i użyj #000000 jako koloru granicznego .

Dodaj zawartość do pętli

Możemy zacząć dodawać zawartość do pętli z przypisanymi stylami kolumny. Kliknij, aby dodać moduł obrazu do drugiej kolumny . Po dodaniu każda kolumna w pętli wyświetli symbol zastępczy obrazu.

Użyjemy dynamicznej mocy treści Divi 5, aby wciągnąć wizerunek naszego projektu. Unosić się nad obrazem, aby ujawnić ikony. Kliknij ikonę treści dynamicznej , aby kontynuować.

Wybierz wizerunek LOOP , gdy pojawią się opcje.

Nasza pętla umieści przedstawiony obraz każdego projektu bezpośrednio w naszej pętli portfolio.

Następnie dodaj moduł nagłówkowy do 2. kolumny pod wyświetlonym obrazem . Zostanie to wykorzystane do tytułu projektu . Powtórz powyższe kroki, aby dodać tytuł . Tym razem wybierz tytuł POLOP Post .

Na karcie Design wybierz H3 dla poziomu nagłówka , interfejs czcionki nagłówka , środka do wyrównania tekstu i 20px dla rozmiaru tekstu.

Na koniec dodamy przycisk, który łączy do każdego projektu . Dodaj moduł przycisku do drugiej kolumny pod tytułem postu . Kliknij ikonę dynamicznej zawartości w adresie URL łącza przycisku i wybierz Link pętli .

Przełącz na kartę Projekt i ustaw wyrównanie do środka .

Rozwiń ustawienia rozwijania przycisku i włącz użycie niestandardowych stylów przycisku . Wprowadź następujące ustawienia projektowe:

• Tło przycisku: #000000
• Promień granicy przycisków: 15px
• Szerokość granicy przycisków: 0px
• Czcionka przycisków: Inter
• Kolor tekstu przycisku: #ffffff
• Rozmiar tekstu przycisku: 16px
• Margines: 15px dół
• Wyściółka: 15px górna i dolna, 35px po lewej i prawej stronie

To wszystko! Jak widać, tworzenie pętli z Divi 5 jest prostym procesem.

Zmiana stylów z budowniczką pętli

Edycja stylów pętli jest tak samo prosta, jak tworzenie samej pętli. Powiedzmy, że chcesz zamienić z światła na ciemny motyw na twoją pętlę. Wprowadzanie zmian projektowych zajmuje tylko kilka sekund. Możesz zmienić kolor tła sekcji, a następnie wprowadzić zmiany w poszczególnych elementach pętli za pomocą kilku kliknięć.

Nie ma potrzeby edytowania elementów pętli indywidualnie. Ponieważ wszystkie są połączone, musisz edytować moduły tylko raz, a Divi 5 zastosuje aktualizowane style automatycznie w każdym module w pętli.

Możesz dodać więcej modułów do pętli, takich jak fragment projektu , data opublikowania, liczba komentarzy , bio autora , pola niestandardowe i wiele innych.

Jeśli chcesz zaostrzyć przestrzeń wokół elementów w pętli, możesz dostosować pionową szczelinę w ustawieniach wiersza i kolumny . Kontroluje to ilość miejsca między każdym wierszem a poszczególnymi modułami za pomocą systemu układu FlexBox Divi 5, umożliwiając doskonalenie wyglądu pętli.

Testowanie i udoskonalenie pętli portfolio

Po zbudowaniu portfolio nadszedł czas, aby go przetestować, aby upewnić się, że wszystko działa zgodnie z przeznaczeniem. Zacznij od podglądu siatki z przodu za pomocą linku podglądu na górnym pasku wizualnego budowniczego.

Sprawdź, czy tytuł każdego projektu, wizerunek , fragment i Link pętli, prawidłowo pobierają projekty CPT. Upewnij się, że żadne symbole zastępcze nie są zerwanymi elementami.

Po powrocie do wizualnego konstruktora sprawdź, czy układ jest prawidłowo dostosowuje się przy użyciu konfigurowalnych responsywnych punktów przerwania Divi 5. Domyślnie Divi 5 oferuje 3 punkty przerwania - jeden na komputer stacjonarny , tablet i telefon - ale możesz włączyć do 7, klikając menu elipsy na środku górnego paska wizualnego budownicza.

Przejdź przez każdy punkt przerwania , sprawdź układ i w razie potrzeby dokonaj regulacji.

Aby układ był bardziej przyjazny dla urządzeń mobilnych, możesz użyć ustawienia struktury kolumny Divi 5, aby zmienić liczbę kolumn wyświetlanych na mniejszych urządzeniach.

Najlepsze praktyki i wskazówki

Aby upewnić się, że w pełni wykorzystujesz Divi 5 i Builder Loop, oto kilka najlepszych praktyk do naśladowania podczas budowania portfela.

1. Zapewnij spójność projektowania ze zmiennymi projektowymi

Funkcja zmiennych projektowych Divi 5 pozwala zdefiniować spójną typografię, kolory i odstępy na stronie portfolio. W The Visual Builder ustaw globalne zmienne dla czcionek, kolorów i wyściółki/marginesów, aby zapewnić, że każdy element portfela wygląda na jednolite. Aby utworzyć zmienne , kliknij ikonę Menedżera zmiennych w menu po lewej stronie w The Visual Builder.

Stamtąd możesz przypisać globalne czcionki , kolory i więcej, zapewniając, że Twoje projekty są spójne na całej witrynie, a nie tylko na stronie portfolio.

2. Rozważ dostępność

Dostępność zapewnia wszystkim użytkownikom, w tym osoby niepełnosprawne, mogą poruszać się i cieszyć się pracą. Pamiętaj, aby dodać alternatywny tekst dla obrazów podczas przesyłania ich do galerii multimediów. Pomaga to czytnikom ekranu przekazać treść użytkownikom zaburzonym wizualnie.

Dobrze jest również wybierać kolory z wystarczającymi współczynnikami kontrastu, aby zapewnić czytelność użytkownikom z zaburzeniami wizualnymi.

3. Zapisz i ponownie użyj szablonów

Po udoskonaleniu szablonu konstruktora pętli zapisz go do biblioteki Divi , klikając prawym przyciskiem myszy w sekcji portfolio i wybierając zapisz w bibliotece . Podaj jego opisową nazwę dla łatwego odniesienia. Pozwala to ponownie wykorzystać szablon na innych stronach bez odbudowy od zera.

Aby korzystać z szablonu na innych stronach internetowych, możesz zapisać go na Cloud Divi i zaimportować go do innych projektów internetowych za pomocą jednego kliknięcia.

Oszczędzanie szablonów usprawnia przepływ pracy i zapewnia szybkie wdrożenie profesjonalnych sieci portfolio do przyszłych projektów.

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!

Wypróbuj dziś konstruktor pętli w Divi 5

Divi 5's Loop Builder ułatwia tworzenie dynamicznych sieci portfolio, umożliwiając zaprezentowanie swojej pracy ze stylem i wydajnością. Wykorzystując wbudowane projekty CPT i potężne funkcje Buildera Loop, możesz tworzyć elastyczne i w pełni konfigurowalne siatki, które dynamicznie przyciągają treść projektu. Jego elastyczność pozwala zaprojektować unikalne układy za pomocą dowolnego modułu Divi, skonfigurować zapytania do wyświetlania określonych projektów i tworzyć responsywne siatki, które świecą na dowolnym urządzeniu.

Czy jesteś gotowy, aby ożywić swoje portfolio? Zanurz się w najnowsze publiczne wydanie Alfa Divi 5 i eksperymentuj z układem portfela. Niezależnie od tego, czy jesteś freelancerem prezentującym projekty, czy firmą podkreślającą pracę klientów, Builder Loop umożliwia łatwe tworzenie profesjonalnego, dynamicznego wyświetlacza.