Używanie animacji Divi do wyświetlania treści

Witamy w części 5 tej sześcioczęściowej serii, która nauczy Cię, jak korzystać z nowych opcji animacji Divi do projektowania niesamowitych sekcji strony. Przeprowadzę Cię przez proces tworzenia różnych sekcji naszej strony demonstracyjnej na żywo, aby pokazać techniki dodawania animacji do Twojej witryny. Funkcje animacji są naprawdę zabawne i łatwe w użyciu. A dzięki Visual Builder możesz zobaczyć, jak Twoje dzieło ożywa na każdym etapie. Przyjdź i dołącz do mnie, gdy odkrywamy moc animacji Divi.

W naszym ostatnim poście zbudowaliśmy sekcję 6 naszej strony demonstracyjnej animacji. Pokazałem Ci, jak zaprojektować układ do wyświetlania pobranych produktów z jasnymi kolorami, świecącymi cieniami i precyzyjną animacją.

Dzisiaj zamierzamy zbudować sekcję 7 naszej strony demonstracyjnej animacji, która jest doskonałym przykładem na to, jak wykorzystać efekt animacji przechyłu, aby dodać realistyczny ruch do treści. Produkt końcowy będzie sprawiał wrażenie, że tekst i telefony komórkowe przesuwają się i obracają pod różnymi kątami podczas przewijania strony.

To jedna z moich ulubionych animacji. Zacznijmy.

Oto zajawka projektu i animacji, które zbudujemy w dzisiejszym poście

Przygotowanie elementów projektu

Do tego samouczka potrzebne będą trzy obrazy. Pierwsze dwa obrazy pionowe obrazy powinny mieć około 580×950 obrócone pod kątem 10% w kierunku przeciwnym do ruchu wskazówek zegara. Obraz poziomy powinien mieć wymiary 1250×608 (również obrócony o 10% w kierunku przeciwnym do ruchu wskazówek zegara) z około 300px dodatkowej przezroczystej przestrzeni tła po prawej stronie obrazu, aby dobrze pasował do dostarczonej kolumny. Upewnij się, że obrazy telefonu są w formacie png z przezroczystym tłem. Oto obrazy, których użyłem w dzisiejszym poście.

Pionowy obraz telefonu #1

Pionowy obraz telefonu #2

Pionowy obraz telefonu #3

Używanie animacji Divi do wyświetlania treści

Subskrybuj nasz kanał YouTube

Budowanie Sekcji 7 Demo

Zanim zaczniemy proces budowania, oto rzut oka na widok szkieletowy układu sekcji, który będziemy tworzyć za pomocą kreatora wizualnego.

Korzystając z programu Visual Builder, zacznijmy od dodania kolejnej zwykłej sekcji do naszego układu. Następnie dodaj do sekcji wiersz w trzech kolumnach (jedna czwarta jedna czwarta jedna połowa).

Aktualizuj ustawienia wiersza

Zanim dodamy nasz pierwszy moduł, przejdź do ustawień wierszy i zaktualizuj następujące elementy:

W zakładce Projekt…

Użyj niestandardowej szerokości: TAK
Szerokość niestandardowa: 91%
Użyj niestandardowej szerokości rynny: TAK
Szerokość rynny: 1

Kolumna 2 Niestandardowe wypełnienie: 5% góra
Kolumna 3 Niestandardowe wypełnienie: 24% góry

Dodawanie obrazu #1

W pierwszej (od lewej) kolumnie naszego układu dodaj moduł obrazu i zaktualizuj ustawienia obrazu w następujący sposób:

W zakładce Treść…

URL obrazu: [prześlij obraz nr 1)

W zakładce Projekt…

Wymuś pełną szerokość: TAK

Styl animacji: rolka
Kierunek animacji: w prawo
Intensywność animacji: 16%
Początkowe krycie animacji: 100%

Zapisz ustawienia

Dodawanie animowanego tekstu za pomocą modułów rozdzielających i wezwania do działania

Teraz przejdź do środkowej (jednej czwartej) kolumny, w której moduł dzielnika zostanie użyty do dodania krótkiej linii dzielenia nad tekstem.

Dodaj moduł rozdzielający do kolumny.

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

W zakładce Treść…

Pokaż dzielnik: TAK

W zakładce Projekt…

Kolor: #e0c48f
Waga dzielnika: 3px
Szerokość: 60px (musisz wpisać tę wartość, ponieważ domyślnie jest to procent)
Wyrównanie modułu: domyślne (po lewej)
Niestandardowe wypełnienie: 80px u góry, 80px w lewo

Styl animacji: składanie
Kierunek animacji: w prawo
Czas trwania animacji: 1200 ms
Opóźnienie animacji: 50 ms
Intensywność animacji: 70%
Początkowe krycie animacji: 0%

Zapisz ustawienia

W module Divider dodaj moduł Call to Action z następującymi ustawieniami:

W zakładce Treść…

Tytuł: „1000 słów”
Tekst przycisku: „Dowiedz się więcej”
Treść: „Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mid id.”
Link: #
Użyj koloru tła: NIE

W zakładce Projekt…

Kolor tekstu: ciemny
Orientacja tekstu: w lewo
Czcionka nagłówka: Lato, pogrubienie (B) Wielkie litery (TT)
Rozmiar czcionki nagłówka: 38px
Kolor tekstu nagłówka: #33454f
Odstępy między literami nagłówka: 0.2em
Wysokość linii nagłówka: 1.4em

Czcionka ciała: Lato
Rozmiar czcionki ciała: 18px
Kolor tekstu ciała: #9b9b9b
Wysokość linii ciała: 1,8 em

Użyj niestandardowych stylów dla przycisku: TAK
Rozmiar tekstu przycisku: 15px
Kolor tekstu przycisku: # f2733c
Kolor tła przycisku: rgba (225,225,225,0)
Szerokość obramowania przycisku: 0px
Odstępy między przyciskami: 2px
Czcionka przycisku: Lato, pogrubienie (B), wielkie litery (TT)
Ikona przycisku: strzałka w prawo
Pokaż tylko ikonę po najechaniu na przycisk: NIE
Odstępy między literami przycisku: 0px

Styl animacji: składanie
Kierunek animacji: w prawo
Czas trwania animacji: 1200 ms
Opóźnienie animacji: 50 ms
Intensywność animacji: 70%
Początkowe krycie animacji: 0%

Zapisz ustawienia

Dodawanie obrazu #2

Następnie dodaj moduł obrazu pod właśnie utworzonym modułem Call to Action. Zaktualizuj ustawienia obrazu w następujący sposób:

W zakładce Treść…

URL obrazu: [prześlij obraz nr 2]

W zakładce Projekt…

Wymuś pełną szerokość: TAK

Styl animacji: rolka
Kierunek animacji: w lewo
Intensywność animacji: 13%
Początkowe krycie animacji: 100%

Dodaj obraz #3

To tyle w naszej drugiej (środkowej) kolumnie. Teraz dodajmy obraz nr 3 w trzeciej (z prawej) kolumnie. Aby to zrobić, możemy zduplikować/skopiować właśnie dodany moduł obrazu na dole drugiej kolumny i wkleić go do trzeciej kolumny. Ponieważ style animacji są takie same, wszystko, czego potrzebujesz, aby zaktualizować nowy moduł obrazu, to rzeczywisty adres URL obrazu.

Powiel i dostosuj moduł dzielnika i wezwania do działania

Po dodaniu nowego adresu URL obrazu do zduplikowanego obrazu w kolumnie trzeciej, zduplikuj/skopiuj zarówno moduł dzielnika, jak i moduł wezwania do działania, które utworzyłeś u góry drugiej kolumny, a następnie przeciągnij/wklej dwa moduły pod obrazem #3 w trzeciej kolumnie.

W przypadku modułu rozdzielającego zmień ustawienie Kierunek animacji w zakładce Projekt na „W lewo”.

W naszym nowym module wezwania do działania zaktualizuj następujące ustawienia:

W zakładce Treść…

Tytuł: Nowy sposób budowania

W zakładce Projekt…

Niestandardowe dopełnienie: 80px w prawo, 80px w dół, 80px w lewo

Kierunek animacji: w lewo

Sprawdźmy teraz nasz końcowy wynik…

Bonus: Pobierz te sekcje w celu łatwego importu

Jako dodatkowy bonus spakowaliśmy sekcje wbudowane w dzisiejszy samouczek do bezpłatnego pobrania, które można pobrać za pomocą poniższego formularza zgody na e-mail. Wystarczy wpisać swój adres e-mail, a pojawi się przycisk pobierania. Nie martw się o „ponowną subskrypcję”, jeśli jesteś już częścią naszego biuletynu Divi. Ponowne wprowadzenie adresu e-mail nie spowoduje większej liczby e-maili ani duplikatów. Po prostu ujawni pobieranie.

Cieszyć się!

Pobierz pakiet układu

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 skorzystać z tych pobrań, zacznij od zlokalizowania spakowanego pliku o nazwie Animation_Effects_Part_5.zip w naszym folderze pobierania. Rozpakuj go, aby wyświetlić następujące importy.

Efekty animacji, część 5 (sekcja 1) .json

Efekty animacji, część 5 (sekcja 2) .json

Przejdź w panelu administratora WordPress do Divi> Biblioteka Divi> Importuj i eksportuj. Gdy pojawi się modalny przenośność, kliknij kartę importu i przycisk oznaczony jako wybierz plik.

Wybierz preferowany plik json i kliknij "Importuj układy Divi Builder". Po zakończeniu importowania przejdź do posta lub strony, do której chcesz dodać jedną z powyższych sekcji.

Aktywuj wizualny konstruktor. Przejdź do części strony, do której chcesz dodać jedną z powyższych sekcji. Po kliknięciu ikony dodawania nowej sekcji zostanie wyświetlona opcja „Dodaj z biblioteki”. Wybierz tę opcję i wybierz żądany układ.

Zawijanie

Ten układ jest nieco trudny do wykonania. Ale gdy już uzyskasz odpowiednie obrazy i odpowiednie odstępy, animacja ładnie łączy cały układ. Realistyczne toczenie się obrazów telefonu wygląda prawie tak, jakby ktoś przesuwał je na białym stole w naszym widoku, gdy przewijamy stronę w dół. Ten przykład animacji toczenia zdecydowanie się wyróżnia.

Nadchodzi

W następnym poście zakończę naszą serię częścią 6. Pokażę Ci, jak wykorzystać animację slajdów z niestandardowymi obrazami i CSS, aby stworzyć oszałamiający układ do prezentacji przepisów kulinarnych. Jednak ten sam układ można zmodyfikować i wykorzystać do wielu różnych polecanych elementów.

Czekam na kontakt z Państwem w komentarzach.