Jak progresywnie flashować kroki procesu za pomocą efektów przewijania Divi

Firmy często edukują swoich gości na temat swoich usług, oferując pomocną ilustrację etapów ich procesu. Na przykład agencja zajmująca się projektowaniem stron internetowych może pokazać swój proces tworzenia stron internetowych, a piekarnia może przedstawić swoje kroki w celu stworzenia idealnej babeczki.

Dzięki Divi możemy przenieść „kroki do procesu” na zupełnie inny poziom, korzystając z wbudowanych efektów przewijania. W tym samouczku pokażemy Ci prosty sposób na progresywne flashowanie kroków do procesu, gdy użytkownik przewija stronę w dół. Daje to projektowi ładny, interaktywny impuls, który twórczo podkreśla zamierzony przekaz.

zapowiedź

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 na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik JSON do 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.

Jak progresywnie flashować kroki procesu za pomocą efektów przewijania Divi

Aby stworzyć nasz układ do flashowania kroków procesu przewijania, musimy zacząć od dodania nowego wiersza.

Tworzenie czterokolumnowego rzędu

Aby rozpocząć, dodaj czterokolumnowy wiersz do sekcji.

Zanim zaczniemy dodawać moduły/treść do kolumn, otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Szerokość rynny: 2
• Maksymalna szerokość: 80%

Jak dotąd dość proste. Teraz zacznijmy dodawać trochę treści.

Dodawanie zawartości (kroki) do każdej kolumny

Ponieważ ten projekt zawiera efekt przewijania, który miga kroki do procesu, każda z naszych kolumn będzie zawierać jeden z kroków. Kolumna 1 będzie zawierać treść ilustrującą krok 1. Kolumna 2 będzie zawierać treść kroku 2. I tak dalej.

Dodaj moduł tekstowy do kolumny 1

Dodaj nowy moduł tekstowy do kolumny 1.

Treść i projekt modułu tekstowego

Następnie zaktualizuj treść tekstową w następujący sposób:

Otwórz kartę projektu i zaktualizuj następujące ustawienia:

• Czcionka tekstu: Lato
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu tekstu: #fc6d71
• Czcionka nagłówka 2: Oswald
• Grubość czcionki nagłówka 2: Lekka
• Rozmiar tekstu nagłówka 2: 32px
• Nagłówek 2 Odstępy między literami: 1px
• Nagłówek 2 Wysokość linii: 1,3 em
• Margines: 0px dół
• Wyściółka: 10% na górze, 10% na dole
• Szerokość obramowania: 1px
• Kolor obramowania: rgba (166,166,166,0.16)

Dodaj moduł obrazu do kolumny 1

Po umieszczeniu modułu tekstowego dodaj moduł obrazu poniżej modułu tekstowego w kolumnie 1.

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

Kopiuj i wklej zawartość kolumny 1

Aby przyspieszyć proces projektowania, możemy użyć funkcji wielokrotnego wyboru, aby wybrać dwa moduły w kolumnie 1, a następnie wkleić je do każdej z pozostałych czterech kolumn.

Zaktualizuj zawartość dla zduplikowanych modułów

Po umieszczeniu zduplikowanych modułów wróć i zaktualizuj treść tekstową i obrazy, aby odzwierciedlały każdy z czterech etapów procesu.

Po zakończeniu Twój projekt powinien wyglądać mniej więcej tak.

Dodawanie efektów przewijania do każdej kolumny

Jesteśmy teraz gotowi do dodania efektów przewijania, które będą migać na każdym etapie procesu, gdy użytkownik przewija stronę. Zamiast dodawać efekty przewijania do każdego z modułów, dodamy efekt przewijania do każdej kolumny, aby efekt został zastosowany do wszystkich modułów w treści.

Aby stworzyć migający efekt przewijania, użyjemy efektu przewijania Fading In i Out dla każdej kolumny. Pomysł polega na tym, aby zacząć efekt od 0% krycia, dalej do 100% krycia, a następnie z powrotem do 0%.

Kolumna 1 Efekty przewijania

W ustawieniach wiersza otwórz ustawienia dla kolumny 1 i dodaj następujący efekt przewijania:

W zakładce Opcje pojawiania się i zanikania:

• Włącz pojawianie się i zanikanie: TAK
• Początkowe krycie: 0% (przy 20% widocznym obszarze)
• Średnie krycie: 100% (przy 25%-45% widocznym obszarze)
• Końcowe krycie: 0% (przy 50% widocznym obszarze)

Kolumna 2 Efekty przewijania

Otwórz ustawienia dla kolumny 2 i dodaj następujący efekt przewijania:

W zakładce Opcje pojawiania się i zanikania:

• Włącz pojawianie się i zanikanie: TAK
• Nieprzezroczystość początkowa: 0% (przy widoku 35%)
• Średnie krycie: 100% (przy widoku 40%-60%)
• Końcowe krycie: 0% (przy 65% ​​widocznym obszarze)

Kolumna 3 Efekty przewijania

Kolumna 4 Efekty przewijania

Dodawanie nagłówka

Na koniec możemy dodać nagłówek do naszego układu. Aby to zrobić, dodaj nowy jednokolumnowy wiersz poniżej bieżącego wiersza.

Następnie dodaj moduł tekstowy do wiersza o następującej treści:

Na karcie projekt zaktualizuj następujące elementy:

• Wyrównanie tekstu: Lato
• Grubość czcionki nagłówka 2: Lekka
• Styl czcionki nagłówka 2: TT
• Kolor tekstu nagłówka 2: #fc6d71
• Rozmiar tekstu nagłówka 2: 70px (komputer), 40px (tablet), 24px (telefon)
• Nagłówek 2 Odstępy między literami: 0.5em

Ostateczny wynik

Aby zobaczyć wynik na aktywnej stronie, musisz dodać trochę dodatkowej przestrzeni nad i pod sekcją, aby zobaczyć efekt przewijania od początku do końca. Prostym sposobem na to jest dodanie górnego i dolnego marginesu do sekcji.

Oto wynik.

Końcowe przemyślenia

Ilustrowanie kroków procesu nie musi ograniczać się do statycznego obrazu lub grafiki. Dzięki efektowi przewijania Divi możesz ożywić ilustrację, progresywnie migając każdy krok w widoku, gdy użytkownik przewija stronę. A ponieważ efekt przewijania jest dodawany do każdej kolumny, możesz łatwo zmieniać moduły/treść w każdej kolumnie bez zakłócania funkcjonalności. Mamy nadzieję, że będzie to przydatna technika do dodania do zestawu narzędzi projektowych.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!