Das Toggle-Modul von Divi ermöglicht Ihnen die Anzeige Inhalt zusätzliche pro Klick, ohne dass zusätzlicher jQuery-Code erforderlich ist. Ähnlich wie das Accordion-Modul werden Toggle-Module normalerweise zum Teilen von a verwendet Inhalt gruppiert, z. B. häufig gestellte Fragen. Sie können sie aber auch für andere Aufgaben nutzen, beispielsweise zur Strukturierung Ihrer Seite. In diesem Tutorial verwenden wir Toggle-Module in voller Breite, um ein einfaches Seitendesign zu erstellen, das sich beim Klicken verhält. Der Designstil, mit dem wir uns befassen, ist mutig und klar. Sie können die JSON-Datei auch kostenlos herunterladen!
Gehen wir.
Bevor wir uns mit dem Tutorial befassen, werfen wir einen kurzen Blick darauf, wie es auf verschiedenen Bildschirmgrößen aussieht.
Beginnen wir mit der Neuerstellung
Einen neuen Abschnitt hinzufügen
Abstand
Erstellen Sie zunächst eine neue Seite (oder öffnen Sie eine vorhandene) und fügen Sie einen regulären Abschnitt hinzu. Das einzige, was Sie in den Abschnittseinstellungen tun müssen, ist, alle standardmäßigen oberen und unteren Polster aus den Abstandseinstellungen zu entfernen.
- Top Polsterung: 0px
- Polsterung unten: 0px
Fügen Sie eine neue Zeile hinzu
Spaltenstruktur
Fügen Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzu:
Sizing
Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und stellen Sie sicher, dass die Zeile die linke und rechte Seite des Abschnittscontainers berührt, indem Sie die Größeneinstellungen ändern. Dies ist ein wichtiger Schritt in diesem Tutorial. Dadurch kann das Toggle-Modul, das wir später in diesem Tutorial hinzufügen, die volle Breite erreichen.
- Verwenden Sie eine benutzerdefinierte Rinnenbreite: Ja
- Dachrinnenbreite: 1
- Breite: 100%
- Maximale Breite: 100%
Abstand
Wir entfernen auch die Standardauffüllung oben und unten aus der Zeile. Dadurch wird der gesamte Abstand zwischen dem Umschaltmodul und dem Zeilen- / Spaltencontainer, in dem es platziert ist, entfernt.
- Top Polsterung: 0px
- Polsterung unten: 0px
Fügen Sie ein Wippenmodul hinzu
Titel und Inhalt einfügen
Es ist Zeit, mit dem Hinzufügen von Modulen zu beginnen! Das einzige Modul, das wir in dieser Zeile benötigen, ist ein Toggle-Modul. Wir werden den Titelbereich verwenden, um einen Titel hinzuzufügen und alles zu platzieren Inhalt die wir im Body-Content-Bereich teilen möchten. Fühlen Sie sich frei, im Inhaltsbereich alles zu platzieren, was Sie möchten; vom Text bis zu Bildern und mehr.
Zustand
Wir verwenden einen geschlossenen Umschaltzustand, können ihn aber auch offen lassen.
- Zustand: nah
Standard-Symboleinstellungen
Wechseln Sie zur Registerkarte Design und ändern Sie die Einstellungen für das Modulsymbol entsprechend:
- Symbolfarbe: # 570fff
- Verwenden Sie eine benutzerdefinierte Symbolgröße: JA
- Icon Schriftgröße: 6vw
Symboleinstellungen beim Hover
Ändern Sie die Farbe des Hover-Symbols.
- Symbolfarbe: # f2f2f2
Standardmäßige Failover-Einstellungen
Ändern Sie dann die Hintergrundfarbe des geschlossenen Schalters.
- Hintergrundfarbe umschalten: #ffffff
Bewegen Sie den Mauszeiger über die Einstellungen
Und ändern Sie die Farbe, die auch schwebt.
- Hintergrundfarbe umschalten: # 000000
Einstellungen für den Titeltext
Fahren Sie fort, indem Sie die Texteinstellungen des Titels wie folgt ändern:
- Farbtexttitel: # 000000
- Titel Titelstufe: H2
- Titelpolizei: Montserrat
- Texttitel: Left Alignment
- Text Title Size: 8vw (Desktop), 10vw (Tablet und Telefon)
- Titelbuchstabenabstand: -1vw (Desktop), -0.5vw (Tablet und Telefon)
- Höhe der Titelzeile: 0.7em
Standardmäßige Texteinstellungen für geschlossene Titel
Greifen Sie dann auf die Textparameter des geschlossenen Titels zu und ändern Sie sie entsprechend:
- Closed Title Schriftart: Montserrat
- Titel geschlossen Textgröße: 18vw (Desktop), 16vw (Tablet und Telefon)
- Höhe des geschlossenen Titels: 0.8em
Bewegen Sie den Mauszeiger über die Texteinstellungen des Titels
Ändern Sie die Farbe des Untertiteltexts im Schwebeflug.
- Titel geschlossen Textfarbe: # f4f4f4
Body-Text-Einstellungen
Gehen Sie zu den Körpertexteinstellungen und nehmen Sie einige Änderungen vor.
- Body-Schriftart: Fira Sans
- Gewicht der Schrift: Light
- Ausrichtung des Fließtextes: Begründen
- Körpertextgröße: 1.2vw (Desktop), 2vw (Tablet), 3vw (Telefon)
- Körpergröße: 2.1em
Abstand
Fügen Sie außerdem benutzerdefinierte Polster oben, unten und links am Modul hinzu.
- Spitzenauffüllen: 10vw
- Polsterung unten: 10vw
- Linke Polsterung: 6vw
Grenze
Fahren Sie fort, indem Sie den Standardrahmen des Moduls in den Rahmeneinstellungen entfernen.
- Breite des Rahmens: 0px
CSS-Inhalt umschalten
Definieren Sie Toggle-Modulparameter, indem Sie die folgenden CSS-Codezeilen zum Desktop hinzufügen:
Breite: 60vw; Rand links: 0.2vw durchgehend schwarz; Polsterung: 5vw 5vw 5vw 5vw;
Ändern Sie die Breite der CSS-Codezeile auf dem Tablet und dem Telefon:
width: 85vw;
Klonen Sie den gesamten Abschnitt so oft Sie möchten
Sobald Sie den ersten Abschnitt, die Linie und das Toggle-Modul abgeschlossen haben, können Sie den gesamten Abschnitt so oft klonen, wie Sie möchten. Abhängig von der Menge des Inhalts, den Sie auf Ihrer Seite anzeigen möchten.
Ändern Sie den Inhalt
Stellen Sie sicher, dass Sie den gesamten Inhalt des Flip-Flops in jedem Flip-Flop-Modul ändern.
Ändern Sie die Farben der Symbole
Öffnen Sie dann jedes Toggle-Modul einzeln und ändern Sie die Symbolfarbe. Die, die wir für dieses Tutorial verwendet haben, sind unten aufgeführt:
- Symbolfarbe 1: # ff9000
- Symbolfarbe 2: # 00ffd4
Übersicht
Nachdem alle Schritte ausgeführt wurden, werfen wir einen letzten Blick darauf, was mit verschiedenen Bildschirmgrößen passiert ist.
Abschließende Gedanken
In diesem Artikel haben wir Ihnen gezeigt, wie Sie mit dem Toggle-Modul von kreativ werden können Divi. Etwas präziser; Wir haben sie in voller Breite erstellt und sie verwendet, um Inhalte aus verschiedenen Abschnitten auf kreative Weise darzustellen. Dieses Tutorial zeigt, dass Sie die Module von problemlos verwenden können Divi über den Tellerrand hinaus, wenn man die verschiedenen Behälter berücksichtigt. Sie konnten die Tutorial-JSON-Datei auch kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie gerne im Kommentarbereich unten einen Kommentar hinterlassen.
