Eine der exklusiven Landingpages, die wir Ihnen als Lifetime-Mitglieder und neue Black Friday-Kunden zur Verfügung stellen, ist die atemberaubende Landingpage für den Software-Sale. Diese Landingpage wird Sie mit einzigartigen Abschnittstrennern und hochwertigen Mockups überraschen. In diesem Artikel zeigen wir Ihnen, wie Sie die dynamische Inhaltsfunktion von Divi verwenden, um dynamische Preistabellen hinzuzufügen!

Wenn Sie bereits Kunde auf Lebenszeit sind oder während unseres Black Friday Sale ein neues Konto erworben oder ein Upgrade durchgeführt haben, können Sie dieses Layout jetzt herunterladen.

Holen Sie sich die exklusive Landing Page für den Black Friday Software Sale

Bevor Sie in diesen Anwendungsfall einsteigen, müssen Sie die exklusive Black Friday Software Sale Landing Page in die Hände bekommen, die Sie erhalten können, indem Sie ein neues Elegant Themes-Mitglied werden, Ihr bestehendes Konto aktualisieren oder bereits ein Lifetime-Mitglied bei uns sind. Wenn Sie bereits ein Lifetime-Mitglied sind, können Sie sich in unseren Mitgliederbereich einloggen und alle unsere exklusiven Landingpages hier herunterladen. Alle anderen müssen die Schaltfläche unten zum Kaufen oder Upgraden verwenden, bevor sie dem Rest unseres Tutorials folgen können.

Fordern Sie den Deal an, bevor er verschwindet!

So erstellen Sie dynamische Preistabellen mit Divi

Für den Rest dieses Beitrags gehen wir davon aus, dass Sie entweder unseren Black Friday-Deal genutzt haben oder bereits ein Lifetime-Mitglied sind und Zugriff auf die Black Friday Software Sale Landing Page haben

Nachdem Sie die neue Landing Page für den Softwareverkauf aus unserem Mitgliederbereich heruntergeladen haben, können Sie sich das Video unten ansehen, um zu sehen, wie einfach die Einrichtung ist. Wir empfehlen Ihnen auch, dieses Tutorial zu befolgen, um Ihre Website für die weitere Anpassung vorzubereiten.

In diesem Use-Case-Post zeigen wir Ihnen, wie Sie mit Divi und dem kostenlosen Advanced Custom Fields-Plugin dynamische Preistabellen erstellen. Das Erstellen dynamischer Preistabellen ist großartig, wenn Sie einen Kunden haben, der die Abonnementpreise häufig ändert und Sie ihm erlauben möchten, diese selbst zu ändern, ohne auf Divi zuzugreifen. Auf diese Weise können Sie sicherstellen, dass nichts auf der Seite selbst durcheinander gebracht wird, während Sie den Preis, die Beschreibung und die Mitgliedschaftsstufe eines bestimmten Pakets ändern können.

Vorschau

Bevor wir uns darauf einlassen, werfen wir einen kurzen Blick auf das Endergebnis.

Lass uns anfangen!

Plugin für erweiterte benutzerdefinierte Felder installieren

Das erste, was Sie tun müssen, ist das Plugin Advanced Custom Fields auf Ihrer WordPress-Website zu installieren, indem Sie zu Plugins> Neu hinzufügen> Nach dem Plugin suchen und es installieren .

Neue Feldgruppe erstellen

Sobald Sie das Plugin aktiviert haben, können Sie loslegen. Fügen Sie eine neue Feldgruppe hinzu.

Name + Standort

Geben Sie Ihrer neuen Feldgruppe einen Namen. Denken Sie daran, dass Sie am Ende dieses Teils des Tutorials drei Feldgruppen haben (entsprechend der Anzahl der Preistabellen), also stellen Sie sicher, dass Sie sie richtig benennen. Ändern Sie auch die Standorteinstellungen dieser Feldgruppe.

Feld für Mitgliedschaftsebene hinzufügen

Es ist Zeit, mit dem Hinzufügen von Feldern zu beginnen! Wir brauchen insgesamt drei. Fügen Sie mithilfe der folgenden Einstellungen ein Feld für die Mitgliedschaftsebene hinzu:

• Feldbezeichnung: Mitgliedschaftsstufe 1
• Feldname: member_level_1
• Feldtyp: Auswählen
• Auswahlmöglichkeiten: Inhalt Ihrer Wahl hinzufügen

Mitgliedsbeschreibungsfeld hinzufügen

Fahren Sie fort, indem Sie ein Feld für die Mitgliedschaftsbeschreibung hinzufügen.

• Feldbezeichnung: Mitgliedschaftsbeschreibung 1
• Feldname: member_description_1
• Feldtyp: Text

Preisfeld hinzufügen

Das letzte Feld, das Sie benötigen, ist ein Preisfeld.

• Feldbeschriftung: Preis 1
• Feldname: Preis_1
• Feldtyp: Text

Feldgruppe zweimal duplizieren & Name und Felder an die Preistabellennummer anpassen

Eine Feldgruppe entspricht einer Preistabelle auf unserer Seite. Nachdem wir die erste abgeschlossen haben, können wir sie zweimal klonen, um sicherzustellen, dass wir genügend Feldgruppen haben, um der Anzahl der Preistabellen auf unserer Seite zu entsprechen.

Anzahl aller Felder innerhalb der Gruppe ändern

Jedes der von Ihnen erstellten dynamischen Felder wird im Visual Builder angezeigt. Um sicherzustellen, dass Sie wissen, auf welche Informationen Sie verlinken, geben Sie den duplizierten Feldgruppen und ihren Feldern eine andere Nummer.

Erstellen Sie eine neue Seite mit der Landing Page für den Softwareverkauf von Divi

Im nächsten Teil dieses Tutorials fügen wir unserer Landing Page für den Softwareverkauf die dynamischen Preistabellen hinzu. Erstellen Sie eine neue Seite mit diesem Layout.

Dynamischen Inhalt zur Seite hinzufügen

Wechseln Sie zurück zum Backend dieser Seite und fügen Sie jeder Preistabelle dynamische Inhalte hinzu.

Neue Zeile unterhalb der Preistabelle auf Seite hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie den Visual Builder aktivieren und hier eine neue Zeile hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen, ohne noch Module hinzuzufügen, und ändern Sie die Größeneinstellungen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie einen benutzerdefinierten Rand hinzu.

• Oberer Rand: 100px
• Unterer Rand: 100px

CTA-Modul zu Spalte 1 hinzufügen

Titelfeld mit dynamischem Inhalt der Mitgliedschaftsstufe 1 verbinden

Das erste Modul, das wir in Spalte 1 benötigen, ist ein Call-to-Action-Modul. Verknüpfen Sie das Titelfeld mit dem Feld Mitgliedschaftsstufe 1, das Sie im vorherigen Teil dieses Tutorials erstellt haben.

Inhaltsbox mit Mitgliedschaftsbeschreibung verbinden 1 Dynamischer Inhalt

Verbinden Sie ebenso das Inhaltsfeld mit der Mitgliedschaftsbeschreibung 1.

Hintergrundfarbe

Gehen Sie dann zu den Hintergrundeinstellungen und ändern Sie die Hintergrundfarbe des CTA-Moduls.

• Hintergrundfarbe: #ffffff

Hintergrundbild

Fügen Sie auch ein dezentes Hintergrundbild hinzu. Sie finden das folgende Hintergrundbild in Ihrer Medienbibliothek, nachdem Sie die Landing Page für den Softwareverkauf hochgeladen haben:

• Hintergrundbild: software-sale-13.png

Texteinstellungen

Fahren Sie fort, indem Sie zu den Texteinstellungen gehen und die Textausrichtung des Moduls ändern.

• Textausrichtung: Links

Einstellungen für Titeltext

Um dem Designstil der Zielseite zu entsprechen, nehmen Sie auch einige Änderungen an den Einstellungen für den Titeltext vor.

• Titelschriftart: Rubik
• Gewicht der Titelschrift: Leicht
• Titeltextfarbe: #4258ff
• Titeltextgröße: 40px
• Höhe der Titelzeile: 1,3 em

Textkörpereinstellungen

Gleiches gilt für die Textkörpereinstellungen.

• Körperschriftart: Rubik
• Schriftgewicht des Körpers: Mittel
• Textkörperfarbe: rgba(0,0,0,0.34)
• Körpertextgröße: 15px
• Körperlinienhöhe: 1.8em

Abstand

Fügen Sie als nächstes etwas obere Polsterung hinzu.

• Obere Polsterung: 60px

Grenze

Und fügen Sie '8px' zu jeder der oberen Ecken des Moduls hinzu.

Box Schatten

Zu guter Letzt fügen wir einen subtilen Kastenschatten hinzu, um der Seite Tiefe zu verleihen.

• Vertikale Position des Kastenschattens: 50px
• Stärke der Box-Schattenunschärfe: 100px
• Schattenfarbe: rgba(66,88,255,0.2)

Textmodul zu Spalte 1 hinzufügen

Verbinden Sie die Inhaltsbox mit dem dynamischen Inhalt von Preis 1

Fahren Sie fort und fügen Sie ein Textmodul direkt unter dem Call-to-Action-Modul in Spalte 1 hinzu. Verknüpfen Sie das Inhaltsfeld dieses Moduls mit dem dynamischen Inhalt Preis 1.

Hintergrundfarbe

Fahren Sie fort, indem Sie die Hintergrundfarbe dieses Moduls ändern.

• Hintergrundfarbe: #ffffff

Texteinstellungen

Ändern Sie auch die Texteinstellungen.

• Textschriftart: Rubik
• Schriftstärke des Textes: Leicht
• Textfarbe: #4258ff
• Textgröße: 70px
• Textzeilenhöhe: 1em

Abstand

Fügen Sie als nächstes einige benutzerdefinierte Abstandswerte hinzu.

• Untere Polsterung: 60px
• Linke Polsterung: 40px

Grenze

Fahren Sie fort, indem Sie zu den Randeinstellungen gehen und '8px' an beiden unteren Ecken hinzufügen.

Box Schatten

Geben Sie diesem Textmodul zu guter Letzt auch noch einen Kastenschatten.

• Vertikale Position des Kastenschattens: 80px
• Stärke der Box-Schattenunschärfe: 100px
• Schattenfarbe: rgba(66,88,255,0.2)

Ziehen Sie das Schaltflächenmodul in Spalte 1

Das letzte Modul, das wir in der ersten Spalte benötigen, ist ein Button-Modul. Klonen Sie eines der Schaltflächenmodule, die Sie in der vorherigen Zeile finden, und platzieren Sie es in Spalte 1.

Abstand ändern

Öffnen Sie die Einstellungen des Schaltflächenmoduls und fügen Sie einen benutzerdefinierten Rand hinzu.

• Oberer Rand: 30px
• Unterer Rand: 50px

Alle Module in Spalte 1 klonen und in verbleibende Spalten platzieren

Um Zeit zu sparen, klonen wir alle drei Module in Spalte 1 zweimal und platzieren die Duplikate in den verbleibenden Spalten der Zeile.

Module in Spalte 2 ändern

CTA-Modul

Titelfeld mit dynamischem Inhalt der Mitgliedschaftsstufe 2 verbinden

Wir müssen die Duplikate ändern, beginnend mit dem CTA-Modul in der zweiten Spalte. Verbinden Sie das Titelfeld mit dem dynamischen Inhalt der Mitgliedschaftsstufe 2.

Inhaltsbox mit Mitgliedschaftsbeschreibung verbinden 2 Dynamischer Inhalt

Machen Sie dasselbe für das Inhaltsfeld.

Hintergrund mit Farbverlauf hinzufügen

Fügen Sie dem Modul als nächstes einen Verlaufshintergrund hinzu.

• Farbe 1: #6959ff
• Farbe 2: #c1bfff
• Steigungsrichtung: 15deg
• Startposition: 22%
• Endposition: 95%

Titeltextfarbe ändern

Ändern Sie auch die Farbe des Titeltexts.

• Titeltextfarbe: #ffffff

Textkörperfarbe ändern

Gleiches gilt für die Textkörperfarbe.

• Textkörperfarbe: #ffffff

Abstand ändern

Um diese spezielle Preistabelle ins Rampenlicht zu rücken, werden wir auch mit den Abstandswerten herumspielen.

• Oberer Rand: -50px (Desktop), 0px (Tablet & Telefon)
• Obere Polsterung: 100px

Textmodul

Verbinden Sie die Inhaltsbox mit dem dynamischen Inhalt von Price 2

Fahren Sie fort, indem Sie das Textmodul in Spalte 2 öffnen und das Inhaltsfeld mit dem dynamischen Inhalt Preis 2 verknüpfen.

Hintergrundfarbe ändern

Ändern Sie als nächstes die Hintergrundfarbe dieses Moduls.

• Hintergrundfarbe: #6959ff

Textfarbe ändern

Und ändern Sie die Textfarbe in Weiß.

• Textfarbe: #ffffff

Abstand ändern

Ändern Sie zu guter Letzt die benutzerdefinierten Abstandswerte in den Abstandseinstellungen.

• Untere Polsterung: 120px
• Linke Polsterung: 40px

Module in Spalte 3 ändern

CTA-Modul

Titelfeld mit dynamischem Inhalt der Mitgliedschaftsstufe 3 verbinden

Wir müssen auch die Module in Spalte 3 ändern. Verknüpfen Sie das Titelfeld mit dem dynamischen Inhalt der Mitgliedschaftsstufe 3.

Inhaltsbox mit Mitgliedschaftsbeschreibung verbinden 3 Dynamischer Inhalt

Gleiches gilt für die Inhaltsbox.

Hintergrund mit Farbverlauf hinzufügen

Fügen Sie dann dem Modul einen Verlaufshintergrund hinzu.

• Farbe 1: #c87cff
• Farbe 2: #ffbcf8
• Verlaufsrichtung: 18deg
• Startposition: 22%
• Endposition: 95%

Titeltextfarbe ändern

Ändern Sie die Farbe des Titeltexts in Weiß.

• Titeltextfarbe: #ffffff

Textkörperfarbe ändern

Machen Sie dasselbe für die Textkörperfarbe.

• Textkörperfarbe: #ffffff

Textmodul

Verbinden Sie die Inhaltsbox mit dem dynamischen Inhalt von Price 3

Fahren Sie fort, indem Sie das Textmodul in Spalte 3 öffnen und auch hier den dynamischen Inhalt ändern.

Hintergrundfarbe ändern

Fügen Sie als nächstes eine andere Hintergrundfarbe hinzu.

• Hintergrundfarbe: #c87cff

Textfarbe ändern

Zu guter Letzt ändern Sie die Textfarbe in Weiß und Sie sind fertig! Sie haben jetzt drei vollständig dynamische Preistabellen auf Ihrer Seite!

• Textfarbe: #ffffff

Abschließende Gedanken

Dieser Anwendungsfall ist Teil unseres Black Friday Deals, bei dem wir 6 KOSTENLOSE Landingpages in limitierter Auflage mit Black Friday-Kunden und Mitgliedern auf Lebenszeit teilen. Wenn Sie in diesen Tagen unserer selbstbewussten Community beitreten und Mitglied werden, erhalten Sie:

• 25% RABATT AUF ALLES
• Alle 6 Landingpages kostenlos
• Zugriff auf unsere tollen Themes und Plugins
• Bonuspreise

Nutzen Sie die Chance und werden Sie noch heute Mitglied!