Czy chciałbyś stworzyć suwak akordeonu? Divi czuły?

Suwak akordeonowy to zabawny i atrakcyjny sposób ekspozycji treść na małej przestrzeni. 

Suwaki harmonijkowe składają się zazwyczaj z kilku elementów (lub paneli) ułożonych poziomo niczym fałdy zasłony. Kiedy najedziesz kursorem na jeden z paneli, rozwinie się on, ukazując treść podczas gdy inne panele akordeonowe kurczą się. W tym miejscu uzyskujemy efekt akordeonowy polegający na rozszerzaniu i kurczeniu.

W tym samouczku pokażemy, jak stworzyć responsywny suwak akordeonu w Divi używając wyłącznie CSS. W tym celu użyjemy kilku modułów Divi służyć jako panele akordeonowe. 

badanie

Oto krótki przegląd tego, co osiągniemy w tym samouczku.

Pobierz DIVI teraz !!!

Tworzenie nowej strony za pomocą Divi Builder

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

  • Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.
responsywny suwak akordeonu Divi
  • Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder
  • Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)
responsywny suwak akordeonu Divi

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

Stworzenie responsywnego suwaka akordeonu w Divi

Utworzenie linii

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

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

  • Użyj niestandardowej szerokości rynny: TAK
  • Szerokość rynny: 1
  • Szerokość: 100%
  • Maksymalna szerokość: 800px
  • Wysokość: 400px (komputer stacjonarny); 700px (tablet i telefon)

Wartości szerokości i maksymalnej szerokości można dostosować do własnych potrzeb. Akordeon będzie pasował i działał w dowolnej szerokości linii.

Parametry kolumny

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

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

tabletka

display:flex;
flex-direction: column;
align-items:center;
height: 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 wykorzystać kombinację różnych modułów do działania jako panel akordeonowy. Ale w tym projekcie użyjemy modułów Blurb.

Zacznij od dodania modułu Blurb do linii.

Projekt modów Blurb

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

Zachowaj fikcyjny tytuł i treść z ciała. Zawsze możemy to zmienić później.

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

  • Ikona (pulpit): Ikona poziomej linii strzałki (patrz zrzut ekranu)
  • Ikona (najechanie): (patrz zrzut ekranu)
  • Ikona (Tablet i Telefon): (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.

Wahać się

  • Gradient tła w lewo (najechanie kursorem): #3e215b
  • Prawy (najechanie) gradientem tła: rgba(0,0,0,0)
  • Kierunek gradientu: 90 stopni
  • Kwadratowy gradient nad obrazem tła : TAK

ikona

  • Kolor ikony: #ffffff
  • Umieszczenie obrazu/ikony: w prawo

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

Tytuł i treść tekstu

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

Wysokość i cień pudełka

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

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

Niestandardowy CSS

Aby nasze panele akordeonowe (lub moduł Blurb) rosły i kurczyły się z pozostałymi modułami, musimy dodać niestandardowy CSS, aby zmienić rozmiar modułu za pomocą 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 kod CSS do głównego elementu Blurb:

Biuro

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

Po najechaniu

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

Następnie dodaj następujący niestandardowy kod CSS do kodu CSS treści Blurb:

Biuro

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
utwórz responsywny suwak akordeonu Divi

tabletka

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
utwórz responsywny suwak akordeonu Divi

Przepełnienie i przejście

  • Przepełnienie poziome: ukryte
  • Przepełnienie pionowe: ukryte
  • Czas trwania przejścia: 400ms
  • Krzywa prędkości przejścia: liniowa
utwórz responsywny suwak akordeonu Divi

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

Powiel układy, aby uzyskać więcej paneli akordeonowych

Najedź kursorem na moduł prezentacji i kliknij podwójną ikonę cztery razy, aby utworzyć łącznie pięć paneli (lub modułów) akordeonu.

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

utwórz responsywny suwak akordeonu Divi

Ostateczny wynik

Teraz, gdy przeszliśmy przez wszystkie kroki, zobaczmy efekt końcowy.

Pobierz DIVI teraz !!!

Wnioski

Ten responsywny suwak akordeonowy ma naprawdę wyjątkowe elementy, które sprawiają, że korzystanie z niego jest przyjemne. Panele akordeonowe rozwijają się i kurczą płynnie po najechaniu myszą bez żadnych nieoczekiwanych usterek. 

Ikony prezentacji zmieniają się po najechaniu kursorem i na urządzeniu mobilnym, aby poprawić UX. Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.

Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...