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 600.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 Toggle-Modul hinzufügen können, müssen Sie zuerst in den Divi Builder springen. Sobald das Divi-Design auf Ihrer Website installiert ist, werden Sie eine Schaltfläche bemerken Verwenden Sie Divi Builder jedes Mal, wenn Sie eine neue Seite erstellen, über dem Publisher. 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 das graue Plus-Symbol klicken, um Ihrer Seite ein neues Modul hinzuzufügen. Neue Module können nur innerhalb der Zeilen hinzugefügt werden. Wenn Sie eine neue Seite beginnen, vergessen Sie nicht, 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 ist durchsuchbar, dh Sie können auch "Toggle" eingeben und dann die Eingabetaste drücken, um die Modulumschaltung zu suchen und automatisch hinzuzufügen! Sobald das Modul hinzugefügt wurde, werden Sie von der Liste der Optionen des Moduls begrüßt. Diese Optionen sind in drei Hauptgruppen unterteilt: Inhalt , Konzeption et fortgeschritten .

Beispiel Anwendungsfall: FAQ-Seite

Eine FAQ-Seite ist einer der besten Orte, um Informationen mithilfe des Toggle-Moduls zu konsolidieren. So kann der Benutzer die gesuchte Frage schnell identifizieren, ohne jede Menge 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 mithilfe von Visual Builder einen neuen Abschnitt mit einer Zeile mit voller Breite (1-Spalte) hinzu. Fügen Sie dann der Linie ein Divider-Modul hinzu. Wählen Sie auf der Registerkarte Inhalt der Divider-Moduleinstellungen die Option "Divider anzeigen".

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

Geben Sie auf der Registerkarte Entwurf 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 Wippenmodul unter den Teiler ein, den ich gerade in derselben Zeile erstellt habe. Aktualisieren Sie in den Einstellungen des Toggle-Moduls die folgenden Elemente:

Beginnen Sie mit der Bewerbung Ihres Blogs

Laden Sie Dutzende von Logos, Bannern, Website-Vorlagen und vielen anderen Marketing-Tools herunter, um Ihren WordPress-Blog zu vermarkten. [Empfohlen]

Registerkarte "Inhalt"

Titel: [Geben Sie Ihren Titel ein] Inhalt: [Geben Sie Ihren Inhalt ein] Status: Schließen
Hintergrundfarbe öffnen: #ffffff
Closed Toggle die Hintergrundfarbe: #ffffff
Hintergrundfarbe: #ffffff

Registerkarte Design

Farbe des Symbols: # 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 Einstellungen für das Umschaltmodul gespeichert haben, duplizieren Sie das erstellte Teilermodul und platzieren Sie es unter dem Umschaltmodul. Dadurch wird der Flip mit einer oberen und einer unteren Trennlinie umrahmt. Anschließend duplizieren Sie Ihr Toggle-Modul und platzieren es hinter der unteren Trennlinie. Da es sich um ein Duplikat-Umschaltmodul handelt, wurden alle Entwurfsparameter in das neue Umschaltmodul übertragen. Sie müssen lediglich den Inhalt des neuen Umschaltmoduls aktualisieren. Fahren Sie dann mit dem Duplizieren der geteilten Module und Flip-Flops fort und aktualisieren Sie den Inhalt Ihrer Flip-Flops, 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 zusammenfassen können.

Modul Toggle divi.gif

Nachdem Sie das Wippenmodul in Aktion gesehen haben, gehen Sie in den folgenden Abschnitten auf ALLE Einstellungen ein. Wir haben einen detaillierten Überblick darüber gegeben, was Sie auf den einzelnen Registerkarten der Modulparameter finden, und eine Erläuterung zu den jeweiligen Funktionen.

Die Inhaltsparameter des Toggle-Moduls

Parameter Flipflops divi.png

Die Registerkarte Inhalt des Umschaltmoduls ist in die folgenden Parametergruppen unterteilt (die sich auch abwechseln!).

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]

Text

Hier können Sie den Titel und den Inhalt von toggle hinzufügen.

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 ändern, wenn das Flip-Flop geöffnet ist, und die Hintergrundfarbe, wenn es geschlossen ist. 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 einzustellen oder herunterzuladen.

Administratorkennzeichnung

Standardmäßig wird Ihr Toggle-Modul mit einem Tag angezeigt, das im Generator "Toggle" lautet. Auf der Registerkarte "Admin" 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-Listen auf der Registerkarte Entwurf gruppiert.

Symbol

Hier können Sie die Farbe des Umschaltersymbols ändern.

Text

Hier können Sie die Farbe für offenen und geschlossenen Umschalttext einstellen.

Titeltext

Hier können Sie Schriftart, Gewicht, Größe, Farbe, Abstand, Zeilenhöhe und mehr einstellen.

Body text

Hier können Sie Schriftart, Gewicht, Größe, Farbe, Abstand, Zeilenhöhe und mehr einstellen.

Bordures

Hier können Sie einen Rahmen verwenden. Wenn Sie sich für die Verwendung eines Rahmens entscheiden, können Sie auch seine Farbe auswählen, seine Breite ändern und seinen Stil auswählen.

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]

Abstand

Im Abstandsbereich können Sie oben, rechts, unten oder links der Skala benutzerdefinierte Polster hinzufügen. Sie können diese Werte auch für Desktops, Tablets oder Mobilgeräte ändern.

Die erweiterten Einstellungen des Moduls ändern sich

Flipflop-Parameter divi.png

Auf der Registerkarte Erweitert Ihres Flip-Moduls können Sie eine eindeutige CSS-ID und -Klasse hinzufügen. Sie können auch benutzerdefiniertes CSS zu verschiedenen vordefinierten (und vorausgewählten) CSS-Selektoren im Videocursor-Modul der Dropdown-Liste 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, dass Sie damit das Divi Toggle-Modul besser nutzen können.

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