Jak rozłożyć obrazy na przewijaniu, aby promować galerię obrazów w Divi

Wiedza o tym, jak rozłożyć obrazy za pomocą efektów przewijania Divi, może być subtelnym i imponującym elementem projektu, który pomoże promować galerię obrazów na stronie docelowej. Chodzi o to, aby zaangażować użytkowników, którzy przewijają stronę w dół, rozkładając obrazy niczym karty do gry.

W tym samouczku stworzymy przejrzysty układ sekcji do promowania galerii obrazów, która zawiera kolekcję obrazów, które rozkładają się podczas przewijania. Możesz użyć dowolnych obrazów z tym projektem i byłby to miły dodatek do każdej strony docelowej.

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

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.

Część 1: Tworzenie układu i makiety treści

W tej pierwszej części samouczka zbudujemy układ sekcji z dwukolumnowym wierszem, który ma tytuł i przycisk w lewej kolumnie. W drugiej części dodamy rozłożone obrazy do prawej kolumny.

Ustawienia sekcji

Zanim dodamy cokolwiek do układu, zaktualizuj ustawienia sekcji domyślnej w następujący sposób:

• Wyściółka: góra 10vw, dół 10vw
• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Dodawanie rzędu

Następnie dodaj nowy wiersz o strukturze kolumnowej dwie trzecie jedna trzecia.

Ustawienia wiersza

Następnie zaktualizuj ustawienia wiersza za pomocą niestandardowego obrazu tła. Używam gotowego układu strony docelowej sklepu papierniczego. Po tej aktualizacji:

• Rozmiar obrazu tła: rzeczywisty rozmiar
• Pozycja obrazu tła: górny lewy
• Maksymalna szerokość: 900px

Dodawanie modułu tekstowego do tworzenia tytułu

Gdy wiersz będzie gotowy, dodaj nowy moduł tekstowy do kolumny 1, aby utworzyć tytuł.

Treść tekstowa

Dodaj następujący nagłówek H1 do treści treści:

<h1>Our Gallery</h1>

Ustawienia tekstu

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

• Czcionka nagłówka: Bellefair
• Wyrównanie tekstu nagłówka (tablet i telefon): do prawej
• Rozmiar tekstu nagłówka: 150px (komputer i tablet), 110px (telefon)

Dodawanie przycisku

Pod modułem tekstowym dodaj nowy moduł przycisków.

Przycisk tekstowy

Zaktualizuj tekst przycisku za pomocą „Wyświetl galerię”.

Ustawienia przycisków

Na karcie projekt zaktualizuj następujące elementy:

• Ustawienie (tablet i telefon): w prawo
• Rozmiar tekstu przycisku: 14px
• Kolor tekstu przycisku: #ffffff
• Kolor tła przycisku: #121212
• Szerokość obramowania przycisku: 0px
• Odstępy między przyciskami: 3px
• Czcionka przycisku: Montserrat
• Styl czcionki przycisku: TT
• Marża: 7vw góra

Część 2: Tworzenie obrazów z efektem przewijania wachlarza

W tej drugiej części samouczka stworzymy obrazy z efektem przewijania fan-out. Zaczniemy od środkowego obrazu. Używam obrazów z Premade Layout strony Fashion Gallery. Powinny mieć ten sam rozmiar, aby uzyskać spójny projekt. Te, których używam to 400px na 600px.

Tworzenie obrazu środkowego

Dodaj nowy moduł obrazu do prawej kolumny.

Następnie wgraj obraz do modułu.

Ustawienia obrazu

Zaktualizuj maksymalną szerokość i margines dla wyświetlaczy mobilnych w następujący sposób:

• Maksymalna szerokość (tablet i telefon): 200px
• Margines (tablet i telefon): pozostało 0px

Tworzenie prawego środkowego obrazu

Aby utworzyć drugi obraz (lub środkowy prawy obraz), zduplikuj pierwszy moduł obrazu.

Ustawienia obrazu

Następnie otwórz ustawienia modułu zduplikowanych obrazów i zaktualizuj następujące elementy:

Pozycja

• Pozycja: bezwzględna

Przekształć pochodzenie

• Przekształć pochodzenie: dolny środek

Efekty przewijania

W obszarze Ruch poziomy zaktualizuj następujące elementy:

• Włącz ruch poziomy: TAK
• Przesunięcie początkowe: 0 (przy 20%)
• Przesunięcie środkowe: 0,5 (przy 50%)
• Przesunięcie końcowe: 0,5 (przy 100%)

W obszarze Obracanie zaktualizuj następujące elementy:

• Włącz obrót: TAK
• Obrót początkowy: 0 stopni (przy 20%)
• Średni obrót: 20 stopni (przy 50%)
• Obrót końcowy: 20 stopni (przy 100%)

Tworzenie właściwego wizerunku

Aby utworzyć trzeci obraz, który będzie rozciągnięty po prawej stronie, zduplikuj drugi, który stworzyliśmy.

Zaktualizuj efekty przewijania

W obszarze Ruch poziomy zaktualizuj następujące elementy:

• Przesunięcie środkowe: 1
• Przesunięcie końcowe: 1

W obszarze Obracanie zaktualizuj następujące elementy:

• Średni obrót: 40 stopni
• Końcowy obrót: 40 stopni

Jeśli nie zauważyłeś, zasadniczo zwiększamy przesunięcie poziome o 0,5 stopnia, a przesunięcie obrotowe o 20 stopni z każdym obrazem. Spowoduje to utworzenie równych odstępów między obrazami. A ponieważ animacja efektu przewijania opiera się na dolnym środkowym źródle transformacji, sprawia wrażenie, że obrazy rozchodzą się jak ręka w karty do gry.

Etykietuj obrazy w polu warstw

Zanim utworzymy dwa ostatnie obrazy, zaktualizujmy etykiety bieżących obrazów, aby się nie pomylić.

Tworzenie środkowego lewego obrazu

Aby utworzyć środkowy lewy obraz, możemy zduplikować środkowy prawy obraz.

Następnie przeciągnij go nad środkowy obraz na górę kolumny.

Możesz również zaktualizować tę etykietę obrazu.

Zaktualizuj efekty przewijania

Otwórz ustawienia środkowego lewego obrazu i zaktualizuj następujące efekty przewijania:

W ruchu poziomym…

• Przesunięcie środkowe: -0,5
• Przesunięcie końcowe: -0,5

UWAGA: Wszystko, co robimy, to zmiana wartości offsetu na ujemną.

Pod rotacją…

• Średni obrót: -20 stopni
• Końcowy obrót: -20 stopni

Tworzenie lewego obrazu

Na koniec utwórzmy ostateczny lewy obraz, powielając prawy obraz i przeciągając go na sam szczyt kolumny.

Możesz również zaktualizować etykietę.

Zaktualizuj efekty przewijania

Otwórz ustawienia lewego obrazu i zaktualizuj efekty przewijania:

W ruchu poziomym:

• Przesunięcie środkowe: -1
• Przesunięcie końcowe: -1

Pod rotacją…

• Średni obrót: -40 stopni
• Końcowy obrót: -40 stopni

Kolumna 1 Indeks Z

W tej chwili obrazy w kolumnie do będą nakładać się na zawartość w kolumnie 1. Aby to zmienić, otwórz ustawienia dla kolumny 1 i zaktualizuj indeks z w następujący sposób:

• Indeks Z: 10

Dodawanie nowych obrazów i filtrów

Teraz wszystko, co musimy zrobić, to zaktualizować każdy z obrazów o nowe/inne.

Aby uzyskać wyjątkowy efekt, dodaj następujące filtry do wszystkich zdjęć (za pomocą funkcji wielokrotnego wyboru) z wyjątkiem prawego zdjęcia.

• Nasycenie: 20%
• Krycie: 85%

Wynik

Oto dotychczasowy wynik…

Obracanie kolumny

Aby nieco zmienić projekt, możemy obrócić kolekcję obrazów, obracając kolumnę nadrzędną.

Aby to zrobić, otwórz ustawienia dla kolumny 2 i dodaj następującą opcję transformacji:

• Przekształć Obróć oś Z: 40 stopni

Ostateczny wynik

Oto ostateczny wynik.

Pulpit

Tablet

Telefon

Końcowe przemyślenia

W tym samouczku nauczyliśmy się rozkładać obrazy za pomocą efektów przewijania Divi, ale nie musisz na tym poprzestać! Możesz z łatwością użyć tej samej techniki, aby rozłożyć dowolną kolekcję modułów (myślę o notatkach). Ograniczyłem odległość przesunięcia za pomocą efektów przewijania każdego obrazu, więc projekt nie jest naprawdę funkcjonalny (tj. Tak naprawdę nie można zobaczyć każdego obrazu w całości). Możesz jednak zwiększyć przesunięcia, aby obrazy były bardziej widoczne, jeśli chcesz.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!