So verwenden Sie das Toggle-Modul von Divi kreativ, um Preispläne zu präsentieren

Wenn es darum geht, Preispläne auf Ihrer Website zu präsentieren, können Sie viele Schritte unternehmen und absolut atemberaubende und attraktive Preisseiten oder -abschnitte erstellen. Wenn Sie mit Divi eine Website erstellen, werden Sie sich höchstwahrscheinlich für das Modul Preistabellen entscheiden. Mit diesem Modul können Sie schnell Preistabellen hinzufügen und sie nach Belieben gestalten. Wenn Sie diesem bestimmten Abschnitt Ihrer Seite jedoch mehr Interaktion hinzufügen möchten, können Sie auch das Toggle-Modul verwenden, um Preispläne beim Klicken anzuzeigen. Dies ist eine großartige Möglichkeit, einen bestimmten Preisplan hervorzuheben, indem Sie seinen Status offen halten und die anderen beiden schließen.

In diesem Tutorial zeigen wir Ihnen Schritt für Schritt, wie Sie mit dem Toggle-Modul von Divi ein wunderschönes Design der Toggle-Preistabelle erstellen. Sobald Sie den Ansatz verstanden haben, können Sie für jede Art von Website, die Sie erstellen, alle Arten von Toggle-Preisplänen per Mausklick erstellen.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis auf verschiedenen Bildschirmgrößen.

Beginnen wir mit dem Erstellen!

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Abstand

Erstellen Sie eine neue Seite oder öffnen Sie eine vorhandene mit Divis Visual Builder. Fügen Sie der Seite einen neuen Abschnitt hinzu, öffnen Sie die Abschnittseinstellungen und fügen Sie benutzerdefinierte obere und untere Abstände hinzu, um oben und unten im Abschnitt etwas Platz zu schaffen.

• Obere Polsterung: 160px
• Untere Polsterung: 160px

Zeile 1 hinzufügen

Spaltenstruktur

Nachdem Sie die Einstellungen für den Abschnittsabstand geändert haben, können Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzufügen:

Textmodul hinzufügen

Inhalt hinzufügen

Sie müssen keine Änderungen an der Zeile vornehmen, also fahren Sie fort und fügen Sie sofort ein Textmodul hinzu. Geben Sie einige H2-Inhalte Ihrer Wahl in das Inhaltsfeld des Moduls ein.

Überschriftstexteinstellungen

Fahren Sie fort, indem Sie zur Registerkarte Design gehen und die Einstellungen für den Überschriftentext ändern.

• Überschrift 2 Schriftart: Didact Gothic
• Überschrift 2 Schriftstärke: Regular
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #000000
• Überschrift 2 Textgröße: 40px
• Überschrift 2 Buchstabenabstand: -1px

Trennmodul hinzufügen

Sichtweite

Fügen Sie ein Trennmodul direkt unter dem Textmodul hinzu, das Sie in den vorherigen Schritten hinzugefügt und geändert haben. Stellen Sie sicher, dass die Option "Teiler anzeigen" des Teilermoduls aktiviert ist.

• Teiler anzeigen: Ja

Farbe

Fahren Sie fort, indem Sie zur Registerkarte "Design" gehen und die Teilerfarbe ändern.

• Farbe: #000000

Größe

Ändern Sie auch die Breite des Moduls in den Größeneinstellungen.

• Breite: 39%
• Modulausrichtung: Mitte

Abstand

Fügen Sie auch einen benutzerdefinierten unteren Rand hinzu.

• Unterer Rand: 50px

Zeile 2 hinzufügen

Spaltenstruktur

Wir sind mit dem Ändern der ersten Zeile und ihrer Module fertig. Es ist Zeit, eine neue Zeile mit der folgenden Spaltenstruktur hinzuzufügen:

Spalte 1 Hintergrund mit Farbverlauf

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie Spalte 1 einen Verlaufshintergrund hinzu.

• Farbe 1: #00fff2
• Farbe 2: rgba(255,255,255,0)
• Spalte 1 Verlaufstyp: Radial
• Spalte 1 Radialrichtung: Unten rechts
• Spalte 1 Startposition: 30%
• Spalte 1 Endposition: 30%

Spalte 2 Hintergrund mit Farbverlauf

Machen Sie dasselbe auch für die zweite Spalte.

• Farbe 1: #fce96f
• Farbe 2: rgba(255,255,255,0)
• Spalte 2 Verlaufstyp: Radial
• Spalte 2 Radialrichtung: Oben rechts
• Spalte 2 Startposition: 40%
• Spalte 2 Endposition: 40%

Spalte 3 Hintergrund mit Farbverlauf

Fügen Sie der dritten Spalte ebenfalls einen Verlaufshintergrund hinzu, indem Sie die folgenden Einstellungen verwenden:

• Farbe 1: #a659ff
• Farbe 2: rgba(255,255,255,0)
• Spalte 3 Verlaufstyp: Radial
• Spalte 3 Radiale Richtung: Unten
• Spalte 3 Startposition: 30%
• Spalte 2 Endposition: 30%

Größe

Wenn Sie mit dem Hinzufügen des Hintergrunds mit Farbverlauf fertig sind, wechseln Sie zur Registerkarte Design und ändern Sie die Größeneinstellungen.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 2

Toggle-Modul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, verschiedene Preispläne zu erstellen! Fügen Sie der ersten Spalte ein neues Toggle-Modul hinzu und geben Sie einen Titel ein. Um die verschiedenen Elemente im Inhaltsfeld zu gestalten, haben wir einige zusätzliche HTML-Tags verwendet. Fahren Sie fort und kopieren Sie die folgenden Zeilen und fügen Sie sie der Registerkarte Text Ihres Inhaltsfelds hinzu:

<p>&nbsp;</p>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>
<p>&nbsp;</p>
<p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p>
<p>&nbsp;</p>
<p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p>
<p>&nbsp;</p>

Bundesland

Sie können wählen, ob der Status des Toggle-Moduls offen oder geschlossen sein soll. Damit Sie alle Änderungen sehen können, die Sie während des restlichen Tutorials vornehmen, empfehle ich, den Status "offen" beizubehalten, bis Sie alle verschiedenen Designeinstellungen geändert haben.

Hintergrundfarbe

Fahren Sie fort, indem Sie zu den Hintergrundeinstellungen des Toggle-Moduls gehen und eine weiße Hintergrundfarbe hinzufügen.

• Hintergrundfarbe: #ffffff

Symboleinstellungen

Ändern Sie als nächstes die Symbolfarbe im Design-Tab.

• Symbolfarbe: #000000

Einstellungen umschalten

Und ändern Sie auch die Open Toggle-Hintergrundfarbe in den Toggle-Einstellungen.

• Hintergrundfarbe öffnen: rgba(255,255,255,0)

Einstellungen für Titeltext

Nehmen Sie dann einige Änderungen an den Einstellungen für den Titeltext vor.

• Titelschrift: Didact Gothic
• Schriftstärke des Titels: Fett
• Titeltextfarbe: #000000
• Titeltextgröße: 3.5vw (Desktop), 60px (Tablet), 40px (Telefon)

Textkörpereinstellungen

Ändern Sie auch die Textkörpereinstellungen.

• Körperschrift: Didact Gothic
• Ausrichtung des Textkörpers: Links
• Textkörperfarbe: #000000
• Körpertextgröße: 18px
• Körperlinienhöhe: 1.5em

Toggle-Modul zweimal klonen und in die verbleibenden zwei Spalten platzieren

Sobald Sie das Toggle-Modul in Spalte 1 geändert haben, können Sie es zweimal klonen und die Duplikate in die beiden verbleibenden Spalten einfügen.

Kopie ändern

Stellen Sie sicher, dass Sie alle Kopien der Duplikate ändern und fertig!

Vorschau

Nachdem wir nun alle Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Ergebnis des Designs, das wir auf verschiedenen Bildschirmgrößen erstellt haben.

Abschließende Gedanken

In diesem Tutorial haben wir Ihnen einen kreativen Ansatz zur Verwendung des Toggle-Moduls von Divi gezeigt, um Preispläne auf Ihrer Website zu präsentieren. Dies ist eine großartige Möglichkeit, mit Besuchern zu interagieren und Ihren Designstil zu verbessern. Es macht es einfacher, einen bestimmten Preisplan in Ihrem Abschnitt hervorzuheben, indem Sie diesen geöffnet und die anderen beiden Optionen geschlossen halten. Sie können diesen Ansatz für jede Art von Website verwenden, die Sie erstellen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!