Springe zum Hauptinhalt

Wie benutze ich das Divi Builder Flip Modul?

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Bevor Sie Ihrer Seite ein Umschaltmodul hinzufügen können, müssen Sie zunächst in den Divi Builder springen. Sobald das Divi-Thema auf Ihrer Website installiert ist, 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 Website im Vordergrund durchsuchen, wenn Sie mit Ihrem WordPress-Dashboard verbunden 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 , Konzeption 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:

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

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

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

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.

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

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.

Andere Divi Tutorials

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Diese Website verwendet Akismet, um unerwünschte Inhalte zu reduzieren. Erfahren Sie mehr darüber, wie Ihre Kommentardaten verwendet werden.

Zurück nach oben
18 Aktien
Aktie8
tweet3
Registrieren7