Mit Divi . Spalten in Preispläne umwandeln

Die neuen Spaltenoptionen von Divi haben eine Menge neuer Designmöglichkeiten in unsere Arbeitsabläufe gebracht. Sie helfen dabei, mehrere Module zu vereinen, ohne eine einzelne Zeile CSS-Code berühren zu müssen. In diesem Beitrag werden wir Spalten nur mit den integrierten Optionen von Divi in ​​Preispläne umwandeln. Wir werden auch mit den Optionen für die Säulen-Hover-Transformation herumspielen, um einige atemberaubende Hover-Effekte zu erzielen. Sie können die JSON auch kostenlos herunterladen!

Lasst uns anfangen.

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie das Layout der Spaltenpreispläne KOSTENLOS herunter

Um das Layout der kostenlosen Spalten-Preispläne 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!

Beginnen wir mit der Neuerstellung!

Abonnieren Sie unseren Youtube-Kanal

Neuen Abschnitt hinzufügen

Hintergrund mit Farbverlauf

Fügen Sie der Seite, an der Sie gerade arbeiten, einen neuen regulären Abschnitt hinzu und öffnen Sie die Abschnittseinstellungen. Gehen Sie zu den Hintergrundeinstellungen und fügen Sie einen Hintergrund mit linearem Farbverlauf hinzu:

• Farbe 1: #ededed
• Farbe 2: #ffffff
• Startposition: 30%
• Endposition: 30%

Abstand

Wir fügen dem Abschnitt auch einige obere und untere Polsterung hinzu.

• Obere Polsterung: 200px
• Untere Polsterung: 200px

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Ohne noch Module hinzuzufügen, öffnen Sie die Zeileneinstellungen, gehen Sie zur Registerkarte Erweitert und ändern Sie die Größeneinstellungen entsprechend:

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Breite: 80% (Desktop & Tablet), 90% (Telefon)
• Max. Breite: 1400px (Desktop), 90 % (Tablet), 100 % (Telefon)

Spalte 1 Einstellungen

Wir müssen auch die Spalteneinstellungen ändern, beginnend mit der ersten. Öffnen Sie die Spalte 1 Einstellungen.

Hintergrund mit Farbverlauf

Wenden Sie den folgenden Verlaufshintergrund auf Spalte 1 an:

• Farbe 1: #f7f7f7
• Farbe 2: #ffffff
• Verlaufstyp: Radial
• Radiale Richtung: Unten
• Startposition: 31%
• Endposition: 31%

Grenze

Fügen Sie der Spalte auch den Randradius '20px' hinzu.

Box Schatten

Und um der Seite etwas Tiefe zu verleihen, fügen wir auch einen subtilen Kastenschatten hinzu.

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

Standard-Transformationsskala

Wie Sie in der Vorschau dieses Beitrags feststellen können, sind die Spalten leicht verändert. Gehen Sie zu den Transformationseinstellungen und stellen Sie sicher, dass die Transformationsskalierungsoption im Standardzustand "100%" bleibt.

• Unten: 100%
• Rechts: 100%

Hover-Transformationsskala

Ändern Sie die Transformationsskalierungswerte beim Bewegen des Mauszeigers.

• Unten: 120 %
• Rechts: 120 %

Standard-Transformationsübersetzung

Wir schieben die Spalte auch auf dem Desktop mit den Transformationsübersetzungseinstellungen leicht nach rechts. Fügen Sie die folgenden Eingaben hinzu:

• Unten: 34 Pixel (Desktop), 0 Pixel (Tablet und Telefon)
• Rechts: 0px

Hover Transformieren Übersetzen

Bringen Sie die Transformationswerte beim Bewegen des Mauszeigers auf den Normalwert zurück.

• Unten: 0px
• Rechts: 0px

Standard-Transformationsdrehung

Gehen Sie zu den Rotationseinstellungen für die Transformation und fügen Sie den folgenden Wert links hinzu:

• Links: 352deg (Desktop), 0deg (Tablet & Telefon)

Hover Transformieren Drehen

Bringen Sie den Wert beim Hover auf '0deg' zurück.

• Links: 0 Grad

Überläufe

Später in diesem Beitrag fügen wir unten in der Spalte eine Schaltfläche hinzu. Diese Schaltfläche überlappt den unteren Rand der Spalte. Um dies zu ermöglichen, müssen wir die Überläufe unserer Spalte sichtbar machen.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Standard-Z-Index

Ändern Sie als nächstes den Z-Index der Spalte über verschiedene Bildschirmgrößen hinweg. Dies hilft uns, das Stapeln in Ordnung zu halten.

• Z-Index: 9 (Desktop), 11 (Tablet & Telefon)

Hover-Z-Index

Beim Hover möchten wir, dass die Spalte über den anderen angezeigt wird. Um dies zu erreichen, erhöhen wir den z-Index beim Hover.

• Z-Index: 11

Übergänge

Wir erstellen auch einen reibungslosen Übergang, indem wir die Übergangsdauer in den Übergangseinstellungen erhöhen.

• Übergangsdauer: 500ms

Spalte 2 Einstellungen

Auf zur zweiten Spalte! Fahren Sie fort und öffnen Sie die Spalteneinstellungen.

Hintergrund mit Farbverlauf

Wenden Sie die folgenden Verlaufshintergrundeinstellungen an:

• Farbe 1: #fff200
• Farbe 2: #ffffff
• Verlaufstyp: Radial
• Radiale Richtung: Unten
• Startposition: 31%
• Endposition: 31%

Grenze

Fügen Sie als nächstes '20px' des Randradius hinzu.

Box Schatten

Zusammen mit einem subtilen Kastenschatten.

• Stärke der Box-Schattenunschärfe: 50px
• Schattenfarbe: rgba(0,0,0,0.14)

Standard-Transformationsskala

Die zweite Spalte ist unser vorgestellter Preisplan. Um sicherzustellen, dass dies nicht unbemerkt bleibt, erhöhen wir die Größe der Spalte in den Einstellungen für die Transformationsskalierung.

• Unten: 112 % (Desktop), 100 % (Tablet und Telefon)
• Rechts: 112 % (Desktop), 100 % (Tablet und Telefon)

Hover-Transformationsskala

Ändern Sie die Transformationsskalierungswerte beim Bewegen des Mauszeigers.

• Unten: 120 %
• Rechts: 120 %

Überläufe

Ändern Sie als nächstes die horizontalen und vertikalen Überläufe.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Standard-Z-Index

Gehen Sie dann zu den Sichtbarkeitseinstellungen und erhöhen Sie den Z-Index der Spalte.

• Z-Index: 10

Hover-Z-Index

Ändern Sie den Z-Index beim Hover.

• Z-Index: 12

Übergänge

Und erhöhen Sie die Übergangsdauer in den Übergangseinstellungen.

• Übergangsdauer: 500ms

Spalte 3 Einstellungen

Auf zur dritten und letzten Spalte! Öffnen Sie die Spalteneinstellungen.

Hintergrund mit Farbverlauf

Gehen Sie zu den Hintergrundeinstellungen und fügen Sie den folgenden Farbverlaufshintergrund hinzu:

• Farbe 1: #f7f7f7
• Farbe 2: #ffffff
• Verlaufstyp: Radial
• Radiale Richtung: Unten
• Startposition: 31%
• Endposition: 31%

Grenze

Fügen Sie als nächstes den Randradius '20px' hinzu.

Box Schatten

Zusammen mit einem subtilen Kastenschatten.

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

Standard-Transformationsskala

Zeit, die Spalte zu verwandeln! Stellen Sie sicher, dass die Standardwerte für die Transformationsskalierung "100%" bleiben.

• Unten: 100%
• Rechts: 100%

Hover-Transformationsskala

Ändern Sie diese Werte beim Hover.

• Unten: 120 %
• Rechts: 120 %

Standard-Transformationsübersetzung

Außerdem verschieben wir die Spalte auf dem Desktop nach links, indem wir einige benutzerdefinierte Transformationswerte anwenden.

• Unten: -34px (Desktop), 0px (Tablet & Telefon)
• Rechts: 0px

Hover Transformieren Übersetzen

Bringen Sie die Werte beim Hover auf '0px' zurück.

• Unten: 0px
• Rechts: 0px

Standard-Transformationsdrehung

Fahren Sie fort, indem Sie die Spalte in ihren Standardzustand drehen.

• Links: 8deg (Desktop), 0deg (Tablet & Telefon)

Hover Transformieren Drehen

Ändern Sie den Rotationswert für die linke Transformation zurück auf '0px', wenn Sie den Mauszeiger darüber bewegen.

• Links: 0 Grad

Überläufe

Stellen Sie sicher, dass die Überläufe als nächstes sichtbar sind.

• Horizontaler Überlauf: Sichtbar
• Vertikaler Überlauf: Sichtbar

Standard-Z-Index

Gehen Sie dann zu den Sichtbarkeitseinstellungen und stellen Sie sicher, dass der Standard-Z-Index 9 ist.

• Z-Index: 9

Hover-Z-Index

Ändern Sie den Z-Index beim Hover.

• Z-Index: 11

Übergänge

Und erhöhen Sie die Übergangsdauer in den Übergangseinstellungen.

• Übergangsdauer: 500ms

Blurb-Modul zu Spalte 1 hinzufügen

Titel hinzufügen

Zeit, Module zur ersten Spalte hinzuzufügen! Fügen Sie ein neues Blurb-Modul hinzu und fügen Sie einen Titel ein.

Symbol auswählen

Wählen Sie als nächstes ein Symbol aus.

Symboleinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Symboleinstellungen entsprechend:

• Symbolfarbe: #000000
• Symbolplatzierung: Oben
• Symbolschriftgröße verwenden: Ja
• Symbolschriftgröße: 50px

Titeleinstellungen

Ändern Sie als nächstes die Einstellungen für den Titeltext.

• Titelschriftart: Poppins
• Ausrichtung des Titeltextes: Mitte
• Titeltextfarbe: #000000
• Titeltextgröße: 27px

Abstand

Und fügen Sie auch etwas oberen Rand hinzu.

• Oberer Rand: 80px

Trennmodul zu Spalte 1 hinzufügen

Sichtweite

Weiter zum zweiten Modul, das ein Teilermodul ist. Stellen Sie sicher, dass die Option "Teiler anzeigen" aktiviert ist.

• Teiler anzeigen: Ja

Leitung

Wechseln Sie zur Registerkarte Design und ändern Sie die Farbe der Trennlinie in Schwarz.

• Linienfarbe: #000000

Größe

Ändern Sie auch die Größeneinstellungen.

• Teilergewicht: 6px
• Breite: 14%
• Modulausrichtung: Mitte
• Höhe: 0px

Abstand

Schließlich fügen Sie etwas oberen Rand hinzu.

• Oberer Rand: 50px

Textmodul Nr. 1 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Fahren Sie fort, indem Sie ein Textmodul direkt unter dem Trennmodul hinzufügen und einige Inhalte Ihrer Wahl einfügen.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Poppins
• Schriftstärke des Textes: Leicht
• Textausrichtung: Mitte
• Textfarbe: #4f4f4f
• Textzeilenhöhe: 2.3em

Abstand

Fügen Sie auch einige benutzerdefinierte Rand- und Abstandswerte hinzu.

• Oberer Rand: 50px
• Obere Polsterung: 10px
• Untere Polsterung: 10px

Textmodul #2 zu Spalte 1 hinzufügen

Inhalt hinzufügen

Direkt unter dem vorherigen Textmodul benötigen wir ein weiteres Textmodul. Geben Sie einen Inhalt Ihrer Wahl ein.

Texteinstellungen

Wechseln Sie zur Registerkarte Design und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Poppins
• Schriftstärke des Textes: Schwer
• Textausrichtung: Mitte
• Textfarbe: #000000
• Textgröße: 47px
• Textzeilenhöhe: 1em

Abstand

Fügen Sie auch einen benutzerdefinierten oberen und unteren Rand hinzu.

• Oberer Rand: 50px
• Unterer Rand: 80px

Schaltflächenmodul zu Spalte 1 hinzufügen

Kopie hinzufügen

Das nächste und letzte Modul, das wir in Spalte 1 benötigen, ist ein Button-Modul. Geben Sie eine Kopie Ihrer Wahl ein.

Ausrichtung

Wechseln Sie zur Registerkarte Design und ändern Sie die Ausrichtung der Schaltfläche in die Mitte.

• Tastenausrichtung: Mitte

Tasteneinstellungen

Stylen Sie auch die Schaltfläche.

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 17px
• Schaltflächentextfarbe: #000000
• Hintergrundfarbe der Schaltfläche: #FFFFFF
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 100px
• Schaltflächenschriftart: Poppins
• Schriftstärke der Schaltfläche: Fett

Abstand

Wir fügen auch einige benutzerdefinierte Werte für Rand und Abstand hinzu.

• Oberer Rand: 50px
• Unterer Rand: -40px
• Obere Polsterung: 23px
• Untere Polsterung: 23px
• Linke Polsterung: 70px
• Rechte Polsterung: 70px

Box Schatten

Und wir runden das Ganze ab, indem wir dem Button-Modul einen subtilen Kastenschatten geben.

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

Alle Module zweimal klonen und Duplikate in verbleibende Spalten platzieren

Wenn Sie alle Module in Spalte 1 abgeschlossen haben, können Sie sie zweimal klonen und die Duplikate in die beiden verbleibenden Spalten der Zeile platzieren.

Blurb-Symbole und -Titel ändern

Stellen Sie sicher, dass Sie die Klappensymbole und Titel für jedes Duplikat ändern.

Inhalt des Textmoduls ändern

Zusammen mit dem Inhalt des Textmoduls.

Taste 2 ändern

Öffnen Sie zu guter Letzt die Schaltfläche in Spalte 2 und ändern Sie die Schaltflächeneinstellungen. Sobald Sie diesen Schritt abgeschlossen haben, sind Sie fertig!

• Schaltflächentextfarbe: #FFFFFF
• Schaltflächenhintergrundfarbe: #8300E9

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie mit den neuen Spaltenoptionen von Divi Spalten in Preispläne umwandeln. Sie können die Preispläne anpassen, ohne eine einzige Zeile CSS-Code berühren zu müssen! Dieses Tutorial zeigt nur, wie die neuen Spaltenoptionen Ihnen helfen, verschiedene Module in einem schönen Design zu vereinen. Wenn Sie Fragen oder Anregungen haben, können Sie diese gerne im Kommentarbereich unten hinterlassen!

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.