Wie man mit Divi . horizontale Trennwände in vertikale umwandelt

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 das uns allen bekannte horizontale Trennmodul am Beispiel des Umzugsunternehmens-Layout-Pakets von Divi in ​​ein vertikales umwandeln. Dieser Ansatz ist besonders praktisch, wenn Sie Zeitleisten auf Ihren Seiten erstellen möchten. Es ist auch großartig für die Abschnitte "Wie es funktioniert" und vieles mehr zu verwenden. Nachdem wir den vertikalen Teiler eingerichtet haben, fügen wir darüber Blurb-Module hinzu, um den Timeline-Effekt zu erzeugen. Dieses Tutorial erfordert keinen CSS-Code und basiert nur auf den integrierten Optionen von Divi.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, schauen wir uns das Ergebnis auf verschiedenen Bildschirmgrößen an.

Beginnen wir mit der Erstellung: Fügen Sie eine neue Seite hinzu und laden Sie die Landing Page des Umzugsunternehmens-Layout-Pakets hoch

Fügen Sie eine neue Seite hinzu und wechseln Sie zu Visual Builder

Beginnen wir damit, eine neue Seite hinzuzufügen, einen Titel hinzuzufügen und zu Visual Builder zu wechseln.

Wählen Sie ein vorgefertigtes Layout

Sobald Sie dies getan haben, haben Sie die Möglichkeit, von Grund auf neu zu erstellen, ein vorgefertigtes Layout auszuwählen oder eine vorhandene Seite zu klonen. Wir werden die Landingpage des Umzugsunternehmens-Layout-Pakets verwenden, um das Endergebnis zu erstellen. Sehen Sie sich also die vorgefertigten Layouts an.

Wählen Sie die Landing Page des Umzugsunternehmens-Layout-Pakets

Scrollen Sie die vorgefertigten Layouts nach unten, bis Sie auf das Umzugsunternehmen-Layout-Paket stoßen, und laden Sie die Zielseite auf Ihre Seite hoch.

Beginnen Sie mit der Erstellung der vertikalen Teiler-Timeline

Timeline-Abschnitt finden

Wir sind jetzt bereit, horizontale Teiler in vertikale umzuwandeln und diesen Teiler zu verwenden, um eine Zeitleiste zu erstellen. Fahren Sie fort und suchen Sie den folgenden Abschnitt auf Ihrer Zielseite:

Fügen Sie unten einen neuen Standardabschnitt hinzu

Fügen Sie direkt unter diesem Abschnitt einen Standardabschnitt hinzu.

Platzieren Sie die Zeile "So funktioniert es" in einem neuen Abschnitt

Fahren Sie fort, indem Sie die Zeile "So funktioniert es" des vorherigen Abschnitts in Ihren neuen Abschnitt ziehen.

Neue Zeile hinzufügen

Spaltenstruktur

Fügen Sie direkt unter der Zeile, die Sie gerade in Ihrem Abschnitt platziert haben, eine weitere mit der folgenden Spaltenstruktur hinzu:

Abstand

Bevor Sie Module hinzufügen, öffnen Sie Ihre Zeileneinstellungen und fügen Sie '60px' am oberen Rand hinzu.

Trennmodul zu Spalte 1 hinzufügen

Teiler ausblenden

Wir können jetzt mit dem Hinzufügen von Modulen beginnen! Wir beginnen mit der ersten Spalte und wenn wir fertig sind, gehen wir zur zweiten über. Das erste, was wir in der ersten Spalte brauchen, ist ein Divider-Modul. Wie bereits erwähnt, werden wir es in ein vertikales verwandeln. Der erste Schritt, um unser gewünschtes Ergebnis zu erzielen, besteht darin, die Option Teiler anzeigen zu deaktivieren.

Hintergrund mit Farbverlauf

Anstatt den eigentlichen Teiler zu verwenden, erstellen wir einen Teiler mit dem Hintergrund des Teilermoduls. Wir verwenden den folgenden Verlaufshintergrund:

• Farbe 1: #e0aa25
• Farbe 2: #c11000

Größe

Jetzt haben wir bereits sichergestellt, dass der Teiler nicht sichtbar ist. Der nächste entscheidende Schritt zur Herstellung eines vertikalen Teilers besteht darin, die Breite unseres Teilers drastisch zu verringern. Wir verwenden '2%', aber Sie können es so dick erscheinen lassen, wie Sie möchten. Wir aktivieren auch die zentrale Modulausrichtung.

Abstand

Um das Divider-Modul vertikal zu dehnen, fügen wir '480px' zum oberen und unteren benutzerdefinierten Padding unseres Divider-Moduls hinzu. Et voila, wir haben unseren vertikalen Teiler!

Blurb-Module des vorherigen Abschnitts zu Spalte 1 hinzufügen

Als nächstes erstellen wir eine Zeitleiste mit diesem vertikalen Teiler. Im vorherigen Abschnitt finden Sie drei Blurb-Module. Fahren Sie fort und platzieren Sie jeden von ihnen in der ersten Spalte der Zeile, an der Sie gerade arbeiten, direkt unter dem Teilermodul.

Blurb-Modul Nr. 1 ändern

Hintergrundfarbe hinzufügen

Wir werden eine der Effizienzfunktionen von Divi verwenden, um den Prozess beim Bearbeiten unserer Blurb-Module zu beschleunigen. Wir werden alle Änderungen auf das erste Blurb-Modul anwenden und anschließend einfach die Modulstile kopieren und mit einem Klick zu den anderen Blurb-Modulen hinzufügen. Öffnen Sie Ihr erstes Blurb-Modul und fügen Sie 'rgba(255,255,255,0.73)' als Hintergrundfarbe hinzu.

Symbolschriftgröße ändern

Als nächstes müssen Sie die Schriftgröße des Symbols in '65px' ändern.

Abstand entfernen

Wir entfernen auch den gesamten Rand in den Abstandseinstellungen. Später werden wir die Marge zu jedem Blurb-Modul einzeln hinzufügen, da sich die Werte unterscheiden.

Kopieren Sie den Blurb-Modulstil und fügen Sie ihn den verbleibenden Blurb-Modulen hinzu

Kopieren von Blurb-Modulstilen

Wir sind mit der Modifikation des ersten Blurb-Moduls fertig. Klicken Sie mit der rechten Maustaste darauf und wählen Sie „Modulstile kopieren“. Dadurch werden alle Änderungen, die wir gerade vorgenommen haben, kopiert.

Modulstile in verbleibende Blurb-Module einfügen

Fügen Sie die Modulstile in die beiden verbleibenden Blurb-Module ein. Sie werden feststellen, dass es nicht den Inhalt ändert, sondern nur die Designeinstellungen, was Ihnen viel Zeit spart.

Blurb-Module beabstanden

Blurb-Modul Nr. 1

Wie bereits erwähnt, unterscheiden sich die Abstände der Blurb-Module. Der zweite hat keine, aber der erste verwendet '-900px' für den oberen Rand. Sobald Sie diesen negativen Rand hinzufügen, werden Sie feststellen, dass die Blurb-Module Teil der Timeline werden. Im Visual Builder scheint das Divider-Modul über den Blurb-Modulen zu liegen. Aber sobald Sie den Visual Builder verlassen, werden Sie sehen, wie alles zusammenpasst, also machen Sie sich keine Sorgen.

Blurb-Modul #3

Öffnen Sie als nächstes Ihr letztes Blurb-Modul und fügen Sie am unteren Rand '150px' hinzu.

Bildmodul in Spalte 2 ablegen

Bild suchen

Wir können jetzt zu Spalte 2 übergehen! Das einzige Modul, das wir dort brauchen, ist ein Image-Modul. Wir verwenden einen, der sich bereits auf unserer Seite befindet, also machen Sie weiter und suchen Sie ihn:

Bild in Spalte 2 ablegen

Legen Sie es ab und ziehen Sie es in Ihre zweite Spalte als nächstes.

Abstand ändern

Um es vertikal zu zentrieren, fügen wir etwas Rand hinzu:

• Oberer Rand: 300 Pixel (Desktop), 30 Pixel (Tablet und Telefon)
• Unterer Rand: 50px (Tablet & Telefon)

Vorherigen und nächsten Abschnitt entfernen

Wir sind fertig mit der Erstellung unseres Abschnitts! Als letztes müssen Sie die überzähligen Abschnitte löschen.

Vorschau

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

Abschließende Gedanken

In diesem Use-Case-Blog-Post haben wir Ihnen gezeigt, wie Sie mit Divis Moving Company Layout Pack vertikale Trennwände in vertikale umwandeln. Dieser Ansatz ist ideal, wenn Sie Zeitleisten auf Ihrer Seite erstellen möchten, ohne zusätzlichen Code verwenden zu müssen. Es basiert ausschließlich auf den integrierten Optionen von Divi. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!