Jak tworzyć przejścia kopiowania paralaksy za pomocą lepkich opcji Divi

Kiedy szukasz kreatywnych sposobów na urozmaicenie projektów stron, efekty paralaksy mogą się przydać. Zapewniają dodatkową interakcję na zwoju, nie będąc zbyt inwazyjnym. Jeśli szukasz sposobu na rozszerzenie efektu paralaksy na wiele sekcji na swojej stronie, pokochasz ten samouczek. Dzisiaj pokażemy, jak tworzyć przejścia kopiowania paralaksy za pomocą lepkich opcji Divi. Gdy tylko odwiedzający przejdą obok określonej sekcji, kopia przewija się w dół z obrazem w tle paralaksy, co daje naprawdę fajny efekt. Po dojściu do następnej sekcji w linii kopia jest zastępowana innym tytułem. Rezultat, do którego dążymy, wygląda świetnie na wszystkich rozmiarach ekranu, a plik JSON będzie można pobrać również za darmo!

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!

https://youtu.be/uZCD0__Apjk

Subskrybuj nasz kanał YouTube

1. Utwórz strukturę elementów

Dodaj nową sekcję

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Ten efekt zadziała szczególnie dobrze, jeśli masz zawartość nad i pod układem, który zamierzamy utworzyć.

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza i zmień ustawienia rozmiaru w następujący sposób:

• Wyrównaj wysokości kolumn: Tak
• Szerokość: 95%
• Maksymalna szerokość: 100%

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

Obraz tła kolumny

Teraz, gdy zmodyfikowaliśmy ogólne ustawienia wiersza, zastosujemy również niektóre ustawienia niestandardowe do kolumny w naszym wierszu. Zacznij od otwarcia ustawień kolumny.

Prześlij obraz tła i włącz na nim efekt paralaksy.

• Użyj efektu paralaksy: tak
• Metoda paralaksy: CSS

Odstępy między kolumnami

Następnie przejdź do zakładki projektowania i zastosuj niestandardową wyściółkę dolną.

• Dolna wyściółka: 50vh

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość H2

Czas dodać moduły, zaczynając od modułu tekstowego zawierającego wybrane przez Ciebie treści H2.

Ustawienia tekstu H2

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

• Czcionka nagłówka 2: Montserrat
• Grubość czcionki nagłówka 2: pogrubiona
• Styl czcionki nagłówka 2: Wielkie litery
• Kolor tekstu nagłówka 2: #ffffff
• Rozmiar tekstu nagłówka 2:
  • Komputer stacjonarny: 9vw
  • Tablet: 14vw
  • Telefon: 15vw

Filtry

Włączamy również tryb mieszania w ustawieniach filtrów.

• Tryb mieszania: nakładka

Dodaj moduł przycisku do kolumny 1

Dodaj kopię

Następnym i ostatnim modułem, którego potrzebujemy w tej kolumnie, jest moduł przycisku. Dodaj wybraną kopię.

Dodaj link

Następnie wstaw link.

Ustawienia przycisków

Następnie przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia przycisków:

• Użyj niestandardowych stylów dla przycisku: Tak
• Rozmiar tekstu przycisku:
  • Komputer stacjonarny: 2vw
  • Tablet i telefon: 7vw
• Kolor tekstu przycisku: #ffffff
• Szerokość obramowania przycisku: 0px
• Odstępy między literami przycisków: 0,06vw

• Czcionka przycisku: Karla
• Pokaż ikonę przycisku: Tak
• Umieszczenie ikony przycisku: w lewo
• Pokaż tylko ikonę po najechaniu na przycisk: Nie

Rozstaw

Dodaj również niestandardową górną i dolną wyściółkę.

• Górna wyściółka: 8%
• Dolna wyściółka: 8%

Pozycja

I uzupełnij ustawienia modułu, zmieniając położenie modułu w prawym dolnym rogu kolumny.

• Pozycja: bezwzględna
• Lokalizacja: dolny prawy

2. Kroki potrzebne do uzyskania efektu

Włącz przyklejanie modułu tekstowego

Teraz, gdy stworzyliśmy podstawy naszego projektu ze wszystkimi potrzebnymi elementami, nadszedł czas, aby umożliwić przejście kopii paralaksy. Aby to zrobić, użyjemy wbudowanych opcji przyklejonych Divi w module tekstowym. Otwórz ustawienia modułu, przejdź do zakładki zaawansowane i zastosuj następujące lepkie ustawienia:

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

Zmień odstępy między modułami tekstowymi

Domyślny

Teraz, gdy włączyliśmy opcje przyklejania w tym module, możemy zastosować przyklejone style. Domyślnie moduł zostanie umieszczony nad samą kolumną. A ze względu na biały kolor tekstu modułu będzie on mieszać się z kolorem tła sekcji i sprawić wrażenie, jakby w ogóle nie było tekstu. Aby utworzyć to pozycjonowanie, użyjemy ujemnego marginesu górnego na różnych rozmiarach ekranu.

• Górny margines:
  • Pulpit: -10vw
  • Tablet: -14vw
  • Telefon: -15vw

Lepki

Gdy moduł tekstowy zostanie przyklejony, chcemy, aby wrócił do widoku. Aby mieć pewność, że tak się stanie, przywrócimy ten górny margines do „0vh” w stanie lepkim.

• Przyklejony górny margines: 0vh

Odstępy między sekcjami

Potrzebujemy również trochę miejsca na górze i na dole naszej sekcji, aby tło i moduł tekstowy mogły się łączyć w kolorze. Aby to zrobić, ponownie otworzymy ustawienia sekcji i zastosujemy niestandardowe górne i dolne dopełnienie.

• Górna wyściółka: 10vh
• Dolna wyściółka: 10vh

Klonuj całą sekcję tyle razy, ile chciałeś

Po ukończeniu projektu przekroju możesz go sklonować dowolną liczbę razy.

Zmień treść i linki

Upewnij się, że zmieniłeś treść i linki dla każdego modułu w zduplikowanych sekcjach i gotowe!

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. Dokładniej, pokazaliśmy Ci, jak tworzyć przejścia z kopią paralaksy, które pozwalają rozszerzyć efekt paralaksy na wiele sekcji na stronie. 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.