Jak stworzyć responsywny suwak akordeonowy w Divi

Suwak akordeonowy to zabawny i wciągający sposób wyświetlania treści na małej przestrzeni. Suwaki akordeonowe zwykle składają się z wielu elementów (lub paneli) ułożonych poziomo jak fałdy zasłony. A kiedy najedziesz kursorem na jeden z paneli, rozwinie się, ukazując zawartość, gdy inne panele harmonijkowe się kurczą. Tutaj uzyskujemy efekt rozszerzania i kurczenia się akordeonu.

W tym samouczku pokażę, jak stworzyć responsywny suwak akordeonu w Divi, używając tylko CSS. W tym celu użyjemy wielu modułów Divi, które będą służyć jako panele akordeonowe. Można użyć dowolnego modułu, ale w tym przykładzie użyjemy modułów notatek w bardzo kreatywny sposób, aby zbudować piękny suwak akordeonu, który wygląda (i działa) świetnie zarówno na komputerze stacjonarnym, jak i na urządzeniach mobilnych.

Sprawdź to!

zapowiedź

Oto krótki rzut oka na to, co będziemy budować w tym samouczku.

Pulpit

Tablet i telefon

Pobierz układ Divi Responsive Accordion Slider za DARMO

Aby położyć ręce na suwaku akordeonu zaprojektowanym w tym samouczku, 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!

Subskrybuj nasz kanał YouTube

Aby zaimportować układ na swoją stronę, po prostu wyodrębnij plik zip i przeciągnij plik json do 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 zainstalowany motyw Divi (lub wtyczkę Divi Builder, jeśli nie używasz motywu Divi).
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Prześlij około 5 różnych próbnych obrazów do biblioteki multimediów, które będą używane jako obrazy tła potrzebne w samouczku.

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

Tworzenie responsywnego suwaka akordeonu w Divi

Tworzenie rzędu

Aby rozpocząć, dodaj jednokolumnowy wiersz do zwykłej sekcji.

Następnie otwórz ustawienia wiersza i zaktualizuj następujące elementy:

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 800px
• Wysokość: 400px (stacjonarny); 700px (tablet i telefon)

Wartości szerokości i maksymalnej szerokości można zmienić na dowolne. Akordeon będzie się skalował i działał w dowolnej szerokości rzędu. Bardzo ważne jest również ustalenie stałej wysokości, aby projekt działał. Elementy potomne (kolumna i moduły) będą miały wysokość 100%, więc jeśli nie ustawisz stałej wysokości wiersza, elementy potomne w ogóle nie będą miały wysokości.

Ustawienia kolumny

Teraz, gdy mamy ustaloną wysokość wiersza, otwórz ustawienia kolumn i dodaj następujący kod CSS do głównego elementu:
Pulpit

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

Tablet

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

Właściwość flex wyrównuje panele harmonijkowe poziomo na pulpicie i pionowo na tablecie i telefonie. Wysokość 100% pozwoli modułom, które dodamy, również użyć wartości wysokości 100%.

Tworzenie panelu akordeonowego z modułami Blurb

Suwak akordeonowy może być zbudowany przy użyciu dowolnego typu modułu (modułów). Gdybyśmy chcieli, moglibyśmy użyć kombinacji różnych modułów, aby służyć jako nasz panel akordeonowy. Ale w tym projekcie użyjemy modułów z notatkami.

Zacznij od dodania modułu notki do wiersza.

Projektowanie modułu Blurb

Otwórz ustawienia modułu notki i zaktualizuj następujące elementy:

Zachowaj fałszywy tytuł i treść. Zawsze możemy to zmienić później.

Następnie zaktualizuj ikonę notki w następujący sposób:

• Ikona (pulpit): ikona poziomej linii strzałki (patrz zrzut ekranu)

• Ikona (najechanie): sprawdź ikonę (patrz zrzut ekranu)

• Ikona (tablet i telefon): ikona pionowej linii strzałki (patrz zrzut ekranu)

Tło

Następnie nadaj notce obraz tła i nakładkę gradientową po najechaniu kursorem w następujący sposób:

• Dodaj obraz tła o szerokości co najmniej 1000 pikseli
• Pozycja obrazu tła: środek po lewej

Następnie dodaj gradientową nakładkę tła po najechaniu myszą.

Unosić się

• Kolor lewego gradientu tła (najechanie kursorem): #3e215b
• Prawy kolor gradientu tła (najechanie): rgba(0,0,0,0)
• Kierunek gradientu: 90 stopni
• Umieść gradient nad obrazem tła: TAK

Ikona

• Kolor ikony: #ffffff
• Umieszczenie obrazu/ikony: po lewej

Następnie przejdź do karty projektu i zaktualizuj następujące elementy:

Tytuł i tekst główny

• Czcionka tytułu: Poppins
• Grubość czcionki tytułu: pół pogrubiona
• Kolor tekstu tytułu: przezroczysty (na pulpicie), #ffffff (najechanie)
• Rozmiar tekstu tytułu: 22px
• Kolor tekstu treści: przezroczysty (na pulpicie), #ffffff (najechanie)

Wysokość i cień pudełka

Po stylizacji tekstu nadaj modułowi 100% wysokość i cień w następujący sposób:

• Wzrost: 100%
• Cień pudełka: Zobacz zrzut ekranu
• Pozycja pozioma cienia pudełka: -12px
• Pozycja pionowa cienia pudełka: 0px

Niestandardowy CSS Blurb

Aby nasze panele akordeonowe (lub moduł notatek) rozszerzały się i kurczyły z pozostałymi modułami, musimy dodać niestandardowy css, aby zmienić rozmiar modułu za pomocą funkcji flex-grow. Ponieważ będziemy mieć w sumie 5 modułów składających się na akordeon, dodajemy „flex:1” dla stanu domyślnego, a następnie zmieniamy go na „flex:5” w stanie najechania.

Na karcie Zaawansowane dodaj następujący niestandardowy CSS główny element Blurb:

Pulpit

flex:1;
position: relative !important;
transition: flex 800ms !important;

Tablet

flex:5;

Następnie dodaj następujący niestandardowy kod CSS do kodu CSS Blurb Content:

Pulpit

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;

Tablet

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;

Przepełnienie i przejście

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte
• Czas trwania przejścia: 400 ms
• Krzywa prędkości przejścia: liniowa

W porządku! To była poważna modyfikacja modułu notki. Ale dobrą wiadomością jest to, że wszystko, co musimy zrobić, to zduplikować je, aby stworzyć pozostałe panele akordeonowe.

Powielanie Blurbs dla większej liczby paneli akordeonowych

Najedź kursorem na moduł notatek i kliknij czterokrotnie ikonę duplikatu, aby utworzyć łącznie pięć paneli (lub modułów) akordeonu.

Następnie zaktualizuj obrazy tła dla każdej z nowych powielonych notatek.

Ostateczny wynik

Pulpit

Tablet i telefon

Końcowe przemyślenia

Ten responsywny suwak akordeonu naprawdę ma kilka unikalnych elementów, które sprawiają, że korzystanie z niego jest zabawne. Panele akordeonowe rozszerzają się i kurczą płynnie podczas unoszenia się bez nieoczekiwanych usterek. A ikony notatek zmieniają się po najechaniu kursorem i na urządzeniu mobilnym, aby poprawić UX. Mamy nadzieję, że ten projekt przyda się w Twoim następnym projekcie.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!