Przejdź do głównej treści

Jak utworzyć efekty przewijania dzielnika sekcji w Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Tworzenie efektów przewijania za pomocą separatora sekcji jest zabawną i prostą techniką, która może ożywić witrynę za pomocą motywu WordPress Divi. Dzielnik sekcji jest nadal wszechstronnym elementem projektu, przydatnym do dodawania odrobiny kreatywności do przejścia treści strony.

Ale dzięki efektom przewijania Divi dzielniki sekcji stają się jeszcze bardziej interesujące! Sztuką jest wyodrębnienie sekcji poświęconej stylowi dzielnika wyboru. Następnie możesz dodać do sekcji wszelkiego rodzaju gesty przewijania, aby stworzyć piękne efekty przewijania jako tło dla zawartości strony.

Zacznijmy!

Możliwy wynik

Oto przegląd projektów, które będziemy mogli wykonać na końcu 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śmy mieli 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

W treści ciała dodaj następujący tytuł H2:

<h2>Section Avec Séparateurs</h2>

Projekt modułu tekstowego

W ustawieniach projektu zaktualizuj następujące elementy:

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

  • 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ę.

sekcja dzielnika efekty przewijania dzielnika

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ść wypełnienia w treści. Przejdźmy do karty projektu i zaktualizuj następujące elementy:

  • 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 z sekcji, ale nadaj mu całkowicie przezroczyste tło. Następnie możemy usunąć górne wypełnienie i dodać dolny margines w celu przewijania testu.

Aby to zrobić, otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

  • 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 ponownie usuń domyślny kolor tła z sekcji, ale aktualizując następujące:

  • Kolor tła: rgba (0,0,0,0)

Konstrukcja rozdzielacza sekcji

Nie martw się, stworzymy kolor tła za pomocą dzielników sekcji. Aby to zrobić, kliknij kartę projektu i dodaj górny i dolny separator do sekcji w następujący sposób:

Doskonała konstrukcja dzielnika

  • Top Divider Style: 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 dolnego rozdzielacza: 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 jest przeznaczona wyłącznie do projektowania dzielnika, możemy pozbyć się wysokości i wypełnienia, aby wyświetlał się tylko styl dzielnika i nie było niepotrzebnej przestrzeni między dwiema częściami treś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 ustawienia w biuro .

Następnie zaktualizuj parametry ruchu poziomego na tablette :

  • Rozpocznij przesunięcie: 3 (przy 0% okna)
  • Średnie przesunięcie: 0 (przy 50% okna wyświetlacza)
  • Przesunięcie końcowe: -3 (na 100% okna wyświetlacza)

Pod zakładką Efekt skalowania w górę i w dół , zaktualizuj poniższe w biuro ...

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

  • Skala początkowa: 200% (przy 0% okna)
  • Średnia skala: 150% (przy 45% -65% okna wyświetlacza)
  • Skala końcowa: 150% (przy 100% okna wyświetlacza)

Następnie zaktualizuj efekt skalowania w górę i w dół na tablette w następujący sposób:

  • Skala początkowa: 400% (przy 0% okna)
  • Średnia skala: 300% (przy 45% -65% okna wyświetlacza)
  • Skala końcowa: 400% (przy 100% okna wyświetlacza)

Główny powód, dla którego musimy dostosować efekty ruchu na tablecie (i telefonie), wynika z wartości ruchu w poziomie za pomocą jednostek długości pikseli (tj. 3 = 300 pikseli), które są bezwzględne i nie dostosowuj do szerokości przeglądarki.

Zobaczmy teraz końcowy wynik naszego przewijanego animowanego dzielnika sekcji.

końcowe przemyślenia

Animacja dzielników sekcji na zwoju to zabawny i skuteczny sposób na ożywienie strony internetowej. Mam nadzieję, że da ci to inspirację do samodzielnego tworzenia jeszcze bardziej kreatywnych projektów.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
1 akcji
udział1
ćwierkanie
Enregistrer