So erstellen Sie horizontale Preistabellen mit Divi

Horizontale Preistabellen sind eine großartige Möglichkeit, Produkte mit vielen Funktionen zu bewerben. Und mit dem neuen fünfspaltigen Layout von Divi ist dies überraschend einfach. Wie bei jedem Layout mit fünf oder mehr Spalten besteht jedoch die Herausforderung darin, das Layout reaktionsschnell zu gestalten, damit es auch auf Mobilgeräten gut aussieht. In diesem Tutorial zeige ich Ihnen, wie Sie horizontale Preistabellen erstellen, die auf allen Geräten gut aussehen. Und ich zeige Ihnen sogar, wie einfach es ist, Ihre horizontalen Preistabellen zu duplizieren und neue Designfunktionen wie "Suchen und Ersetzen" zu verwenden, um das Farbschema jeder Ihrer Tabellen mit wenigen Klicks schnell zu ändern.

Lass uns anfangen.

Vorgeschmack

Einstieg

Für dieses Tutorial benötigen Sie nur Divi. Und wir werden den Visual Builder verwenden. Da wir die Tabellen von Grund auf neu erstellen, müssen Sie eine neue Seite erstellen, den visuellen Builder bereitstellen und dann die Option „Layout von Grund auf erstellen“ auswählen.

Danach sind Sie startbereit. Lass es uns tun!

Einrichten der fünfspaltigen Zeile für Ihre horizontalen Preistabellen

Für den Anfang geben wir dem Abschnitt, der bereits im Visual Builder auf uns wartet, ein fünfspaltiges Layout.

Bevor wir mit dem Hinzufügen von Modulen beginnen, aktualisieren wir die Abschnittseinstellungen so, dass sie eine benutzerdefinierte Breite ohne obere oder untere Auffüllung haben.

Breite: 1200px
Abschnittsausrichtung: Mitte
Benutzerdefiniertes Padding: 0px oben, 0px unten

Gehen Sie dann zu den Zeileneinstellungen, um Ihrer Zeile und auch den drei mittleren Spalten wie folgt schnell eine Hintergrundfarbe zu geben:

Hintergrundfarbe: #00cbc9
Spalte 2 Hintergrundfarbe: #00cbc9
Spalte 3 Hintergrundfarbe: #eeeeee
Spalte 4 Hintergrundfarbe: #eeeeee

Aktualisieren Sie dann die Größe wie folgt:

Machen Sie diese Zeile in voller Breite: JA
Dachrinnenbreite: 1
Spaltenhöhen ausgleichen: JA

Wir müssen gleich zu den Zeileneinstellungen zurückkehren, um den Abstand zu aktualisieren, aber jetzt fangen wir an, die Klappentexte zu jeder unserer Spalten für den Inhalt hinzuzufügen.

Füllen der Spalten mit Inhaltsmodulen

Der Titel des Produkts

Fügen Sie in der ersten Spalte im Inhaltsfeld (unter der Registerkarte Text) einen Textbaustein mit der folgenden Überschrift hinzu:

<h2>Starter</h2>

Dies dient als Ort für den Titel Ihres Plans oder Produkts, das Sie anbieten. In diesem Beispiel wäre dies eine Art „Starter“-Plan.

Aktualisieren Sie dann die folgenden Designeinstellungen:

Überschrift 2 Schriftstil: TT
Überschrift 2 Textfarbe: #ffffff
Überschrift 2 Textgröße: 38px
Benutzerdefinierte Polsterung (Desktop): 90 % oben, 90 % unten, 10 % links
Benutzerdefinierte Polsterung (Tablet): 30% oben, 30% unten

Hinzufügen von Klappentexten für Überschriften von Feature-Kategorien

Fügen Sie in der zweiten Spalte ein Klappenmodul hinzu. Löschen Sie dann den Fülltext im Inhaltsfeld und lassen Sie den Titeltext in Ruhe. Wählen Sie dann ein Symbol anstelle eines Bildes und aktualisieren Sie das Symbol mit einem Ihrer Wahl.

Wechseln Sie zur Registerkarte Design und aktualisieren Sie die restlichen Einstellungen wie folgt:

Symbolfarbe: #00cbc9
Bild-/Symbolplatzierung: Links
Titeltextgröße: 16px
Benutzerdefinierte Polsterung: 2vw Bottom
Breite des unteren Zeilenrands: 4px
Farbe des unteren Rands: #cccccc

Da dieses Klappendesign in den Spalten 2, 3 und 4 als Feature-Kategorietitel verwendet wird, können Sie das Klappenmodul kopieren und in die zweite und dritte Spalte einfügen.

Mir ist aufgefallen, dass der Abstand gerade nicht so toll aussieht. Und Sie könnten versucht sein, auf Modulebene etwas Abstände hinzuzufügen, aber für dieses Design finde ich es einfacher, Abstandsanpassungen auf Spaltenebene (unter Zeileneinstellungen) vorzunehmen. Dazu kommen wir später.

Hinzufügen von Textmodulen für eine Liste von Funktionsbeschreibungen

Weiter Fügen Sie unter dem Klappentext in der zweiten Spalte ein Textmodul hinzu. Fügen Sie dann den folgenden Tabellen-HTML-Code in das Inhaltsfeld ein:

• Beschreibung der Funktion geht hier.
• Beschreibung der Funktion geht hier.
• Beschreibung der Funktion geht hier.
• Beschreibung der Funktion geht hier.

Stiltyp der ungeordneten Liste: Quadrat
Einzug der ungeordneten Listenelemente: 4px
Benutzerdefinierte Polsterung: 20 Pixel oben, 20 Pixel unten, 5 % links, 5 % rechts

Kopieren Sie nun wie bei den Klappentexten das Textmodul und fügen Sie es unter jedem der Klappentextmodule in den Spalten 3 und 4 ein.

Hinzufügen des Preises und der Schaltfläche zur letzten Spalte

In der letzten Spalte (Spalte fünf) verwende ich ein Preistabellenmodul, um das Design des Preistextes mit dem Dollarzeichen zu erhalten. Das ist alles, was wir wirklich vom Preistabellen-Modul brauchen, also werde ich den Rest der Inhalts- und Designelemente ausnehmen und den Preistext und das Dollarzeichen belassen. Ich könnte die Schaltfläche verwenden, die im Modul Preistabellen enthalten ist, aber es war etwas schwieriger, auf dem Tablet reaktionsschnell zu zaubern (Sie werden später sehen, was ich meine). Also werde ich auch ein Tastenmodul verwenden.

Fahren Sie fort und fügen Sie das Modul Preistabellen in die fünfte Spalte ein. Löschen Sie eine der beiden standardmäßig enthaltenen Tabellen, indem Sie auf das Papierkorbsymbol rechts neben einer von ihnen klicken.

Entfernen Sie dann die Hintergrundfarbe, indem Sie einen vollständig transparenten Farbcode hinzufügen.

Hintergrundfarbe: rgba(255,255,255,0)

Aktualisieren Sie dann Folgendes:

Hintergrundfarbe der Tabellenüberschrift: rgba(255,255,255,0)
Währung & Häufigkeit Textfarbe: #ffffff
Währung & Häufigkeit Textgröße: 30px
Preistextfarbe: #ffffff
Rahmenbreite: 0px
Benutzerdefinierter Rand (Tablet): -100 % rechts
Benutzerdefinierter Rand (Smartphone): 0% rechts
Benutzerdefiniertes Auffüllen: 0 Pixel oben, 10 Pixel unten, 0 Pixel links, 0 Pixel rechts

Gehen Sie nun zu den einzelnen Tabelleneinstellungen, indem Sie auf das Zahnradsymbol links im Anzeigemenü der einzelnen Tabellen klicken.

Löschen Sie nun den Standardinhalt für Titel, Untertitel und Inhalt. Dadurch bleiben nur der Währungs- und Preistext übrig.

Jetzt weiß ich, was du jetzt denkst. Was tun mit dieser Grenzlinie unter dem Preistext? Nun, es gibt einen kleinen Ausschnitt aus benutzerdefiniertem CSS dafür. Gehen Sie zur Registerkarte "Erweitert" und fügen Sie das folgende CSS zum Eingabefeld "Preise oben" hinzu:

Preise oben:

border: none;

So können Sie die Preistabelle nur für den Preistext und das Währungssymbol erfolgreich ausbauen!

Fügen Sie für die Schaltfläche ein Schaltflächenmodul unter dem Modul Preistabellen hinzu und aktualisieren Sie Folgendes:

Tastenausrichtung: Mitte
Textfarbe: Hell
Benutzerdefinierter Rand (Tablet): -100 % rechts
Benutzerdefinierter Rand (Smartphone): 0% rechts

Die benutzerdefinierte Marge entspricht der Marge, die wir dem Preistabellenmodul hinzugefügt haben, um ein Modul in voller Breite auf dem Tablet zu erhalten. Da das fünfspaltige Layout auf dem Tablet die fünfte Spalte auf der linken Seite eines zweispaltigen Layouts platziert, wird das Modul durch Ziehen des Moduls um -100 % nach rechts auf die volle Breite der Zeile gezwungen.

Hinzufügen des Pfeildesigns und des responsiven Spaltenabstands

Hinzufügen des Pfeils durch Überlagern von Farbverläufen

Um den Pfeil-Design-Effekt in der ersten Spalte zu erzeugen, werden wir zwei Verlaufshintergründe übereinander legen. Der erste Verlaufshintergrund wird auf Spaltenebene hinzugefügt. Die nächste werden wir später auf Modulebene hinzufügen.

Um den Farbverlaufshintergrund hinzuzufügen, gehen Sie zu den Zeileneinstellungen und fügen Sie Folgendes hinzu:

Spalte 1 Farbverlauf Hintergrund Linke Farbe: rgba(255,255,255,0)
Spalte 1 Gradient Background Right color: #eeeeee (diese sollte der Hintergrundfarbe von Spalte 2 entsprechen)
Verlaufsrichtung: -245deg
Startposition: 75%
Endposition: 0%

Speichern Sie die Einstellungen und springen Sie zu den Textmoduleinstellungen in Spalte eins. Hier fügen wir die zweite Ebene des Hintergrundverlaufs hinzu, um den Pfeil zu vervollständigen. Aktualisieren Sie Folgendes:

Spalte 1 Hintergrund mit Farbverlauf Linke Farbe: #eeeeee
Spalte 1 Farbverlauf Hintergrund Rechte Farbe: rgba(255,255,255,0)
Verlaufsrichtung: 245deg
Startposition: 25%
Endposition: 0%

Beachten Sie, dass die Werte einander gleich gegenüberliegen. Zum Beispiel hat sich die Farbreihenfolge geändert, die 245deg hat sich von negativ auf positiv geändert und 75 % sind jetzt 25 % (die Differenz). Auf diese Weise werden die Seiten der Pfeilspitze perfekt symmetrisch.

Abstand der Zeilen und Spalten

Gehen Sie zurück zu den Zeileneinstellungen und passen Sie den Abstand unserer Zeilen und Spalten an, indem Sie Folgendes aktualisieren:

Benutzerdefiniertes Auffüllen: 0 Pixel oben, 0 Pixel unten, 0 Pixel links, 0 Pixel rechts
Benutzerdefinierte 2 Polsterung: 5 % oben, 5 % unten, 2 % links, 2 % rechts
Benutzerdefinierte 3 Polsterung: 5 % oben, 5 % unten, 2 % links, 2 % rechts
Benutzerdefinierte 4 Polsterung: 5 % oben, 5 % unten, 2 % links, 2 % rechts
Benutzerdefinierte 5 Polsterung: 10 % oben, 10 % unten

Sie fragen sich vielleicht, warum ich nicht einfach eine 2 Rinnenbreite verwendet habe und damit fertig bin. Das liegt daran, dass ich den Platz innerhalb der Spalten mit Text so weit wie möglich maximieren wollte, um die Lesbarkeit auf allen Geräten zu verbessern. Jedes bisschen Platz, das wir sparen können, ist wichtig. Aus diesem Grund werden die Ränder zwischen den Spalten mit linken und rechten Padding-Prozentsätzen erstellt.

Duplizieren der Tabelle für neue Tabellen und Farbschemata

Offensichtlich möchten Sie mehrere horizontale Preistabellen haben, die Benutzer vergleichen können. Um die zweite Preistabelle zu erstellen, duplizieren Sie den gesamten Abschnitt, der die erste von Ihnen erstellte Tabelle enthält.

Öffnen Sie dann die Zeileneinstellungen, bewegen Sie den Mauszeiger über die Hintergrundfarbe und klicken Sie auf Suchen und Ersetzen.

Wählen Sie unter „Innerhalb“ „Dieser Abschnitt“.
Fügen Sie unter "Breite ersetzen" die Farbe hinzu: #f84f51
Aktivieren Sie dann das Kontrollkästchen, um alle im Abschnitt gefundenen Werte zu ersetzen (nicht nur die Hintergrundfarbe).

Klicken Sie dann auf Ersetzen und beobachten Sie, wie die Magie geschieht. Dies ist eine schnelle und einfache Möglichkeit, alle Instanzen der vorherigen Farbe durch eine neue Farbe zu ändern.

Vergessen Sie nicht, die Zeileneinstellungen vor dem Beenden zu speichern, um die Änderungen zu speichern.

Jetzt haben Sie eine neue Tabelle mit einem neuen Farbschema.

Wiederholen Sie diesen Vorgang erneut, um eine weitere Tabelle mit der Farbe hinzuzufügen: #bdc958

Erstellen einer empfohlenen Tabelle

Um eine Ihrer Tabellen hervorzuheben und hervorzuheben, können Sie dem Abschnitt, der die Tabelle enthält, einen Kastenschatten hinzufügen und die graue Farbe für Spaltenhintergründe und -verläufe in eine schöne weiße Farbe ändern.

Gehen Sie dazu zu den Abschnittseinstellungen für den zweiten Abschnitt (den mittleren) und aktualisieren Sie Folgendes:

Box Shadow: siehe Screenshot
Vertikale Position des Boxschattens: 0px
Stärke der Box-Schattenunschärfe: 80px

Um die graue Hintergrundfarbe zu ersetzen, gehen Sie zu den Zeileneinstellungen und suchen Sie die Hintergrundfarbe von Spalte 2 (#eeeeee). Klicken Sie mit der rechten Maustaste darauf und klicken Sie auf "Suchen und Ersetzen". Das Update folgendes:

Wählen Sie unter „Innerhalb“ „Dieser Abschnitt“.
Fügen Sie unter „Breite ersetzen“ die Farbe hinzu: #ffffff
Aktivieren Sie dann das Kontrollkästchen, um alle im Abschnitt gefundenen Werte zu ersetzen (nicht nur die Hintergrundfarbe).
Klicken Sie dann auf „Ersetzen“.

Verwenden von Suchen und Ersetzen zum Testen von Schriftarten

Wenn Sie in Ihrer Tabelle eine andere Schriftart verwenden möchten, können Sie mit der Funktion "Suchen und Ersetzen" problemlos verschiedene Schriftarten testen. Ich habe absichtlich die Standardschriftart für alle Module belassen, um diesen Prozess reibungslos zu gestalten. Um die Schriftart für Ihre gesamte Tabellenseite zu ändern, müssen Sie lediglich die Einstellungen des Textmoduls in der ersten Spalte eines beliebigen Tabellenabschnitts öffnen (es kann tatsächlich jedes Modul sein, das die Standardschriftart auf Ihrer Seite verwendet). Klicken Sie dann mit der rechten Maustaste auf die verwendete Überschrift 2 Schriftart und wählen Sie "Suchen und Ersetzen". Aktualisieren Sie dann Folgendes:

Behalten Sie unter „Innerhalb“ „Diese Seite“ bei.
Wählen Sie unter „Breite ersetzen“ eine Schriftart aus (ich verwende Roboto Condensed).
Aktivieren Sie dann das Kontrollkästchen, um alle im Abschnitt gefundenen Werte zu ersetzen (oder Sie können es nicht aktivieren, um alle h2-Schriften zu ersetzen).
Klicken Sie dann auf „Ersetzen“.

Jetzt wurden alle Schriftarten auf der gesamten Seite geändert.

Das ist es! Jetzt sind die horizontalen Preistabellen vollständig.

Schauen wir uns das Ergebnis an.

Auch die 5-Säulen-Verstellung auf Tablet und Smartphone funktioniert wunderbar.

Abschließende Gedanken

Das fünfspaltige Layout von Divi zusammen mit den leistungsstarken Designfunktionen des Visual Builder ermöglicht es Ihnen, einige schöne horizontale Preistabellen zu erstellen. Und das Anpassen der Farben und Schriftarten mithilfe von Suchen und Ersetzen ist eine große Zeitersparnis und verbessert den Designprozess noch mehr. Ich hoffe, dass Sie das Tutorial sowohl informativ als auch inspirierend finden.

Ich freue mich von Ihnen in den Kommentaren zu hören.

Danke schön!