Używanie animacji Divi do rozwijania zawartości za pomocą przesuwanych obrazów
Opublikowany: 2017-10-12Witamy w drugiej części tej 5-częś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 pierwszej części naszej serii stworzyliśmy dwie pierwsze sekcje strony demonstracyjnej animacji. Projekt i animacja nagłówka w pierwszej sekcji pokazały unikalny sposób animowania elementów modułu tekstowego wewnątrz standardowej sekcji pełnoekranowej. Tworząc drugą sekcję, odkryliśmy sposób na włączenie subtelnych i harmonijnych animacji do rzędów treści, które można łatwo wykorzystać do zaprezentowania treści na stronie docelowej w angażujący sposób.
Dziś kontynuujemy naszą podróż do projektowania układów sekcji, które efektywnie (i kreatywnie) wykorzystują animację podczas przewijania strony. Będziemy budować trzecią i czwartą sekcję naszej strony demonstracyjnej na żywo, prezentując moc funkcji animacji Divi. Obie te sekcje mają układy, które można łatwo dostosować do własnych projektów, aby zaprezentować produkty lub usługi.
Zacznijmy.
Oto zajawka tego, co będziemy budować w dzisiejszym poście
Sekcja 3
Sekcja 4
Przygotowanie elementów projektu
Przygotuj swoje obrazy
W trzeciej części będziesz potrzebować dwóch obrazów. Pierwsza ma mieć wymiary około 880×600, a druga około 790×880. Te rozmiary obrazów nie muszą być dokładne. Włączam te wymiary, aby dać ci pomysł.
Tworząc czwartą sekcję, będziesz także tworzyć dwa obrazy około 600×400.
Użyj narzędzia Visual Builder
Nie ma potrzeby stosowania zaawansowanego kodu. Do projektowania kolejnych dwóch sekcji naszej strony, które stworzyliśmy w pierwszej części tej serii, będziemy używać wyłącznie programu Visual Builder. Ponieważ Twoja strona jest już skonfigurowana, jesteś gotowy do pracy.
Używanie animacji Divi do rozwijania zawartości za pomocą przesuwanych obrazów
Subskrybuj nasz kanał YouTube
Budowanie Sekcji 3 Demo
Sekcja 3 jest doskonałym przykładem tego, jak zaprojektować i animować moduł wezwania do działania za pomocą towarzyszącego mu obrazu.
Zanurzmy się.
Korzystając z programu Visual Builder, dodaj zwykłą sekcję z wierszem w dwóch kolumnach. W lewej kolumnie dodaj moduł obrazu.
Zaktualizuj ustawienia obrazu w następujący sposób:
W zakładce Treść…
URL obrazu: [wstaw swój obraz 880×600]
W zakładce Projekt…
Wymuś pełną szerokość: TAK
Styl animacji: slajd
Kierunek animacji: w lewo
Intensywność animacji: 20%
Początkowe krycie animacji: 100%
Zapisz ustawienia
Dodaj moduł dzielnika
W prawej kolumnie zaprezentujemy nasze treści za pomocą modułu rozdzielającego i modułu Call to Action. Moduł rozdzielający zostanie użyty do dodania krótkiej linii rozdzielającej nad tekstem.
Dodaj moduł rozdzielający do prawej kolumny.
Następnie zaktualizuj ustawienia w następujący sposób:
W zakładce Treść…
Pokaż dzielnik: TAK
W zakładce Projekt…
Kolor: #e4ca77
Waga dzielnika: 4px
Szerokość: 80px (musisz wpisać tę wartość, ponieważ domyślnie jest to procent)
Wyrównanie modułu: domyślne (po lewej)
Margines niestandardowy: 60px góra, 0px dół
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
Dodaj moduł Wezwania do działania
W module Divider dodaj moduł Call to Action z następującymi ustawieniami:
W zakładce Treść…
Tytuł: „Doskonały widok”
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 mi id, efficitur nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisi.”
Link: #
Użyj koloru tła: NIE
W zakładce Projekt…
Kolor tekstu: ciemny
Orientacja tekstu: w lewo
Czcionka nagłówka: Lato, wielkie litery (TT)
Rozmiar czcionki nagłówka: 38px
Kolor tekstu nagłówka: #0c0c0c
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: #9e9e9e
Wysokość linii ciała: 1,8 em
Użyj niestandardowych stylów dla przycisku: TAK
Rozmiar tekstu przycisku: 15px
Kolor tekstu przycisku: #000000
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
Teraz kliknij, aby edytować ustawienia wiersza i zaktualizuj następujące elementy:
W zakładce Projekt…
Użyj niestandardowej szerokości: TAK
Szerokość niestandardowa: 1366 pikseli
W zakładce Zaawansowane…
Dodaj następujący niestandardowy kod CSS do pola głównego elementu kolumny 1:
z-index: 999;
Zapisz ustawienia
Powiel swój wiersz i zaktualizuj go
To tyle w pierwszym rzędzie. Aby zaoszczędzić czas podczas tworzenia drugiego wiersza, zduplikuj właśnie utworzony wiersz.
Edytuj zduplikowane ustawienia wiersza w następujący sposób:
W zakładce Zaawansowane…
Wyjmij niestandardowy CSS w głównym elemencie kolumny 1 i dodaj go do pola głównego elementu kolumny 2:
z-index: 999;
Ponieważ nasz obraz będzie znajdował się w prawej kolumnie, potrzebujemy, aby ta kolumna znajdowała się na górze tekstu animowanego po lewej stronie.
Zapisz ustawienia
Zaktualizuj moduł obrazu i moduł wezwania do działania w drugim rzędzie
Następnie przeciągnij moduł obrazu do prawej kolumny i przeciągnij moduł dzielnika i moduł wezwania do działania do lewej kolumny.
Ta sekcja będzie miała nieco inną strukturę kolumn. Kliknij ikonę Zmień strukturę kolumn w wierszu (obok ikony zduplikowanych wierszy) i wybierz układ dwóch trzecich i jednej trzeciej kolumn.
Teraz wszystko, co musimy zrobić, to ponownie odwiedzić każdy z modułów w rzędzie i wprowadzić kilka zmian.
Najpierw zaktualizuj ustawienia modułu rozdzielacza w następujący sposób:
W zakładce Projekt…
Wyrównanie modułu: w prawo
Kierunek animacji: w lewo
Zapisz ustawienia
Następnie zaktualizuj ustawienia modułu wezwania do działania w następujący sposób:
Tytuł: „Mówi za siebie”
Orientacja tekstu: w prawo
Wyrównanie tekstu nagłówka: do prawej
Szerokość: 700px (wpisz to)
Kierunek animacji: w lewo
Zapisz ustawienia
Następnie zaktualizuj moduł obrazu w prawej kolumnie za pomocą nowego obrazu 790 × 880.
To tyle w sekcji 3!
Sprawdź swój wynik.
Budowanie sekcji 4 wersji demo
Sekcja 4 przenosi projekt modułu obrazu na inny poziom dzięki kilku zaawansowanym sztuczkom CSS. A układanie modułów tekstowych w stosy w celu złożenia ich na zawiasie dobrze łączy się z dostawą. Zanurzmy się.
Korzystając z programu Visual Builder, dodaj zwykłą sekcję z wierszem w dwóch kolumnach (pół-pół). Zanim dodamy nasz pierwszy moduł, dodajmy kolor tła do naszej sekcji. Kliknij, aby edytować ustawienia przekroju.
Pod zakładką treści wybierz zakładkę kolor tła i wprowadź kolor #262938.
Zapisz ustawienia
Dodaj pierwszy moduł tekstowy
W lewej kolumnie dodaj moduł tekstowy i zaktualizuj ustawienia tekstu w następujący sposób:
W zakładce Treść…
Wprowadź następujący kod html w zakładce tekstowej pola treści:
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
W zakładce Projekt…
Kolor tekstu: jasny
Czcionka nagłówka: Playfair Display, pogrubiona (B)
Rozmiar czcionki nagłówka: 38px
Wysokość linii nagłówka: 1,3 em
Margines niestandardowy: dolny 20 pikseli
Animacja: Składanie
Kierunek animacji: w górę
Dodaj drugi moduł tekstowy
Następnie dodaj kolejny moduł tekstowy bezpośrednio pod bieżącym modułem tekstowym. Następnie zaktualizuj ustawienia w następujący sposób:
W zakładce Treść…
Treść: „Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur nisl. Sed nec purus tempus, sagittis mi id, efficitur nisl.”
W zakładce Projekt…
Kolor tekstu: jasny
Rozmiar czcionki tekstu: 18px
Kolor tekstu tekstu: rgba (255,255,255,0.66)
Wysokość linii tekstu: 1,9 em
Margines niestandardowy: dolny 40 pikseli
Styl animacji: składanie
Kierunek animacji: w dół
Opóźnienie animacji: 150 ms
Zapisz ustawienia
Dodaj moduł przycisku
Dodaj moduł przycisku pod ostatnim modułem tekstowym i zaktualizuj ustawienia w następujący sposób:
Tekst przycisku: Dowiedz się więcej
URL przycisku: #
Użyj niestandardowych stylów dla przycisku: TAK
Rozmiar tekstu przycisku: 15px
Kolor tekstu przycisku: #01254c
Kolor tła przycisku: #ffffff
Promień obramowania przycisku: 0px
Czcionka przycisku: pogrubiona (B), wielkie litery (TT)
Niestandardowe dopełnienie: 10px u góry, 30px w prawo, 10px w dół, 30px w lewo
Styl animacji: slajd
Kierunek animacji: w dół
Czas trwania animacji: 1600ms
Opóźnienie animacji: 150 ms
Intensywność animacji: 20%
Zapisz ustawienia
Dodaj moduł obrazu do prawej kolumny
To wszystko dla tej kolumny. Teraz musimy dodać moduł obrazu do prawej kolumny. Następnie zaktualizuj ustawienia w następujący sposób:
W zakładce Treść…
URL obrazu: [wstaw obraz 600×400]
W zakładce Projekt…
Wymuś pełną szerokość: TAK
Styl animacji: slajd
Kierunek animacji: w prawo
Opóźnienie animacji: 800ms
Intensywność animacji: 20%
Zapisz ustawienia
Aktualizuj ustawienia wiersza
Teraz kliknij, aby edytować ustawienia wiersza i zaktualizuj następujące elementy:
W zakładce Projekt…
Użyj niestandardowej szerokości: TAK
Szerokość niestandardowa: 1366 pikseli
Niestandardowe dopełnienie: 27px u góry, 0px w prawo, 170px w dół, 0px w lewo
Kolumna 1 Niestandardowe wypełnienie: 6% do góry
W zakładce Zaawansowane…
Dodaj następujący niestandardowy kod CSS do pola głównego elementu kolumny 1:
z-index: 999;
Ten css dodaje, że tekst pozostaje na górze obrazu podczas animacji.
Następnie dodaj następujący niestandardowy kod CSS do pola głównego elementu kolumny 2:
transform: scale(1.3); transform-origin: top right;
Ten CSS dodaje sprytny projekt, aby skalować (zwiększać) rozmiar wszystkiego w kolumnie 2 (obraz). Właściwość transform origin informuje kolumnę o przeskalowaniu od prawego górnego rogu wiersza. Powoduje to nieznaczne nakładanie się tekstu po lewej stronie i obrazu.
Zapisz ustawienia
Powiel i zaktualizuj swój wiersz
Teraz, tak jak w sekcji 3, zduplikujemy wiersz. Po zduplikowaniu wiersza przeciągnij 2 moduły tekstowe i moduł przycisku z lewej kolumny do prawej. I przeciągnij moduł obrazu z prawej kolumny do lewej. Teraz wszystko, co musimy zrobić, to dokonać drobnych aktualizacji naszego zduplikowanego wiersza i jego zawartości.
Najpierw zaktualizujmy ustawienia wiersza o następujące:
W zakładce Projekt…
Niestandardowe dopełnienie: 40px u góry, 0px w prawo, 40px w dół, 0px w lewo
Kolumna 1: Dopełnienie niestandardowe: [przywróć domyślne; wymazać 6% góra]
Kolumna 2 Niestandardowe wypełnienie: 6% do góry
W zakładce Zaawansowane…
Usuń niestandardowy kod CSS z pola elementu głównego kolumny 1 i pola elementu głównego kolumny 2. Zostało to przeniesione z powielania i już go nie potrzebujemy.
Zaktualizuj moduł obrazu
Następnie zaktualizuj moduł obrazu (teraz w lewej kolumnie) o następujące elementy:
W zakładce Treść…
URL obrazu: [wstaw nowy obraz 600×400]
W zakładce Projekt…
Kierunek animacji: w lewo
W zakładce Zaawansowane…
Jeśli myślałeś, że ten obraz był już zamazany. pomyśl jeszcze raz! Wszystko, co musisz zrobić, aby dodać ten efekt rozmycia, to dodać następujący wiersz niestandardowego CSS do pola głównego elementu:
filter: blur(5px) opacity(.6);
Oprócz efektu rozmycia, CSS sprawia, że obraz jest półprzezroczysty z 60% kryciem.
Zapisz ustawienia
Zaktualizuj moduł tekstowy w prawej kolumnie
Przechodząc do prawej kolumny, zaktualizuj górną zawartość modułu tekstowego krótszym nagłówkiem h1:
<h1>Consectetur adipiscing elit</h1>
Zapisz ustawienia
I voila! Skończyliśmy z sekcją 4. Sprawdźmy 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.
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_2.zip w naszym folderze pobierania. Rozpakuj go, aby wyświetlić następujące importy.
Efekty animacji, część 2 (sekcja 1) .json
Efekty animacji, część 2 (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
Oprócz tego, że jestem trochę głodny węglowodanów, ta sekcja przedstawia kreatywne sposoby wyświetlania i animowania obrazów. Ponadto moduły tekstowe rozkładane na zawiasie z opóźnionym przesuwaniem przycisku dodatkowo zachęcają użytkownika do kliknięcia CTA.
Nadchodzi
W części 3 tej serii pokażę Ci piękny sposób na projektowanie i animowanie modułów notatek. Ten układ sekcji może być używany do różnych celów. Widzę, że jest to sposób na zaprezentowanie procesu Twojej usługi lub listy Twoich usług lub produktów.
Czekam na to.
Nie zapomnij skontaktować się w komentarzach poniżej!