Jak stworzyć klikalny akordeon za pomocą przyklejonych nagłówków stron w Divi

Nowe opcje lepkich pozycji Divi otwierają drzwi dla wielu nowych i ekscytujących możliwości projektowych. W tym samouczku pokażemy, jak połączyć opcje lepkiej pozycji Divi z płynnie przewijanymi linkami do kotwicy, aby stworzyć akordeonowy sposób indeksowania i poruszania się po stronie. Budowanie go jest naprawdę łatwe dzięki wbudowanym opcjom Divi, więc nie ma potrzeby stosowania dodatkowego CSS lub innego kodu. Po zakończeniu będziesz mieć wyjątkowy sposób na uporządkowanie swojej strony i zwiększenie komfortu użytkowania na komputerach i urządzeniach mobilnych.

Zacznijmy!

zapowiedź

Oto krótkie spojrzenie na projekt, który zbudujemy w tym samouczku.

Tutaj możesz zobaczyć przyklejone nagłówki stron na górze i na dole okna przeglądarki i układają się jeden na drugim jak akordeon.

Tutaj widać, że kliknięcie jednego z przyklejonych nagłówków spowoduje przeskok (za pomocą płynnie przewijanych linków kotwicznych) do tej sekcji strony, również jak akordeon.

Oto funkcjonalność na urządzeniach mobilnych.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, 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!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Tworzenie lepkiego rzędu

Na początek stwórzmy nasz lepki wiersz. Aby to zrobić, dodaj jednokolumnowy wiersz do sekcji domyślnej.

Otwórz ustawienia wiersza. W zakładce Zaawansowane zaktualizuj lepką pozycję w następujący sposób:

• Lepka pozycja: trzymaj się góry i dołu

Spowoduje to, że wiersz będzie przyklejał się na górze okna przeglądarki, gdy użytkownik przewija w dół, a następnie przykleja się do dołu okna przeglądarki, gdy użytkownik przewija w górę.

Stylizacja lepkiego rzędu

Teraz przyklejona pozycja jest na swoim miejscu, możemy rozpocząć stylizowanie wiersza za pomocą wbudowanej opcji przyklejonego stylu, która pozwala nadać elementowi określony styl za każdym razem, gdy przyklejona pozycja jest aktywna (lub zablokowana). W przypadku wiersza chcemy, aby tło zmieniało się na ciemny kolor, gdy znajduje się w pozycji zablokowanej. Aby to zrobić, otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Kolor tła (pulpit): #ffffff
• Kolor tła (lepki): #051923

Na karcie projekt zaktualizuj następujące elementy:

• Użyj niestandardowej szerokości rynny: TAK
• Szerokość rynny: 1
• Szerokość (tablet i telefon): 100%
• Padding: 0px na górze, 0px na dole

Następnie chcemy nadać wierszowi dolne obramowanie, które będzie służyć jako linia rozdzielająca między nagłówkiem a treścią poniżej. A gdy wiersz znajdzie się w lepkiej pozycji, zamiast tego chcemy pokazać lewą ramkę.

Pod przełącznikiem opcji obramowania zaktualizuj następujące elementy:

• Kolor obramowania: #6eeb83
• Szerokość dolnej krawędzi (komputer): 8px
• Szerokość dolnej krawędzi (przyklejony): 0px
• Szerokość lewej krawędzi (komputer): 0px
• Szerokość lewej krawędzi (przyklejony): 8px

Tworzenie przyklejonego tekstu nagłówka

Aby utworzyć tekst nagłówka strony, dodaj nowy moduł tekstowy do wiersza.

Następnie wklej następujący kod HTML w treści treści.

<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>

I zaktualizuj kolor tła po najechaniu myszą…

• Kolor tła (najechanie): rgba (255,255,255,0.2)

Dzięki temu stanie się bardziej oczywiste, że nagłówki są klikalne dla użytkownika.

Stylizowanie przyklejonego tekstu nagłówka

Na karcie projekt zaktualizuj następujące elementy:

• Czcionka nagłówka 2: Montserrat
• Wyrównanie tekstu nagłówka 2: do lewej
• Kolor tekstu nagłówka 2 (komputer): domyślny (lub czarny)
• Kolor tekstu nagłówka 2 (przyklejony): #ffffff
• Rozmiar tekstu nagłówka 2: 80px (komputer), 22px (przyklejony), 28px (telefon)
• Wysokość linii nagłówka 2: 1,3 em (komputer), 1 em (przyklejony)

Następnie zaktualizuj dopełnienie w następujący sposób:

• Padding (komputer): 15px góra, 15px dół
• Padding (przyklejony): 10px góra, 0px dół, 20px lewo
• Padding (tablet i telefon): 15px góra, 15px dół, 15px lewo, 15px prawo

Tworzenie pozornej zawartości strony

Po umieszczeniu lepkiego wiersza możemy dodać kolejny wiersz, który będzie zawierał pod nagłówkiem część pozorowanej zawartości strony. Aby to zrobić, utwórz nowy jednokolumnowy wiersz pod przyklejonym wierszem.

Następnie dodaj nowy moduł tekstowy do wiersza i wklej trochę pozorowanej zawartości.

Powielanie sekcji w razie potrzeby w celu uzyskania bardziej przyklejonych nagłówków stron i treści

W tym momencie masz już gotowy projekt, aby utworzyć dodatkowe sekcje strony z przyklejonymi nagłówkami, po prostu powielając sekcję.

Zduplikowana sekcja

Aby utworzyć kolejną sekcję, zduplikuj istniejącą sekcję zawierającą przyklejony wiersz/nagłówek oraz wiersz z pozorowaną zawartością. Przyspieszy to proces rozwoju tworzenia kolejnej sekcji strony.

Zaktualizuj zawartość tekstu i kolor obramowania wiersza

W sekcji duplikatów zaktualizuj tekst w module tekstowym, a następnie zaktualizuj kolor obramowania w ustawieniach wiersza.

Powtórz w razie potrzeby

Kontynuuj powielanie sekcji i zaktualizuj zawartość tekstu i kolor obramowania wierszy zgodnie z potrzebami. W tym przykładzie zamierzamy zduplikować sekcję jeszcze dwa razy, aby otrzymać w sumie cztery przyklejone nagłówki stron, które utworzą akordeon.

Dodawanie linków zakotwiczonych do przyklejonych nagłówków stron

Obecnie ta funkcjonalność pozwoli użytkownikowi przewijać stronę w dół i trzymać nagłówki na górze i na dole, podobnie jak akordeon. Teraz chcemy, aby nagłówki można było klikać, aby po kliknięciu przez użytkownika jednego z przyklejonych nagłówków użytkownik został przeniesiony do tej sekcji strony. Odbywa się to za pomocą linków kotwicznych.

Aby dodać link do kotwicy, najpierw musimy dodać identyfikator CSS do sekcji, do której ma przejść link.

Dodaj identyfikator CSS sekcji 1

Otwórz ustawienia sekcji i dodaj następujący identyfikator CSS:

• Identyfikator CSS: jeden

Następnie otwórz ustawienia lepkiego wiersza i dodaj następujący adres URL łącza wiersza:

• URL łącza wiersza: #jeden

Teraz, gdy użytkownik kliknie wiersz/nagłówek, strona przeskoczy do tej pierwszej sekcji.

Dodaj identyfikator CSS sekcji 2

Następnie musimy dodać link do kotwicy dla drugiego nagłówka.

Otwórz ustawienia drugiej sekcji i dodaj następujący identyfikator CSS:

• Identyfikator CSS: dwa

Dodaj adres URL łącza przyklejonego do sekcji 1

Następnie otwórz ustawienia lepkiego wiersza w drugiej sekcji i dodaj adres URL łącza wiersza:

• URL linku wiersza: #dwa

Dodaj identyfikator CSS sekcji 3

Następnie musimy dodać link do kotwicy dla trzeciego nagłówka.

Otwórz ustawienia trzeciej sekcji i dodaj następujący identyfikator CSS:

• Identyfikator CSS: trzy

Dodaj adres URL łącza przyklejonego do sekcji 1

Następnie otwórz ustawienia lepkiego wiersza w trzeciej sekcji i dodaj adres URL łącza wiersza:

• URL linku wiersza: #trzy

Dodaj identyfikator CSS sekcji 4

Na koniec musimy dodać link do kotwicy dla czwartego nagłówka.

Otwórz ustawienia czwartej sekcji i dodaj następujący identyfikator CSS:

• Identyfikator CSS: cztery

Dodaj adres URL łącza przyklejonego do sekcji 1

Następnie otwórz ustawienia lepkiego wiersza w czwartej sekcji i dodaj adres URL łącza wiersza:

• Adres URL łącza wiersza: #cztery

Ostateczny wynik

Tutaj możesz zobaczyć przyklejone nagłówki stron na górze i na dole okna przeglądarki i układają się jeden na drugim jak akordeon.

Tutaj widać, że kliknięcie jednego z przyklejonych nagłówków spowoduje przeskok (za pomocą płynnie przewijanych linków kotwicznych) do tej sekcji strony, również jak akordeon.

Oto funkcjonalność na urządzeniach mobilnych.

Końcowe przemyślenia

Ten projekt wykorzystuje opcję lepkiej pozycji w wyjątkowy sposób. Nie tylko nagłówki stron pozostają widoczne podczas przewijania przez użytkownika, ale każdy nagłówek można również kliknąć, przenosząc użytkownika do określonej sekcji za pomocą linków kotwiczących. Wynik jest podobny do akordeonu dla całej strony. Ten projekt z pewnością przydałby się do indeksowania długich treści lub tworzenia przyjaznego dla użytkownika one-pagera.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!