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.

Zugang zum visuellen Erbauer

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.

Flipflop divi module.png

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.
Beispielseite FAQ.jpg

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“.

Beispiel für eine Flip-Flop-Taste Divi.png

Geben Sie auf der Registerkarte Design die folgenden Optionen ein:

Farbe: # 000000 (schwarz)
Teiler-Stil: Solide
Trennzeichenposition:
Vertikal zentrierter Teiler Gewicht: 4px
Hauteur: 1

Konfigurationsoptionen toggle divi.png

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

neuer Inhalt mit Divi.png Rocker

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.

Modul Toggle divi.gif

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

Parameter Flipflops divi.png

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

Optionsdesign toggle wordpress.png

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

Flipflop-Parameter divi.png

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