Jak zbudować interaktywną listę na przewijaniu za pomocą lepkich opcji Divi

Przyklejone opcje Divi umożliwiają bezproblemowe dodawanie interakcji do tworzonych i projektowanych stron. Jeśli szukasz sposobu na wymienienie wielu elementów bez tworzenia statycznej listy, spodoba ci się ten samouczek. Dzisiaj pokazujemy, jak zbudować interaktywną listę podczas przewijania za pomocą przyklejonych opcji Divi. Gdy ludzie przewijają sekcję, różne elementy są dodawane do listy po lewej stronie. Pomaga to zachować przegląd. Będziesz mógł również pobrać darmowy 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!

Utwórz strukturę elementów

Dodaj nową sekcję

Kolor tła

Zacznij od dodania nowej sekcji do strony, nad którą pracujesz. Dodaj kolor tła do sekcji.

• Kolor tła: #f2f2f2

Dodaj 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:

• Szerokość: 100%
• Maksymalna szerokość: 100%

Kolor tła kolumny 1

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

• Kolor tła: #f2f2f2

Odstęp kolumny 1

Następnie zmodyfikuj ustawienia odstępów kolumn.

• Górna wyściółka:
  • Tablet: 20px
  • Telefon: 20px
• Dolna wyściółka:
  • Tablet: 20px
  • Telefon: 20px
• Lewa wyściółka: 3%
• Prawa wyściółka: 3%

Kolumna 1 Indeks Z

I zwiększ indeks z kolumny w zakładce Zaawansowane.

• Indeks Z: 12

Dodaj moduł tekstowy nr 1 do kolumny 1

Dodaj zawartość

Czas dodać moduły, zaczynając od pierwszego modułu tekstowego w kolumnie 1. Dodaj wybrane przez siebie treści.

Ustawienia tekstu

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

• Czcionka tekstu: wyświetlacz Playfair
• Grubość czcionki tekstu: pogrubiona
• Styl czcionki tekstu: kursywa
• Kolor tekstu: #bfbfbf
• Rozmiar czcionki:
  • Komputer stacjonarny: 2vw
  • Tablet: 5vw
  • Telefon: 8vw
• Wysokość linii tekstu: 1em

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość H3

Dodaj kolejny moduł tekstowy do kolumny z wybraną zawartością H3.

Ustawienia tekstu H3

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

• Czcionka nagłówka 3: Wyświetlacz Playfair
• Grubość czcionki nagłówka 3: pogrubiona
• Kolor tekstu nagłówka 3: #000000
• Rozmiar tekstu nagłówka 3:
  • Komputer stacjonarny: 3vw
  • Tablet: 10vw
  • Telefon: 12vw

Rozstaw

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

• Górny margines: 2vh
• Dolny margines: 2vh

Skala transformacji

Następnie zastosuj niestandardowe ustawienia skali transformacji.

• Oba: 300%

Przekształć Tłumacz

I uzupełnij ustawienia modułu, stosując następujące ustawienia tłumaczenia transformacji:

• Dół: 30%

Dodaj moduł rozdzielacza do kolumny 1

Widoczność

Ostatnim modułem, którego potrzebujemy w kolumnie 1, jest moduł dzielnika. Upewnij się, że opcja „Pokaż dzielnik” jest włączona.

• Pokaż dzielnik: tak

Linia

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

• Kolor linii: #000000
• Styl linii: Jednolity
• Pozycja linii: górna

Rozmiary

Zmodyfikuj również ustawienia rozmiaru modułu.

• Waga dzielnika: 4px
• Wysokość dzielnika: 4px

Dodaj moduł obrazu do kolumny 2

Pozostaw puste pole obrazu

W kolumnie 2 pierwszym dodanym modułem jest moduł obrazu. Pozostaw pole obrazu puste.

Zdjęcie w tle

Zamiast tego użyj obrazu tła.

• Rozmiar obrazu tła: okładka
• Pozycja obrazu tła: środek

Rozstaw

Aby umożliwić wyświetlanie obrazu tła, zmodyfikujemy ustawienia odstępów w następujący sposób:

• Górny margines:
  • Komputer stacjonarny: 15vh
  • Tablet i telefon: 0vh
• Górna wyściółka: 33vh
• Dolna wyściółka: 33vh

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Następnym i ostatnim modułem, którego potrzebujemy, jest moduł tekstowy pod modułem obrazu. Dodaj wybraną treść opisu.

Ustawienia tekstu

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

• Czcionka tekstu: kabina
• Kolor tekstu: #000000
• Rozmiar czcionki:
  • Komputer stacjonarny: 1.2vw
  • Tablet: 2.3vw
  • Telefon: 3.4vw
• Wysokość linii tekstu: 1,6 em

Rozstaw

Uzupełnij ustawienia modułu, odpowiednio zmieniając ustawienia odstępów modułu:

• Lewa wyściółka:
  • Tablet i telefon: 5%
• Prawa wyściółka: 5%

Zastosuj lepkie efekty

Obróć kolumnę nr 1 przyklejoną

Teraz, gdy wszystkie elementy są na swoim miejscu, możemy rozpocząć stosowanie lepkich ustawień. Otwórz ustawienia kolumny 1 i użyj następujących responsywnych ustawień przyklejonych na karcie Zaawansowane:

• Lepka pozycja: trzymaj się u góry
• Dolny limit lepkości
  • Pulpit: sekcja
  • Tablet i telefon: Wiersz
• Odsunięcie od otaczających lepkich elementów:
  • Pulpit: Tak
  • Tablet i telefon: Nie
• Domyślne i trwałe style przejścia: Tak

Moduł tekstowy nr 1 w kolumnie nr 1: Ustawienia przyklejone

Wzrost

Teraz, gdy kolumna 1 stała się przyklejona, możemy zacząć stosować pewne ustawienia przyklejania do elementów wewnątrz tej kolumny. Zaczniemy od wysokości pierwszego modułu tekstowego.

• Wysokość: 0px
• Przyklejona wysokość: Auto

Nieprzezroczystość

Zmieniamy też przezroczystość.

• Krycie: 0%
• Lepkie krycie: 100%

Moduł tekstowy nr 2 w kolumnie nr 1: Ustawienia przyklejone

Skala transformacji

Następnie otworzymy drugi moduł tekstowy w kolumnie 1. Przywróć wartości skali transformacji do „100%” w stanie przyklejonym.

• Lepkie Oba: 100%

Przekształć Tłumacz

Zmień też ustawienia tłumaczenia przyklejonej transformacji.

• Lepkie dno: 0%

Przemiana

I uzupełnij ustawienia modułu, zwiększając czas trwania przejścia w zakładce Zaawansowane.

• Przejście: 1000ms

Moduł dzielnika: Ustawienia lepkie

Maksymalna szerokość

Na koniec zmodyfikujemy również maksymalną szerokość modułu rozdzielającego.

• Maksymalna szerokość: 0px
• Lepka maksymalna szerokość: 120px

Klonuj rząd dwa razy

Po ukończeniu pierwszego rzędu możesz go sklonować dwukrotnie.

Zmień całą zawartość i obrazy

Upewnij się, że zmieniłeś wszystkie treści i obrazy 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, jak zbudować interaktywną listę na scrollu. Gdy ludzie przewijają projekt sekcji, po lewej stronie gromadzone są różne elementy listy. Daje to uporządkowany przegląd i pomaga stworzyć interaktywny projekt. Możesz użyć tego podejścia do każdego rodzaju listy, którą chcesz udostępnić na swoich stronach! 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.