Strukturyzacja strony za pomocą pogrubionych modułów przełączania o pełnej szerokości za pomocą Divi

Divi's Toggle Module pozwala wyświetlać dodatkowe treści po kliknięciu, bez dodatkowego kodu jQuery. Podobnie jak w przypadku modułu Accordion, moduły Toggle są zazwyczaj używane do udostępniania pogrupowanych treści, takich jak często zadawane pytania. Możesz jednak użyć ich również do innych rzeczy - na przykład do ustrukturyzowania swojej strony. W tym samouczku użyjemy modułów przełączania o pełnej szerokości, aby stworzyć prosty projekt strony, który zachowuje się po kliknięciu. Styl projektowania, którym się zajmujemy, jest odważny i czysty. Będziesz mógł również pobrać plik JSON za darmo!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz pogrubiony układ przełączania pełnej szerokości za DARMO

Aby położyć ręce na darmowym, pogrubionym układzie przełączników o pełnej szerokości, najpierw musisz go pobrać za pomocą poniższego przycisku. 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

Zacznijmy odtwarzać

Dodaj nową sekcję

Rozstaw

Zacznij od stworzenia nowej strony (lub otwarcia istniejącej) i dodania do niej zwykłej sekcji. Jedyne, co musisz zrobić w ustawieniach sekcji, to usunąć wszystkie domyślne górne i dolne dopełnienie w ustawieniach odstępów.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i upewnij się, że wiersz dotyka lewej i prawej strony kontenera sekcji, modyfikując ustawienia rozmiaru. Jest to ważny krok w tym samouczku; umożliwia modułowi przełączania, który dodamy później w tym samouczku, stanie się pełną szerokością.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Usuwamy również domyślne górne i dolne dopełnienie wiersza. Spowoduje to usunięcie całej przestrzeni między modułem przełączania a kontenerem wiersza/kolumny, w którym jest umieszczony.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł przełączania do kolumny

Wstaw tytuł i treść

Czas zacząć dodawać moduły! Jedynym modułem, którego potrzebujemy w tym wierszu, jest moduł Toggle. Użyjemy pola tytułu, aby dodać tytuł i umieścić całą zawartość, którą chcemy udostępnić w polu treści treści. Możesz umieścić wszystko, co chcesz w polu zawartości; od tekstu po obrazy i nie tylko.

Stan

Używamy zamkniętego stanu przełączania, ale możesz go również zostawić otwarte.

• 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 ikony najechania kursorem

Zmodyfikuj kolor ikony po najechaniu myszą.

• Kolor ikony: #f2f2f2

Domyślne ustawienia przełączania

Następnie zmień kolor tła zamkniętego przełącznika.

• Zamknięty przełącznik koloru tła: #ffffff

Najedź Przełącz Ustawienia

I zmień też kolor po najechaniu kursorem.

• Zamknięty przełącznik koloru tła: #000000

Ustawienia tekstu tytułu

Kontynuuj, modyfikując ustawienia tekstu tytułu w następujący sposób:

• Kolor tekstu tytułu: #000000
• Poziom nagłówka tytułu: H2
• Czcionka tytułu: Montserrat
• Wyrównanie tekstu tytułu: do lewej
• Rozmiar tekstu tytułu: 8vw (komputer), 10vw (tablet i telefon)
• Odstępy między literami tytułu: -1vw (komputer), -0,5vw (tablet i telefon)
• Wysokość wiersza tytułu: 0,7 em

Domyślne ustawienia tekstu zamkniętego tytułu

Następnie przejdź do ustawień tekstu zamkniętego tytułu i odpowiednio zmodyfikuj ustawienia:

• Czcionka tytułu zamkniętego: Montserrat
• Rozmiar tekstu zamkniętego tytułu: 18vw (komputer), 16vw (tablet i telefon)
• Wysokość zamkniętego wiersza tytułu: 0.8em

Umieść kursor w ustawieniach tekstu zamkniętego tytułu

Zmień kolor tekstu zamkniętego tytułu po najechaniu myszą.

• Kolor tekstu zamkniętego tytułu: #f4f4f4

Ustawienia tekstu podstawowego

Przejdź do ustawień tekstu podstawowego i tam też wprowadź pewne zmiany.

• Czcionka ciała: Fira Sans
• Waga czcionki ciała: lekka
• Wyrównanie tekstu podstawowego: wyjustuj
• Rozmiar tekstu ciała: 1.2vw (komputer), 2vw (tablet), 3vw (telefon)
• Wysokość linii ciała: 2.1em

Rozstaw

Dodaj również niestandardowe górne, dolne i lewe dopełnienie do modułu.

• Górna wyściółka: 10vw
• Dolna wyściółka: 10vw
• Lewa wyściółka: 6vw

Granica

Kontynuuj, usuwając domyślne obramowanie modułu w ustawieniach obramowania.

• Szerokość obramowania: 0px

Przełącz CSS treści

Uzupełnij ustawienia modułu przełączania, dodając na pulpicie następujące wiersze kodu CSS:

width: 60vw;
border-left: 0.2vw solid black;
padding: 5vw 5vw 5vw 5vw;

Zmodyfikuj szerokość linii kodu CSS na tablecie i telefonie:

width: 85vw;

Klonuj całą sekcję tyle razy, ile chciałeś

Po ukończeniu pierwszej sekcji, wiersza i modułu przełączania możesz sklonować całą sekcję tyle razy, ile chcesz; w zależności od tego, ile treści chcesz wyświetlać na swojej stronie.

Zmień zawartość

Upewnij się, że zmieniłeś całą zawartość przełącznika w każdym zduplikowanym module przełącznika.

Zmień kolory ikon

Następnie otwórz każdy moduł przełączania 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

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak wykazać się kreatywnością dzięki modułowi przełączania Divi. Dokładniej; stworzyliśmy je na pełną szerokość i wykorzystaliśmy je, aby w kreatywny sposób pokazać różne treści sekcji. Ten samouczek pokazuje, że możesz łatwo używać modułów Divi poza ramką, gdy bierzesz pod uwagę różne kontenery. Udało Ci się również bezpłatnie pobrać plik JSON z samouczka! Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.