So verwenden Sie die neuen Spaltenstrukturen von Divi, um atemberaubende Abschnittsübergänge zu erstellen

Veröffentlicht: 2018-09-26

Jede Woche stellen wir Ihnen neue und kostenlose Divi-Layoutpakete zur Verfügung, die Sie für Ihr nächstes Projekt verwenden können. Für eines der Layout-Pakete teilen wir auch einen Anwendungsfall, der Ihnen hilft, Ihre Website auf die nächste Stufe zu heben.

Diese Woche zeigen wir Ihnen im Rahmen unserer laufenden Divi-Designinitiative, wie Sie mit den neuen Säulenstrukturen von Divi atemberaubende Abschnittsübergänge erstellen können. Wir werden verschiedene Spaltenstrukturen mit einigen der integrierten Optionen von Divi kombinieren, um unser Seitendesign auf die nächste Stufe zu heben.

Lasst uns anfangen!

Vorschau

Beginnen wir mit einem Blick auf die drei verschiedenen Beispiele, die wir nur mit den integrierten Optionen von Divi von Grund auf neu erstellen werden. Diese Beispiele sehen auf kleineren Bildschirmgrößen genauso gut aus.

Abschnittsübergänge

Verwenden Sie die Landing Page von Divi's Makeup Artist Layout Pack

Wir werden die Landingpage von Divis Makeup Artist Layout Pack verwenden. Wenn Sie sich das Layout-Paket ansehen möchten, gehen Sie zum folgenden Blogbeitrag. Obwohl wir dieses Tutorial mit einem bestimmten Layoutpaket demonstrieren, können Sie die Techniken auch problemlos auf andere Layouts anwenden.

Abschnittsübergang Nr. 1

Abschnittsübergänge

Neuen Abschnitt hinzufügen

Lokalisieren

Öffnen Sie die Landingpage des Makeup Artist Layout Packs mit Divis Visual Builder. Fügen Sie dann einen neuen regulären Abschnitt direkt unter dem Heldenabschnitt hinzu:

Abschnittsübergänge

Abstand

Entfernen Sie als nächstes alle Standardabstände Ihres Abschnitts:

Obere Polsterung: 0px
Untere Polsterung: 0px

Abschnittsübergänge

Neue Zeile hinzufügen

Spaltenstruktur

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

Abschnittsübergänge

Größe

Erhöhen Sie auch die Breite der Zeile:

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

Abschnittsübergänge

Abstand

Entfernen Sie als nächstes die standardmäßige obere und untere Polsterung:

Obere Polsterung: 0px
Untere Polsterung: 0px

Abschnittsübergänge

Filter

Um die Zeile lebendiger zu machen, erhöhen Sie die Sättigung in den Filtereinstellungen:

Sättigung: 200%

Abschnittsübergänge

Trennmodul Nr. 1 zu Spalte 1 hinzufügen

Teiler ausblenden

Um das erste Quadrat in unserem Design zu erstellen, fügen wir ein Teilermodul zu Spalte 1 hinzu. Deaktivieren Sie die Option 'Teiler anzeigen'.

Abschnittsübergänge

Hintergrund mit Farbverlauf

Als nächstes fügen Sie dem Teilermodul einen Verlaufshintergrund hinzu:

Farbe 1: rgba(255,255,255,0)
Farbe 2: rgba(176,182,219,0.34)

Abschnittsübergänge

Abstand

Um das Quadrat zu erstellen, ändern Sie die Abstandswerte:

Oberer Rand: -120px
Obere Polsterung: 120px
Untere Polsterung: 120px

Abschnittsübergänge

Trennmodul klonen und in Spalte 2 platzieren

Wenn Sie mit dem Ändern des DIvider-Moduls fertig sind, klonen Sie es und platzieren Sie es in der zweiten Spalte.

Abschnittsübergänge

Hintergrund mit Farbverlauf ändern

An diesem Duplikat müssen einige Änderungen vorgenommen werden, beginnend mit dem Verlaufshintergrund:

Farbe 1: rgba(228,237,234,0,58)
Farbe 2: rgba(255,255,255,0)

Abschnittsübergänge

Abstand ändern

Ändern Sie auch die Abstandseinstellungen. Dadurch wird der Abstand zwischen diesem Teilermodul und dem in der ersten Spalte vergrößert.

Oberer Rand: 142px
Obere Polsterung: 120px
Untere Polsterung: 120px

Abschnittsübergänge

Trennmodul #1 zweimal klonen und in Spalte 3 & 5 platzieren

Klonen Sie das violette Trennmodul zweimal und platzieren Sie die Duplikate in den Spalten 3 und 5.

Abschnittsübergänge

Trennmodul Nr. 2 klonen und in Spalte 4 platzieren

Klonen Sie auch das grüne Trennmodul und platzieren Sie es in Spalte 4.

Abschnittsübergänge

Trennmodul in Spalte 3, 4 und 5 auf Tablet und Telefon ausblenden

Trennmodul in Spalte 3 öffnen

Natürlich möchten wir, dass diese Abschnittsübergänge auf kleineren Bildschirmgrößen genauso gut aussehen. Aus diesem Grund werden wir einige der von uns verwendeten Module ausblenden. Öffnen Sie zunächst die Einstellungen des Divider-Moduls in Spalte 3.

Auf Tablet und Telefon ausblenden

Gehen Sie zur Registerkarte Erweitert und deaktivieren Sie das Modul auf Telefon und Tablet.

Abschnittsübergänge

Sichtbarkeitsstile kopieren

Wir müssen auch die Teiler in Spalte 4 und 5 ausblenden. Um den Vorgang zu beschleunigen, kopieren Sie die Sichtbarkeitseinstellungen des Teilers in Spalte 3:

Abschnittsübergänge

Sichtbarkeitsstile einfügen

Und fügen Sie sie in die Teilermodule in Spalte 4 und 5 ein.

Abschnittsübergänge