Jak przekonująco prowadzić odwiedzających w dół strony dzięki wbudowanym ustawieniom animacji Divi

Jednym z głównych celów sekcji bohaterów jest przekonanie ludzi do ciągłego przewijania strony i odkrywania większej ilości udostępnianych treści i informacji. Dzięki wbudowanym opcjom animacji Divi możesz dodawać interaktywne animacje do swojej strony, które pomogą Ci przekonująco prowadzić odwiedzających w dół strony. W tym samouczku zmotywujemy odwiedzających do przewinięcia w dół do sekcji usług za pomocą ikon strzałek, które zaprowadzą ich do sekcji usług.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Zacznijmy tworzyć!

Subskrybuj nasz kanał YouTube

Dodaj sekcję #1

Kolor tła

Utwórz nową stronę i dodaj do niej zwykłą sekcję. Otwórz ustawienia sekcji i zmień kolor tła.

• Kolor tła: #0f0f0f

Dolny rozdzielacz

Kontynuuj, dodając dolną przegrodę do sekcji.

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #ffffff
• Wysokość dzielnika: 30px
• Powtarzanie w poziomie dzielnika: 10x (komputer stacjonarny), 4x (tablet i telefon)

Rozstaw

Dodaj również niestandardowe wartości dopełnienia.

• Górna wyściółka: 269px (komputer stacjonarny), 100px (tablet i telefon)
• Dolna wyściółka: 674px (komputer), 200px (tablet i telefon)

Dodaj wiersz

Struktura kolumny

Następnie dodaj nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza, przejdź do ustawień rozmiaru i włącz opcję „Make This Row Fullwidth”.

• Stwórz ten wiersz o pełnej szerokości: Tak

Dodaj moduł tekstowy

Dodaj zawartość

Jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł tekstowy. Śmiało i dodaj wybrane treści H1.

Ustawienia tekstu nagłówka

Następnie zmień ustawienia tekstu nagłówka.

• Czcionka nagłówka: Dydaktyka Gothic
• Grubość czcionki nagłówka: pogrubiona
• Wyrównanie tekstu nagłówka: do środka
• Kolor tekstu nagłówka: #ffffff
• Rozmiar tekstu nagłówka: 170px (komputer), 50px (tablet i telefon)
• Wysokość linii nagłówka: 0,8 em

• Tekst nagłówka Cień w pionie Długość: 1,5 em
• Kolor cienia tekstu nagłówka: rgba (0,0,0,0.11)

Dodaj sekcję #2

Kolor tła

Kontynuuj, dodając drugą sekcję do strony. Zmień kolor tła w ustawieniach sekcji.

• Kolor tła: #0f0f0f

Górny rozdzielacz

Dodaj również górną przegrodę do sekcji.

• Styl dzielnika: Znajdź na liście
• Kolor dzielnika: #ffffff
• Wysokość dzielnika: 30px
• Powtarzanie w poziomie dzielnika: 10x (komputer stacjonarny), 4x (tablet i telefon)

Rozstaw

I zwiększ wartości odstępów w ustawieniach odstępów.

• Górna wyściółka: 245px
• Dolna wyściółka: 245px

Dodaj wiersz

Struktura kolumny

Kontynuuj, dodając do sekcji nowy wiersz o następującej strukturze kolumn:

Rozmiary

Otwórz ustawienia wiersza, przejdź do ustawień rozmiaru i wprowadź zmiany.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2

Dodaj moduł Blurb

Wybierz ikonę

Pierwszym modułem, który będziemy potrzebować w pierwszej kolumnie, jest moduł Blurb. Jedynym potrzebnym elementem modułu Blurb jest ikona. Wybierz ikonę strzałki skierowaną w dół.

Ustawienia ikon

Następnie przejdź do zakładki projekt i zmień ustawienia ikony.

• Kolor ikony: #4ffcff
• Umieszczenie ikon: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 150px

Rozstaw

Aby zwiększyć zasięg ikony, musimy dodać ujemny margines górny. Pozwoli to modułowi Blurb na nałożenie się na poprzednią sekcję i pozwoli na płynną animację między dwiema sekcjami. Aby zrekompensować niestandardowy margines, dodamy również niestandardową górną wyściółkę. Dzięki temu ikona pozostanie dokładnie w tej samej pozycji, co poprzednio. Jedyne, co się zmienia, to wielkość i zasięg całego modułu.

• Górny margines: -550px
• Górna wyściółka: 550px

Animacja

Na koniec dodaj animację do modułu Blurb, korzystając z następujących ustawień:

• Styl animacji: slajd
• Kierunek animacji: w dół
• Czas trwania animacji: 3000 ms
• Opóźnienie animacji: 1200 ms
• Intensywność animacji: 100%
• Początkowe krycie animacji: 100%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia
• Animacja obrazu/ikony: brak animacji

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Następnym modułem, którego potrzebujemy w pierwszej kolumnie, jest moduł tekstowy. Dodaj wybrane treści.

Ustawienia tekstu

Kontynuuj, zmieniając ustawienia tekstu.

• Czcionka tekstu: Didact Gothic
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: rgba (255,255,255,0,03)
• Rozmiar tekstu: 350px
• Orientacja tekstu: Środek

Dodaj moduł tekstowy #2 do kolumny 1

Dodaj zawartość

Dodaj drugi moduł tekstowy do pierwszej kolumny z wybraną zawartością H3.

Ustawienia tekstu nagłówka

I zmień ustawienia tekstu nagłówka na karcie projektu.

• Czcionka nagłówka 3: Dydaktyka gotycka
• Nagłówek 3 Wyrównanie tekstu: do środka
• Kolor tekstu nagłówka 3: #ffffff
• Rozmiar tekstu nagłówka 3: 40px (komputer), 30px (tablet i telefon)
• Nagłówek 3 Odstępy między literami: -1px

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Następnym modułem potrzebnym w pierwszej kolumnie jest moduł rozdzielający. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Kolor

Kontynuuj, zmieniając kolor przegrody na karcie projektu.

• Kolor: #ffffff

Rozmiary

Wprowadź również pewne zmiany w ustawieniach rozmiaru.

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

Animacja

Dodaj też animację do modułu.

• Styl animacji: slajd
• Kierunek animacji: Centrum
• Czas trwania animacji: 2000 ms
• Intensywność animacji: 10%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia

Dodaj moduł tekstowy nr 3 do kolumny 1

Dodaj zawartość

Następnym i ostatnim modułem, którego potrzebujemy w kolumnie pierwszej, jest kolejny moduł tekstowy. Dodaj wybrane treści.

Ustawienia tekstu

Kontynuuj, zmieniając ustawienia tekstu.

• Czcionka tekstu Waga: lekka
• Kolor tekstu: #b7b7b7
• Rozmiar tekstu: 18px
• Wysokość linii tekstu: 1,8 em
• Orientacja tekstu: Środek

Animacja

I dodaj animację do modułu.

• Styl animacji: slajd
• Kierunek animacji: w górę
• Intensywność animacji: 20%
• Krzywa szybkości animacji: łatwość wchodzenia i wychodzenia

Klonuj moduły 3 razy i umieść duplikaty w pozostałych kolumnach

Teraz, gdy skończyliśmy modyfikować wszystkie moduły w kolumnie 1, możemy sklonować wszystkie moduły w kolumnie pierwszej 3 razy i umieścić duplikaty w pozostałych kolumnach.

Zmień zawartość modułu

Zmień zawartość duplikatów.

Dodaj opóźnienie animacji do modułów dzielników duplikatów

Dodaj również opóźnienie animacji do każdego z duplikatów modułu dzielnika.

• Moduł dzielnika w kolumnie 2: 400ms
• Moduł dzielnika w kolumnie 3: 800ms
• Moduł dzielnika w kolumnie 4: 1200ms

Dodaj opóźnienie animacji do duplikatów modułu tekstowego nr 3

Zrób to samo dla ostatniego modułu tekstowego w każdej kolumnie.

• Ostatni moduł tekstowy w kolumnie 2: 400ms
• Ostatni moduł tekstowy w kolumnie 3: 800ms
• Ostatni moduł tekstowy w kolumnie 4: 1200ms

Dostosuj ikonę rozmycia #2

Kolor ikony

Zmieniamy również kolor i animację ikony notki dla każdego z duplikatów. Otwórz moduł Blurb w kolumnie 2 i zmień kolor ikony.

• Kolor ikony: #ff6b86

Animacja

Zmień również ustawienia animacji.

• Typ animacji: slajd
• Kierunek animacji: w dół
• Czas trwania animacji: 2000 ms
• Opóźnienie animacji: 800ms
• Intensywność animacji: 62%
• Początkowe krycie animacji: 100%
• Animacja obrazu/ikony: brak animacji

Dostosuj ikonę rozmycia #3

Kolor ikony

Kontynuuj, otwierając moduł Blurb w kolumnie 3 i zmieniając kolor ikony.

• Kolor ikony: #ffe500

Animacja

Zmodyfikuj również ustawienia animacji.

• Typ animacji: slajd
• Kierunek animacji: w dół
• Czas trwania animacji: 1000 ms
• Opóźnienie animacji: 600 ms
• Intensywność animacji: 69%
• Początkowe krycie animacji: 100%
• Animacja obrazu/ikony: brak animacji

Dostosuj ikonę rozmycia #4

Kolor ikony

Otwórz ostatni moduł Blurb w kolumnie 4 i zmień kolor ikony.

• Kolor ikony: #00ff9d

Animacja

I zakończ projekt, zmieniając ustawienia animacji na karcie projektu.

• Typ animacji: slajd
• Kierunek animacji: w dół
• Czas trwania animacji: 3000 ms
• Opóźnienie animacji: 400 ms
• Intensywność animacji: 100%
• Początkowe krycie animacji: 100%
• Animacja obrazu/ikony: brak animacji

Końcowe przemyślenia

W tym poście pokazaliśmy, jak przekonująco prowadzić odwiedzających w dół strony za pomocą ustawień animacji Divi. Podstawową ideą jest wykorzystanie modułów Blurb do ich ikon i zwiększenie zasięgu ich animacji do sekcji bohatera. Możesz użyć tego podejścia w dowolnej witrynie, którą tworzysz i uzyskać tak kreatywność, jak chcesz. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!