Używanie animacji Divi's Fold do rozkwitania Blurbs
Opublikowany: 2017-10-16Witamy w części 4 tej 6-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 naszym ostatnim poście pokazałem Wam kilka kreatywnych sposobów na zaprojektowanie i animowanie 4 modułów notatek zorganizowanych krok po kroku.
Dzisiaj będziemy tworzyć sekcję 6 naszej strony demonstracyjnej animacji. Ta sekcja przedstawia świetny projekt i animację do wyświetlania polecanych produktów lub plików do pobrania. Użycie koloru i efekt rozkwitania animacji w tych modułach notatek naprawdę wyróżnia tę sekcję.
Zanurzmy się!
Oto zajawka tego, co będziemy budować w dzisiejszym poście
Używanie animacji Divi's Fold do rozkwitania Blurbs
Subskrybuj nasz kanał YouTube
Sekcja budowlana 6
Dodaj i dostosuj swoją sekcję
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 (pół, jedna czwarta, jedna czwarta).
Zanim dodamy nasz pierwszy moduł, przejdź do ustawień sekcji i zaktualizuj następujące elementy:
W zakładce Treść…
Kolor tła: #00252d
W zakładce Projekt…
Niestandardowe wypełnienie: 80px góra, 80px dół
Zapisz ustawienia
Dodaj nagłówek za pomocą modułu tekstowego
Wróćmy teraz do naszego wiersza z trzema kolumnami i dodajmy moduł tekstowy w lewej kolumnie. Zaktualizuj ustawienia tekstu w następujący sposób:
W zakładce Treść…
Dodaj następujący nagłówek h1 w zakładce tekstowej pola treści:
<h1>Build Like You Mean It</h1>
W zakładce Projekt…
Czcionka nagłówka: Lato, pogrubiona (B)
Rozmiar czcionki nagłówka: 38px
Kolor tekstu nagłówka: #ffffff
Wysokość linii nagłówka: 1,3 em
Margines niestandardowy: dolny 20 pikseli
Styl animacji: slajd
Kierunek animacji: w lewo
Intensywność animacji: 16%
Zapisz ustawienia
Dodaj tekst za pomocą innego modułu tekstowego
Normalnie prawdopodobnie po prostu dodałbyś resztę tekstu pod nagłówkiem h1 w tym samym module tekstowym. Ale ponieważ chcemy dodać inny efekt animacji do nagłówka h1 i tekstu pod nim, będziemy musieli stworzyć kolejny moduł tekstowy. Śmiało i dodaj moduł tekstowy pod właśnie utworzonym i 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: slajd
Kierunek animacji: w lewo
Intensywność animacji: 8%
Zapisz ustawienia
Dodaj przycisk
Teraz dodajmy moduł przycisku poniżej dwóch modułów tekstowych w lewej kolumnie. Następnie zaktualizuj ustawienia w następujący sposób:
W zakładce Treść…
Tekst przycisku: Pobierz wszystko
URL przycisku [wprowadź adres URL]
W zakładce Projekt…
Użyj niestandardowych stylów dla przycisku: TAK
Rozmiar tekstu przycisku: 15px
Kolor tekstu przycisku: #01254c
Kolor tła przycisku: #ffcd1c
Szerokość obramowania przycisku: 0px
Promień obramowania przycisku: 65px
Odstępy między przyciskami: 1px
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 lewo
Intensywność animacji: 16%
Nie zapomnij dodać tego wspaniałego efektu blasku za pomocą właściwości css box shadow. Znajdź pole Main Element w obszarze Custom CSS i dodaj następujące elementy:
box-shadow: 0 3px 30px -5px #ffd747, inset 0 1px 3px rgba(255,255,255,0.5);
Zapisz ustawienia
Dodaj swój pierwszy moduł Blurb
To tyle dla naszej lewej kolumny. Teraz dodajmy moduł Blurb do środkowej kolumny (która jest pierwszą jedną czwartą kolumną).
Zaktualizuj ustawienia w następujący sposób:
W zakładce Treść…
Tytuł: Divi
Użyj ikony: TAK
Ikona: [wybierz ikonę]
Kolory gradientu tła: #8b56ff, #5d3dff
Typ gradientu: liniowy
Kierunek gradientu: 140 stopni
W zakładce Projekt…
Kolor ikony: #ffffff
Kolor tekstu: jasny
Orientacja tekstu: Środek
Czcionka nagłówka: pogrubiona (B), wielkie litery (TT)
Odstępy między nagłówkami: 10px
Margines niestandardowy: 12% dołu
Niestandardowe dopełnienie: 40px u góry, 30px w prawo, 30px w dół, 30px w lewo
Styl animacji: składanie
Kierunek animacji: w lewo
Opóźnienie animacji: 200 ms
W zakładce Zaawansowane…
Tutaj możemy dodać efekt poświaty do naszego modułu i wciąć nagłówek tylko odrobinę.
Dodaj następujący kod CSS do pola elementu głównego:
border-radius: 6px; box-shadow: 0 10px 60px -10px #8b56ff, inset 0 1px 3px rgba(255,255,255,0.2);
Dodaj następujący kod CSS do pola Tytuł Blurb:
text-indent: 10px;
Zapisz ustawienia
Powiel moduł Blurb, aby zbudować kolejne trzy Blurby
Teraz, gdy mamy zaprojektowany i animowany nasz pierwszy moduł Blurb, możemy go zduplikować, aby utworzyć pozostałe notki.
Najedź kursorem na Moduł Blurb i kliknij ikonę duplikatu modułu. W nowym zduplikowanym module, który pojawi się poniżej, zaktualizuj ustawienia w następujący sposób:
W zakładce Treść…
Tytuł: Bloom
Ikona: [wybierz nową ikonę]
Kolory gradientu tła: #ff56f9, #c43dff
W zakładce Projekt…
Kierunek animacji: w dół
W zakładce Zaawansowane…
Zastąp kod CSS w polu Element główny następującym:
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff56f9, inset 0 1px 3px rgba(255,255,255,0.2);
Zapisz ustawienia
Utwórz kolejny duplikat modułu notki i przeciągnij ten duplikat do skrajnej prawej kolumny. Następnie zaktualizuj ten Moduł Blurb z następującymi ustawieniami:
W zakładce Treść…
Tytuł: Extra
Ikona: [wybierz nową ikonę]
Kolory gradientu tła: #56ffda, #38d5ea
W zakładce Projekt…
Kierunek animacji: w górę
W zakładce Zaawansowane…
Zastąp kod CSS w polu Element główny następującym:
border-radius: 6px; box-shadow: 0 10px 60px -10px #56ffda, inset 0 1px 3px rgba(255,255,255,0.2);
Zrób kolejny duplikat właśnie zaktualizowanego modułu notki w prawej kolumnie, tak aby pojawił się bezpośrednio pod nim. Następnie zaktualizuj ten Moduł Blurb z następującymi ustawieniami:
W zakładce Treść…
Tytuł: Monarcha
Ikona: [wybierz nową ikonę]
Kolory gradientu tła: #f2743a, #ff5656
W zakładce Projekt…
Kierunek animacji: w prawo
W zakładce Zaawansowane…
Zastąp kod CSS w polu Element główny następującym:
border-radius: 6px; box-shadow: 0 10px 60px -10px #f2743a, inset 0 1px 3px rgba(255,255,255,0.2);
Zapisz ustawienia
Teraz poprawmy odstępy, aktualizując ustawienia wierszy w następujący sposób:
W zakładce Projekt…
Użyj niestandardowej szerokości: TAK
Szerokość niestandardowa: 1366 pikseli
Użyj niestandardowej szerokości rynny: TAK
Szerokość rynny: 2
Niestandardowe dopełnienie: 80px u góry, 0px w prawo, 160px w dół, 0px w lewo
Coumn 1 Niestandardowe wypełnienie: 140px Top
Zbuduj drugi rząd
Teraz jesteśmy gotowi do stworzenia kolejnego wiersza dla naszej sekcji. Aby przyspieszyć działanie, będziemy powielać i kopiować elementy projektu z naszego wcześniej zaprojektowanego rzędu i modułów.
Najpierw dodajmy nowy wiersz z jedną kolumną do naszej sekcji. Następnie zaktualizuj ustawienia wiersza, wprowadzając następujące informacje:
Użyj niestandardowej szerokości: TAK
Szerokość niestandardowa: 1366 pikseli
Użyj niestandardowej szerokości rynny: TAK
Szerokość rynny: 2
Zapisz ustawienia
Następnie skopiuj pierwszy moduł tekstowy z pierwszego utworzonego wiersza, który zawiera tytuł h1. Następnie zaktualizuj ustawienia w następujący sposób:
W zakładce Treść…
Zastąp obecny znacznik h1 następującym:
<h1>Don't Settle for Less</h1>
W zakładce Projekt…
Orientacja tekstu: Środek
Styl animacji: Odwróć
Intensywność animacji: 70%
Zapisz ustawienia
Następnie skopiuj moduł przycisku z poprzedniego wiersza i wklej go pod modułem tekstowym, który właśnie zakończyłeś aktualizacją w drugim wierszu. Następnie zaktualizuj moduł przycisków w następujący sposób:
W zakładce Treść…
Tekst przycisku: Dołącz dzisiaj
W zakładce Projekt…
Wyrównanie przycisków: środek
Styl animacji: Odwróć
Intensywność animacji: 70%
Zapisz ustawienia
A teraz ostatni rząd. Utwórz nowy wiersz o strukturze pół-pół-kolumny. Przed dodaniem modułów zaktualizuj ustawienia wierszy w następujący sposób:
W zakładce Projekt…
Użyj niestandardowej szerokości rynny: TAK
Szerokość rynny: 2
Zapisz ustawienia
Następnie skopiuj fioletowy moduł Blurb „Divi” z poprzedniego wiersza i wklej go do lewej kolumny nowego wiersza. Następnie zaktualizuj następujące ustawienia:
W zakładce Treść…
Tytuł: Budowniczy
Ikona: [wybierz nową ikonę]
Kolory gradientu tła: #ff568e, #ff3d5d
W zakładce Zaawansowane…
Zastąp kod CSS w polu Element główny następującym:
border-radius: 6px; box-shadow: 0 10px 60px -10px #ff568e, inset 0 1px 3px rgba(255,255,255,0.2);
Zapisz ustawienia
Następnie skopiuj niebieskozielony moduł „Dodatkowy” u góry skrajnej prawej kolumny w pierwszym utworzonym wierszu. Następnie wklej go w prawej kolumnie nowego trzeciego wiersza.
Następnie zaktualizuj ustawienia notki w następujący sposób:
W zakładce Treść…
Tytuł: Spokojny
Ikona: [wybierz nową ikonę]
Kolory gradientu tła: #3da4ff, #385eea
W zakładce Zaawansowane…
Zastąp kod CSS w polu Element główny następującym:
border-radius: 6px; box-shadow: 0 10px 60px -10px #3da4ff, inset 0 1px 3px rgba(255,255,255,0.2);
Zapisz ustawienia
Otóż to.
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_4.zip w naszym folderze pobierania. Rozpakuj go, aby wyświetlić następujące importy.
Efekty animacji, część 4 (sekcja 1) .json
Efekty animacji, część 4 (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
Mam nadzieję, że podobało wam się wspólne budowanie tej wspaniałej sekcji. Połączenie kolorów, świecących cieni i kreatywnej animacji sprawia, że jest to wyjątkowy układ do prezentacji własnych materiałów do pobrania lub produktów.
Nadchodzi
W części 5 pokażę, jak skutecznie włączyć styl animacji Roll do telefonów komórkowych w swoich sekcjach.
Czekam na kontakt z Państwem w komentarzach poniżej.
Pozdrawiam!