Przejdź do głównej treści

Jak stworzyć responsywny suwak akordeonu w Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Suwak akordeonu to zabawny i atrakcyjny sposób wyświetlania treści na małej przestrzeni. Suwaki akordeonu zazwyczaj składają się z kilku poziomo ułożonych elementów (lub paneli), takich jak fałdy zasłony. A kiedy najedziesz myszką na jeden z paneli, rozszerza się, aby odsłonić zawartość, podczas gdy inne panele akordeonu kurczą się. To tutaj uzyskuje się efekt akordeonu powiększenia i skurczu.

W tym samouczku pokażę, jak utworzyć wrażliwy suwak akordeonu w Divi, używając tylko CSS. W tym celu wykorzystamy kilka 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 wykorzystamy moduły blurb bardzo kreatywnie, aby stworzyć piękny suwak akordeonu, który wygląda (i działa) bardzo dobrze zarówno na pulpicie, 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:

  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 do edycji strony w interfejsie (konstruktor wizualny).
  3. 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 na 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ść: 400px (biuro); 700px (tablet i telefon)

Wartości szerokości i szerokości można modyfikować zgodnie z własnymi potrzebami. Akordeon zostanie przeskalowany i będzie działał w dowolnej szerokości rzędu. Ponadto bardzo ważne jest ustawienie stałej wysokości, aby projekt mógł działać. Elementy potomne (kolumna i moduły) będą miały wysokość 100%. Dlatego jeśli nie ustawisz stałej wysokości linii, elementy potomne nie będą miały wysokości.

Parametry kolumny

Po ustawieniu wysokości linii otwórz parametry kolumny i dodaj następujący kod CSS do głównego elementu:
Biuro

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

tabletka

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

flex-direction: column;

Właściwość flex wyrówna panele akordeonu poziomo na pulpicie i pionowo na tablecie i telefonie. Wysokość 100% pozwoli modułom, które będziemy dodawać, również używać wartości wysokości 100%.

Tworzenie panelu akordeonu z modułami Podsumowanie

Kursor akordeonu można zbudować za pomocą dowolnego typu modułu. Gdybyśmy chcieli, moglibyśmy użyć kombinacji różnych modułów, aby służyć jako tablica akordeonowa. Ale do tego projektu użyjemy modułów Blurb.

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 fikcyjny tytuł i treść. Zawsze możemy to zmienić później.

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

  • Ikona (pulpit): ikona reprezentująca poziomą linię strzałek (patrz zrzut ekranu)
  • Ikona (najechanie kursorem): ikona weryfikacji (patrz zrzut ekranu)
  • Ikona (tablet i telefon): ikona reprezentująca pionową linię strzałek (patrz zrzut ekranu)
suwak akordeon divi responsive

kontekst

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

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

  • Dodaj obraz tła o szerokości co najmniej 1000 pikseli
  • Położenie obrazu tła: środkowy lewy

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 na obrazie tła: TAK
suwak akordeon divi responsive

ikona

  • Kolor ikony: #ffffff
  • Obraz / lokalizacja ikon: po lewej

Następnie przejdź do karty Projektowanie 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 akordeonowe (lub moduł prezentacji) mogły się rozszerzać i kurczyć z resztą modułów, musimy dodać niestandardowy CSS, aby zmodyfikować rozmiar modułu za pomocą Flex-Grow. Ponieważ będziemy mieli w sumie moduły 5, które tworzą akordeon, dodajemy „flex: 1” dla stanu domyślnego, a następnie zmieniamy go na „flex: 5” w stanie najazdu.

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

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

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

Dobry! To była poważna modyfikacja modułu prezentacji. Ale dobrą wiadomością jest to, że wystarczy zduplikować je, aby utworzyć pozostałe panele akordeonu.

Zduplikowane nakładki, aby uzyskać więcej paneli akordeonowych

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

Następnie zaktualizuj obrazy tła dla każdego nowego tekstu prezentacji, który skopiowałeś.

Ostateczny wynik

końcowe przemyślenia

Ten responsywny suwak akordeonu ma naprawdę unikalne elementy, które sprawiają, że korzystanie z niego jest przyjemne. Panele akordeonu rozszerzają się i zawisają w powietrzu bez nieoczekiwanych problemów. Ikony prezentacji zmieniają kursor i komórkę, aby zwiększyć UX. Mam nadzieję, że ten projekt przyda się w następnym projekcie.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
1 akcji
udział1
ćwierkanie
Enregistrer