Przejdź do głównej treści

Jak stworzyć płynne przejście z efektami przewijania na Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

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

Projektując stronę usług, chcesz mieć pewność, że odwiedzający zauważą wszystkie oferowane przez Ciebie usługi. W wielu przypadkach będzie to tylko jedna konkretna usługa, której szukają, ale jeśli zapewnisz usprawniony sposób w strukturze usług, Twoi goście będą bardziej skłonni traktować je wszystkie. 

W tym samouczku pokażemy, jak wykazać się kreatywnością dzięki efektom przewijania Divi i stworzyć płynne przejście usługi. Możesz także pobrać plik JSON za darmo!

Chodźmy.

Możliwy wynik

Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.

Przejście między sekcją divi

1, odtwórz strukturę elementów

Dodaj sekcję # 1

rozstaw

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i zmień wartości wypełnienia na ekranach o różnych rozmiarach.

  • Górna wyściółka: 80 pikseli (komputer stacjonarny i tablet), 0 pikseli (telefon)
  • Dolne wypełnienie: 80px
Sekcja parametrów Divi

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie nowego wiersza, korzystając z następującej struktury kolumn:

zaklejania

Bez dodawania kolejnych modułów otwórz parametry linii i zastosuj następujące zmiany w parametrach wymiarowania:

  • Użyj niestandardowej szerokości rynny: Tak
  • Szerokość rynny: 1
  • Szerokość: 90%
  • Maksymalna szerokość: 1580 pikseli
Konfiguracja odstępów Divi

rozstaw

Następnie dodaj niestandardowy górny i dolny margines.

  • Górny margines: 200px
  • Dolny margines: 200px
Konfiguracja odstępów Divi

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość H2

Czas dodać moduły, zaczynając od modułu tekstowego w kolumnie 1. Wprowadź dowolną zawartość H2, jaką chcesz.

Nasze usługi oferowane przez ekspertów w tej chwili

Ustawienia tekstu H2

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H2 w następujący sposób:

  • Tytuł 2 Policja: kwartalna
  • Nagłówek 2 Rozmiar tekstu: 80px (komputer stacjonarny), 50px (tablet), 40px (telefon)
  • Wysokość drugiej linii głowy: 2em
Szef policji

rozstaw

Następnie dodaj niższy margines na tablecie i telefonie.

  • Dolny margines: 50 pikseli (tylko tablet i telefon)
Konfiguracja odstępów w tekście Divi

Dodaj moduł tekstowy do kolumny 2

Dodaj treść

Przejdźmy do drugiej kolumny. Tam pierwszym potrzebnym modułem jest moduł tekstowy z pewnym opisem.

Pole tekstowe Content divi

Ustawienia tekstu

Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu:

  • Czcionka tekstu: kabina
  • Styl czcionki tekstu: wielkie litery
  • Kolor tekstu: # 000000
  • Rozmiar tekstu: 18 pikseli (komputer stacjonarny), 15 pikseli (tablet), 13 pikseli (telefon)
  • Odstępy między literami: 3px (komputer stacjonarny), 1px (tablet i telefon)
  • Wysokość linii tekstu: 3em
Parametr tekstu Divi

Dodaj moduł separacji do kolumny 2

widoczność

Kolejnym i ostatnim modułem, którego potrzebujemy w tej kolumnie, jest moduł separacji. Upewnij się, że opcja „Pokaż separator” jest włączona.

  • Pokaż separator: Tak
Widoczny rozdzielacz

Linia

Następnie zmień kolor linii modułu.

Ł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]

  • Kolor linii: # 000000
Kolor tła rozdzielacza

zaklejania

Następnie wprowadź zmiany w parametrach rozmiaru.

  • Waga dzielnika: 3px
  • Szerokość: 28%
Rozmiar separatora Divi

rozstaw

Dodajemy również górny margines.

  • Górny margines: 10px
Rozstaw modułów separatora Divi

Dodaj sekcję # 2

rozstaw

Przejdźmy do następnej zwykłej sekcji. Usuń domyślną górną wyściółkę z sekcji.

  • Górna wyściółka: 0px
Sekcja 2 odstępy divi

przepełnienia

Ukryj także przepełnienia.

  • Przelew poziomy: ukryty
  • Przelew pionowy: ukryty
Ukryj przepełnienia modułu Divi

Dodaj nową linię

Struktura kolumny

Kontynuuj dodawanie pierwszego wiersza, korzystając z następującej struktury kolumn:

Wybierz układ divi

zaklejania

Bez dodawania kolejnych modułów otwórz parametry linii, uzyskaj dostęp do parametrów wymiarowania i wprowadź następujące zmiany:

  • Użyj niestandardowej szerokości rynny: Tak
  • Szerokość rynny: 1
  • Wyrównaj wysokości kolumn: Tak
  • Szerokość: 90%
  • Maksymalna szerokość: 1580 pikseli
Sekcja rozdzielacza konfiguracji rynny

rozstaw

Następnie usuń wszystkie domyślne górne i dolne wypełnienie.

  • Górna wyściółka: 0px
  • Dolne wypełnienie: 0px
Ustawienia odstępów między modułami linii Divi 1

Ustawienia kolumny 1

Kolor tła

Następnie otwórz ustawienia kolumny 1 i zmień kolor tła.

  • Kolor tła: # f7f7f7
Konfiguracja tła modułu Divi Line

rozstaw

Uzupełnij ustawienia kolumny, dodając niestandardowe wartości wypełnienia na ekranach o różnych rozmiarach.

  • Górna wyściółka: 200 pikseli (biurko), 100 pikseli (tablet i telefon)
  • Wyściółka u dołu: 200px (biurko), 100px (tablet i telefon)
  • Lewa wyściółka: 8%
  • Prawa wyściółka: 8%
Ustawienia kolumn modułu wiersza

Ustawienia kolumny 2

rozstaw

Kontynuuj, otwierając ustawienia w kolumnie 2. Przejdź do karty Zaawansowane i dodaj niestandardowe wartości wypełnienia na ekranach o różnych rozmiarach.

  • Górne wypełnienie: 100 pikseli (komputer stacjonarny), 50 pikseli (tablet i telefon)
  • Dolne wypełnienie: 200px
  • Lewa wyściółka: 150 pikseli (biurko), 0 pikseli (tablet i telefon)
Ustawienia odstępów między modułami Divi

Dodaj moduł separacji do kolumny 1

widoczność

W pierwszej kolumnie pierwszym potrzebnym modułem jest moduł separacji. Upewnij się, że opcja „Pokaż separator” jest włączona.

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]

  • Pokaż separator: Tak
Pokaż separator divi 1

Linia

Następnie zmień kolor linii modułu.

  • Kolor linii: # 000000
Ustawienia separatora Divi

zaklejania

Wprowadź także zmiany w parametrach rozmiaru.

  • Waga dzielnika: 3px
  • Szerokość: 50%
Rozmiar separatora Divi

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość H3

Kolejnym modułem, którego potrzebujemy w kolumnie 1, jest moduł tekstowy z zawartością H3.

Ustawienie sekcji treści Divi

Ustawienia tekstu H3

Przejdź do zakładki projektowania modułu i zmień ustawienia tekstu H3:

  • Tytuł 3 Policja: kwartalna
  • Kolor tekstu pozycji 3: # 000000
  • Pozycja 3 Rozmiar tekstu: 50 pikseli (komputer stacjonarny), 40 pikseli (tablet), 35 pikseli (telefon)
  • Wysokość drugiej linii głowy: 3em

Dodaj moduł tekstowy do kolumny 2

Dodaj treść

W drugiej kolumnie pierwszym potrzebnym modułem jest moduł tekstowy z pewną zawartością opisu.

Ustawienie modułu tekstowego Divi

Ustawienia tekstu

Zmień ustawienia tekstowe modułu w następujący sposób:

  • Czcionka tekstu: kabina
  • Styl czcionki tekstu: wielkie litery
  • Rozmiar tekstu: 18 pikseli (komputer stacjonarny), 15 pikseli (tablet), 13 pikseli (telefon)
  • Odstępy między literami: 3px (komputer stacjonarny), 1px (tablet i telefon)
  • Wysokość linii tekstu: 3em
Dopasowanie czcionki tekstu Divi

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Kolejnym i ostatnim potrzebnym modułem jest moduł przycisków. Wprowadź wybraną kopię.

Ustawienie zawartości modułu tekstowego

Ustawienia przycisków

Następnie stylizuj przycisk.

  • Użyj niestandardowych stylów przycisku: Tak
  • Rozmiar tekstu przycisku: 20 pikseli
  • Kolor tekstu przycisku: #ffffff
  • Kolor tła przycisku: # 000000
  • Szerokość obramowania przycisku: 0px
Ustawienie stylu przycisku Divi
  • Przycisk czcionki: kwartalny
  • Waga czcionki przycisku: pogrubiona
Ustawienia koloru przycisku Divi

rozstaw

Dodaj także niestandardowe wypełnienie.

  • Górna wyściółka: 50px
  • Dolne wypełnienie: 50px
  • Lewe dopełnienie: 100px
  • Prawa wyściółka: 100 pikseli
Ustawienia odstępów między przyciskami modułu Divi

Pozycja

I odpowiednio zmień położenie przycisku:

  • Pozycja: absolutna
  • Lokalizacja: u dołu po lewej
Regulacja pozycji modułu przycisku Divi

Klonuj linię tyle razy, ile to konieczne

Po ukończeniu całej linii i wszystkich jej modułów możesz sklonować całą linię trzy razy.

Clone divi module

Zmień całą zawartość

Pamiętaj, aby edytować całą zawartość w zduplikowanych wierszach.

Edytuj zawartość sekcji divi

2. Zastosuj efekty przewijania

Efekty przewijania w pierwszym rzędzie

Ruch poziomy

Po wypełnieniu wszystkich wierszy w sekcji nadszedł czas, aby dodać efekty przewijania. Otwórz pierwszy rząd sekcji i dodaj ruch poziomy.

  • Aktywuj ruch poziomy: Tak
  • Rozpocznij przesunięcie: -5
  • Średnie przesunięcie: 0 (przy 26%)
  • Przesunięcie końcowe: 0
  • Efekt ruchu wyzwalania: środek elementu
Zastosuj efekty przewijania Divi

Zanikaj i znikaj

Użyj także przychodzącego i wychodzącego efektu zanikania.

  • Aktywuj pojawianie się i zanikanie: Tak
  • Początkowe krycie: 100%
  • Średnie krycie: 100% (przy 50%)
  • Koniec krycia: 0% (do 53%)
  • Efekt ruchu wyzwalania: środek elementu
Skonfiguruj divi sekcji animacji zanikania

Efekty przewijania w środkowym rzędzie

Ruch pionowy

Następnie dodamy efekty przewijania do wszystkich linii między pierwszą a ostatnią linią sekcji. Najpierw użyj ruchu pionowego:

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]

  • Aktywuj ruch pionowy: Tak
  • Rozpocznij przesunięcie: -4
  • Średnie przesunięcie: 0 (przy 26%)
  • Przesunięcie końcowe: 0
  • Efekt wyzwalania ruchu: środek elementu
Konfiguracja animacji przewijania Divi

Zanikaj i znikaj

Aktywuj również efekt zanikania wejścia i wyjścia.

  • Aktywuj pojawianie się i zanikanie: Tak
  • Początkowe krycie: 0%
  • Średnie krycie: 100% (od 27% do 50%)
  • Przesunięcie końcowe: 0 (przy 53%)
  • Efekt ruchu wyzwalania: środek elementu
Animacja zanikania linii Divi

Efekty przewijania ostatniej linii

Ruch pionowy

Następnie otwórz ostatni wiersz sekcji i dodaj następujący ruch pionowy:

  • Aktywuj ruch pionowy: Tak
  • Rozpocznij przesunięcie: -4
  • Średnie przesunięcie: 0 (przy 26%)
  • Przesunięcie końcowe: 0
  • Efekt ruchu wyzwalania: środek elementu
Animacja przewijania modułu Divi Line

Zanikaj i znikaj

Z przychodzącym i wychodzącym efektem zanikania i gotowe!

  • Aktywuj pojawianie się i zanikanie: Tak
  • Początkowe krycie: 0%
  • Średnie krycie: 100% (od 27% do 50%)
  • Koniec krycia: 100% (do 53%)
  • Efekt ruchu wyzwalania: środek elementu
Ustawienia animacji wyglądu modułu Divi Line

Ostateczny wynik

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.

Ostateczne demo

końcowe przemyślenia

W tym artykule pokazaliśmy, jak stworzyć piękne przejście usługi z efektami przewijania Divi. Jeszcze zanim jeden serwis zniknie, zaczyna się pojawiać drugi, dając przyjemne dla oka przejście. Takie podejście pomoże Ci wyróżnić każdą usługę na indywidualnym poziomie. Możesz także pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie 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
0 akcji
udział
ćwierkanie
Enregistrer