So gestalten Sie eine schöne Preistabelle in Divi

Preistabellen sind oft der Haupt-CTA einer Seite. Deshalb ist es wichtig, sie richtig zu stylen. Mit Divi können Sie viele Runden drehen und Preistabellen genau so erstellen, wie Sie sie sich vorstellen. Um Ihnen einige Denkanstöße zu geben, haben wir eine beeindruckende Preistabelle erstellt, die Sie für jede Art von Website verwenden können, an der Sie arbeiten. Wir führen Sie durch die Erstellung des Ergebnisses von A bis Z, indem Sie nur die integrierten Optionen von Divi verwenden.

Lasst uns anfangen!

Vorschau

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

Desktop

Handy, Mobiltelefon

Laden Sie die Bilder KOSTENLOS herunter

Um die Bilder, die in diesem Tutorial verwendet werden, in die Hände zu bekommen, müssen Sie es zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

So gestalten Sie eine schöne Preistabelle in Divi

Abonnieren Sie unseren Youtube-Kanal

Beginnen wir mit dem Erstellen!

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Erstellen Sie eine neue Seite und fügen Sie einen regulären Abschnitt mit dem folgenden Verlaufshintergrund hinzu:

• Farbe 1: #ffffff
• Farbe 2: #353272
• Startposition: 50%
• Endposition: 50%

Abstand

Gehen Sie dann zu den Abstandseinstellungen des Abschnitts und ändern Sie die benutzerdefinierten Werte für Rand und Abstand.

• Unterer Rand: 50 Pixel (Desktop), 20 Pixel (Tablet und Telefon)
• Linker Rand: 50 Pixel (Desktop), 20 Pixel (Tablet und Telefon)
• Rechter Rand: 50px (Desktop), 20px (Tablet & Telefon)
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

Nachdem Sie die Abschnittseinstellungen geändert haben, können Sie mit der folgenden Spaltenstruktur eine neue Zeile hinzufügen:

Größe

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

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

Abstand

Gehen Sie dann zu den Abstandseinstellungen und fügen Sie einige benutzerdefinierte Abstandswerte hinzu.

• Obere Polsterung: 94px
• Untere Polsterung: 177px
• Linke Polsterung: 150px (Desktop), 30px (Tablet & Telefon)
• Rechte Polsterung: 150px (Desktop), 30px (Tablet & Telefon)
• Spalte 1, 2 & 3 Linker Abstand: 10px
• Spalte 1, 2 & 3 Rechte Padding: 10px

Textmodul Nr. 1 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Zeit, Module hinzuzufügen! Wir passen die Preistabelle an, die wir erstellen möchten, indem wir verschiedene Module verwenden. Das erste Modul, das wir benötigen, ist ein Textmodul. Fügen Sie im Inhaltsfeld den Namen des ersten Mitgliedschaftstyps hinzu.

Hintergrundfarbe

Nachdem Sie den Inhalt hinzugefügt haben, gehen Sie zu den Hintergrundeinstellungen und fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Hintergrundbild

Wechseln Sie zur Registerkarte Hintergrundbild und laden Sie die Datei ' divi-beautiful-pricing-table-background-pattern-1.png ' hoch , die Sie im Download-Ordner finden, der am Anfang dieses Beitrags freigegeben wurde.

• Hintergrundbildgröße: Cover
• Position des Hintergrundbilds: Oben Mitte
• Hintergrundbild wiederholen: Keine Wiederholung

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen.

• Schriftstärke des Textes: Ultra Bold
• Textfarbe: #ffffff
• Textgröße: 80px
• Text Buchstabenabstand: -3px
• Textzeilenhöhe: 1em

Abstand

Fügen Sie einige benutzerdefinierte Werte für Rand und Auffüllung hinzu.

• Obere Marge: 5vw (Desktop), 0vw (Tablet & Telefon)
• Obere Polsterung: 20px
• Untere Polsterung: 200px

Grenze

Fahren Sie fort, indem Sie '20px' in die obere linke und rechte Ecke einfügen.

Box Schatten

Um das Ganze abzurunden, geben Sie dem Textmodul einen subtilen Kastenschatten.

• Vertikale Position des Boxschattens: -20px
• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -10px
• Schattenfarbe: rgba(0,0,0,0.15)

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Das zweite Modul, das wir in Spalte 1 benötigen, ist ein Button-Modul. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Tastenausrichtung

Gehen Sie dann zu den Ausrichtungseinstellungen und ändern Sie die Ausrichtung auf Mitte.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Wir fahren fort, indem wir einige Änderungen am Aussehen der Schaltfläche in den Schaltflächeneinstellungen vornehmen.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextfarbe: #ffffff
• Farbe 1: #6932ff
• Farbe 2: #30acf4
• Verlaufsrichtung: 100deg

• Breite des Tastenrahmens: 0px
• Tastenabstand der Buchstaben: -2px
• Schriftstärke: Ultra Bold

Abstand

Als nächstes fügen Sie der Schaltfläche etwas Auffüllung hinzu, damit sie gut aussieht, und wenden Sie einen negativen oberen Rand an, um eine Überlappung mit dem vorherigen Modul in der Spalte zu erzeugen.

• Oberer Rand: -54px
• Obere Polsterung: 10px
• Untere Polsterung: 10px
• Linke Polsterung: 30px
• Rechte Polsterung: 30px

Box Schatten

Zu guter Letzt fügen Sie einen subtilen Boxschatten hinzu.

• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: -14px
• Schattenfarbe: rgba(0,0,0,0.3)

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das nächste Modul, das wir brauchen, ist ein weiteres Textmodul mit dem Preis des Mitgliedschaftstyps.

Hintergrundfarbe

Nachdem Sie den Preis hinzugefügt haben, gehen Sie zu den Hintergrundeinstellungen und wenden Sie eine weiße Hintergrundfarbe an.

• Hintergrundfarbe: #ffffff

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen.

• Schriftstärke des Textes: Ultra Bold
• Textfarbe: rgba(0,0,0,0.05)
• Textgröße: 120px
• Textzeilenhöhe: 1em

Abstand

Und wenden Sie einige benutzerdefinierte Abstandswerte in den Abstandseinstellungen an.

• Obere Polsterung: 100px
• Untere Polsterung: 100px
• Linke Polsterung: 80px

Grenze

Gehen Sie dann zu den Rahmeneinstellungen und fügen Sie '30px' in die untere linke und rechte Ecke ein.

Box Schatten

Geben Sie dem Modul zu guter Letzt einen Box-Schatten.

• Horizontale Position des Kastenschattens: 0px
• Vertikale Position des Kastenschattens: 2px
• Stärke der Box-Schattenunschärfe: 80px
• Stärke der Box-Schattenausbreitung: 0px
• Schattenfarbe: rgba(0,0,0,0.21)

Textmodul #3 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das nächste und letzte Modul, das wir in Spalte 1 benötigen, ist ein weiteres Textmodul. Fügen Sie den Preis des Mitgliedschaftstyps zum Inhaltsfeld hinzu.

Texteinstellungen

Ändern Sie als nächstes die Texteinstellungen.

• Schriftstärke des Textes: Ultra Bold
• Textfarbe: #000000
• Textgröße: 50px
• Textzeilenhöhe: 1em

Abstand

Und erstellen Sie eine Überlappung zwischen diesem Modul und dem vorherigen, indem Sie mit den benutzerdefinierten Abstandswerten herumspielen.

• Oberer Rand: -180px
• Unterer Rand: 180px (Tablet & Telefon)
• Linke Polsterung: 100px

Alle Module in Spalte 1 zweimal klonen und Duplikate in die verbleibenden Spalten platzieren

Sobald Sie mit dem Ändern der Module in Spalte 1 fertig sind, können Sie jedes der Module zweimal klonen und die Duplikate in die beiden verbleibenden Spalten einfügen.

Inhalt der Module in Spalte ändern

Ändern Sie den Inhalt der Duplikate entsprechend den beiden anderen Mitgliedschaftstypen, die Sie auf Ihrer Website teilen.

Preistabelle in Spalte 2 ändern

Hintergrundbild von Textmodul #1 ändern

Wir heben auch die mittlere Preistabelle hervor. Öffnen Sie das erste Textmodul in Spalte 2 und ändern Sie das Hintergrundbild in die Datei ' divi-beautiful-pricing-table-background-pattern-2.png ', die Sie im Download-Ordner finden.

Oberen Rand von Textmodul Nr. 1 entfernen

Um diesen Mitgliedschaftstyp hervorzuheben, entfernen wir den oberen Rand des ersten Textmoduls in den Abstandseinstellungen.

Schaltflächenhintergrund mit Farbverlauf ändern

Wir passen das neue Hintergrundbild auch an, indem wir einen anderen Verlaufshintergrund für das Schaltflächenmodul verwenden.

• Farbe 1: #fb32ff
• Farbe 2: #ff304f
• Verlaufsrichtung: 100deg

Vorschau

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

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie eine schöne Preistabelle für Ihr nächstes Divi-Projekt gestalten können. Wir haben Sie Schritt für Schritt durch das Tutorial geführt und nur mit den integrierten Optionen von Divi ein beeindruckendes Ergebnis erzielt! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie bitte einen Kommentar im Kommentarbereich unten.