Jak korzystać z modułu Divi Builder Flip

przez Blair Jersyer | Divi

Zanim będziesz mógł dodać moduł Toggle do swojej strony, musisz najpierw przejść do Divi Builder. Kiedyś Motyw Divi zainstalowany na twoim Witryna internetowa, zauważysz przycisk Użyj Divi Builder nad edytorem postów za każdym razem, gdy tworzysz nową stronę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym. Możesz także kliknąć przycisk Włącz narzędzie Visual Builder kiedy przeglądasz swoje Witryna internetowa na pierwszym planie, jeśli jesteś zalogowany do pulpitu WordPress.

dostęp do wizualnego budowniczego

Gdy jesteś w programie Visual Builder, możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony.

flip flop divi module.png

Znajdź moduł przełączania na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że ​​możesz także wpisać „toggle”, a następnie nacisnąć klawisz Enter, aby automatycznie wyszukać i dodać moduł przełączający! Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład użycia: strona FAQ

Strona z często zadawanymi pytaniami to jedno z najlepszych miejsc do konsolidacji informacji za pomocą modułu Toggle. Pozwala użytkownikowi szybko zidentyfikować pytanie, którego szuka, bez konieczności czytania mnóstwa tekstu. W tym przykładzie pokażę ci, jak możesz użyć modułu Toggle do zaprojektowania nowoczesnej sekcji FAQ dla swojej strony FAQ w ciągu kilku minut.
przykładowa strona FAQ.jpg

Korzystając z programu Visual Builder, dodaj nową sekcję z wierszem o pełnej szerokości (1 kolumna). Następnie dodaj moduł rozdzielacza do wiersza. W zakładce Treść w ustawieniach modułu Divider wybierz opcję „Show Divider”.

przykład przycisku flip-flop divi.png

Na karcie Projekt wprowadź następujące opcje:

Kolor: # 000000 (czarny)
Styl podziału: Solidny
Pozycja separatora:
Przegroda wyśrodkowana pionowo Waga: 4px
Wysokość: 1

opcje konfiguracji przełącz divi.png

Następnie dodaj moduł przełączający pod rozdzielaczem, który właśnie utworzyłem w tym samym wierszu. W ustawieniach modułu Toggle zaktualizuj następujące elementy:

Karta Zawartość

Tytuł: [wpisz swój tytuł]
Treść: [wpisz swoją treść]
Status: Zamknij
Otwórz kolor tła: #ffffff
Zamknięty Przełącza kolor tła: #ffffff
Kolor tła: #ffffff

Karta Projekt

Kolor ikony: # 000000
Otwórz Przełącz kolor tekstu: # 000000
Zamknięty Przełącz Kolor tekstu: # 000000
Czcionka tytułu: Open Sans, Bold
Rozmiar czcionki: 24px
Tytuł Kolor tekstu: # 000000
Czcionka ciała: Otwórz Sans
Rozmiar czcionki ciała: 18px
Body Text Color: # 666666
Wysokość linii ciała: 1.6em
Użyj granicy: TAK
Szerokość obramowania: 0px
Niestandardowe wypełnienie: górny 2px, dolny 2px

nowa zawartość z klawiszem divi.png

Po zapisaniu ustawień dla modułu przełączającego skopiuj utworzony moduł rozdzielacza i umieść go pod modułem przełącznika. To otoczy huśtawkę górną i dolną linią podziału. Następnie zduplikuj swój moduł flip-flop i umieść go za dolną linią separatora. Ponieważ jest to zduplikowany moduł Toggle, wszystkie ustawienia projektu zostały przeniesione do nowego modułu Toggle i wszystko, co musisz zrobić, to zaktualizować zawartość nowego modułu Toggle. Następnie kontynuuj proces powielania modułów Division i Scale Modules i aktualizuj zawartość swoich skal, aż ukończysz całą sekcję FAQ.

To wszystko. Masz teraz nowoczesną sekcję FAQ, wykorzystującą moduł Toggle do konsolidacji pytań i odpowiedzi.

moduł toggle divi.gif

Teraz, gdy widziałeś już moduł przełączający w akcji, przejdź do WSZYSTKICH jego ustawień w poniższych sekcjach. Przedstawiliśmy szczegółowe informacje na temat tego, co znajdziesz na każdej karcie ustawień modułu, i wyjaśnienie, co robi każdy z nich.

Parametry zawartości modułu Toggle

parametry flip-flops divi.png

Zakładka zawartości modułu przełączania jest zorganizowana w następujące grupy parametrów (które również są naprzemienne!).

teksty

Tutaj możesz dodać tytuł i przełączyć zawartość.

stan

Przy tym ustawieniu możesz wybrać, czy chcesz, aby przycisk był domyślnie wyświetlany jako otwarty czy zamknięty.

kontekst

Tutaj możesz zmienić kolor tła, gdy przełącznik jest otwarty i kolor tła, gdy jest zamknięty. Możesz również łatwo uczynić je takimi samymi, ustawiając opcję koloru tła. Istnieje również opcja ustawienia lub przesłania obrazu tła.

Etykieta administratora

Domyślnie moduł przełączania będzie wyświetlany w generatorze z etykietą „Przełącz”. Tag administratora umożliwia zmianę tego tagu w celu łatwej identyfikacji.

Parametry konstrukcyjne modułu klawisza

projekt opcji toggle wordpress.png

Parametry projektowe modułu przełączającego zostały pogrupowane w następujących rozwijanych przełącznikach na karcie Projekt.

ikona

Tutaj możesz zmienić kolor ikony przełączania.

teksty

Tutaj możesz ustawić kolor otwartego i zamkniętego tekstu przełączanego.

Tekst tytułu

Tutaj możesz dostosować czcionkę, grubość, rozmiar, kolor, odstępy, wysokość linii i nie tylko.

Ciało tekstu

Tutaj możesz dostosować czcionkę, grubość, rozmiar, kolor, odstępy, wysokość wiersza i nie tylko.

granice

Tutaj możesz wybrać obramowanie. Jeśli zdecydujesz się użyć obramowania, możesz również wybrać jego kolor, zmienić szerokość i wybrać styl.

rozstaw

W obszarze odstępów możesz dodać niestandardowe dopełnienie do górnej, prawej, dolnej lub lewej części przełącznika. Możesz także zmienić te wartości dla komputerów stacjonarnych, tabletów lub urządzeń mobilnych.

Zaawansowane ustawienia modułu przełączają się

parametr flip-flop divi.png

Na karcie Zaawansowane modułu przełączania możesz dodać unikalny identyfikator i klasę css. Możesz także dodać niestandardowy css do różnych predefiniowanych (i wstępnie wybranych) selektorów css w niestandardowym rozwijanym module suwaka wideo css. Wreszcie, na liście rozwijanej widoczności możesz dostosować widoczność swojego modułu na telefonach, tabletach i komputerach stacjonarnych.

To wszystko w tym samouczku, mam nadzieję, że pozwoli ci lepiej korzystać z modułu Divi Toggle.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ MOTYW DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”centrum” font_family = „Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ SZABLONY DIVI[/vcex_button][/vc_column][/vc_row]

Inne samouczki Divi

Opublikuj komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

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