Jak zmienić style przewijania bez ruchu za pomocą lepkich opcji Divi

Jeśli podczas tworzenia nowej witryny zależy Ci na czystym stylu projektowania, najprawdopodobniej będziesz chciał znaleźć sposób na dodanie dodatkowego wymiaru do swojej witryny. Ten samouczek będzie o tym wszystkim. Pokażemy Ci, jak używać lepkich opcji Divi, aby zmieniać lepkie style bez ruchu. W szczególności oznacza to, że gdy tylko odwiedzający przejdą obok określonej części Twojej strony, style tej części zmienią się, ale elementy pozostaną na swoim miejscu. Ten rodzaj efektu jest całkowicie skoncentrowany na zachowaniu użytkownika. Zmiana lepkich stylów dzieje się tylko wtedy, gdy ludzie ją przewijają, co daje piękny efekt. W tym samouczku pokażemy Ci krok po kroku, jak się tam dostać. Gdy zdobędziesz podejście, będziesz mógł go użyć w dowolnym projekcie, który zbudujesz! Będziesz mógł również bezpłatnie pobrać plik JSON.

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz układ za DARMO

Aby położyć swoje ręce na darmowym układzie, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Utwórz strukturę elementów

Dodaj nową sekcję

Widoczność

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Otwórz ustawienia sekcji i ukryj przepełnienia w zakładce Zaawansowane. Pomoże to uniknąć pojawienia się poziomego paska przewijania.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Bez dodawania żadnych modułów otwórz ustawienia wiersza i odpowiednio zmodyfikuj ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak
• Szerokość: 100%
• Maksymalna szerokość: 2580 pikseli

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

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

Ustawienia kolumny 1

Rozstaw

Następnie otwórz ustawienia kolumny 1 i zastosuj niestandardowe wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka:
  • Pulpit: 200px
  • Tablet: 100px
  • Telefon: 80px
• Dolna wyściółka:
  • Pulpit: 200px
  • Tablet: 100px
  • Telefon: 80px

Indeks Z

Zwiększ indeks z tej kolumny. W dalszej części samouczka utworzymy poziome nakładanie się między kolumnami 1 i 2. Zwiększamy indeks z, aby zapewnić, że moduły kolumny 1 pozostaną nad modułami kolumny 2.

• Indeks Z: 11

Ustawienia kolumny 2

Kolor tła

Następnie dodamy kolor tła do kolumny 2.

• Kolor tła: #f9f9f9

Rozstaw

Użyjemy również niektórych niestandardowych wartości dopełnienia dla różnych rozmiarów ekranu.

• Górna wyściółka:
  • Pulpit: 200px
  • Tablet: 150px
  • Telefon: 100px
• Dolna wyściółka:
  • Pulpit: 200px
  • Tablet: 150px
  • Telefon: 100px

Kolumna 3 Ustawienia

Rozstaw

Na koniec dodamy również niestandardowe wartości dopełnienia do kolumny 3.

• Górna wyściółka:
  • Pulpit: 200px
  • Tablet: 100px
  • Telefon: 50px
• Dolna wyściółka:
  • Pulpit: 200px
  • Tablet: 100px
  • Telefon: 50px
• Lewa wyściółka: 8%
• Prawa wyściółka: 8%

Dodaj moduł tekstowy do kolumny 1

Dodaj kopię

Czas dodać moduły, zaczynając od modułu tekstowego w kolumnie 1. Dodaj liczbę do pola treści.

Kolor tła

Następnie zmień kolor tła.

• Kolor tła: #efefef

Ustawienia tekstu

Przejdź do zakładki projektu i odpowiednio zmień ustawienia tekstu:

• Czcionka tekstu: Montserrat
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 100px
• Wysokość linii tekstu: 1em
• Wyrównanie tekstu: do środka

Rozmiary

Następnie zmodyfikuj szerokość.

• Szerokość: 150px

Rozstaw

Następnie dodaj niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 20px
• Dolna wyściółka: 20px

Pozycja

Zmień również położenie modułu.

• Pozycja: bezwzględna
• Lokalizacja: dolny prawy
• Przesunięcie w poziomie: -5%

Dodaj moduł tekstowy do kolumny 2

Dodaj kopię H3 i H4

Do drugiej kolumny. Tam dodamy moduł tekstowy z kopią H3 i H4.

Ustawienia tekstu

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

• Wyrównanie tekstu: do środka
• Kolor tekstu: ciemny

Ustawienia tekstu H3

Następnie zmodyfikuj ustawienia tekstu H3.

• Czcionka nagłówka 3: Wyświetlacz Playfair
• Nagłówek 3 Wyrównanie tekstu: do środka
• Rozmiar tekstu nagłówka 3:
  • Pulpit: 90px
  • Tablet: 70px
  • Telefon: 60px

Ustawienia tekstu H4

Stylizuj też tekst H4.

• Czcionka nagłówka 4: Montserrat
• Grubość czcionki nagłówka 4: Lekka

Rozmiary

Następnie przejdź do ustawień rozmiaru i zastosuj szerokość „100%”. Pomoże to w kolejnym kroku, czyli zmianie położenia modułu.

• Szerokość: 100%

Pozycja

Uzupełnij ustawienia modułu, przechodząc do zakładki Zaawansowane i modyfikując ustawienia pozycji w następujący sposób:

• Pozycja: bezwzględna
• Lokalizacja: dolny lewy
• Przesunięcie w pionie: 20px

Dodaj moduł tekstowy do kolumny 3

Dodaj treść H5 i akapitu

Do trzeciej kolumny. Dodaj moduł tekstowy z wybraną zawartością H5 i akapitów.

Ustawienia tekstu

Przejdź do zakładki projektowania modułu i zmień czcionkę w ustawieniach tekstu.

• Czcionka tekstu: Montserrat

Ustawienia tekstu H5

Stylizuj też tekst H5.

• Nagłówek 5 Czcionka: Montserrat
• Grubość czcionki nagłówka 5: pogrubiona
• Nagłówek 5 Rozmiar tekstu:
  • Komputer stacjonarny i tablet: 23px
  • Telefon: 18px

2. Kluczowe zmiany w celu stworzenia efektu

Sekcja

Usuń dopełnienie sekcji

Teraz, gdy stworzyliśmy podstawy naszego projektu, możemy zacząć tworzyć niestandardowe efekty przyklejonych stylów, które można było zobaczyć na podglądzie tego posta. Pierwszym krokiem do osiągnięcia tego efektu jest upewnienie się, że górne i dolne wartości dopełnienia sekcji wynoszą zero. Pomoże nam to zapewnić, że zarówno sekcja, jak i rząd zaczynają się i kończą w tym samym miejscu. Jest to ważne, gdy w kolejnych krokach dodamy lepką pozycję do naszego wiersza. Ustawiając granicę na dole sekcji, nie pozostawiamy miejsca na ruch rzędu. Jednak rząd stanie się lepki na te kilka sekund i podkreśli zmienione lepkie style w naszym projekcie.

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

Wiersz

Obróć wiersz lepki

Otwórz ustawienia wiersza i ustaw wiersz przyklejony. Jak wspomniano w poprzednim kroku, ważne jest, aby upewnić się, że dolny limit lepkości naszego wiersza to sekcja. Ponieważ nie ma odstępu między końcem rzędu a końcem sekcji, lepki rząd pozostanie na swoim miejscu.

• Lepka pozycja: trzymaj się u góry
• Lepkie przesunięcie górne: 0px
• Dolny limit lepkości: sekcja
• Przesunięcie od otaczających lepkich elementów: Tak
• Domyślne i trwałe style przejścia: Tak

Kolor tła lepkiego rzędu

Czas zacząć nakładać lepkie style na nasze elementy! Zacznij od koloru tła wiersza.

• Kolor tła: #161616

Przejście wiersza

Aby zapewnić płynne przejście, zwiększymy czas trwania przejścia na karcie Zaawansowane w wierszu.

• Czas trwania przejścia: 500 ms
• Krzywa prędkości przejścia: łatwość

Kolor tła przyklejonej kolumny 2

Następnie zmienimy kolor tła przyklejonej kolumny 2.

• Kolor tła: #262626

Moduł tekstowy w kolumnie 1

Lepki kolor tła

Zmienimy również kolor tła modułu tekstowego w kolumnie 1.

• Kolor tła: #ddc7b5

Przyklejony kolor tekstu

Wraz z lepkim kolorem tekstu.

• Kolor tekstu: #0a0a0a

Lepkie zaklejanie

I zwiększymy szerokość modułu w ustawieniach rozmiaru.

• Szerokość: 105%

Przemiana

Zapewniamy płynne przejście, modyfikując czas trwania przejścia modułu w zakładce Zaawansowane.

• Czas trwania przejścia: 500 ms
• Krzywa prędkości przejścia: łatwość

Moduł tekstowy w kolumnie 2

Przyklejony kolor tekstu

Dalej mamy moduł tekstowy w kolumnie 2. Zmienimy kolor tekstu na jasny w stanie lepkim.

• Kolor tekstu: jasny

Moduł tekstowy w kolumnie 3

Przyklejony kolor tekstu

To samo dotyczy modułu tekstowego w kolumnie 3.

• Kolor tekstu: jasny

3. Sekcja klonowania do ponownego wykorzystania

Teraz, gdy skończyliśmy pierwszą sekcję, w tym efekt zmiany stylów lepkich, możemy ponownie wykorzystać tę sekcję tyle razy, ile chcemy, klonując ją.

Zmień całą kopię

Upewnij się, że zmieniłeś wszystkie duplikaty kopii.

Dodaj górny margines do pierwszej sekcji i dolny margines do ostatniej sekcji

I wreszcie, dodamy górny margines do pierwszej sekcji i dolny margines do ostatniej sekcji. Pomoże nam to zapobiec natychmiastowemu przejściu, zanim ludzie zaczną przewijać. Otóż ​​to!

• Górny margines: 200px

• Margines dolny: 200px

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością dzięki lepkim opcjom Divi. Mówiąc dokładniej, użyliśmy opcji przyklejenia Divi, aby zmienić przyklejone style bez dodawania ruchu. Gdy tylko ludzie przejdą obok określonej części strony, zmienią się style projektu, co podkreśli tę konkretną część strony. Udało Ci się również pobrać plik JSON za darmo! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.