Verwenden der Transform-Steuerelemente von Divi zum Erstellen einzigartiger Blurb-Modul-Layouts

Die Transform-Steuerelemente von Divi machen es wirklich einfach, die Elemente Ihrer Seite zu positionieren und zu stylen, um einzigartige Layouts zu erstellen. Das Klappenmodul von Divi ist eines der gebräuchlichsten Elemente zum Präsentieren von Elementen auf einer Website. Also dachte ich, ich würde zeigen, wie man diese Transformationseffekte verwendet, indem ich ein paar einzigartige Layouts mit dem Klappenmodul erstelle. Sicher, Sie können eine ähnliche Positionierung mit Rändern und Auffüllen erreichen, aber der Prozess wäre viel komplizierter und würde nicht annähernd so viel Spaß machen. Außerdem können Sie mit den Transformationssteuerelementen zusätzliches Styling hinzufügen, um Ihre Klappentexte zu skalieren und zu drehen, um noch einzigartigere Designs zu erhalten.

In diesem Tutorial zeige ich Ihnen, wie Sie Klappentexte mithilfe der Transformationssteuerelemente von Divi auf kreative Weise positionieren und drehen.

Lass uns anfangen.

Erste Schritte

Für dieses Tutorial brauchen Sie nur Divi. Um die Dinge einzurichten, fahren Sie fort und erstellen Sie eine neue Seite. Geben Sie Ihrer Seite einen Titel und stellen Sie den Divi-Builder im Frontend bereit, um eine Seite von Grund auf neu zu erstellen.

Jetzt können Sie beginnen.

Erstellen von Blurb-Layout-Design #1

In diesem ersten Layout-Design werden wir unsere Klappentexte mit zwei verschiedenen Zeilen strukturieren. Dann verwenden wir die Divi-Transformationsoptionen, um die Klappenmodule zu skalieren und zu positionieren, um ein einzigartiges Klappenmodul-Layout zu erstellen.

Erstellen Sie die erste Reihe

Erstellen Sie zunächst einen regulären Abschnitt und fügen Sie dann das folgende Spaltenlayout für die Zeile hinzu: 1/2 1/6 1/6 1/6

Hinzufügen und Stylen des Textmoduls

Fügen Sie in der Spalte 1/2 links einen Textbaustein mit folgendem Inhalt hinzu:

<h2>Our Services</h2>
<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>

Aktualisieren Sie dann die folgenden Designeinstellungen:

Hintergrundfarbe: #ffffff
Breite: 500px
Benutzerdefinierter Rand (Desktop): -70 Pixel übrig
Benutzerdefinierter Rand (Tablet): 20 Pixel übrig
Benutzerdefinierte Polsterung: 20 Pixel oben, 20 Pixel unten

Abschnittsauffüllung aktualisieren

Als nächstes müssen wir unserem Abschnitt etwas Auffüllen hinzufügen. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Benutzerdefinierte Polsterung: 20vw oben

Aktualisieren Sie die Einstellungen für die erste Reihe

Aktualisieren Sie als Nächstes die Zeileneinstellungen wie folgt:

Dachrinnenbreite: 1
Benutzerdefinierte Polsterung: 10vw oben, 0px unten
Rahmenbreite: 5px
Rahmenfarbe: #eeeeee

Fügen Sie die zweite Reihe hinzu

Fügen Sie als Nächstes eine weitere Zeile unter der Zeile hinzu, die Sie gerade angepasst haben. Geben Sie ihm ein sechsspaltiges Layout.

Erstellen und gestalten Sie die Blurb-Module

Jetzt ist es an der Zeit, die Klappenmodule zu erstellen, die wir schließlich mithilfe der Transformationssteuerelemente positionieren werden. Fügen Sie eine Klappenmodulspalte 2 der ersten (oberen) Zeile hinzu, die Sie erstellt haben.

Löschen Sie in den Klappeneinstellungen den Inhalt und aktualisieren Sie den Titeltext mit dem Wort „Dienste“. Klicken Sie dann auf , um ein Symbol anstelle eines Bildes zu verwenden. In diesem Beispiel verwende ich das Cloud-Symbol.

Aktualisieren Sie die restlichen Klappeneinstellungen wie folgt:

Symbolfarbe: #ffffff
Kreissymbol: JA
Kreisfarbe: #5e89fb
Titelschriftart: Nunito
Ausrichtung des Titeltextes: Mitte
Titeltextgröße: 16px
Benutzerdefinierte Polsterung: 1vw oben, 1vw unten, 1vw links, 1vw rechts

Aktualisieren Sie dann den Standardrand unter dem Klappensymbol, indem Sie das folgende CSS zum Feld Blurb-Bild-CSS auf der Registerkarte "Erweitert" hinzufügen:

margin-bottom: 5px

Als nächstes kopieren Sie das soeben erstellte Klappenmodul und fügen es in jede der Spalten ein. Stellen Sie sicher, dass Sie in Spalte 3 der oberen Reihe zwei Klappenmodule haben und in der zweiten Zeile die Spalten 5 und 6 leer lassen.

Fügen Sie Transformationseffekte hinzu, um die Blurbs zu skalieren und zu positionieren

Jetzt können wir die Transform-Steuerelemente verwenden, um die Klappentexte zu positionieren und zu einem einzigartigen Design zu skalieren.

Öffnen Sie zunächst die Klappeneinstellung des Klappentextes in Spalte 2 der oberen Zeile und aktualisieren Sie die Transformationssteuerelemente wie folgt:

X-Achse der Transformationsskala: 242 %
Transformationsskala Y-Achse: 242 %

Transformieren X-Achse verschieben: -96px
Transformieren Y-Achse übersetzen: -44px

Aktualisieren Sie als Nächstes die Einstellungen des obersten Blurb-Moduls in Spalte 3 der ersten Zeile wie folgt:

X-Achse der Transformationsskala: 192%
Transformationsskala Y-Achse: 192%

Transformieren X-Achse übersetzen: -70px
Transformieren Y-Achse übersetzen: -13px

Aktualisieren Sie dann das Klappenmodul in Spalte 4 der oberen Zeile wie folgt:

X-Achse der Transformationsskala: 158%
Transformationsskala Y-Achse: 158%

Transformieren X-Achse übersetzen: 33px
Transformieren Y-Achse übersetzen: -13px

Aktualisieren Sie als Nächstes das untere Klappenmodul in Spalte 3 der oberen Zeile wie folgt:

X-Achse der Transformationsskala: 132%
Transformationsskala Y-Achse: 132%

Transformieren X-Achse übersetzen: 89px
Transformieren Y-Achse übersetzen: 39px

Geben Sie ihm dann die folgende Hintergrundfarbe, um einen Bruch in der Zeilenumrandung für ein dezentes Gestaltungselement zu schaffen:

Hintergrundfarbe: #ffffff

Das ist es!

Als zusätzliches Gestaltungselement können Sie die Deckkraft der Kreisfarbe für jedes der im gesamten Layout verwendeten Symbole schrittweise erhöhen.

Mobile Anpassungen

Um das Layout des Klappenmoduls für Tablet- und Telefondisplays anzupassen, können wir die Transformationseffekte einfach auf den ursprünglichen Zustand zurücksetzen, damit die Klappen wieder ihre ursprüngliche Größe annehmen und schön in den Spalten positioniert werden. Dazu können wir die Multi-Select-Funktion von Divi verwenden. Da es schwierig sein kann, auf die Module zu klicken, die mit der Transformationseigenschaft positioniert wurden, ist es ein guter Zeitpunkt, den Rastermodus in Ihren Builder-Einstellungen zu aktivieren. Dadurch können Sie die Klappenmodule in ihrer ursprünglichen Position sehen. Sobald Sie sich im Rastermodus befinden, halten Sie Strg oder Cmd gedrückt und klicken Sie dann auf jedes der Module, die einen Transformationseffekt haben. Klicken Sie dann auf das Zahnradsymbol eines der ausgewählten Module, um das modale Elementeinstellungen zu öffnen.

Aktualisieren Sie im modalen Elementeinstellungen Folgendes:

X-Achse der Transformationsskala: 100 %
Transformationsskalierung Y-Achse: 100 %

Transformieren X-Achse übersetzen: 0px
Transformieren Y-Achse übersetzen: 0px

Dadurch werden die ursprüngliche Position und Skalierung der Klappentexte auf Tablet- und Telefondisplays wiederhergestellt.

Endergebnis

Hier ist das endgültige Design.

Erstellen eines Blurb-Modul-Layouts #2

In diesem nächsten Beispiel zeige ich Ihnen ein einzigartiges Klappenmodul-Layout mit Divis Skalierungs-, Übersetzungs- und Rotations-Transformationsoptionen. Ich füge auch ein Bonus-CSS-Snippet hinzu, das jedem der Klappentexte eine Perspektive hinzufügt. So geht's.

Erstellen Sie die Überschrift

Fügen Sie zunächst einen neuen regulären Abschnitt mit einer einspaltigen Zeile hinzu. Fügen Sie dann der Zeile einen Textbaustein mit folgendem Inhalt hinzu:

<h2>Our Process</h2>
<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>

Aktualisieren Sie dann die restlichen Textmoduleinstellungen wie folgt:

Überschrift 2 Schriftart: Nunito
Überschrift 2 Schriftstärke: Halbfett
Überschrift 2 Textgröße: 50px
Überschrift 2 Buchstabenabstand: 7px
Breite: 500px

Erstellen des Klappenlayouts mit einer sechsspaltigen Zeile

Das kümmert sich um die Überschrift. Jetzt ist es an der Zeit, die Zeile für unser Klappenmodul-Layout hinzuzufügen. Fahren Sie fort und erstellen Sie eine neue Zeile mit einem sechsspaltigen Layout direkt unter der aktuellen Zeile.

Styling des Blurb-Moduls

Fügen Sie in der ersten Spalte ein neues Klappenmodul hinzu und aktualisieren Sie die Einstellungen wie folgt:

Löschen Sie den Textkörper im Inhaltsfeld und aktualisieren Sie den Titeltext mit dem Wort „Schritt“.

Klicken Sie dann auf , um ein Symbol zu verwenden, und wählen Sie das Kreishäkchensymbol aus.

Geben Sie dem Blurb wie folgt eine weiße Hintergrundfarbe:

Hintergrundfarbe: #ffffff

Aktualisieren Sie dann die Designeinstellungen:

Symbolfarbe: #ffffff
Kreissymbol: JA
Kreisfarbe: #3d0dad
Titelschriftart: Nunito
Schriftstärke des Titels: Fett
Titelschriftart: TT
Ausrichtung des Titeltextes: Mitte
Titel-Buchstaben-Abstand: 4px

Geben Sie dann dem Klappentext wie folgt einen Kastenschatten:

Boxschatten: Siehe Screenshot
Schattenfarbe: rgba(0,0,0,0.12)

Und schließlich fügen Sie dem Klappenmodul den Rotationstransformationseffekt hinzu:

Transformieren X-Achse drehen: -3deg
Transformieren Y-Achse drehen: -10deg
Transformieren Z-Achse drehen: 31deg

Das erledigt unser erstes Klappenmodul.

Zeileneinstellungen aktualisieren

Bevor wir nun mit dem Duplizieren unseres Klappenmoduls beginnen, müssen wir die Zeileneinstellungen wie folgt aktualisieren:

Dachrinnenbreite: 2
Benutzerdefinierte Polsterung: 11vw oben, 0px unten

Dies hilft bei der Verwendung des Abstands zwischen den Klappentexten im Layout.

Duplizieren und Stylen der restlichen Klappentexte

Jetzt können wir den Rest der Klappentexte duplizieren und anpassen. Kopieren Sie das Klappenmodul in Spalte 1 und fügen Sie es in alle verbleibenden Spalten außer der letzten Spalte (Spalte 6) ein. Wir lassen Spalte 6 leer, um mehr Platz für die Klappentexte nach rechts zu lassen.

Öffnen Sie nun die Klappenmodul-Einstellung in Spalte 2 und aktualisieren Sie Folgendes:

Kreisfarbe: #62de9d

X-Achse der Transformationsskala: 120 %
Transformationsskala Y-Achse: 120%

Transformieren Y-Achse verschieben: -10% (achten Sie darauf, den Prozentwert hier einzugeben)

Als nächstes aktualisieren Sie das Klappenmodul in Spalte 3 wie folgt:

Kreisfarbe: #5e89fb

X-Achse der Transformationsskala: 140 %
Transformationsskala Y-Achse: 140 %

Transformieren Y-Achse verschieben: -20%
Transformieren X-Achse verschieben: 10 %

Aktualisieren Sie das Klappenmodul in Spalte 4 wie folgt:

Kreisfarbe: #2a3fc9

X-Achse der Transformationsskala: 160 %
Transformationsskala Y-Achse: 160%

Transformieren Y-Achse verschieben: -30%
Transformieren X-Achse verschieben: 30%

Aktualisieren Sie abschließend das Klappenmodul in Spalte 5 wie folgt:

Kreisfarbe: #62de9d

X-Achse der Transformationsskala: 180 %
Transformationsskala Y-Achse: 180 %

Transformieren Y-Achse verschieben: -40%
Transformieren X-Achse verschieben: 55%

Wie Sie sehen, wird jeder Klappentext von links nach rechts um 20 % vergrößert. Und die Prozentwerte der Transformationsübersetzung sorgen dafür, dass Klappentexte gut ausgerichtet bleiben.

Da das Design in die letzte Spalte (Spalte 6) überläuft, lassen wir es leer. Sie können jedoch jederzeit einen weiteren Klappentext in Spalte 6 hinzufügen, wenn Sie die Zeile vergrößern.

Hinzufügen der Perspektiveneigenschaft zu jeder Spalte

In CSS wird die perspektivische Eigenschaft verwendet, um einem 3D-positionierten Element eine Perspektive im Z-Raum zu geben. Im Wesentlichen definiert es, wie weit das Objekt vom Benutzer entfernt erscheint, wenn er auf den Bildschirm schaut. Die perspektivische Eigenschaft muss auf den übergeordneten Container desjenigen angewendet werden, der die 3D-Position hat, in diesem Fall unser Klappenmodul. Daher müssen wir die Perspektive zu jeder der Spalten hinzufügen, indem wir einen kleinen CSS-Schnipsel wie folgt verwenden.

Fügen Sie für jede der 5 Spalten wie folgt das folgende CSS zum CSS-Feld des Spaltenhauptelements hinzu:

Spalte 1 Hauptelement:

perspective: 1000px

Spalte 2 Hauptelement:

perspective: 1000px

Spalte 3 Hauptelement:

perspective: 1000px

Spalte 4 Hauptelement:

perspective: 1000px

Spalte 5 Hauptelement:

perspective: 1000px

In diesem Fall ist die Änderung sehr dezent, aber meiner Meinung nach den zusätzlichen Aufwand wert.

Hier ist das Layout-Design des Klappenmoduls ohne Perspektive.

Und hier ist es mit der Perspektive.

Wenn Sie möchten, dass die Klappen dem Benutzer näher erscheinen, können Sie den Perspektivenwert verringern. So sehen beispielsweise die Klappentexte aus, wenn jeder Spalte „Perspektive: 400px“ hinzugefügt wird.

Hinzufügen eines Trennhintergrunds zum Abschnitt

Damit die Klappentexte auf einer Fläche stehen, können wir dem Abschnitt einen Trennhintergrund hinzufügen. Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Unterteiler-Stil: siehe Screenshot
Farbe des unteren Teilers: #dddddd
Höhe des unteren Teilers: 27vw
Horizontale Wiederholung des unteren Teilers: 0,8x
Unterteiler Flip: horizontal

Um das Layout für Tablet- und Telefondisplays anzupassen, müssen Sie jedes der Klappenmodule mehrfach auswählen und die folgenden Transformationsoptionen in den Elementeinstellungen für die Tablet-Anzeige aktualisieren:

X-Achse der Transformationsskala: 100 %
Transformationsskalierung Y-Achse: 100 %

Transformieren Y-Achse verschieben: 0%
Transformieren X-Achse verschieben: 0%

Endergebnis

Schauen wir uns nun das Endergebnis des Klappenmodul-Layouts an.

Abschließende Gedanken

Mit den Transformationssteuerelementen von Divi haben Sie die Möglichkeit, Ihre Klappentext-Module ganz einfach in genauen Bereichen Ihrer Seite zu platzieren. So macht es Spaß zu experimentieren und neue Klappenmodul-Layouts für die Darstellung von Diensten, Prozessschritten und unzähligen anderen Anwendungen zu erstellen. Ich hoffe, dieses Tutorial gibt Ihnen ein wenig Inspiration, um diese Designtechniken selbst auszuprobieren.

Weitere Inspirationen finden Sie in diesen 5 kreativen Klappenmodul-Designs.

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

Danke schön!