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 600.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, musisz upewnić się, ż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 usprawnioną strukturę swojej struktury usług, Twoi użytkownicy będą częściej traktować je wszystkie.

W tym samouczku pokażemy, jak stać się kreatywnym dzięki efektom przewijania Divi i stworzyć płynne przejście do usługi. Możesz również pobrać plik JSON za darmo!

Chodźmy.

Możliwy wynik

Przed zanurzeniem się w samouczku, spójrzmy na wynik na różnych rozmiarach ekranu.

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 dla różnych rozmiarów ekranu.

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

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

rozstaw

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

  • Górny margines: 200px
  • Dolny margines: 200px

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość H2

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

Ustawienia tekstu H2

Przejdź do karty projektu modułu i zmodyfikuj parametry tekstowe 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

rozstaw

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

  • Dolny margines: 50 pikseli (tylko tablet i telefon)

Dodaj moduł tekstowy do kolumny 2

Dodaj treść

Przejdźmy do drugiej kolumny. Tam pierwszym modułem, którego potrzebujemy, jest moduł tekstowy z pewną zawartością opisu.

Ustawienia tekstu

Przejdź do karty projektu 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

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

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

zaklejania

Następnie wprowadź zmiany w parametrach rozmiaru.

  • Waga dzielnika: 3px
  • Szerokość: 28%

rozstaw

Dodajemy również górny margines.

  • Górny margines: 10px

Dodaj sekcję # 2

rozstaw

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

  • Górna wyściółka: 0px

przepełnienia

Ukryj także przepełnienia.

  • Przelew poziomy: ukryty
  • Przelew pionowy: ukryty

Dodaj nową linię

Struktura kolumny

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

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

rozstaw

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

  • Górna wyściółka: 0px
  • Dolne wypełnienie: 0px

Ustawienia kolumny 1

Kolor tła

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

  • Kolor tła: # f7f7f7

rozstaw

Uzupełnij ustawienia kolumny, dodając niestandardowe wartości wypełnienia dla różnych rozmiarów ekranu.

  • 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 kolumny 2

rozstaw

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

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]

  • 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)

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.

  • Pokaż separator: Tak

Linia

Następnie zmień kolor linii modułu.

  • Kolor linii: # 000000

zaklejania

Wprowadź także zmiany w parametrach rozmiaru.

  • Waga dzielnika: 3px
  • Szerokość: 50%

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.

Ustawienia tekstu H3

Przejdź do karty projektu modułu i zmodyfikuj parametry tekstowe 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.

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

Dodaj moduł przycisku do kolumny 2

Dodaj kopię

Następny i ostatni moduł, którego potrzebujemy, to moduł przycisku. Wpisz wybraną kopię.

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
  • Przycisk czcionki: kwartalny
  • Waga czcionki przycisku: pogrubiona

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

Pozycja

I odpowiednio zmień położenie przycisku:

  • Pozycja: absolutna
  • Lokalizacja: u dołu po lewej

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.

Zmień całą zawartość

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

2. Zastosuj efekty przewijania

Efekty przewijania w pierwszym rzędzie

Ruch poziomy

Po zakończeniu wszystkich linii w sekcji nadszedł czas, aby dodać efekty przewijania. Otwórz pierwszą linię sekcji i dodaj ruch poziomy.

  • Aktywuj ruch poziomy: Tak
  • Rozpocznij przesunięcie: -5
  • Średnie przesunięcie: 0 (przy 26%)
  • Przesunięcie końcowe: 0
  • Wyzwalacz efektu ruchu: środek elementu

Zanikaj i znikaj

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

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 pojawianie się i zanikanie: Tak
  • Początkowe krycie: 100%
  • Średnie krycie: 100% (przy 50%)
  • Koniec krycia: 0% (do 53%)
  • Wyzwalacz efektu ruchu: środek elementu

Efekty przewijania w środkowym rzędzie

Ruch pionowy

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

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

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%)
  • Wyzwalacz efektu ruchu: środek elementu

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
  • Wyzwalacz efektu ruchu: środek elementu

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%)
  • Wyzwalacz efektu ruchu: środek elementu

Ostateczny wynik

Teraz, gdy przeszliśmy przez wszystkie etapy, rzućmy okiem na wynik na różnych rozmiarach ekranu.

końcowe przemyślenia

W tym artykule pokazaliśmy, jak stworzyć piękne przejście do usługi za pomocą przewijanych efektów Divi. Zanim jedna usługa nawet zniknie, druga zacznie się pojawiać, dając piękne przejście przyjemne dla oka. 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, zostaw komentarz w sekcji komentarzy poniżej.

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
0 akcji
udział
ćwierkanie
Enregistrer