6 nowych galerii obrazów Zbudowane z zagnieżdżonymi wierszami Divi 5 (bezpłatne pobieranie)

Jeśli kiedykolwiek próbowałeś ręcznie zbudować galerię obrazów, wiesz, jak szybko sprawy stają się nieuporządkowane. Nierówne obrazy, źle wyrównane rzędy i niereagujące wzory zamieniają prostą galerię w koszmar układu.

Nawet w Divi 4 złożone struktury obrazu często oznaczały układanie wielu rzędów i sekcji specjalistycznych, ulepszanie odstępów i godzin ręcznego dostosowywania. Ale z Divi 5 możesz to wszystko pominąć.

Dzięki funkcji nowych zagnieżdżonych wierszy możesz zbudować bardziej zaawansowane struktury galerii obrazów. W tym poście pokażemy Ci, jak i zapewniamy 6 projektów układu galerii, aby dać ci przewagę.

Divi 5 jest gotowy do użycia na nowych stronach internetowych, ale poczekaj trochę przed migracją istniejących.

Używanie zagnieżdżonych rzędów do budowy złożonych układów

Divi 4 miał już wszystko, czego potrzebujesz, aby zbudować galerie obrazów, ale tworzenie złożonych układów często wydawało się niezgrabne. Divi 5 przedstawia zagnieżdżone rzędy , które dają szybszy i czystszy sposób wizualnie budować zaawansowane układy galerii, bez wymaganych hacków.

Subskrybuj nasz kanał YouTube

Jakie są zagnieżdżone rzędy?

Zagnieżdżone rzędy są potężną nową funkcją układu w Divi 5, która pozwala umieścić jeden wiersz w drugim, zapewniając większą kontrolę nad tym, jak strukturę stronę. Umożliwia to projektowanie złożonych sekcji bezpośrednio w wizualnym budowniczym bez konieczności pisania kodu lub polegania na obejściach.

Gniazdowanie wiersza jest jak dodanie innego modułu. Musisz tylko unosić się nad elementem, w którym chcesz umieścić wiersz i kliknąć przycisk Plus, aby wybrać nowy wiersz. Następnie możesz wybierać spośród wszystkich układów wierszy, które są idealne do różnych struktur galerii.

Ten zagnieżdżony rząd zachowuje się dokładnie jak zwykły rząd. Możesz wybrać strukturę kolumny, dodać moduły i w razie potrzeby gniazdować kolejny rząd - dzięki jej nieskończonej zdolności gniazdowej. Możesz także zmienić rozmiar kolumn, przeciągając, więc dostosowanie szerokości wydaje się intuicyjne i nie wiąże się z hackami matematyki lub odstępów.

Zagnieżdżone rzędy są również domyślnie w pełni responsywne. Od konstruktora możesz dostosować swój układ na różnych ekranach. Ponieważ jest to część frameworka Divi 5, działa idealnie z innymi funkcjami, takimi jak ustawienia o grupie opcji i zmienne projektowe. Podzielmy się również wskazówkami dotyczącymi połączenia zagnieżdżonych wierszy z zaawansowanymi funkcjami Divi 5 w celu zoptymalizowania przepływu pracy galerii.

Dowiedz się wszystkiego o zagnieżdżonych rzędach Divi 5

Co wyróżnia zagnieżdżone rzędy?

W Divi 4 budowanie niestandardowych układów galerii obrazów obejmowało twórczo przy użyciu wierszy, sekcji specjalistycznych i układów w celu osiągnięcia bardziej zaawansowanych projektów. Oznaczało to, że byłoby to trudne, gdybyś nie miał know-how projektowania. I nawet jeśli miałeś to doświadczenie, byłeś ograniczony do kilku struktur układu.

Zagnieżdżone rzędy oferują bardziej intuicyjne podejście. Nie musisz już polegać na oddzielnych rzędach lub sekcjach specjalnych. Możesz łatwo gniazdować i mieszać i dopasować je do modułów, aby stworzyć nieograniczone wzory projektowe. Chcesz utworzyć prezentację produktów? Utwórz dwupoziomowy wiersz, dodaj swój wyświetlony obraz po lewej i opis po prawej, gestuj trzykolumnowy rząd pod lewym obrazem i dodaj obrazy obsługiwane. Twoja wyobraźnia jest limitem!

6 Układy galerii obrazów, które możesz zbudować z zagnieżdżonymi wierszami

Aby rzucić okiem na to, co jest możliwe, stworzyliśmy sześć projektów układu galerii obrazów z instrukcjami dotyczącymi tego, w jaki sposób zagnieżdżone rzędy zostały użyte do ich zaprojektowania. Przejdźmy do nich.

Układ 1: Wbudowana galeria CTA

Warstwowy układ siatki wykorzystuje nowoczesną siatkę w stylu czasopism, która podkreśla jeden projekt z kombinacją dużych wizualizacji, strzałów wspierających i starannie umieszczonego tekstu. Pierwsza sekcja to 2-kolumna zagnieżdżona rząd (zagnieżdżona w kolejnym 2-kolumnowym rzędzie) zawierającym dwa obrazy, a następnie kolejny duży obraz. Poziomy sztandar tekstowy przełamuje siatkę, dodając kontekst i wezwanie do działania. Dolna sekcja wprowadza kolejny układ trzykolumnowy, aby kontynuować historię, ale z miejscem na dłuższy opis tekstu.

Ten projekt jest idealny do portfeli, prezentacji nieruchomości lub układów redakcyjnych wymagających rytmu wizualnego i jasnej hierarchii treści. Działa pięknie na rozmiarach ekranu, jednocześnie czując się ustrukturyzowany i celowy.

Jak to zbudować

Zacznij od dwóch kolumn. Dodaj jeden obraz po prawej i gestaj w kolejnym wierszu w lewej kolumnie. Dodaj zdjęcia do wszystkich. Następnie kolejny zagnieżdżony rząd jest umieszczony pod sztandarem, aby przechowywać akapit tekstowy obok innego zestawu wizualizacji. Powtórz całą strukturę lub dokonaj kilku zmian, takich jak umieszczenie wiersza tekstowego na temat zagnieżdżonych obrazów.

Ten układ jest wyjątkowy w tym, jak zagnieżdżone rzędy są używane w każdej sekcji wizualnej. Zagnieżdżone wiersze Divi 5 pozwalają na elastyczność strukturalną, mieszając formaty wierszy w jednej kolumnie i nakładanie ich pod elementami kontekstowymi.

Layout 2: Galeria Focus Focus

Układ dwukolumnowy, w którym lewa kolumna układa pionowy obraz nad krótkim blokiem tekstowym, a prawa kolumna ma duży obraz, a następnie wiersz trzech mniejszych obrazów nośnych. Ten układ podkreśla jeden główny moment wizualny, jednocześnie pozwalając na miejsce dla kontekstu pisemnego, jak i wtórnego paska obrazu w tym samym układzie.

Układ galerii podzielonej Focus jest idealny na galerie weselne, wydarzenia lub kwiatowe, w których każdy blok wizualny oddaje jedną chwilę lub emocje. Działa również dobrze, gdy chcesz połączyć odważny obraz ogniskowy z miniaturami podtrzymującymi i małą cytatem, referencjami lub komunikatem wprowadzającym.

Jak to zbudować

Utwórz 2-kolumnowy rząd. W lewej kolumnie ułóż pionowy obraz na górze i moduł tekstowy pod nim za pomocą dwóch osobnych wierszy. W prawej kolumnie włóż moduł pojedynczego obrazu u góry dla wyświetlonego zdjęcia, a następnie dodaj zagnieżdżony wiersz z trzema kolumnami bezpośrednio pod nim, aby pomieścić mniejsze obrazy podparcia.

Kluczem jest regulacja wyściółki i ustawianie szerokości rynny na 1 w zagnieżdżonym rzędzie, aby wszystko było szczelne i czyste. Później, gdy dodasz obrazy, utwórz ustawienie wstępne obramowania (ustawiaj szerokość obramowania na 2 i biały kolor obramowania ) i zastosuj ją na wszystkie elementy.

Layout 3: Project Spotlight Galeria

Ten układ przekształca galerię obrazów w prezentację poszczególnych projektów lub ofert. Zamiast wyświetlania wizualizacji, każdy element otrzymuje własną etykietę i wezwanie do działania, dzięki czemu jest idealny do portfeli, przepisów, wyświetleń produktów lub studiów przypadków.

Krótki dwupoziomowy rząd podąża za każdym obrazem. Lewa strona zawiera szybki opis lub nazwę projektu, a prawa strona ma przycisk zapraszający użytkownika do działania, na przykład zamówienie . Układ galerii reflektorów projektu zapewnia więcej celów i interakcji w Twojej galerii.

Jak to zbudować

Pod każdym obrazem dodaliśmy dwukolumnową zagnieżdżoną rząd. Użyliśmy lewej kolumny do krótkiego opisu i prawej kolumny dla przycisku wywoływania do działania. Następnie zaprojektowaliśmy przycisk za pomocą globalnych stylów i powtórzyliśmy tę strukturę dla każdego elementu galerii, aby zachować spójność. Aby nakładać się na obraz wierszy, ustawiliśmy pozycję na bezwzględny z przesunięciem pionowym 40px i in indeks 1000.

Dodaliśmy również ustawienie presetu Shadow do wszystkich obrazów, które nie tylko nadało galerii wypolerowany wygląd, ale także zaoszczędziło mi czas, pozwalając mi zastosować spójne marki w wielu modułach za kilka kliknięć.

Layout 4: Scroll Reveal Gallery

Układ galerii Scroll Reveal jest przeznaczony do wizualnego opowiadania historii, który rozwija się, gdy użytkownicy przewijają. Każda sekcja ma duży obraz w połączeniu z mniejszymi elementami wizualnymi (tworzonymi przez gniazdowanie wielu rzędów razem).

Jest idealny do galerii redakcyjnych, prezentacji przepisów (wyróżniających się kroków lub składników) lub stron zespołowych, które chcą interaktywnie przechwycić momenty grupowe. Zamiast przytłaczających widzów, prowadzi ich przez każdą historię wizualnie, jeden blok na raz.

Jak to zbudować

Struktura jest prosta: Utwórz dwupoziomowy rząd. Dodaj moduł obrazu, nagłówek, tekst i przycisk po lewej stronie. Po prawej goście nowy wiersz z dwiema kolumnami i wstaw moduły obrazu do każdego z nich, aby obsługiwać wizualizacje. Następnie możesz alternatywnie układać pojedyncze i dwukolumnowe rzędy, aby stworzyć siatkę przypominającą mur.

Kluczowym graczem tego układu jest lewa sekcja, która się trzyma. Aby stworzyć wyróżniony kij sekcji, musisz utworzyć grupę modułów i włączyć ustawienia efektów przewijania . Kliknij swoją grupę modułów i przejdź do Ustawienia> Zaawansowane> Efekty przewijania.

Zrób grupę modułów przyklejona do góry i ustaw dolny lepki limit na obszar ciała. Gdy użytkownicy przewijają w dół, polecany obraz będzie się trzymał, a inne obrazy wciąż się podnoszą.

Układ 5: Zatoczona galeria produktów

Nie każda galeria potrzebuje obrazu ogniskowego lub złożonej struktury. Czasami wszystko, czego potrzebujesz, to zestaw obrazów ułożonych w rozłożoną strukturę, i właśnie tam lśnią zagnieżdżone rzędy.

Ten układ jest idealny do witryn e-commerce lub witryn zorientowanych na produkty, w których chcesz wyróżnić kolekcję, nie czyniąc jej typowej siatki. Wykorzystuje wiele białych przestrzeni i zagnieżdżonych rzędów, aby przełamać wizualną monotonię, mieszając jedno, dwa i trzykolumnowe rzędy obrazu w jednej sekcji. Rezultatem jest dobrze zrównoważony układ, który wydaje się ręcznie wykonany i redakcyjny, idealny do prezentacji szczegółów produktu, zbliżeń materiałowych lub uzupełniających się przedmiotów.

Działa szczególnie dobrze w przypadku marek z produktami dotykowymi lub luksusowymi, takimi jak wyroby skórzane, ceramika lub ręcznie robione przedmioty, w których ma znaczenie wizualne opowiadanie historii.

Jak to zbudować

Utwórz dwupoziomowy rząd. Dodaj ułożony układ obrazów za pomocą zagnieżdżonych rzędów w lewej kolumnie. Jeden rząd ma dwa małe zdjęcia obok siebie, a drugie ma pionowy obraz. W prawej kolumnie gestuj nowy wiersz z trzema kolumnami i wstaw obrazy produktów. Poniżej umieść swój tekst i przycisk.

Aby utworzyć nakładający się efekt torebki (jak w sekcji wykonanej ręcznie) , dodaj moduł obrazu w swoim rzędzie i użyj pozycjonowania bezwzględnego (zaawansowane> pozycja> bezwzględna ). Następnie użyj suwaków przesunięcia i indeksu Z, aby ułożyć ją między dwiema sekcjami. To pozwala tworzyć układy w stylu czasopism, w których obrazy przełamują siatkę, aby uzyskać dodatkowe zainteresowanie wizualne.

Układ 6: Asymetryczna siatka portfolio

Asymetryczny układ siatki portfolio łączy opowiadanie historii i obrazy w czystym formacie dwupolumnowym. Użyj lewej kolumny, aby wprowadzić projekt z nagłówkiem, krótkim opisem i CTA. W prawej kolumnie trzykolumnowy zagnieżdżony rząd znajduje się powyżej dużego obrazu, dając idealną okazję do pokazania kluczowych wizualizacji z ujęciami wspierającymi.

Ten projekt jest idealny dla projektantów, fotografów lub agencji przedstawiających wyselekcjonowane studia przypadków lub portfele. Koncentruje uwagę, oferując naturalny rytm przewijania i przepływ przyjazny dla urządzeń mobilnych.

Jak to zbudować

Zacznij od dwóch kolumn. W lewej kolumnie dodaj moduł tekstowy do tytułu i opisu, a następnie moduł przycisku (jeśli chcesz).

Dodaj zagnieżdżony wiersz w prawej kolumnie. Wybierz układ trzykolumnowy i ułóż inny moduł obrazu. Włóż trzy obrazy podtrzymujące w zagnieżdżonym rzędzie i duży obraz w ułożonym module obrazu. Użyj innych struktur wierszy, aby stworzyć więcej wzorów.

Aby utrzymać wszystko, ustaw szerokość rynny na 1 i przycinaj zdjęcia na spójne wysokości przed przesłaniem. Użyj globalnego wstępnego obrazu obrazu (takiego jak miękka granica lub kropla) i efekty unoszącego się, aby utrzymać interaktywne, ale wyrafinowane rzeczy.

Zauważysz również kolejny zagnieżdżony rząd nakładający obraz. Ustawiamy pozycję na absolutną , aby stworzyć efekt nakładki .

Najlepsze wskazówki dotyczące budowy interaktywnych galerii obrazów

Po wprowadzeniu układu posyp w kilku dodatkowych szczegółach, aby galerie były bardziej wypolerowane. Oto jak:

1. Stwórz efekty najemnika

Dodanie efektów najemnika jest jednym z najłatwiejszych sposobów, aby twoje galerie obrazów poczuły się bardziej dynamiczne. Dodaje interaktywność bez odwracania uwagi od treści i pomaga obrazom poczuć się żywcem, gdy użytkownicy się z nimi angażują.

W Divi 5 dodanie efektów unośnika do zdjęć jest łatwe. Podczas edycji możesz łatwo przełączyć się na zawieszkę (i tryby responsywne) i dostosować ustawienia.

Nie musisz przełączać się na zawieszkę dla każdej innej opcji obrazu lub ustawienia; Po prostu przełącz raz, wprowadzaj zmiany w wszystkich elementach, które chcesz dostosować, i zapisz. Zmieniliśmy kolor graniczny, ale możesz także spróbować filtrów, przekształcić, dodawać cień i łatwiej.

Możesz zastosować to do poszczególnych obrazów lub zapisać go jako ustawienie wstępne, jeśli chcesz, aby wszystkie swoje obrazy zachowały się w ten sam sposób. To mały szczegół, ale sprawia, że ​​twoja galeria jest przemyślana i interaktywna, a Divi sprawia, że ​​jest to łatwe.

2. Użyj atrybutów kopiowania/wklejania, aby szybko zastosować style do obrazów

Ręczne dostosowywanie każdego obrazu w galerii może być czasochłonne, szczególnie przy stosowaniu spójnych stylów, takich jak granice, cienie lub efekty zawisowe. Chociaż ustawienia wstępne są świetne dla globalnych stylów, możesz nie chcieć tworzyć nowego ustawienia dla każdej niewielkiej regulacji.

System zarządzania atrybutami Divi 5 oferuje usprawnione rozwiązanie. Za pomocą kilku kliknięć możesz kopiować style z jednego obrazu i zastosować je do innych. Nie musisz ręcznie powtarzać tego samego procesu dostosowywania dla każdego obrazu. Możesz po prostu kopiować, wkleić i zachować spójność.

Na przykład dostosuj jeden element i skopiuj i wklej jego atrybuty do innych elementów, aby powtórzyć styl.

Divi 5 pozwala również na bardziej szczegółową kontrolę. Na przykład możesz kopiować i wkleić określone grupy atrybutów, takie jak tylko ustawienia projektowe lub tylko efekty zawisające. To sprawia, że ​​twój przepływ pracy jest wydajny i spójny.

3. Użyj zacisku, aby tworzyć płynne i responsywne obrazy

W nowoczesnym układzie galerii twoje obrazy nie powinny po prostu skalować, ale także inteligentnie reagować na różne rozmiary ekranu. Właśnie to pomaga osiągnąć funkcja Clamp ().

Divi 5 obsługuje Clamp () i wiele innych zaawansowanych jednostek, które umożliwiają ręczne wprowadzanie wartości wielkości w dowolnym miejscu, w tym szerokość obrazu, wyściółka i pola marginesu. Clamp () jest idealny do reakcji. Pozwala ustawić minimalną, idealną i maksymalną wartość, wszystko w jednej linii.

Na przykład zacisk (1200px, 30VW, 1400px) mówi Divi, aby nigdy nie spadał poniżej 1200px, skalować do 30% szerokości rzutni, ale ograniczają go na 1400px.

Jest to szczególnie przydatne w przypadku pasków do zdjęć lub rozłożonych układów, w których chcesz bardziej płynną siatkę bez punktów przerwania. W połączeniu z zagnieżdżonymi wierszami Clamp () pomaga każdemu blokowi dostosować się naturalnie bez konieczności oddzielnych regulacji mobilnych.

4. Wyświetl i dostosuj dla różnych urządzeń

Gdy układ wygląda dobrze na komputerze, łatwo jest dostroić go do tabletów i mobilnych za pomocą wbudowanych responsywnych narzędzi do edycji Divi. Przełącz między widokami urządzeń i dostosuj ustawienia, takie jak rozmiar obrazu, odstępy i wyrównanie tekstu dla każdego ekranu.

Na przykład możesz inaczej zmniejszyć wyściółkę między rzędami na kolumnach mobilnych lub stosów, aby uzyskać lepsze wrażenia z przewijania. Zajęcie kilku minut, aby dostosować te ustawienia, może sprawić, że galeria poczuje się czysta i profesjonalna na każdym ekranie.

Pobierz układy galerii za darmo

Chcesz zacząć korzystać z układów galerii w 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!

Zbuduj zagnieżdżone galerie obrazów (i więcej) z Divi 5

Zagnieżdżone wiersze Divi 5 upraszczają złożone układy, umożliwiając umieszczenie wierszy w rzędach. Oferują również nieskończoną zdolność gniazdową i precyzyjną kontrolę nad twoimi projektami.

Zagnieżdżone rzędy to tylko jedna z ekskluzywnych funkcji Divi 5. Szukaj nowego systemu układu opartego na Flexbox, który wprowadza również szeroką gamę nowych szablonów rzędów i elementów sterujących FlexBox, aby zapewnić wszystkie narzędzia i prostotę do tworzenia każdego układu, który możesz sobie wyobrazić.

W dalszym ciągu ulepszając Divi 5, możesz oczekiwać jeszcze więcej funkcji, które ulepszają Twoje możliwości projektowe i upraszczają Twój przepływ pracy.

Jeśli budowałeś galerie na własne stronę, teraz jest idealny czas na wypróbowanie Divi 5 i doświadczyć, jak zagnieżdżone rzędy i narzędzia do układu wizualnego mogą uprościć wszystko.

Divi 5 jest gotowy do użycia na nowych stronach internetowych, ale poczekaj trochę przed migracją istniejących.