Bevor Sie Ihrer Seite ein Toggle-Modul hinzufügen können, müssen Sie zuerst in den Divi Builder springen. Einmal die Divi-Thema auf deinem installiert Website, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder über dem Post-Editor, wenn Sie eine neue Seite erstellen. Klicken Sie auf diese Schaltfläche, um Divi Builder zu aktivieren und auf alle Divi Builder-Module zuzugreifen. Klicken Sie dann auf die Schaltfläche Verwenden Sie Visual Builder um den Generator im visuellen Modus zu starten. Sie können auch auf die Schaltfläche klicken Aktivieren Sie den visuellen Builder wenn Sie Ihre durchsuchen Website im Vordergrund, wenn Sie in Ihr WordPress-Dashboard eingeloggt sind.
Sobald Sie sich im Visual Builder befinden, können Sie auf die graue Plus-Schaltfläche klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb von Zeilen hinzugefügt werden. Wenn Sie eine neue Seite starten, denken Sie daran, Ihrer Seite zuerst eine Zeile hinzuzufügen.
Suchen Sie das Umschaltmodul in der Liste der Module und klicken Sie darauf, um es Ihrer Seite hinzuzufügen. Die Liste der Module kann durchsucht werden. Sie können also auch "umschalten" eingeben und dann die Eingabetaste drücken, um das Umschaltmodul automatisch zu finden und hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Moduloptionsliste begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Technologie et fortgeschritten .
Beispiel für einen Anwendungsfall: FAQ-Seite
Eine FAQ-Seite ist einer der besten Orte, um Informationen mithilfe des Toggle-Moduls zu konsolidieren. Es ermöglicht dem Benutzer, die gesuchte Frage schnell zu identifizieren, ohne Tonnen von Text lesen zu müssen. In diesem Beispiel zeige ich Ihnen, wie Sie mit dem Toggle-Modul in wenigen Minuten einen modernen FAQ-Bereich für Ihre FAQ-Seite erstellen können.
Fügen Sie mit dem Visual Builder einen neuen Abschnitt mit einer Zeile voller Breite (1 Spalte) hinzu. Fügen Sie dann der Zeile ein Teilermodul hinzu. Wählen Sie auf der Registerkarte Inhalt der Einstellungen des Divider-Moduls die Option „Divider anzeigen“.
Geben Sie auf der Registerkarte Design die folgenden Optionen ein:
Farbe: # 000000 (schwarz)
Teiler-Stil: Solide
Trennzeichenposition:
Vertikal zentrierter Teiler Gewicht: 4px
Hauteur: 1
Fügen Sie dann ein Umschaltmodul unter dem Teiler hinzu, den ich gerade in derselben Zeile erstellt habe. Aktualisieren Sie in den Moduleinstellungen umschalten Folgendes:
Registerkarte "Inhalt"
Titel: [Geben Sie Ihren Titel ein]
Inhalt: [Geben Sie Ihren Inhalt ein]
Status: Schließen
Offene Hintergrundfarbe: #ffffff
Closed Toggle die Hintergrundfarbe: #ffffff
Hintergrundfarbe: #ffffff
Registerkarte Design
Symbolfarbe: # 000000
Open Toggle Textfarbe: # 000000
Geschlossen Toggle Textfarbe: # 000000
Titel Schriftart: Open Sans, Bold
Schriftgröße: 24px
Titel Textfarbe: # 000000
Body Schriftart: Open Sans
Schriftgröße des Körpers: 18px
Textkörperfarbe: # 666666
Höhe der Körperlinie: 1.6em
Verwenden Sie den Rand: JA
Breite des Rahmens: 0px
Benutzerdefinierte Polsterung: Oben 2px, Unten 2px
Nachdem Sie Ihre Einstellung für das Umschaltmodul gespeichert haben, duplizieren Sie das von Ihnen erstellte Teilermodul und platzieren Sie es unter dem Umschaltmodul. Dadurch wird die Wippe mit einer oberen und einer unteren Trennlinie eingerahmt. Duplizieren Sie danach Ihr Flip-Flop-Modul und platzieren Sie es hinter der unteren Trennlinie. Da es sich um ein doppeltes Toggle-Modul handelt, wurden alle Designeinstellungen auf das neue Toggle-Modul übertragen. Sie müssen lediglich den Inhalt des neuen Toggle-Moduls aktualisieren. Fahren Sie dann mit dem Duplizieren der Module "Division" und "Scale Modules" fort und aktualisieren Sie den Inhalt Ihrer Waage, bis Sie den gesamten FAQ-Abschnitt abgeschlossen haben.
Das ist alles. Sie haben jetzt einen modernen FAQ-Bereich, in dem Sie mithilfe des Toggle-Moduls Ihre Fragen und Antworten konsolidieren können.
Nachdem Sie das Umschaltmodul in Aktion gesehen haben, tauchen Sie in den folgenden Abschnitten in ALLE Einstellungen ein. Wir haben einen detaillierten Überblick über die einzelnen Registerkarten der Moduleinstellungen sowie eine Erläuterung der jeweiligen Funktionen bereitgestellt.
Die Inhaltsparameter des Toggle-Moduls
Die Registerkarte Inhalt des Umschaltmoduls ist in die folgenden Parametergruppen unterteilt (die sich ebenfalls abwechseln!).
Text
Hier können Sie den Titel hinzufügen und den Inhalt umschalten.
Zustand
Mit dieser Einstellung können Sie auswählen, ob Ihre Schaltfläche standardmäßig offen oder geschlossen angezeigt werden soll.
Kontext
Hier können Sie die Hintergrundfarbe bei geöffnetem Schalter und die Hintergrundfarbe bei geschlossenem Schalter ändern. Sie können sie auch einfach gleich einstellen, indem Sie die Option für die Hintergrundfarbe festlegen. Es besteht auch die Möglichkeit, ein Hintergrundbild festzulegen oder hochzuladen.
Administratorkennzeichnung
Standardmäßig wird Ihr Umschaltmodul mit einer Beschriftung mit der Aufschrift "Umschalten" im Generator angezeigt. Mit dem Admin-Tag können Sie dieses Tag zur einfachen Identifizierung ändern.
Die Auslegungsparameter des Wippenmoduls
Die Entwurfsparameter des Umschaltmoduls wurden in den folgenden Dropdown-Umschaltern auf der Registerkarte Entwurf zusammengefasst.
Symbol
Hier können Sie die Farbe des Umschalt-Symbols ändern.
Text
Hier können Sie die Farbe für offenen und geschlossenen Umschalttext einstellen.
Titeltext
Hier können Sie die Schriftart, das Gewicht, die Größe, die Farbe, den Abstand, die Zeilenhöhe usw. des Titeltextes anpassen.
Body text
Hier können Sie Schriftart, Gewicht, Größe, Farbe, Abstand, Zeilenhöhe und mehr anpassen.
Bordures
Hier können Sie einen Rahmen verwenden. Wenn Sie einen Rahmen verwenden, können Sie auch dessen Farbe auswählen, seine Breite ändern und seinen Stil auswählen.
Abstand
Im Abstandsbereich können Sie oben, rechts, unten oder links vom Umschalter benutzerdefinierte Auffüllungen hinzufügen. Sie können diese Werte auch für Desktops, Tablets oder mobile Geräte ändern.
Die erweiterten Einstellungen des Moduls ändern sich
Auf der Registerkarte Erweitert Ihres Umschaltmoduls können Sie eine eindeutige ID- und CSS-Klasse hinzufügen. Sie können auch verschiedenen vordefinierten (und vorausgewählten) CSS-Selektoren im benutzerdefinierten CSS-Dropdown-Video-Schiebereglermodul benutzerdefiniertes CSS hinzufügen. Schließlich können Sie in der Dropdown-Liste Sichtbarkeit die Sichtbarkeit Ihres Moduls auf Telefonen, Tablets und Desktops anpassen.
Das ist alles für dieses Tutorial. Ich hoffe, Sie können das Divi Toggle-Modul besser verwenden.
[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”]DIVI THEMA HERUNTERLADEN [/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=“center“ 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“]LADEN SIE HERUNTER TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Andere Divi Tutorials
- 5 Websites, die Divi Restaurant Thema verwenden
- Wie man Text auf einem Divi WooCommerce Produkt hinzufügt
- So ändern Sie die Menüfarbe zwischen Divi-Seiten
- So personalisieren Sie die Gitter eines Blogs mit Divi
- Wie die Rolle Divi-Editor auf Wordpress verwenden
- So erstellen Sie einen Divi-Schieberegler im Vollbildmodus
- So ändern Sie die Farbe von Menüs zwischen Divi-Seiten
- Funktionen, die Sie wahrscheinlich nicht über Divi kennen
- Wie man Divi Builder auf WordPress benutzt
- Wie benutzt man das Divi Video-Scroll-Modul?
- Wie benutze ich das Divi Builder Flip Modul?
- So fügen Sie ein Testimonial-Modul in Divi Builder hinzu
- Wie benutzt man das Divi-Textmodul?
- So erstellen Sie einen Schieberegler auf Divi
- So bearbeiten Sie eine Divi-Benutzerrolle
- Wie benutzt man das Divi Social Media Modul?
- So verwenden Sie das Shop-Modul zum Thema WordPress Divi
- So verwenden Sie das Divi-Sidebar-Modul
- Wie benutzt man das Divi Preistabellen Modul?
- Wie verwende ich das Titelmodul von Divi-Publikationen?
- So fügen Sie ein Video-Modul von Divi hinzu
- Wie man das Artikelnavigationsmodul benutzt
- Wie benutzt man das Divi-Suchmodul?
- So verwenden Sie das Divi-Wallet-Modul
- Wie man das Personenmodul im Divi Builder benutzt
- Wie man das Geldbörsenmodul mit Divi-Filter verwendet
- So verwenden Sie das Schiebermodul mit voller Breite
- Wie benutzt man das Divi Builder Image Modul?
- So verwenden Sie das vollständige Navigationsmodul von Divi Builder
- So verwenden Sie das Bildergalerie-Modul
- So verwenden Sie das Divi Builder Kartenmodul mit voller Breite
- So verwenden Sie das Divi Full Width Portfolio-Modul
- So verwenden Sie das Divi-Header-Modul in voller Breite
- Wie benutze ich das Divi Counter Modul?
- So verwenden Sie den Artikel-Schieberegler in Divi Builder
- Wie benutze ich das Divi Email Optin Modul?