So erstellen Sie überlappende Spalten mit den Spalten- und Transformationsoptionen von Divi

In einem der neuesten Divi-Updates haben wir den Spalten im Builder einige ziemlich erstaunliche Steuerelemente hinzugefügt. Es ist jetzt einfacher denn je, Spaltenüberlappungen zu erstellen. In diesem Tutorial zeigen wir Ihnen, wie Sie mit den Spalten- und Transformationseinstellungen von Divi einen Testimonial-Abschnitt mit drei überlappenden Spalten erstellen.

Für dieses Design verwenden wir drei Farben, ein sattes Orange #ff8300, ein warmes Gelb #ffd400 und einen herausragenden blauen Farbverlauf #0c99c1. Sie können dieses überlappende Spaltendesign im Handumdrehen auf ein Website-Projekt anwenden.

Lass 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

1. Erstellen Sie einen neuen regulären Abschnitt + eine dreispaltige Zeile

Als erstes müssen Sie einen regulären Abschnitt mit einer dreispaltigen Zeile erstellen.

Abschnittsabstand anpassen

Erhöhen Sie die obere und untere Polsterung des Abschnitts.

• Obere Polsterung: 4vw
• Untere Polsterung: 16vw

Größe und Abstand der Reihe anpassen

Öffnen Sie die Zeileneinstellungen und ändern Sie die Größeneinstellungen entsprechend:

• Verwenden Sie eine benutzerdefinierte Dachrinnenbreite: Ja
• Dachrinnenbreite: 1
• Breite: 100%
• Maximale Breite: 100%

Ändern Sie danach die Abstandseinstellungen:

• Untere Polsterung: 0px
• Linke Polsterung: 11vw
• Rechte Polsterung: 8vw

Hintergrund mit Farbverlauf hinzufügen

Fügen Sie als nächstes einen Hintergrund mit Farbverlauf hinzu:

• Hintergrundstil: Farbverlauf
• Erste Farbe: weiß #ffffff
• Zweite Farbe: Orange #ff8300
• Verlaufstyp: Linear
• Steigungsrichtung: 180 Grad
• Startposition: 35%
• Endposition: 35%

2. Stilspalten

Bevor wir den Spalten Module hinzufügen, ändern wir die Formatierungs-, Abstände- und Transformationseinstellungen jeder Spalte einzeln.

Spalte 1

Die ersten Schritte des Spaltenstils sind die abgerundeten Ecken und der Kastenschatten:

• Rand: 20px an allen abgerundeten Ecken
• Box-Schatten: Erste Box-Schatten-Option
• Vertikale Position des Boxschattens: 0px
• Stärke der Box-Schattenunschärfe: 80px
• Schattenfarbe: rgba(0,0,0,0.3)
• Position des Kastenschattens: Äußere

* Bevor wir Transformationseinstellungen hinzufügen, kopieren wir diese Elementstile und fügen sie in Spalte zwei und drei ein.

Öffnen Sie erneut die Einstellungen von Spalte 1 und gehen Sie auf die Registerkarte Design. Wir verwenden die Transformationseinstellungen, damit die erste Spalte die zweite überlappt. Falls Sie es vergessen haben, ist die x-Achse horizontal und die y-Achse vertikal.

• Transformieren Übersetzen:
  • Desktop: x-Achse = 3vw. y-Achse = 14,2vw
  • Tablet und Telefon: x-Achse = -14vw. y-Achse = 16vw
• Sichtbarkeit: Z-Index 10

Spalte 2

Auf zur zweiten Spalte! Gehen Sie zum Boxschatten (den Sie in einem der vorherigen Schritte hinzugefügt haben) und erhöhen Sie die Stärke der Boxschattenunschärfe.

• Stärke der Box-Schattenunschärfe: 50px

Fahren Sie fort, indem Sie der Spalte 2 einige benutzerdefinierte Abstandswerte hinzufügen.

• Obere Polsterung:
  • Desktop = 3vw
  • Tablet + Telefon = 5vw
• Untere Polsterung:
  • Desktop = 5vw
  • Tablet + Telefon = 7vw
• Linke Polsterung:
  • Desktop = 2vw
  • Tablet + Telefon = 4vw
• Rechte Polsterung:
  • Desktop = 2vw
  • Tablet + Telefon = 4vw

Zeit, die zweite Spalte zu transformieren! Die zweite Spalte bleibt für den Desktop an ihrem Platz, aber wir müssen einige benutzerdefinierte Transformationseinstellungen auf kleinere Bildschirme anwenden. Fahren Sie fort und passen Sie die Registerkarte „Transformieren“ an. Außerdem erhöhen wir den Z-Index auf 9.

• Transformieren Übersetzen:
  • Tablet und Telefon: x-Achse = 9vw. y-Achse = 13vw
• Sichtbarkeit: Z-Index 9

Spalte 3

Auf zur dritten Spalte! Erhöhen Sie die Stärke der Box-Schattenunschärfe des bereits vorhandenen Box-Schattens.

• Stärke der Box-Schattenunschärfe: 50px

Öffnen Sie als nächstes die Hintergrundeinstellungen und fügen Sie einen blauen Hintergrund mit Farbverlauf hinzu.

• Hintergrund: Farbverlauf
• Verlaufsfarbe eins: #0c99c1
• Farbverlauf zwei: rgba(5,0,78,0.72)
• Verlaufstyp: Linear
• Steigungsrichtung: 220 Grad
• Startposition: 0%
• Endposition: 100%

Jetzt fügen wir den Abstand hinzu.

• Obere Polsterung:
  • Desktop = 3vw
  • Tablet + Telefon = 10vw
• Untere Polsterung:
  • Desktop = 3vw
  • Tablet + Telefon = 7vw
• Linke Polsterung:
  • Desktop = 1.5vw
  • Tablet + Telefon = 10vw
• Rechte Polsterung:
  • Desktop = 1.5vw
  • Tablet + Telefon = 10vw

Zu guter Letzt werden wir die dritte Spalte mit der zweiten überlappen lassen, indem wir die Einstellungen für die Transformationsübersetzung ändern.

• Transformieren Übersetzen:
  • Desktop: x-Achse = -10vw. y-Achse = 14,2vw
  • Tablet: x-Achse = -14vw. y-Achse = 9vw
  • Telefon: x-Achse = -14vw. y-Achse = 11vw
• Sichtbarkeit: Z-Index 9

Hier ist eine Vorschau unserer Spalten, bevor Sie die Module hinzufügen.

3. Module zu Spalten hinzufügen und sie formatieren

Jetzt fügen wir die Module zu jeder Spalte hinzu!

Spalte 1

In Spalte eins fügen wir ein Bildmodul und ein Textmodul ein. Fügen Sie zuerst das Image-Modul hinzu.

1. Fügen Sie das Bildmodul hinzu

Fügen Sie ein Foto Ihres Kunden ein und gestalten Sie es wie folgt:

• Ausrichtung: Links
• Volle Breite erzwingen: Ja

Fügen Sie dem Bild auch einen unteren Rand hinzu.

• Farbe des unteren Rands: Gelb #ffd400
• Breite des unteren Rands: 9px
• Rahmenstil: Solid

2. Fügen Sie das Textmodul hinzu

Fügen Sie direkt unter dem Bildmodul ein neues Textmodul hinzu und fügen Sie den Namen und die Position des Kunden ein.

• Name: Überschrift 4
• Position: Absatz

Nachdem wir den Inhalt hinzugefügt haben, gestalten wir die Texteinstellungen:

• Textschriftart: Nunito Sans
• Schriftstärke des Textes: Regular
• Textausrichtung: Mitte
• Textfarbe: Schwarz #000000
• Textgröße:
  • Desktop = 0.8vw
  • Tablet = 1.8vw
  • Telefon = 2.8vw

Gehen Sie zu den Einstellungen für den Überschriftentext und wenden Sie die folgenden Änderungen an:

• Überschriftstext: H4
• Überschrift 4 Schriftart: Poppins
• Überschrift 4 Schriftstärke: Fett
• Überschrift 4 Textfarbe: Schwarz #000000
• Überschrift 4 Textgröße:
  • Desktop = 1vw
  • Tablet = 3vw
  • Telefon = 4vw

Wir werden auch die Abstandseinstellungen ändern:

• Oberer Rand:
  • Desktop = 1.5vw
  • Tablet = 3vw
  • Telefon = 7vw
• Unterer Rand:
  • Desktop = 1.5vw
  • Tablet = 3vw
  • Telefon = 7vw

Ihre Spalte sollte wie folgt aussehen, wenn Sie beide Module abgeschlossen haben:

Spalte 2

In Spalte 2 benötigen wir einen Text, einen Klappentext und ein Trennmodul. Das erste Textmodul ist dasjenige, das wie ein angewinkeltes Banner in der oberen rechten Ecke der Spalte aussieht. Wir werden die Transformationsoptionen verwenden, um diesen Effekt zu erzielen.

1. Textmodul hinzufügen.

Fügen Sie ein neues Textmodul hinzu und fügen Sie das Wort „Testimonial“ in das Inhaltsfeld ein.

Fügen Sie dem Modul einen gelben Hintergrund hinzu.

• Hintergrundfarbe: Gelb #ffd400

Wechseln Sie zur Registerkarte Design und ändern Sie die Text- und Abstandseinstellungen entsprechend:

• Textschriftart: Poppins
• Schriftstärke des Textes: Fett
• Textausrichtung: Mitte
• Textfarbe: Weiß #ffffff
• Textgröße: 23px
• Rechter Rand: -50px
• Linker Rand: -50px
• Obere Polsterung: 15px
• Untere Polsterung: 15px

Zu guter Letzt passen wir die Transformationseinstellungen wie folgt an:

• Transformieren Übersetzen:
  • Desktop = 17vw auf der x-Achse
  • Tablet = 24vw auf der x-Achse, 1vw auf der y-Achse
  • Telefon = 20vw auf der x-Achse, 1vw auf der y-Achse
• Transform Rotate: 32 Grad auf der ersten Achse

2. Fügen Sie das Blurb-Modul hinzu.

Sobald Sie das erste Modul abgeschlossen haben, ist es an der Zeit, ein Klappenmodul hinzuzufügen.

Im Klappenmodul wird das Testimonial des Kunden angezeigt. Klicken Sie zuerst auf das +-Symbol, um ein Modul hinzuzufügen und wählen Sie Klappentext.

Fügen Sie anschließend den Inhalt ein, wählen Sie ein Symbol aus und gestalten Sie das Symbol wie folgt:

• Symbol verwenden: Ja, ein Stern
• Symbolfarbe: Gelb #ffd400
• Symbolplatzierung: Links
• Symbolschriftgröße verwenden: Ja, 48px

Fahren Sie fort, indem Sie den Titeltext auf H4-Ebene gestalten

• Titeltext: H4
• Titelschriftart: Poppins
• Schriftstärke des Titels: Fett
• Titel Schriftfarbe: Schwarz #ffffff

• Titeltextgröße:
  • Desktop = 1.2vw
  • Tablet = 2.3vw
  • Telefon = 3.3vw
• Höhe der Titelzeile:
  • Desktop = 2vw
  • Tablet = 3.4vw
  • Telefon = 4.6vw

Gestalten Sie die Textkörpereinstellungen entsprechend:

• Schriftart des Textkörpers: Nunito Sans
• Textstärke: Halbfett
• Textkörperfarbe: Schwarz #000000
• Textgröße:
  • Desktop = 0.7vw
  • Tablet = 1.6vw
  • Telefon = 2.4vw
• Körperlinienhöhe:
  • Desktop = 1.6vw
  • Tablet = 4vw
  • Telefon = 5vw

Wir möchten, dass der Klappentext weniger breit ist als seine Spalte. Um dies zu erreichen, passen wir die Werte für Breite, Ränder und Auffüllung an.

Zuerst passen wir die Breite des Klappentextes an:

• Inhaltsbreite: 100%
• Breite:
  • Desktop = 58,4 %
  • Tablet + Telefon = 90%

Und dann die Abstandseinstellungen:

• Oberer Rand: 3vw
• Unterer Rand: 3vw
• Rechter Rand: -24vw
• Linke Polsterung: 0px
• Rechte Polsterung: 4px

3. Teiler hinzufügen

Das letzte Modul, das wir in dieser Spalte benötigen, ist ein Teilermodul. Wenden Sie die folgenden Änderungen an der Trennlinie an:

• Siehe Teiler: Ja
• Teilerfarbe: Schwarz #oooooo
• Teilergewicht: 1px

Wir sind fast da! So sieht unser bisheriges Ergebnis aus:

Spalte 3

Auf zur dritten und letzten Spalte! Wir verwenden diese Spalte, um einen Call-to-Action anzuzeigen. Wir verwenden drei Module; ein Textmodul, ein Trennmodul und ein Tastenmodul.

1. Textmodul hinzufügen

Das erste, was wir dieser Spalte hinzufügen werden, ist das Textmodul.

Wir fügen dem Inhaltsfeld einen Titel in H3 und ein wenig Absatztext hinzu.

Fahren Sie fort und gestalten Sie die Texteinstellungen entsprechend:

• Textschriftart: Nunito Sans
• Schriftstärke des Textes: Regular
• Schriftfarbe des Textes: Weiß #ffffff
• Schriftgröße des Textes:
  • Desktop = 0.8vw
  • Tablet =- 2vw
  • Telefon = 2.6vw
• Höhe der Textzeile:
  • Desktop = 1.5vw
  • Tablet = 4vw
  • Telefon = 5vw

Vervollständigen Sie das Textmodul, indem Sie die Texteinstellungen für die Überschrift gestalten.

• Überschriftstext: H3
• Überschrift 3 Schriftart: Poppins
• Überschrift 3 Schriftstärke: Fett
• Überschrift 3 Textfarbe: Weiß #ffffff
• Überschrift 3 Textgröße:
  • Desktop = 1.1vw
  • Tablet = 3vw
  • Telefon = 4vw
• Überschrift 3 Zeilenhöhe:
  • Desktop = 1.5vw
  • Tablet = 3vw
  • Telefon = 4.5vw

2. Trennmodul hinzufügen

Fahren Sie fort, indem Sie ein Teilermodul zu Spalte 3 hinzufügen. Um den Teiler zu gestalten, kopieren wir die Teilerstile aus dem, den Sie in Spalte 2 finden, und fügen sie ein.

Öffnen Sie die Trenneinstellungen und ändern Sie die Farbe von Schwarz auf Weiß. Fügen Sie auch etwas obere und untere Polsterung hinzu.

• Teilerfarbe: Weiß #ffffff
• Obere Polsterung: 40px
• Untere Polsterung: 20px

3. Schaltflächenmodul hinzufügen

Weiter zum letzten Modul, das ein Tastenmodul ist. Fügen Sie eine Kopie Ihrer Wahl hinzu.

Wechseln Sie zur Registerkarte Design und gestalten Sie die Schaltfläche wie folgt:

• Benutzerdefinierten Stil für Schaltfläche verwenden: Ja
• Schaltflächentextgröße:
  • Desktop = 0.8vw
  • Tablet = 2.4vw
  • Telefon = 3vw
• Schaltflächentextfarbe: Weiß #ffffff

• Schaltflächenhintergrundfarbe: Farbverlauf
• Verlaufsfarbe eins: Gelb #ffd400
• Farbverlauf 2: Orange #ff8300
• Verlaufstyp: Linear
• Verlaufsrichtung: 202deg.

• Breite des Tastenrahmens: 0px
• Tastenabstand der Buchstaben: 1px
• Knopfschrift: Nunito Sans
• Tastenschriftgewicht: Schwer
• Schaltflächenschriftart: TT

Damit die Schaltfläche über alle Bildschirmgrößen hinweg gut aussieht, passen wir die Polsterung der Schaltfläche wie folgt an:

Desktop

• Obere Polsterung: 1vw
• Untere Polsterung: 1vw
• Rechte Polsterung: 3vw
• Linke Polsterung: 3vw

Tablette

• Obere Polsterung: 2vw
• Untere Polsterung: 2vw
• Rechte Polsterung: 6vw
• Linke Polsterung: 6vw

Telefon

• Obere Polsterung: 3vw
• Untere Polsterung: 3vw
• Rechte Polsterung: 8vw
• Linke Polsterung: 8vw

Vorschau

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

Desktop

Handy, Mobiltelefon

Einpacken

Dieser überlappende dreispaltige Build sieht als Testimonial großartig aus, aber wir sind sicher, dass Sie ihn für andere erstaunliche Dinge implementieren können. Wir hoffen, dass dies Sie dazu inspiriert, die Spaltentransformations- und Überlappungsoptionen für zukünftige Projekte zu verwenden. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!