10 układów siatki wykonanych z zagnieżdżonych wierszy Divi 5 (bezpłatne pobieranie)

Układy siatki oferują ustrukturyzowany, ale elastyczny sposób organizowania treści, poprawy wrażenia użytkownika i zapewnienia bezproblemowej reakcji na wszystkie urządzenia. Wraz z wydaniem Public Alpha Divi 5 projektanci stron internetowych mają nowy zestaw narzędzi do tworzenia pięknych układów siatki, które przekraczają kreatywne granice. Dzięki całkowicie przeprojektowanemu konstruktorowi wizualnemu i potężnym nowym funkcjom, takim jak zagnieżdżone rzędy, zaawansowane jednostki i grupy modułów, możesz łatwo budować warstwowe, złożone układy.

W tym poście zaprezentujemy układy siatki, które można łatwo zbudować z Divi 5, od symetrycznych siatek funkcyjnych po dynamiczne blogi murarskie i interaktywne prezentacje portfolio. Niezależnie od tego, czy projektujesz portfolio, sklep e-commerce, czy witryna korporacyjna, te układy zainspirują cię do podniesienia swoich projektów i urzekających odbiorców.

Zbadajmy, w jaki sposób zaawansowane funkcje Divi 5 umożliwiają te kreatywne układy w stylu siatki.

Divi 5 jest gotowy do użycia na nowych stronach internetowych, ale nie zalecamy jeszcze przekształcenia istniejących stron na Divi 5.

Kluczowe funkcje Divi 5 dla układów siatki

Odbudowany fundament Divi 5 wprowadza funkcje, które sprawiają, że tworzenie układów siatki jest łatwiejsze niż kiedykolwiek. Narzędzia te pozwalają projektantom tworzyć złożone, atrakcyjne wizualnie siatki z precyzją i wydajnością, a jednocześnie zachować elastyczność w różnych urządzeniach. Poniżej eksplorujemy kluczowe funkcje Divi 5, które umożliwiają tworzenie pięknych układów siatki.

Subskrybuj nasz kanał YouTube

Zagnieżdżone rzędy

Funkcja zagnieżdżonych wierszy Divi 5 pozwala umieszczać wiersze w rzędach, oferując nieskończoną zdolność gniazdową do tworzenia skomplikowanych struktur siatki z intuicyjnym interfejsem przeciągania i upuszczania. Ta funkcjonalność upraszcza projekt wielowarstwowych siatek, zapewniając precyzyjną kontrolę nad umieszczaniem modułu.

Niezależnie od tego, czy budowanie złożonej prezentacji produktu, czy warstwowej siatki portfolio, następne rzędy umożliwia bardziej eleganckie organizowanie treści, dzięki czemu układy dynamiczne i wizualnie angażują się.

Konfigurowalne punkty przerwania

Responsywna projekt ma kluczowe znaczenie dla nowoczesnych stron internetowych, a konfigurowalne punkty przerwania Divi 5 ułatwiają zapewnienie, że siatki wyglądają bezbłędnie na dowolnym urządzeniu. Możesz użyć siedmiu komputerów stacjonarnych, tabletów i mobilnych punktów przerwania, umożliwiając płynnie dostosowanie siatków do różnych rozmiarów ekranu.

W połączeniu ze skalowaniem płótna, które zapewnia podgląd układów w czasie rzeczywistym w różnych punktach przerwania w ramach wizualnego konstruktora, ta funkcja zapewnia zoptymalizowanie siatków pod kątem reakcji, zapewniając spójny wrażenia użytkownika na wszystkich urządzeniach.

Grupy modułów

Grupy modułów usprawniają proces projektowania i utrzymywania spójnej estetyki siatki. Grupując razem moduły, możesz zastosować stylizację zbiorową i ponownie wykorzystać te grupy na wielu stronach, oszczędzając czas i zapewniając spójność projektowania.

Jest to szczególnie przydatne w przypadku układów siatki, takich jak posty na blogu lub karty produktów, w których spójne elementy projektowe - takie jak czcionki, kolory lub efekty na zawieszce - są niezbędne do spójnego wyglądu w całej stronie.

Zmienne projektowe

Dzięki zmiennym projektowym Divi 5 oferuje scentralizowane zarządzanie kluczowymi elementami projektu, takimi jak kolory, czcionki, linki, typografia i wiele innych. Ta funkcja zapewnia jednolitość w układach siatki - i całej witrynie - ułatwiają utrzymanie spójnej tożsamości wizualnej. Style są ustawione w menedżerze zmiennym i można je zastosować tam, gdzie chcesz

Chcesz zaktualizować kolor lub styl czcionki? Zmienne projektowe pozwalają wprowadzać zmiany w jednym miejscu, natychmiast stosując je we wszystkich sekcjach i stronach, usprawniając przepływ pracy i dopracowywanie projektów.

Zaawansowane jednostki

Zaawansowane jednostki Divi 5 zapewniają szczegółową kontrolę nad odstępami i rozmiarem z opcjami takimi jak VW, VH, REM i EM. Jednostki te umożliwiają dynamiczne i responsywne układy siatki, które doskonale skalują się między urządzeniami. Możesz dostosować wyściółki, marginesy lub rozmiary elementów za pomocą menedżera zmiennego. Zaawansowane jednostki zapewniają elastyczność w celu wyrównania się i precyzyjnie skalowania komponentów siatki, zapewniając, że układy są funkcjonalne i harmonijne wizualnie.

Zarządzanie atrybutami

Zarządzanie atrybutami przyspiesza proces projektowania, umożliwiając kopiowanie, wklejanie i resetowanie atrybutów między elementami projektowymi. Ta funkcja jest najważniejsza do stosowania spójnych stylów, takich jak efekt nachylenia lub odstępy, do wielu modułów. Zmniejszając powtarzające się zadania, zarządzanie atrybutami pozwala skupić się na kreatywności, jednocześnie przyspieszając rozwój złożonych układów siatki.

Te funkcje Divi 5 współpracują, aby zapewnić niezrównaną elastyczność i wydajność, ułatwiając tworzenie oszałamiających, responsywnych układów siatki, które poprawiają wrażenia użytkowników i podnoszą twoje projekty stron internetowych.

10 Przykłady układu kreatywnego układu w Divi 5

Układy sieci są kamieniem węgielnym nowoczesnego projektowania stron internetowych, a dzięki Divi 5 budowanie ich nigdy nie było łatwiejsze. Niezależnie od tego, czy prezentujesz produkty, portfele, członkowie zespołu, czy FAQ, Divi 5 jest w stanie budować układy funkcjonalne i oszałamiające wizualnie. Spójrzmy na 10 przykładów układów siatki, które możesz stworzyć z Divi 5.

1. Symetryczna siatka cech

Symetryczne siatki funkcyjne oferują świetny sposób na czyste i zorganizowane produkty, usługi lub przedmioty portfela. Ten styl siatki jest idealny do wyróżnienia treści strukturalnej i jest wszechstronny w swojej aplikacji. Mogą być wykorzystywane do witryn biznesowych, portfeli i stron docelowych, oferując dopracowany wygląd, który prowadzi użytkowników poprzez informacje bez wysiłku.

W poniższym przykładzie zbudowaliśmy czterokolumną sieć, aby zaprezentować działalność apteki. Możemy osiągnąć profesjonalny, dopracowany wygląd w ciągu kilku minut za pomocą zagnieżdżonych rzędów, grup modułów i zarządzania atrybutami.

2. Siatka murowa

Siatka murowa to dynamiczny układ w stylu Pinterest, który organizuje posty na blogu, elementy portfela, a nawet przepisy o różnych wysokościach w wizualnie angażującej, szczelnie zapakowanej siatce. W przeciwieństwie do tradycyjnych siatek o stałych wysokości rzędów, siatki murowane pozwalają naturalnie przepływać, wypełniając pionowe luki, aby stworzyć bezproblemowy, organiczny wygląd. Ten styl siatki jest idealny do stron internetowych, które priorytetują wizualne opowiadanie historii, takie jak blogi, czasopisma lub kreatywne portfolio. Dzięki rodzimym funkcjom Divi 5 tworzenie stylowej i responsywnej siatki murowej jest intuicyjne i wydajne.

W poniższym przykładzie połączyliśmy zagnieżdżone grupy i grupy modułów, aby utworzyć siatkę murowaną dla przepisów, wykorzystując skróty Divi do szybszego zduplikowania grup.

3. Interaktywna siatka portfolio

Interaktywny układ siatki portfolio stanowi angażujący sposób na zaprezentowanie swojej pracy. Możesz włączyć wyskakujące okienka Lightbox, efekty najemnika, przyciski i inne, aby umożliwić użytkownikom eksplorację treści. Ten styl siatki jest doskonały w przypadku stron internetowych, które mają na celu urzeczenie swoich odbiorców pracą wizualną, taką jak fotografia, projektowanie lub jedno i drugie, przy jednoczesnym zapewnieniu bezproblemowej nawigacji i interaktywności.

Dzięki zaawansowanym funkcjom Divi 5 projektanci mogą tworzyć responsywne, przyjazne dla użytkownika siatki portfela, które skutecznie podkreślają prace twórcze.

4. Grid Product Showcase

Grid prezentujący produkty oferuje wyjątkowy sposób na prezentowanie bestsellerów, wyróżnionych produktów lub nowych produktów, które wprowadzasz na świat. Możesz stworzyć ustrukturyzowany, atrakcyjny wizualnie układ z obrazami, tytułami, cenami i przyciskami zoptymalizowanymi do sklepów e-commerce. Korzystając z układu siatki, możesz stworzyć czysty, zorganizowany układ, aby ułatwić użytkownikom przeglądanie i podejmowanie decyzji o zakupach.

Dzięki Divi 5 możesz wykorzystać potężne funkcje, aby tworzyć responsywne, konsekwentne marki układy, które napędzają zaangażowanie i konwersje.

5. Siatka członków zespołu

Siatki członków zespołu pozwalają zaprezentować profile zespołu z obrazami, nazwami, ról i linkami społecznościowymi. Ten styl siatki tworzy profesjonalną i przystępną prezentację, dzięki czemu jest idealna do stron internetowych podkreślających wiedzę i osobowość ich zespołu. Siatki zespołowe są idealne dla witryn korporacyjnych, agencji lub organizacji non-profit, ale można je stosować na dowolnej stronie, na której potrzebujesz zaprezentować ludzi.

W poniższym przykładzie używamy trzech kolumnowej siatki z zagnieżdżonymi wierszami i stosujemy zmienne projektowe, aby reaktywnie kontrolować rozmiar czcionki.

6. Siatka usług

Układ siatki to świetny sposób na zaprezentowanie usług firmy. Podkreśla usługi w zorganizowanym, skanowanym formacie, co czyni go idealnym dla stron internetowych, które muszą przekazać swoje propozycje wartości. Idealna dla agencji, freelancerów lub firm opartych na usługach, Grid wykorzystuje zaawansowane funkcje Divi 5 do tworzenia responsywnych, angażujących układów, które napędzają zapytania i konwersje klientów.

W poniższym przykładzie użyliśmy czterokolumnowego wiersza, przypisaliśmy formułę calc () do odstępów od rzędów oraz włączone grupy modułów i zagnieżdżone wiersze, aby przyspieszyć proces projektowania.

7. Grid harmonogram wydarzeń

Styl harmonogramu wydarzeń jest idealny do organizowania i prezentacji wrażliwych na czas zawodowych i uporządkowanych, dzięki czemu idealnie nadaje się do witryn organizujących wydarzenia, takie jak konferencje, warsztaty lub spotkania społeczności. Funkcje Divi 5 pozwalają dodawać daty, tytuły i opisy w formacie siatki, ułatwiając odwiedzającym znalezienie tego, czego chcą.

Poniższy przykład pokazuje trzykolumnowy układ z zagnieżdżonymi wierszami, aby wyświetlać zdarzenia funkcjonalne i estetyczne.

8. Siatka stołowa wyceny

Divi 4 (i Divi 5) są wyposażone w moduł cenowy, ale jest on ograniczony do cen, przycisku i punktów. Dla tych, którzy chcą rozwinąć natywną funkcjonalność Divi i zbudować siatkę cenową zaspokojenia ich potrzeb, Divi 5 zapewnia sposób na to. Możesz utworzyć siatkę cenową, która oszałamiająco wyświetla treść, używając zagnieżdżonych wierszy, grup modułów i zarządzania atrybutami.

Na przykład możesz utworzyć układ trzykolumnowy, który zapewnia ceny, funkcje i wiele przycisków bez konieczności zgodności z ograniczeniami wbudowanego modułu cenowego. Możesz dostosować ustawienia responsywne dla mniejszych ekranów, a następnie utworzyć ustawienie grupy opcji dla 50% kolumn szerokości, zapewniając idealnie ustawione kolumny na tablecie i telefonie komórkowym.

9. Siatka FAQ akordeon

Posiadanie sekcji FAQ w Twojej witrynie może pomóc użytkownikom uzyskać dostęp do listy często zadawanych pytań, dając im lepsze wyobrażenie o tym, co oferujesz. Ten styl siatki łączy jasność siatki z interaktywnością modułów akordeonowych, co czyni ją idealną dla stron internetowych, które muszą dostarczyć zwięzłych, dostępnych informacji. Idealny do stron wsparcia, centrów pomocy lub witryn informacyjnych, siatka FAQ wykorzystuje solidne funkcje Divi 5, aby tworzyć responsywne, angażujące układy, które poprawiają wrażenia użytkownika.

W tym przykładzie wykorzystaliśmy zagnieżdżone wiersze do utworzenia angażującej sekcji FAQ z informacjami i pytań i odpowiedzi, aby zapewnić użytkownikom odpowiednie informacje potrzebne do podjęcia świadomej decyzji.

10. Siatka galerii obrazów

Siatka galerii z wyskakującym wyskakowaniem Lightbox to wizualnie uderzający sposób prezentacji fotografii, przykładów portfolio lub innych zdjęć. Ten styl siatki jest idealny do prezentowania wizualnego opowiadania historii, dzięki czemu jest idealny do stron internetowych, które priorytetowo traktują oszałamiające obrazy, takie jak galerie sztuki, blogi podróży lub fotografia. Dzięki Divi 5 projektanci mogą tworzyć responsywne, angażujące siatki galerii, które urzekają.

W poniższym przykładzie używamy prostego układu czterokolumny do prezentacji obrazów. Aby uzyskać dodatkowy dotyk, włączyliśmy Lightbox na obrazach i dodaliśmy moduł udostępniania społecznościowego w prawym dolnym rogu każdego zdjęcia.

Wskazówki dotyczące tworzenia skutecznych układów siatki w Divi 5

Dzięki potężnym, elastycznym funkcjom Divi 5 budowanie skutecznych układów siatki jest łatwiejsze niż kiedykolwiek. Niezależnie od tego, czy budujesz siatkę funkcyjną, czy dynamiczną galerię obrazów z elementami nakładki, te wskazówki pomogą ci zmaksymalizować możliwości Divi 5, aby stworzyć responsywne, spójne i wydajne projekty, które zwiększają wrażenia użytkownika Twojej witryny.

1. Wykorzystaj zagnieżdżone wiersze

Funkcja zagnieżdżonych wierszy Divi 5 tworzy złożone, wielowarstwowe struktury siatki. Możesz organizować zawartość poprzez gniazdowanie wierszy w rzędach, takich jak umieszczanie obrazów i tekstu w pojedynczej komórce siatki w celu precyzyjnego wyrównania. Zagnieżdżone rzędy są idealne do budowania układów, takich jak siatki portfelowe lub harmonogramy wydarzeń, co daje elastyczność projektowania kreatywnych, strukturalnych sieci.

2. Optymalizuj pod kątem reakcji

Za pomocą skalowania na płótnie i konfigurowalnych punktów przerwania możesz upewnić się, że siatki wyglądają bezbłędnie na każdym urządzeniu. Układy testów w ramach budowniczego wizualnego w czasie rzeczywistym, aby wyświetlić podgląd, w jaki sposób dostosowują się do komputerów stacjonarnych, tabletów i urządzeń mobilnych. Możesz dostosować szerokości kolumn, odstępy lub rozmiary czcionek w określonych punktach przerwania, aby utrzymać użyteczność i atrakcyjność wizualną. Dzięki konfigurowalnym punktom przerwania Divi 5 możesz zapewnić bezproblemową wrażenia dla wszystkich użytkowników, od dużych ekranów po smartfony.

3. Użyj grup modułów do wydajności

Grupy modułów w Divi 5 mogą usprawnić przepływ pracy, grupując podobne elementy siatki, takie jak karty produktów lub profile członków zespołu. Możesz jednocześnie stosować spójny styl - czcionki, kolory, efekty najemnika itp. - do wielu modułów i ponownie wykorzystać je na stronach. Jest to oszczędność czasu na utrzymanie jednolitości w siatkach, takich jak tabele cenowe lub FAQ, zmniejszanie powtarzających się edycji i zapewnianie wypolerowanego wyglądu.

4. Utrzymuj spójność ze zmiennymi projektowymi

Użyj zmiennych projektowych, aby scentralizować kontrolę nad kolorami, czcionkami, odstępami, linkami i nie tylko. Określając te elementy w jednym miejscu, możesz aktualizować style na całym świecie, idealne do utrzymywania sieci serwisowych lub układów galerii harmonijnych.

5. Eksperymentuj z zaawansowanymi jednostkami

Zwiększ elastyczność swoich siatków, używając zaawansowanych jednostek, takich jak VH, VW, REM, CALC () lub CLAMP () do dynamicznego odstępu i rozmiaru. Jednostki te pozwalają płynnie skalować pierwiastki siatki na podstawie rozmiaru rzutni lub ustawień czcionek, zapewniając reakcję i równowagę wizualną.

Pobierz układy sekcji siatki za darmo

Chcesz zacząć używać układów siatki wewnątrz Divi 5? Subskrybuj poniżej, aby uzyskać dostęp do plików JSON. Możesz przesłać je do biblioteki Divi i zaimportować później na swoje strony.

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!

Uwolnij kreatywność z Divi 5

Pakiet funkcji Divi 5, od zagnieżdżonych wierszy po zarządzanie atrybutami, pozwala projektantom łatwo budować wszechstronne, responsywne i oszałamiające wizualnie układy siatki. Divi 5 zapewnia niezrównaną elastyczność, precyzję i wydajność w celu tworzenia dowolnego układu siatki, od siatek funkcyjnych po interaktywne portfele. Niezależnie od tego, czy budujesz witrynę e-commerce, stronę o stronie, czy sekcja FAQ, nowoczesny interfejs Divi 5 i ulepszone możliwości sprawiają, że zapewnienie Twojej kreatywnej wizji do życia.

Czy jesteś gotowy na zbadanie możliwości? Zanurz się w publicznej alfa Divi 5, aby eksperymentować z tworzeniem układów siatki. Jak wspomniano wcześniej, Divi 5 jest odpowiednia dla nowych stron internetowych, ale nie zalecamy używania go na istniejących stronach, przynajmniej jeszcze nie.

Chcielibyśmy zobaczyć twoje kreacje. Udostępnij swoje unikalne układy siatki w naszych mediach społecznościowych lub komentarz poniżej.