Moduł Przełącz z Divi pozwala wyświetlić treść dodatkowe za kliknięcie, bez konieczności stosowania dodatkowego kodu jQuery. Podobnie jak moduł Accordion, moduły przełączające są zwykle używane do udostępniania plików treść pogrupowane, np. często zadawane pytania. Można je jednak wykorzystać także do innych zadań, na przykład do ustrukturyzowania strony. W tym samouczku użyjemy modułów przełączających o pełnej szerokości, aby utworzyć prosty projekt strony zachowujący się po kliknięciu. Styl projektowania, którym się zajmujemy, jest odważny i czysty. Będziesz mógł także pobrać plik JSON za darmo!
Chodźmy.
Zanim przejdziemy do samouczka, przyjrzyjmy się, jak to wygląda na różnych rozmiarach ekranu.
Zacznijmy od nowa
Dodaj nową sekcję
rozstaw
Zacznij od utworzenia nowej strony (lub otwarcia istniejącej) i dodania do niej zwykłej sekcji. Jedyną rzeczą do zrobienia w ustawieniach sekcji jest usunięcie wszystkich domyślnych górnych i dolnych dopełnień z ustawień odstępów.
- Top Padding: 0px
- Dolne wypełnienie: 0px
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza, używając następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i upewnij się, że wiersz dotyka lewej i prawej strony kontenera sekcji, zmieniając ustawienia rozmiaru. To ważny krok w tym samouczku. Dzięki temu moduł Toggle, który dodamy w dalszej części tego samouczka, będzie miał pełną szerokość.
- Użyj niestandardowej szerokości rynny: Tak
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Usuwamy także domyślne górne i dolne wypełnienie wiersza. Spowoduje to usunięcie całej przestrzeni między modułem przełączania a kontenerem wiersza / kolumny, w którym jest umieszczony.
- Top Padding: 0px
- Dolne wypełnienie: 0px
Dodaj moduł klawisza
Wstaw tytuł i treść
Czas zacząć dodawać moduły! Jedynym modułem, jakiego potrzebujemy w tej linii, jest moduł Toggle. Użyjemy obszaru tytułu, aby dodać tytuł i umieścić wszystko treść którymi chcemy się podzielić w obszarze treści. Możesz umieścić, co chcesz w obszarze zawartości; od tekstu po obrazy i nie tylko.
stan
Używamy zamkniętego stanu przełączania, ale nie krępuj się też pozostawić go otwartego.
- Stan: zamknij
Domyślne ustawienia ikon
Przejdź do zakładki Projekt i odpowiednio zmień ustawienia ikony modułu:
- Kolor ikony: # 570fff
- Użyj niestandardowego rozmiaru ikony: TAK
- Rozmiar czcionki ikony: 6vw
Ustawienia ikon po najechaniu kursorem
Zmień kolor ikony najechania.
- Kolor ikony: # f2f2f2
Domyślne ustawienia przełączania awaryjnego
Następnie zmień kolor tła zamkniętego przełącznika.
- Przełącz kolor tła: #ffffff
Najedź kursorem na ustawienia
I zmieniaj też kolor najechania.
- Przełącz kolor tła: # 000000
Ustawienia tekstu tytułowego
Kontynuuj, zmieniając ustawienia tekstu tytułu w następujący sposób:
- Tytuł tekstu kolorowego: # 000000
- Tytuł Poziom tytułu: H2
- Tytuł Police: Montserrat
- Tytuł tekstu: Wyrównanie do lewej
- Rozmiar tytułu tekstu: 8vw (komputer stacjonarny), 10vw (tablet i telefon)
- Odstępy między literami tytułu: -1vw (komputer stacjonarny), -0.5vw (tablet i telefon)
- Wysokość linii tytułowej: 0.7em
Domyślne ustawienia tekstu zamkniętego tytułu
Następnie uzyskaj dostęp do parametrów tekstowych zamkniętego tytułu i odpowiednio je zmodyfikuj:
- Zamknięta czcionka tytułu: Montserrat
- Tytuł zamknięty Rozmiar tekstu: 18vw (komputer stacjonarny), 16vw (tablet i telefon)
- Zamknięta wysokość tytułu: 0.8em
Najedź kursorem na ustawienia tekstu tytułu
Zmień kolor tekstu podpisu zamkniętego po najechaniu myszką.
- Tytuł zamknięty Kolor tekstu: # f4f4f4
Ustawienia tekstu podstawowego
Przejdź do ustawień tekstu podstawowego i wprowadź również zmiany.
- Body Font: Fira Sans
- Waga czcionki: lekka
- Wyrównanie tekstu podstawowego: uzasadnij
- Rozmiar tekstu: 1.2vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
- Wysokość ciała: 2.1em
rozstaw
Dodaj także niestandardowe wypełnienie u góry, u dołu i po lewej stronie modułu.
- Top Padding: 10vw
- Wyściółka u dołu: 10vw
- Lewe wypełnienie: 6vw
granica
Kontynuuj, usuwając domyślną ramkę modułu w ustawieniach ramki.
- Szerokość obramowania: 0px
Przełącz zawartość CSS
Zdefiniuj parametry modułu Przełącz, dodając następujące wiersze kodu CSS na pulpicie:
szerokość: 60vw; obramowanie z lewej: 0.2vw solidblack; wypełnienie: 5vw 5vw 5vw 5vw;
Zmień szerokość linii kodu CSS na tablecie i telefonie:
szerokość: 85vw;
Sklonuj całą sekcję tyle razy, ile chcesz
Po ukończeniu pierwszej sekcji, linii i modułu Toggle, możesz sklonować całą sekcję tyle razy, ile chcesz. w zależności od ilości treści, które chcesz wyświetlić na swojej stronie.
Zmień treść
Pamiętaj, aby zmienić całą zawartość przerzutnika w każdym module przerzutnika.
Zmień kolory ikon
Następnie otwórz każdy moduł Toggle indywidualnie i zmień kolor ikony. Te, których użyliśmy w tym samouczku, są wymienione poniżej:
- Kolor ikony 1: # ff9000
- Kolor ikony 2: # 00ffd4
badanie
Po wykonaniu wszystkich kroków przyjrzyjmy się ostatecznie, co się stało z różnymi rozmiarami ekranu.
końcowe przemyślenia
W tym artykule pokazaliśmy, jak wykazać się kreatywnością za pomocą modułu Toggle of Divi. Dokładniej; nadaliśmy im pełną szerokość i wykorzystaliśmy je do kreatywnego wyświetlania treści z różnych sekcji. W tym poradniku pokazano, jak łatwo można korzystać z modułów programu Divi poza pudełkiem, biorąc pod uwagę różne pojemniki. Mogłeś także bezpłatnie pobrać plik JSON z tutorialem! Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w sekcji komentarzy poniżej.
