Jak korzystać z opcji pozycji Divi do tworzenia pakietów obrazów?

Niezależnie od tego, czy szukasz nowego, świeżego wyglądu galerii obrazów, czy po prostu chcesz ładnego wyświetlania zdjęć produktów, ten samouczek powinien pomóc. Zwykle, dodając obrazy do witryny Divi, możemy ograniczyć projekt do jednego obrazu na kolumnę. Chociaż jest to tradycyjnie bezpieczny i przejrzysty projekt, może się okazać, że grupowanie obrazów w tej samej kolumnie może stworzyć piękne projekty pakietów obrazów, które świetnie wyglądają w układach jedno- lub wielokolumnowych.

W tym samouczku pokażemy, jak korzystać z wbudowanych opcji pozycji Divi, aby zaprojektować 3 kreatywne pakiety obrazów, których możesz użyć w swojej witrynie na różne sposoby.

Zacznijmy.

zapowiedź

Oto krótkie spojrzenie na projekty, które zbudujemy w tym samouczku.

Projekt pakietu obrazów #1

Rozpocznij projekt budowlany #1

Projekt pakietu obrazów nr 2

Rozpocznij projekt budowlany #2

Projekt pakietu obrazów nr 3

Rozpocznij projekt budowlany #3

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

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ładów Divi!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Projektowanie pakietu obrazów #1

W przypadku tego pierwszego projektu pakietu obrazów umieścimy dwa (nieznacznie obrócone) obrazy po każdej stronie obrazu środkowego.

Zacznij od dodania jednokolumnowego wiersza do zwykłej sekcji.

Dodaj środkowy obraz

Wewnątrz kolumny dodaj moduł obrazu.

Następnie wgraj obraz do modułu.

W przypadku tych obrazów użyjemy zrzutów ekranu z pakietu układu trenera fitness. Każdy z nich powinien mieć wymiary 880 na 1200 pikseli.

Otwórz ustawienia obrazu i zaktualizuj następujące elementy:

• Szerokość: 50%
• Wyrównanie modułu: środek

Dodaj cień do pudełka w następujący sposób:

• Box Shadow: patrz zrzut ekranu
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku: 38px
• Siła rozprzestrzeniania się cieni w pudełku: 5px
• Kolor cienia: rgba(0,0,0,0.2)

Następnie ustaw indeks Z na 1, aby pozostawał nad innymi obrazami w pakiecie.

• Indeks Z: 1

Dodaj lewy obraz

Aby utworzyć lewy obraz w pakiecie, dodaj nowy obraz pod środkowym obrazem.

Zaktualizuj obraz o nowy (upewnij się, że wszystkie mają ten sam rozmiar, aby uzyskać najlepsze wyniki).

Na karcie projektu zaktualizuj szerokość w następujący sposób:

• szerokość: 30%

Następnie dodaj cień do pudełka w następujący sposób:

• Cień pudełka: patrz zrzut ekranu
• Kolor cienia: rgba(0,0,0,0.2)

Następnie nadaj obrazowi pozycję bezwzględną w lewej środkowej lokalizacji, tak aby przylegał do środkowego obrazu po lewej stronie.

• pozycja: bezwzględna
• Lokalizacja: lewy środek

Aby nieco obrócić obraz, zaktualizuj opcję przekształcania obracania w następujący sposób:

Przekształć Obróć oś Z: -10deg

Dodaj odpowiedni obraz

Aby utworzyć prawy obraz, otwórz pole Warstwy i zduplikuj lewy obraz.

Oznacz moduły obrazu (lewy obraz, prawy obraz itp.), aby móc je później łatwo zidentyfikować. Następnie otwórz ustawienia duplikatu obrazu i dostosuj lokalizację w następujący sposób:

• lokalizacja: prawy środek

Następnie dostosuj opcję obracania transformacji w następujący sposób:

• Przekształć Obróć Indeks Z: 10deg

Nie zapomnij zamienić zduplikowanego obrazu na nowy.

Teraz sprawdź dotychczasowy wynik.

Dodawanie pakietu obrazów do wielu kolumn

Ponieważ obrazy są umieszczone w jednej kolumnie, możesz łatwo dodać ten projekt pakietu obrazów do układów wielu kolumn.

Aby dodać pakiet obrazów do wielu kolumn, zduplikuj wiersz zawierający bieżący pakiet obrazów.

W zduplikowanym wierszu zduplikuj kolumnę, aby utworzyć kolejną kolumnę z dołączonym pakietem obrazów. Spowoduje to utworzenie pakietów obrazów w układzie dwukolumnowym.

Aby utworzyć wiersz złożony z trzech pakietów obrazów, zduplikuj wiersz z dwiema kolumnami, a następnie zduplikuj jedną z kolumn w zduplikowanym wierszu. To da ci układ z trzema kolumnami.

Ostateczny wynik

Oto ostateczny projekt pakietu obrazów nr 1.

Projektowanie pakietu obrazów #2

Ten następny projekt zawiera pakiet obrazów z pięcioma obrazami – jednym obrazem pośrodku i czterema w każdym rogu kolumny.

Aby rozpocząć, utwórz nową zwykłą sekcję z jedną czwartą, pół, jedną czwartą wiersza kolumny.

Dodaj obraz centralny

W środkowej kolumnie dodaj moduł obrazu.

Następnie wgraj obraz do modułu. Korzystamy z obrazów z pakietu układów sklepu meblowego (każdy 800px na 1200).

Na karcie projekt zaktualizuj następujące elementy:

• Kolor tła: #f7f3ec

• Szerokość: 55%
• Wyrównanie modułu: środek

• Margines: 0px
• Wypełnienie: 5% góra, 5% dół, 5% lewo, 5% prawo

Na karcie Zaawansowane zwiększ indeks Z o 1, aby upewnić się, że obraz pozostaje nad innymi obrazami w przestrzeni Z.

• Indeks Z: 1

Dodaj górny lewy obraz

Aby dodać lewy górny obraz, dodaj nowy moduł obrazu pod środkowym obrazem w środkowej kolumnie.

Prześlij nowy obraz do modułu.

Następnie zaktualizuj ustawienia projektu w następujący sposób:

• Szerokość: 40%
• Margines: 0px dół

Odstępy między kolumnami

Wysokość kolumny jest określana przez wysokość środkowego obrazu oraz ilość dodawanych przez nas dopełnienia górnego i dolnego. Tak więc, aby nadać naszym absolutnie pozycjonowanym obrazom odpowiednie odstępy, musimy zwiększyć wysokość kolumny, zwiększając górną i dolną wyściółkę.

• Wypełnienie (komputer): 12% góra, 12% dół
• Wyściółka (tabletka): 24% na górze, 24% na dole

Następnie nadaj lewemu górnemu obrazowi bezwzględną pozycję w następujący sposób:

• Pozycja: bezwzględna
• Lokalizacja: u góry po lewej

Dodaj obraz w prawym górnym rogu

Teraz, gdy lewy górny obraz jest na swoim miejscu, zduplikuj obraz, aby utworzyć prawy górny obraz.

(W tym momencie dobrze jest dodać etykiety do każdego z obrazów, aby ułatwić późniejszą identyfikację.)

Otwórz zduplikowany obraz (prawy górny róg) i zaktualizuj lokalizację pozycji bezwzględnej:

• Lokalizacja: w prawym górnym rogu

Dodaj lewy dolny obraz

Aby utworzyć lewy dolny obraz, zduplikuj prawy górny obraz i w razie potrzeby zaktualizuj etykiety.

Otwórz ustawienia zduplikowanego obrazu (na dole po lewej) i zaktualizuj lokalizację pozycji bezwzględnej:

• Lokalizacja: dolny lewy

Dodaj prawy dolny obraz

Aby utworzyć prawy dolny obraz, zduplikuj lewy dolny obraz i zaktualizuj etykietę zgodnie z potrzebami. Następnie zaktualizuj obraz i nadaj mu nową lokalizację:

• Lokalizacja: dolny prawy

Dodaj akcent w cieniu do pudełek

Aby dodać ładny akcent projektowy, możemy dodać cień pudełka do lewego górnego obrazu w następujący sposób:

• Cień pudełka: patrz zrzut ekranu
• Pozycja pozioma cienia pudełka: -170px
• Pozycja pionowa cienia pudełka: 170px
• Kolor cienia: rgba (36,57,74,0,07)

Dodaj dodatkowy akcent w kształcie pudełka do prawego górnego obrazu w następujący sposób:

• Cień pudełka: patrz zrzut ekranu
• Pozycja pozioma cienia pudełka: 170px
• Pozycja pionowa cienia pudełka: 170px
• Kolor cienia: rgba (36,57,74,0,07)

Dodaj tekst do lewej kolumny

Aby dodać tekst do projektu, dodaj nowy moduł tekstowy do lewej kolumny.

Zadowolony

Następnie zaktualizuj zawartość o następujące elementy:

<h2>Image Bundle</h2>

Projekt tekstu

Na karcie projekt zaktualizuj następujące elementy:

• Czcionka nagłówka 2: Montserrat
• Styl czcionki nagłówka 2: TT
• Nagłówek 2 Wyrównanie tekstu: do prawej
• Kolor tekstu nagłówka 2: #24394a
• Rozmiar tekstu nagłówka 2: 34px
• Nagłówek 2 Odstępy między literami: 4px
• Nagłówek 2 Wysokość linii: 1,3 em

Dopełnienie lewej kolumny

Aby nieco obniżyć tekst, otwórz ustawienia dla lewej kolumny i zaktualizuj następujące dopełnienie:

• Wypełnienie: pozostało 20%

Dodaj tekst do prawej kolumny

Aby utworzyć tekst w prawej kolumnie, skopiuj moduł tekstowy z lewej kolumny i wklej go w prawej kolumnie. Następnie otwórz ustawienia tekstu i zaktualizuj następujące elementy:

• Nagłówek 2 Wyrównanie tekstu: do lewej

Wypełnienie prawej kolumny

Podobnie jak w przypadku lewej kolumny, dodaj następujące dopełnienie do prawej kolumny (kolumna 3), aby obniżyć moduł tekstowy.

• Wyściółka: 33% góry

Tło sekcji

Aby zakończyć projekt, otwórz ustawienia sekcji i dodaj następujący kolor tła:

• Kolor tła: #f7f3ec

Oto dotychczasowy wynik.

Dodawanie pakietu obrazów do wielu kolumn

Aby dodać ten pakiet obrazów do wielu kolumn, zduplikuj wiersz, a następnie usuń lewą i prawą kolumnę w zduplikowanym wierszu, pozostawiając tylko kolumnę z pakietem obrazów.

Używając wielokrotnego wyboru, wybierz lewy górny obraz i prawy górny obraz. Otwórz ustawienia i wyjmij cień pudełka.

Następnie zduplikuj kolumnę raz lub dwa razy, aby utworzyć wiele kolumn z dołączonymi pakietami obrazów.

Jeśli tworzysz układ trzech kolumn dla pakietu obrazów, otwórz ustawienia kolumn dla każdej kolumny i zaktualizuj dopełnienie w następujący sposób:

• wypełnienie: 8% góra, 8% dół

Ostateczny wynik

Oto ostateczny wynik.

I oto jest na telefonie komórkowym.

Projekt pakietu obrazów nr 3

W tym ostatnim projekcie pakietu obrazów umieścimy 5 obrazów obok siebie z subtelną rotacją 3D, aby stworzyć ładny wyświetlacz dla takich rzeczy, jak motywy podrzędne lub pakiety układów.

Dodaj wiersz

Aby rozpocząć, dodaj jednokolumnowy wiersz do zwykłej sekcji.

Dodaj środkowy obraz

W wierszu dodaj moduł obrazu.

Następnie prześlij obraz do modułu obrazu. Używamy tych samych zrzutów ekranu o wymiarach 880 na 1200 pikseli z pakietu układu trenera fitness, którego użyliśmy do projektu nr 1.

Na karcie projektu zaktualizuj opcje zmiany rozmiaru w następujący sposób:

• Szerokość: 30%
• Wyrównanie modułu: środek

Następnie nadaj obrazowi subtelny cień w kształcie pudełka:

• Cień pudełka: patrz zrzut ekranu
• Pozycja pionowa cienia pudełka: -12px
• Siła rozmycia cieni w pudełku: 28px
• Kolor cienia: rgba(0,0,0,0.11)

Następnie usuń domyślny dolny margines, ustawiając go na 0px.

• Margines: 0px dół

Aby upewnić się, że obraz pozostaje nad innymi obrazami podczas nakładania, dostosuj indeks Z.

• Indeks Z: 2

Dodaj perspektywę kolumny

Zanim dodamy resztę obrazów do pakietu obrazów, musimy dodać niestandardowy CSS do kolumny, która doda perspektywę do obrazów podczas ich obracania za pomocą opcji transformacji. Tworzy to realistyczny efekt 3D.

Dodaj środkowy lewy obraz

Teraz, gdy mamy już swoją perspektywę, możemy zacząć dodawać inne obrazy.

Aby utworzyć środkowy lewy obraz, zduplikuj środkowy obraz.

W razie potrzeby zaktualizuj etykiety obrazu w polu Warstwy, a następnie zaktualizuj moduł duplikatu obrazu nowym obrazem.

Otwórz ustawienia obrazu i zaktualizuj lokalizację pozycji bezwzględnej i indeks Z w następujący sposób:

• Lokalizacja: dolny lewy
• Indeks Z: 1

Następnie dodaj następujące opcje przekształcania, aby ustawić i obrócić obraz.

• Przekształć Przesuń oś X: 75%
• Przekształć Obróć oś X: 30deg

Dodaj lewy obraz

Aby utworzyć lewy obraz, zduplikuj środkowy lewy obraz, który właśnie utworzyliśmy.

Otwórz ustawienia nowego obrazu i zaktualizuj szerokość:

• Szerokość: 20%

Następnie dostosuj opcję tłumaczenia transformacji w następujący sposób:

• Przekształć Przetłumacz oś X: 0px

Następnie dostosuj indeks Z tak, aby obraz pozostawał za środkowym lewym obrazem.

• Indeks Z: 0

Dodaj środkowy prawy obraz

Następnie dodamy środkowy prawy obraz do pakietu obrazów.

Aby utworzyć obraz, otwórz wyskakujące okno Warstwy. Następnie zduplikuj środkowy lewy obraz, przeciągnij zduplikowany obraz poniżej lewego obrazu, a następnie odpowiednio go oznacz (np. „środkowy prawy obraz”).

Otwórz ustawienia środkowego prawego obrazu i zmień bezwzględną lokalizację pozycji w następujący sposób:

• Lokalizacja: dolny prawy

Następnie dostosuj opcje transformacji w następujący sposób:

• Przekształć Przesuń oś X: -75%
• Przekształć Obróć oś X: -30 stopni

Dodaj prawy obraz

Aby stworzyć prawy obrazek (ostatni), możemy zduplikować lewy obraz. Następnie przeciągnij zduplikowany obraz pod środkowy prawy obraz i nazwij go „prawym obrazem”.

Otwórz odpowiednie ustawienia obrazu i zaktualizuj lokalizację pozycji bezwzględnej w następujący sposób:

• Lokalizacja: dolny prawy

Następnie dostosuj obrót transformacji.

• Przekształć Obróć oś X: -30 stopni

Sprawdź dotychczasowy wynik.

A oto ten sam pakiet obrazów dodany do wielu kolumn.

Końcowe przemyślenia

Gdy zrozumiemy, jak działa opcja pozycji bezwzględnej Divi, możemy jej użyć do stworzenia całkiem niesamowitych projektów pakietów obrazów. Najlepsze w tych pakietach obrazów jest to, że znajdują się one w jednej kolumnie, dzięki czemu będą wyglądać świetnie w wielu kolumnach i idealnie skalują się również na urządzeniach mobilnych.

Mam nadzieję, że to zainspiruje Cię do stworzenia niesamowitych pokazów obrazów do następnego projektu.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!