Tworzenie efektów przewijania za pomocą dzielnika sekcji to prosta i przyjemna technika, która może ożywić Twoją Witryna internetowa używając WordPress Divi. Dzielnik sekcji nadal jest wszechstronnym elementem projektu, przydatnym do dodawania odrobiny kreatywności do przejść treść strona.
Ale dzięki efektom przewijania Divi podziały sekcji stają się jeszcze bardziej interesujące! Sztuka polega na wydzieleniu sekcji poświęconej wybranemu stylowi rozdzielacza. Następnie możesz dodać do sekcji wszelkiego rodzaju ruchy generowane przez przewijanie, aby stworzyć piękne efekty przewijania jako tło dla treść strony.
Zacznijmy!
Możliwy wynik
Oto przegląd projektów, które będziemy w stanie osiągnąć po ukończeniu tego samouczka.
Jak tworzyć animowane dzielniki przewijane w Divi
Utworzenie dwóch sekcji treści
Dodaj wiersz
Aby rozpocząć, utwórz wiersz z jedną kolumną w sekcji domyślnej.
Margines sekcji (do testów)
Do celów testowych dodaj górny margines do sekcji, aby mieć miejsce na przewijanie. Otwórz ustawienia sekcji i dodaj:
- Górny margines: 80vh
Dodaj moduł tekstowy
W wierszu kolumny dodaj nowy moduł tekstowy.
Treść modułu tekstowego
Wnętrze treść ciała dodaje się następujący nagłówek H2:
<h2>Section Avec Séparateurs</h2>
Projekt modułu tekstowego
W ustawieniach projektu zaktualizuj następujące elementy:
- Czcionka tekstu: Roboto
- Wyrównanie tekstu: środek
- Pozycja 2 Kolor tekstu: # bae0d8
- Nagłówek 2 Rozmiar tekstu: 80px (komputer stacjonarny), 50px (tablet), 30px (telefon)
Dodaj drugą sekcję treści
W poprzedniej sekcji dodaj nową zwykłą sekcję.
Dodaj wiersz
W nowej sekcji dodaj wiersz do kolumny.
Dodaj moduł tekstowy
Następnie dodaj nowy moduł tekstowy do wiersza.
Projekt modułu tekstowego
Na razie możemy zachować domyślną zawartość dopełnienia wewnątrz ciała. Przejdźmy do zakładki projektowania i zaktualizujmy:
- Czcionka tekstu: Roboto
- Kolor tekstu tekstu: #dddddd
- Rozmiar tekstu: 16px
- Wysokość linii tekstu: 1,5 em
- Wyrównanie tekstu: do lewej
- Maksymalna szerokość: 400 pikseli
- Wyrównanie modułu: centrum
Ustawienia sekcji
Pamiętaj, aby usunąć domyślny kolor tła sekcji, ale nadaj jej całkowicie przezroczyste tło. Następnie możemy usunąć górne wypełnienie i dodać dolny margines do celów testu przewijania.
Aby to zrobić, otwórz ustawienia sekcji i zaktualizuj następujące elementy:
- Kolor tła: rgba (0,0,0,0)
- Dolny margines: 80vh
- Wypełnienie: 0px
Stworzenie animowanego separatora sekcji
Po zakończeniu dwóch sekcji treści jesteśmy gotowi dodać sekcję dla naszych animowanych dzielników sekcji.
Dodaj nową sekcję
Śmiało i utwórz nową regularną sekcję pośrodku dwóch sekcji treści.
Kontekst sekcji
I znowu usuń domyślny kolor tła sekcji, ale zaktualizuj następujące elementy:
- Kolor tła: rgba (0,0,0,0)
Konstrukcja rozdzielacza sekcji
Nie martw się, utworzymy kolor tła za pomocą separatorów sekcji. Aby to zrobić, kliknij kartę projektu i dodaj górną i dolną przegrodę do sekcji w następujący sposób:
Doskonała konstrukcja dzielnika
- Styl górnego rozdzielacza: patrz zrzut ekranu
- Kolor górnej przegrody: # 524fbf
- Wysokość górnej ścianki działowej: 20 vw
- Pozioma powtarzalność górnego dzielnika: 0,6x
- Odwrócenie górnej przegrody: poziomo
Niższa konstrukcja rozdzielacza
- Styl dolnej przegródki: patrz zrzut ekranu
- Kolor dolnego separatora: # 524fbf
- Wysokość dolnego rozdzielacza: 20 vw
- Pozioma powtarzalność dolnego dzielnika: 0,5x
- Niższe pochylenie przegrody: pozioma i pionowa
Wysokość przekroju i wypełnienie
Ponieważ ta sekcja służy wyłącznie do projektowania separatorów, możemy pozbyć się wysokości i wypełnienia, aby pokazywany był tylko styl separatora i nie było niepotrzebnych odstępów między dwiema sekcjami zawartości. Zaktualizuj następujące elementy:
- Wysokość: 0px
- Wypełnienie: 0px wysoki, 0px niski
Efekty przewijania separatora sekcji
Następnie nadaj sekcji następujące efekty przewijania:
Pod zakładką Ruch poziomy ...
- Aktywuj ruch poziomy: TAK
Możemy zachować domyślne ustawienia tego w widoku pliku biuro .
Następnie zaktualizuj parametry ruchu poziomego na tablette :
- Rozpocznij przesunięcie: 3 (przy 0% okna)
- Średnie przesunięcie: 0 (przy 50% widocznego obszaru)
- Odsunięcie końcowe: -3 (przy 100% widocznego obszaru)
Pod zakładką Efekt skalowania w górę i w dół , zaktualizuj poniższe w biuro ...
- Skala początkowa: 200% (przy 0% okna)
- Średnia skala: 150% (przy 45% -65% widocznego obszaru)
- Skala końcowa: 150% (przy 100% widocznego obszaru)
Następnie zaktualizuj efekt skalowania w górę iw dół na tablette w następujący sposób:
- Skala początkowa: 400% (przy 0% okna)
- Średnia skala: 300% (przy 45% -65% widocznego obszaru)
- Skala końcowa: 400% (przy 100% widocznego obszaru)
Głównym powodem, dla którego musimy dostosować efekty ruchu na tablecie (i telefonie), są wartości ruchu w poziomie przy użyciu jednostek długości pikseli (tj. 3 = 300 pikseli), które są absolutne i nie dopasowują się do szerokości przeglądarki.
Zobaczmy teraz końcowy wynik naszego przewijanego animowanego dzielnika sekcji.
końcowe przemyślenia
Animowanie separatorów sekcji na zwoju to zabawny i skuteczny sposób na ożywienie strony internetowej. Mam nadzieję, że zainspiruje Cię to do stworzenia jeszcze bardziej kreatywnych projektów.
