Projektując stronę usług, chcesz mieć pewność, że Twoja odwiedzający zwróć uwagę na wszystkie usługi, które świadczysz. W wielu przypadkach będzie to tylko jedna konkretna usługa, której szukają, ale jeśli zapewnisz usprawniony sposób w swojej strukturze usług, jest bardziej prawdopodobne, że Twoja odwiedzający rozprawić się z nimi wszystkimi.
W tym samouczku pokażemy, jak wykazać się kreatywnością dzięki efektom przewijania z Divi i stworzyć płynną zmianę usług. Będziesz także mógł pobrać plik JSON za darmo!
Chodźmy.
Możliwy wynik
Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom 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 na ekranach o różnych rozmiarach.
- 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. Wpisz treść H2 według własnego wyboru.
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
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 pewnym treść opis.
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
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.
- 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 zwykłej 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 kolumny 1 i zmień kolor tła.
- Kolor tła: # f7f7f7
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 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)
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
Następnym modułem, którego potrzebujemy w kolumnie 1, jest moduł tekstowy z treść H3.
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.
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ę
Kolejnym i ostatnim potrzebnym modułem jest moduł przycisków. Wprowadź 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 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
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
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:
- 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%)
- Efekt ruchu wyzwalania: ś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
- Efekt ruchu wyzwalania: ś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%)
- Efekt ruchu wyzwalania: środek elementu
Ostateczny wynik
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
końcowe przemyślenia
W tym artykule pokazaliśmy, jak stworzyć piękne przejście serwowania z efektami przewijania Divi. Jeszcze zanim jeden serwis zniknie, drugi zaczyna się pojawiać, dając przyjemne przejście, które jest przyjemne dla oka. Takie podejście pomoże Ci wyróżnić każdą usługę na indywidualnym poziomie. Udało Ci się również bezpłatnie pobrać plik JSON! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.
