So verwenden Sie die neuen Zeilenausrichtungsoptionen von Divi kreativ

Im heutigen Divi-Tutorial zeigen wir Ihnen, wie Sie die neuen Zeilenausrichtungsoptionen in Divi zu Ihrem Vorteil nutzen können. Wir werden die Zeilenausrichtungsoptionen mit anderen integrierten Designoptionen kombinieren, um Ihnen eine Vorstellung davon zu geben, was mit den erweiterten Designoptionen von Divi möglich ist. Das Beispiel, das wir Ihnen zeigen, wie Sie es neu erstellen, enthält absolut keinen zusätzlichen Code, was bedeutet, dass jeder mit jedem Kenntnisstand dieses Design erreichen kann.

Lass uns anfangen!

Designvorschau

Hier ist ein kurzer Blick auf das, was wir heute erstellen werden (auf dem Desktop):

Und so sieht das Design auf dem Handy aus:

So verwenden Sie die neuen Zeilenausrichtungsoptionen von Divi kreativ

Abonnieren Sie unseren Youtube-Kanal

Theme-Anpasser-Einstellungen

Primäre Menüleiste

Wie Sie feststellen können, haben wir auch das Hauptmenü dem Layout angepasst. Um Ihre primäre Menüleiste zu ändern, gehen Sie zu Ihrem WordPress-Dashboard > Erscheinungsbild > Anpassen > Kopfzeile & Navigation > Primäre Menüleiste > und nehmen Sie die folgenden Änderungen vor:

• Logobild ausblenden: Aktivieren
• Menühöhe: 30
• Textgröße: 17
• Buchstabenabstand: -1
• Schriftstil: Großbuchstaben
• Textfarbe: #FFFFFF
• Farbe des aktiven Links: #FFFFFF
• Hintergrundfarbe: rgba (255, 255, 255, 0)
• Dropdown-Hintergrundfarbe: rgba (255, 255, 255, 0)

Helden-Sektion

Nachdem Sie Ihr Hauptmenü geändert haben, können Sie mit dem Layout beginnen. Als erstes müssen Sie eine neue Seite hinzufügen, zum Visual Builder wechseln und einen neuen Standardabschnitt hinzufügen. Dieser erste Abschnitt wird unser Heldenabschnitt und sieht so aus:

Abschnittseinstellungen

Hintergrund mit Farbverlauf

Nachdem Sie den Standardabschnitt hinzugefügt haben, können Sie ihm einen Hintergrund mit Farbverlauf hinzufügen:

• Erste Farbe: #9e5555
• Zweite Farbe: #000000
• Verlaufstyp: Linear
• Verlaufsrichtung: 180deg
• Startposition: 50%
• Endposition: 50%

Zeileneinstellungen

Farbüberlagerung

Fügen Sie dann diesem Abschnitt eine einspaltige Zeile hinzu und öffnen Sie die Einstellungen. Als erstes müssen wir eine Farbüberlagerung hinzufügen. Sie können wählen, wie dunkel Ihr Bild sein soll, indem Sie eine dunkelgraue Farbe auswählen. In diesem Fall haben wir '#595959' verwendet.

Hintergrundbild

Als nächstes müssen wir der einspaltigen Zeile ein Hintergrundbild hinzufügen und die Farbüberlagerung anwenden. Um die Farbüberlagerung und das Hintergrundbild zu mischen, wählen Sie „Multiplizieren“ als Hintergrundbildmischung.

Ausrichtung der Mittelreihe

Wie bei den meisten Websites wählen wir eine Ausrichtung der mittleren Reihe für den Heldenabschnitt.

Zeile in voller Breite machen

Wir möchten auch, dass unsere Zeile die volle Breite hat, daher werden wir diese Option in der Unterkategorie Sizing der Registerkarte Design aktivieren.

Benutzerdefinierte Polsterung

Das letzte, was wir in den Zeileneinstellungen tun müssen, ist, oben und unten eine benutzerdefinierte Auffüllung von '300px' hinzuzufügen.

Erstes Textmodul

Sobald wir alle Einstellungen vorgenommen haben, fügen wir das erste Textmodul zur Zeile hinzu. Wählen Sie den Text aus, der auf der Registerkarte Inhalt angezeigt werden soll, und wechseln Sie zur Registerkarte Design. Stellen Sie auf der Registerkarte Design sicher, dass die folgenden Einstellungen für die Unterkategorie Text gelten:

• Textschriftart: Arvo
• Schriftgröße des Textes: 64 (Desktop), 47 (Tablet), 33 (Telefon)
• Textfarbe: #FFFFFF
• Textzeilenhöhe: 1em
• Textausrichtung: Mitte

Zweites Textmodul

Fügen Sie dann ein weiteres Textmodul hinzu. Das zweite Textmodul enthält stattdessen folgende Einstellungen:

• Textschriftart: Lato
• Schriftgröße des Textes: 25 (Desktop), 18 (Tablet), 16 (Telefon)
• Textfarbe: #FFFFFF
• Textzeilenhöhe: 1.7em
• Textausrichtung: Mitte

Zweiter Abschnitt

Sobald der Heldenabschnitt fertig ist, können wir zum zweiten Abschnitt übergehen. Für diesen Abschnitt verwenden wir die rechte Zeilenausrichtung anstelle der mittleren in Kombination mit benutzerdefinierten Rand- und Spaltenhintergründen, um einen schönen Effekt zu erzielen. Wir müssen in diesem Abschnitt zwei Zeilenversionen erstellen: die Desktopversion und die Tablet-/Telefonversion. Dadurch wird sichergestellt, dass das Design auf allen Arten von Bildschirmen umwerfend aussieht.

Abschnittseinstellungen

Hintergrund mit Farbverlauf

Nachdem Sie einen zweiten Abschnitt hinzugefügt haben, fügen Sie den folgenden Farbverlaufshintergrund hinzu:

• Erste Farbe: #000000
• Zweite Farbe: #d6d6d6
• Verlaufstyp: Linear
• Verlaufsrichtung: 184deg
• Startposition: 20%
• Endposition: 20%

Desktopzeile hinzufügen

Dann können Sie fortfahren und eine erste zweispaltige Zeile hinzufügen. diese Zeile ist die Desktop-Version. Glücklicherweise können wir das meiste davon auch für die Tablet-/Mobilversion wiederverwenden.

Zeileneinstellungen

Spaltenhintergrund

Fügen Sie auf der Registerkarte Inhalt '#FFFFFF' als Hintergrundfarbe der zweiten Spalte hinzu.

Ausrichtung der rechten Reihe

Wechseln Sie zur Registerkarte Design und wählen Sie eine rechte Zeilenausrichtung aus.

Zeile in voller Breite machen

Öffnen Sie als Nächstes die Unterkategorie Größenanpassung und aktivieren Sie die Option „Diese Zeile in voller Breite erstellen“.

Benutzerdefinierte Polsterung

Als letztes müssen Sie in den Zeileneinstellungen eine obere Auffüllung von '300px' in die Zeile und die folgende Auffüllung in die zweite Spalte einfügen:

• Oben: 35px
• Rechts: 35px
• Unten: 150px
• Links: 35px

Spalte 1

Erstes Teilermodul

Für die erste Spalte beginnen wir mit dem Hinzufügen eines Teilermoduls. Aktivieren Sie in der Unterkategorie Sichtbarkeit der Registerkarte Inhalt die Option "Teiler anzeigen".

Wechseln Sie zur Registerkarte Design und wählen Sie '#FFFFFF' als Teilerfarbe.

Wählen Sie dann 'Solid' als Teilungsstil und 'Oben' als Teilerposition innerhalb der Unterkategorie Stile.

Das letzte, was Sie auf der Registerkarte Design des Trennmoduls tun müssen, sind die folgenden Anpassungen an der Unterkategorie Größen:

• Teilergewicht: 3
• Höhe: 0px
• Breite: 20%
• Modulausrichtung: Rechts

Erstes Textmodul

Fügen Sie direkt unter dem Trennmodul das erste Textmodul hinzu und verwenden Sie die folgenden Einstellungen in der Unterkategorie Text der Registerkarte Design:

• Textschriftart: Arvo
• Schriftgröße des Textes: 30px
• Textfarbe: #000000
• Textzeilenhöhe: 1,6em
• Textausrichtung: Mitte

Erstes Teilermodul klonen und Ausrichtung ändern

Klonen Sie das von uns erstellte Trennmodul und positionieren Sie es direkt unter dem ersten Textmodul. Das einzige, was geändert werden muss, ist die Modulausrichtung in der Unterkategorie Dimensionierung. Anstatt es auf der rechten Seite zu haben, wählen Sie die linke.

Zweites Textmodul

Das letzte, was Sie der ersten Spalte hinzufügen müssen, ist ein weiteres Textmodul mit den folgenden Einstellungen:

• Textschriftart: Lato
• Schriftgröße des Textes: 14
• Textzeilenhöhe: 1.7em
• Textausrichtung: Mitte

Spalte 2

Bildmodul

Das erste, was Sie der zweiten Spalte hinzufügen müssen, ist ein Bildmodul mit den folgenden Einstellungen in der Unterkategorie Abstand der Registerkarte Design:

• Leerzeichen unter dem Bild anzeigen: Ja
• Oberer Rand: -300px
• Links: -80px

Textmodul

Fügen Sie dann ein Textmodul direkt unter dem Bildmodul hinzu und wählen Sie die folgenden Einstellungen in der Unterkategorie Text der Registerkarte Design:

• Textschriftart: Lato
• Schriftgröße des Textes: 14
• Textzeilenhöhe: 1.7em
• Textausrichtung: Mitte

Social Media Follow-Modul

Das letzte, was Sie der zweiten Spalte hinzufügen müssen, ist ein Social Media Follow-Modul. Fügen Sie so viele soziale Symbole hinzu, wie Sie möchten, und stellen Sie sicher, dass Sie auf der Registerkarte "Design" als Elementausrichtung "Mitte" auswählen.

Auf Tablet und Telefon deaktivieren

Sobald dies erledigt ist, können Sie die Zeile auf Telefon und Tablet deaktivieren.

Handyzeile hinzufügen

Desktop-Reihe klonen

Nachdem wir die Desktop-Version bereits erstellt haben, geht die Erstellung der mobilen Version viel schneller. Klonen Sie die Desktop-Zeile und befolgen Sie die nächsten Schritte.

Spalten wechseln

Beginnen Sie mit dem Wechseln der Module, die sich in beiden Spalten befinden.

Spaltenhintergrundfarbe

Entfernen Sie anschließend die Hintergrundfarbe der zweiten Spalte und platzieren Sie sie stattdessen in der ersten Spalte.

Spaltenauffüllung

Anstatt das benutzerdefinierte Padding in der zweiten Spalte zu haben, müssen wir es in der ersten Spalte haben. Außerdem ist das untere Padding nicht '150px' sondern '35px' wie das obere, rechte und linke Padding.

Mittelreihenausrichtung verwenden

Dann müssen wir auch die Zeilenausrichtung in 'Mitte' ändern.

Auf dem Desktop deaktivieren

Stellen Sie zu guter Letzt sicher, dass die Zeile auf dem Desktop deaktiviert ist.

Dritter Abschnitt

Der dritte Abschnitt wird dem zweiten sehr ähnlich sein. Das Erstellen dieses Abschnitts wird einfach sein, da wir die meisten Einstellungen des zweiten Abschnitts übernehmen und einige Anpassungen vornehmen können. Nachdem Sie alle Schritte ausgeführt haben, können Sie das folgende Ergebnis sehen:

Abschnittseinstellungen

Hintergrund mit Farbverlauf

Fügen Sie einen neuen Standardabschnitt hinzu und verwenden Sie den folgenden Verlaufshintergrund:

• Erste Farbe: #d6d6d6
• Zweite Farbe: #9e5555
• Verlaufstyp: Linear
• Verlaufsrichtung: 184deg
• Startposition: 30%
• Endposition: 30%

Benutzerdefinierter Rand

Fügen Sie dann auch einen benutzerdefinierten Rand von '-200px' hinzu.

Desktop-Reihe

Dieselbe Arbeitsweise gilt für den dritten Abschnitt; Wir werden eine Desktop- und eine Tablet-/Telefonversion erstellen.

Desktop-Reihe des zweiten Abschnitts klonen

Beginnen Sie mit dem Klonen der Desktop-Zeile des vorherigen Abschnitts. Die meisten Einstellungen sind gleich und wir gehen die Änderungen durch, die vorgenommen werden müssen.

Spalten wechseln

Eine der Änderungen, die wir vornehmen müssen, ist das Wechseln der Module, die sich in beiden Spalten befinden.

Spaltenhintergrundfarbe

Dann müssen wir auch die Hintergrundfarbe der zweiten Spalte entfernen und '#000000' als Hintergrundfarbe der ersten Spalte hinzufügen.

Spaltenauffüllung

Löschen Sie den benutzerdefinierten Abstand von Spalte 2 und verwenden Sie '35px' für den oberen, rechten, unteren und linken benutzerdefinierten Abstand der ersten Spalte.

Verwenden Sie die Ausrichtung der linken Reihe

Ändern Sie auch die Zeilenausrichtung von rechts nach links.

Benutzerdefinierter Rand des Bildmoduls

Die Unterkategorie "Abstand" des Bildmoduls erfordert ebenfalls einige Änderungen:

• Oben: -150px
• Rechts: -80px

Benutzerdefinierter Rand des ersten Teilermoduls

Als nächstes fügen Sie dem ersten Teilermodul in der zweiten Spalte einen oberen Rand von '200px' hinzu.

Verwenden Sie entgegengesetzte Farben

Wie Sie feststellen können; die Verwendung von Farben ist das Gegenteil des zweiten Abschnitts. Gehen Sie voran und ändern Sie alle Schriftfarben in '#FFFFFF' und die Teilerfarben in '#000000'.

Auf Tablet und Telefon deaktivieren

Obwohl die Zeile auf Tablet und Telefon (wegen des Klons) bereits deaktiviert ist, können Sie zur Unterkategorie Sichtbarkeit wechseln, wenn Sie sich vergewissern möchten.

Mobile Reihe

Vorherige Desktopzeile klonen

Klonen Sie für die mobile Version die soeben erstellte Desktop-Zeile und nehmen Sie die Änderungen vor, die im nächsten Teil dieses Beitrags folgen.

Mittelreihenausrichtung verwenden

Öffnen Sie die Zeileneinstellungen und ändern Sie die Zeilenausrichtung auf Mitte.

Benutzerdefinierter Rand des Bildmoduls

Eine andere Sache, die Sie tun müssen, ist, den oberen Rand des Bildmoduls in '-20%' zu ändern.

Auf dem Desktop deaktivieren

Stellen Sie zu guter Letzt sicher, dass diese letzte Zeile auf dem Desktop deaktiviert ist.

Ergebnis

Wenn Sie diesem Tutorial Schritt für Schritt folgen, sollten Sie auf dem Desktop das folgende Ergebnis erzielen können:

Und folgendes Ergebnis auf dem Handy:

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie die verschiedenen Ausrichtungsoptionen von Zeilen im Divi Builder kreativ nutzen können. Die Leute lernen am meisten durch Tun, deshalb haben wir Ihnen ein Beispiel zur Verfügung gestellt, das wir Ihnen Schritt für Schritt gezeigt haben, wie man es erstellt. Wenn Sie Fragen oder Anregungen haben; Hinterlasse gerne einen Kommentar im Kommentarbereich unten.

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!