Springe zum Hauptinhalt

Strukturieren Sie Ihre Seite mit vollwertigen Umschaltmodulen in Divi

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]

Mit dem Toggle-Modul von Divi können Sie zusätzlichen Inhalt pro Klick anzeigen, ohne zusätzlichen jQuery-Code zu benötigen. Ähnlich wie beim Akkordeon-Modul werden Umschaltmodule normalerweise zum Teilen von gruppierten Inhalten verwendet, z. B. häufig gestellten Fragen. Sie können sie jedoch auch für andere Aufgaben verwenden, z. B. um Ihre Seite zu strukturieren. In diesem Tutorial verwenden wir Flip-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 sauber. 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, Module hinzuzufügen! 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 den gesamten Inhalt, den wir teilen möchten, in den Hauptinhaltsbereich einzufügen. Fühlen Sie sich frei, alles, was Sie wollen, in den Inhaltsbereich zu platzieren. von Text zu Bildern und mehr.

Zustand

Wir verwenden einen geschlossenen Umschaltzustand, können ihn aber auch offen lassen.

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]

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

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]

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

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]

Ä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 Divi kreativ sein können. Etwas präziser; Wir haben sie in voller Breite erstellt und sie verwendet, um Inhalte aus verschiedenen Abschnitten auf kreative Weise anzuzeigen. Dieses Tutorial zeigt, dass Sie Divis Module problemlos außerhalb der Box verwenden können, wenn Sie die verschiedenen Container berücksichtigen. Sie konnten auch die JSON-Datei des Tutorials kostenlos herunterladen! Wenn Sie Fragen oder Anregungen haben, können Sie im Kommentarbereich unten einen Kommentar hinterlassen.

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
1 Aktien
Aktie1
tweet
Registrieren