Tworzenie wbudowanych przewijanych odsłonięć za pomocą Divi

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowej Divi, pokażemy, jak tworzyć piękne inline scrolle, korzystając z pakietu DJ Layout Pack. To świetny sposób na zwrócenie uwagi na jeden konkretny kontener kolumn w witrynie bez konieczności wielokrotnego dodawania go do strony. Dodamy do tej techniki fajny efekt najechania/zwolnienia, który pomoże odwiedzającym trzymać się kontenera kolumny i upuszczać go, kiedy tylko będą mieli na to ochotę. Będziesz mógł również pobrać plik JSON za darmo!

Zapowiedź

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

Pulpit

mobilny

Pobierz układ Inline Scroll ujawnia układ za DARMO

Aby położyć ręce na darmowym, wbudowanym układzie przewijania, musisz najpierw pobrać go 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!

Zacznijmy odtwarzać!

Utwórz nową stronę za pomocą strony głównej DJ Layout Pack

Dodaj nową stronę

W tym samouczku dotyczącym przypadków użycia użyjemy jednego z układów DJ-a. Zacznij od utworzenia nowej strony, nadając jej tytuł i przełączając się na Visual Builder.

Prześlij stronę DJ-a

Kontynuuj, przesyłając układ strony głównej DJ na swoją stronę.

Dodaj wyższą wartość indeksu Z do każdej sekcji na stronie

Dodaj wyższy indeks Z do sekcji bohatera

Zamierzamy naprawić jedną konkretną kolumnę i pozwolić jej wyświetlać się tam, gdzie chcemy. Prawdą jest również coś przeciwnego; chcemy to ukryć wszędzie tam, gdzie nie chcemy, aby się pojawiło. W tym celu nadamy każdej sekcji na stronie (oprócz tej, w której znajduje się kolumna, czyli sekcji nr 2 na stronie) wyższą wartość indeksu z. Zacznij od otwarcia sekcji bohatera i zwiększ indeks z w ustawieniach widoczności.

• Indeks Z: 2

Skopiuj indeks Z

Po dodaniu indeksu z możesz go skopiować.

Wklej do innych sekcji na stronie z wyjątkiem sekcji #2

I wklej go we wszystkich innych sekcjach na stronie, z wyjątkiem sekcji 2 (sekcji zawierającej kolumnę, którą przekształcimy we wbudowane przewijanie).

Zmień sekcję #2

Umieść zawartość kolumny w oddzielnych wierszach

Zmień strukturę kolumn wiersza

Zacznijmy modyfikować drugą sekcję, zaczynając od struktury kolumnowej wiersza.

Powiel wiersz

Kontynuuj, klonując rząd.

Usuń moduły w wierszach

Usuń moduły tekstowe i przycisków z pierwszego rzędu i moduły audio z drugiego rzędu.

Zmodyfikuj wiersz nr 1 w sekcji nr 2

Usuń niektóre moduły audio (w celu dopasowania do mniejszych rozmiarów ekranu)

W kolejnych krokach naprawimy kolumnę zawierającą moduły audio. Teraz, aby upewnić się, że kolumna pasuje do wysokości widocznego obszaru mniejszych rozmiarów ekranu, musimy usunąć niektóre moduły audio.

Dodaj dolny margines do wiersza

Kontynuuj, otwierając ustawienia wiersza, przechodząc do zakładki projektu i dodając dolną wyściółkę. Będziemy potrzebować tego miejsca, aby kolumna była widoczna podczas przewijania w dalszej części samouczka.

• Margines dolny: 700px

Otwórz ustawienia kolumny

Czas zacząć przekształcać kolumnę w inline scroll odsłaniając! Otwórz ustawienia kolumny.

Wskaż cień pola

Następnie przejdź do karty projektu i zmień niektóre wartości cienia pola po najechaniu myszą.

• Siła rozmycia cieni w pudełku: 150px
• Kolor cienia: rgba(0,0,0,0.55)

Skala przekształcenia najechania

Zwiększ rozmiar kolumny po najechaniu myszą, modyfikując wartości skali transformacji.

• Dół: 110%
• Prawo: 110%

Domyślny główny element

Aby kolumna była naprawiona, dodamy kilka linijek kodu CSS do głównego elementu kolumny.

position: fixed;
bottom: 100px;
max-width: 800px !important;
width: 80% !important;

Unieś główny element

Upewnij się, że dodałeś również linię CSS o stałej pozycji do głównego elementu najechania. Zapobiegnie to migotaniu kolumny.

position: fixed;

Domyślny indeks Z

Teraz, w normalnych okolicznościach, chcemy, aby moduł pojawiał się pod całą zawartością strony. Aby upewnić się, że tak się stanie, zmienimy indeks z kolumny.

• Indeks Z: 0

Unosić indeks Z

Jednak po najechaniu kursorem chcemy, aby kolumna nakładała się na całą zawartość strony. Gdy tylko ktoś zwolni kolumnę, wróci ona na swoje miejsce za całą zawartością strony. Zmień odpowiednio indeks z po najechaniu kursorem:

• Indeks Z: 10

Zmodyfikuj wiersz nr 2 w sekcji nr 2

Dodaj górne wypełnienie do kolumny

Ze względów estetycznych otworzymy kolumnę w drugim rzędzie sekcji #2 i dodamy niestandardowe górne wypełnienie.

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

Dodaj niestandardowy dolny margines do sekcji na całej stronie

Znajdź sekcję

Otwórz ustawienia sekcji

Teraz, gdy zmodyfikowaliśmy kolumnę ujawniania przewijania w wierszu, musimy stworzyć trochę miejsca, aby się pojawiła. Zrobiliśmy to dla wiersza, w którym już się znajduje (dolne wypełnienie 700px), ale pozwolimy, aby kolumna była widoczna również w innych miejscach na stronie. Otwórz ustawienia sekcji w następującej sekcji:

Dodaj dolny margines

Przejdź do ustawień odstępów i dodaj trochę dolnego marginesu. Dodanie dolnego marginesu spowoduje utworzenie pustego miejsca na stronie, które pozwoli na wyświetlenie kolumny niskiego indeksu Z.

• Margines dolny: 700px

Znajdź sekcję

Otwórz ustawienia sekcji

Otwórz następującą sekcję dalej:

Dodaj dolny margines

I tutaj też dodaj trochę dolnego marginesu.

• Margines dolny: 700px

Usuń nadmiar wypełnienia sekcji

Usuń część 2 dolną wyściółkę

Teraz jedyne, co nam pozostało, to zoptymalizować sposób, w jaki nasz projekt pasuje do inline scroll. Otwórz drugą sekcję na stronie i usuń dolną wyściółkę.

• Dół: 0px

Znajdź sekcję

Otwórz ustawienia sekcji

Otwórz następujące ustawienia sekcji:

Usuń dolną wyściółkę i dodaj górną wyściółkę

Dodaj górną wyściółkę i usuń dolną wyściółkę.

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

Znajdź sekcję

Otwórz ustawienia sekcji

Do ostatniej sekcji. Otwórz ustawienia sekcji.

Usuń górną wyściółkę

Usuń górną wyściółkę i gotowe!

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

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 tworzyć inline scrolle ujawniając za pomocą Divi i DJ Layout Pack. To świetny sposób na dodanie interakcji do Twojej witryny. Mamy nadzieję, że ten samouczek zainspiruje Cię również do stworzenia własnego, stałego przewijania w linii! Jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś 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.