Suwak akordeonowy to zabawny i atrakcyjny sposób ekspozycji treść w ograniczonej przestrzeni. Suwaki harmonijkowe składają się zazwyczaj z kilku elementów (lub paneli) ułożonych poziomo, niczym fałdy zasłony. A kiedy najedziesz kursorem na jeden z paneli, rozwinie się on, ukazując treść podczas gdy inne panele akordeonowe kurczą się. W tym miejscu osiąga się harmonijkowy efekt rozszerzania i kurczenia się.
W tym samouczku pokażę Ci, jak stworzyć responsywny suwak akordeonu w Divi używając tylko CSS. W tym celu użyjemy kilku modułów Divi 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 stworzyć piękny suwak akordeonu, który wygląda (i działa) świetnie zarówno na komputerze stacjonarnym, jak i na telefonie komórkowym.
Sprawdź to!
badanie
Oto przegląd tego, co zbudujemy w tym samouczku.
Zacznijmy samouczek
To, czego potrzebujesz, aby zacząć
Aby rozpocząć, musisz wykonać następujące czynności:
- Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj Motyw Divi zainstalowany (lub wtyczka Divi Builder, jeśli nie używasz Motyw Divi).
- Utwórz nową stronę w WordPress i użyj Divi Builder do edycji strony w interfejsie (konstruktor wizualny).
- Pobierz o 5 różne obrazy z biblioteki, aby wykorzystać je jako obrazy tła potrzebne w samouczku.
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Utwórz suwak z responsywnym akordeonem w Divi
Utworzenie linii
Aby rozpocząć, dodaj wiersz kolumny do zwykłej sekcji.
Następnie otwórz ustawienia linii i zaktualizuj następujące elementy:
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 800px
- Wysokość: 400 pikseli (komputer stacjonarny); 700px (tablet i telefon)
Wartości szerokości i maksymalnej szerokości można zmienić w zależności od potrzeb. Akordeon zostanie przeskalowany i będzie działał w rzędzie o dowolnej szerokości. Również ustawienie stałej wysokości jest bardzo ważne, aby projekt działał. Elementy potomne (kolumny i moduły) będą miały wysokość 100%. Dlatego jeśli nie ustawisz stałej wysokości wiersza, elementy potomne nie będą miały wysokości.
Parametry kolumny
Teraz, gdy wysokość wiersza jest ustawiona, otwórz ustawienia kolumny i dodaj następujący kod CSS do głównego elementu:
Biuro
display:flex;flex-direction: row;align-items:center;height: 100%;
tabletka
flex-direction: column;
Właściwość flex spowoduje wyrównanie paneli harmonijkowych w poziomie na pulpicie oraz w pionie na tablecie i telefonie. Wysokość 100% pozwoli modułom, które zamierzamy dodać, używać również wartości 100% wysokości.
Tworzenie panelu akordeonu z modułami Podsumowanie
Suwak akordeonowy można zbudować z dowolnego typu modułu. Gdybyśmy chcieli, moglibyśmy użyć kombinacji różnych modułów, aby służyć jako panel akordeonowy. Ale w tym projekcie będziemy używać Blurb Mods.
Zacznij od dodania modułu prezentacji do wiersza.
Streszczenie projektu modułu
Otwórz ustawienia modułu podsumowania i zaktualizuj następujące elementy:
Zachowaj tytuł fikcyjny 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 przedstawiająca poziomą linię strzałki (patrz zrzut ekranu)
- Ikona (najechanie kursorem): ikona zaznaczenia (patrz zrzut ekranu)
- Ikona (tablet i telefon): ikona przedstawiająca pionową linię strzałki (patrz zrzut ekranu)
kontekst
Następnie nadaj blampowi obraz tła i nakładkę gradientową w następujący sposób:
- Dodaj obraz tła o szerokości co najmniej 1000 pikseli
- Położenie obrazu tła: na środku po lewej
Następnie dodaj gradientową nakładkę tła.
pływak
- Lewe tło gradientowe (najechanie kursorem): # 3e215b
- Gradient tła w prawo Kolor (najechanie kursorem): rgba (0,0,0,0)
- Kierunek gradientu: 90deg
- Umieść gradient nad obrazem tła: TAK
ikona
- Kolor ikony: #ffffff
- Obraz / lokalizacja ikon: po lewej
Następnie przejdź do karty Projekt i zaktualizuj następujące elementy:
Tytuł i treść tekstu
- Czcionka tytułu: Poppins
- Tytuł czcionki: Semi Bold
- Kolor tytułu tekstu: przezroczysty (komputer stacjonarny), #ffffff (najechanie kursorem)
- Rozmiar tytułu tekstu: 23px
- Kolor tekstu: przezroczysty (na pulpicie), #ffffff (najedź)
Wysokość i cień w pudełku
Gdy tekst będzie stylowy, przypisz modułowi wysokość 100% i pole cienia w następujący sposób:
- Wysokość: 100%
- Box Shadow: Zobacz zrzut ekranu
- Cień pudełka Pozycja pozioma: -12px
- Cień pudełka Pozycja pionowa: 0px
Blurb Custom CSS
Aby nasze panele harmonijkowe (lub moduł prezentacji) rozszerzały się i kurczyły 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 tworzących akordeon, dodajemy „flex: 1” jako stan domyślny, a następnie zmieniamy go na „flex: 5” w stanie najechania.
Na karcie Zaawansowane dodaj następujący niestandardowy CSS, główny element Blurb:
Biuro
flex:1;position: relative !important;transition: flex 800ms !important;
tabletka
flex:5;
Następnie dodaj następujący niestandardowy plik CSS do treści CSS Blurb:
Biuro
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
tabletka
width: 100%;height: 100%;position: relative !important;
Przepełnienie i przejście
- Przelew poziomy: ukryty
- Przelew pionowy: ukryty
- Czas przejścia: 400ms
- Krzywa prędkości przejścia: liniowa
Dobrze! To było poważne dostosowanie modułu prezentacji. Ale dobra wiadomość jest taka, że wszystko, co musimy zrobić, to powielić je, aby stworzyć pozostałe panele akordeonowe.
Powiel Blurbs, aby uzyskać więcej paneli akordeonu
Najedź kursorem na moduł prezentacji i kliknij czterokrotnie ikonę duplikatu, aby utworzyć w sumie pięć paneli (lub modułów) harmonijki.
Następnie zaktualizuj obrazy tła dla każdej z nowych zduplikowanych notatek.
Ostateczny wynik
końcowe przemyślenia
Ten responsywny suwak akordeonowy ma naprawdę kilka unikalnych elementów, które sprawiają, że jest przyjemny w użyciu. Panele akordeonu rozszerzają się i kurczą, unosząc się bez nieoczekiwanych problemów. Ikony prezentacji zmieniają się podczas najeżdżania kursorem i na urządzeniu mobilnym, aby zwiększyć UX. Mam nadzieję, że ten projekt przyda się w następnym projekcie.
