Zeilengrenzen mit Divi . horizontal überlappen

Das Erstellen von interaktiven Seitendesigns ist nicht immer einfach. Neben dem Fokus auf User Experience, Designprinzipien und Designtrends müssen Sie auch etwas kreieren, das zu Ihrem Firmenbranding passt und Ihre Besucher auf den ersten Blick fasziniert.

Wenn Sie unseren Blog durchsuchen, finden Sie eine Menge kreativer Möglichkeiten, Ihr Webdesign mit Divi und den vielseitigen integrierten Optionen von Divi anzugehen. Heute fügen wir dieser Liste einen weiteren kreativen Ansatz hinzu. Wir zeigen Ihnen, wie Sie Zeilenränder kreativ überlappen, um ein atemberaubendes Design zu erstellen. Wir stellen sicher, dass wir auf allen Bildschirmgrößen das gleiche Design haben.

Lasst uns anfangen!

Abonnieren Sie unseren Youtube-Kanal

Vorschau

Wir werden ein Beispiel von Grund auf neu erstellen, aber bevor wir uns damit befassen, werfen wir einen Blick auf das Endergebnis auf verschiedenen Bildschirmgrößen.

Kostenlose Mighttype Schriftart herunterladen

Das erste, was Sie tun müssen, ist die kostenlose Mightype-Handschrift von AF Studio herunterzuladen. Gehen Sie auf den folgenden Link und aktivieren Sie den kostenlosen Download per E-Mail.

Neuen Abschnitt hinzufügen

Abstand

Nachdem Sie die im vorherigen Schritt erwähnte kostenlose Schriftart heruntergeladen haben, können Sie eine neue Seite erstellen. Aktivieren Sie danach den Visual Builder, öffnen Sie den ersten Abschnitt Ihrer neuen Seite und fügen Sie benutzerdefinierte Auffüllungen hinzu:

• Obere Polsterung: 250px
• Untere Polsterung: 250px

Neue Zeile hinzufügen

Spaltenstruktur

Wir brauchen insgesamt zwei Reihen. Wir beginnen mit dem ersten und klonen es danach, sobald es fertig ist. Fügen Sie Ihrem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzu:

Spalte 1 Hintergrund mit Farbverlauf

Öffnen Sie Ihre Zeileneinstellungen, ohne noch Module hinzuzufügen, und fügen Sie den folgenden Farbverlaufshintergrund von Spalte 1 hinzu:

• Farbe 1: #ffffff
• Farbe 2: rgba(0,255,233,0.25)
• Spaltenverlaufstyp: Radial
• Radiale Richtung der Spalte: Links
• Spaltenstartposition: 59 %
• Säulenendposition: 59%
• Spalte Farbverlauf über Hintergrundbild platzieren: Ja

Spalte 1 Hintergrundmuster

Fahren Sie fort, indem Sie das folgende Muster auf Ihrem Computer speichern und als Hintergrundbild für Spalte 1 hochladen:

Nachdem Sie das Muster hochgeladen haben, verwenden Sie die folgenden Hintergrundbildeinstellungen:

• Spalte Hintergrundbildgröße: Tatsächliche Größe
• Spaltenhintergrundbild wiederholen: Leerzeichen

Zeilenausrichtung

Aktivieren Sie auch die rechte Zeilenausrichtung.

Größe

Wir verwenden auch einige benutzerdefinierte Größeneinstellungen für diese Zeile:

• Benutzerdefinierte Breite verwenden: Ja
• Benutzerdefinierte Breite: 950px

Abstand

Dies sind die Abstandswerte, die Sie als nächstes hinzufügen müssen:

• Unterer Rand: 100px
• Rechter Rand: -30px (Tablet & Telefon)
• Obere Polsterung: 0px
• Untere Polsterung: 0px

Grenze

Zu guter Letzt fügen Sie oben, links und unten in Ihrer Zeile einen Rahmen hinzu:

• Randbreite: 14px
• Randfarbe: #000000
• Linker Randstil: Doppelt

Titeltextmodul hinzufügen

H2-Kopie hinzufügen

Wir können jetzt mit dem Hinzufügen unserer Module beginnen! Fügen Sie ein Titel-Textmodul hinzu und stellen Sie sicher, dass Ihre Kopie H2 ist.

Hintergrundfarbe

Wir unterbrechen den linken Rand unserer Zeile, indem wir dem Textmodul eine weiße Hintergrundfarbe hinzufügen.

Mighttype-Schriftart hochladen

Suchen Sie als nächstes die Mightype-Schriftart auf Ihrem Computer und laden Sie sie in Ihre Schriftartenbibliothek hoch, indem Sie auf die Schaltfläche zum Hochladen in Ihrer Schriftartenliste klicken.

Wählen Sie die Mightype-Schriftartdatei aus, geben Sie Ihrer Schrift einen Namen und laden Sie sie in Ihre Schriftbibliothek hoch.

H2-Texteinstellungen

Nachdem Sie die neue Schriftart hinzugefügt haben, fahren Sie fort und nehmen Sie einige andere Änderungen an den H2-Texteinstellungen vor:

• Überschrift 2 Schriftart: Mightype
• Überschriftstextfarbe: #000000
• Überschrift 2 Textgröße: 150px (Desktop), 100px (Tablet), 60px (Telefon)

Abstand

Für jedes der Module, die die Zeilenränder überlappen sollen, müssen Sie einen negativen Rand hinzufügen. Dieser negative Rand wirkt sich nur auf das fragliche Modul aus, nicht auf die Zeile, in der es platziert wurde. Der negative Rand, den Sie hinzufügen müssen, hängt von der Anzahl der Zeichen ab, die in Ihrer Kopie verwendet werden.

• Oberer Rand: 200px
• Unterer Rand: 100px
• Linker Rand: -35%
• Obere Polsterung: 50px
• Untere Polsterung: 50px

Mischmodus

Und um sicherzustellen, dass die Hintergrundfarbe des Textmoduls nur den Rand der Zeile und nicht den Hintergrund von Spalte 1 beeinflusst, aktivieren Sie den Mischmodus "Multiplizieren" in den Filtereinstellungen.

Beschreibungstextmodul hinzufügen

Hintergrundfarbe

Fügen Sie direkt unter dem Titel-Textmodul ein Beschreibungs-Textmodul mit weißer Hintergrundfarbe hinzu.

Texteinstellungen

Gehen Sie zu den Texteinstellungen und nehmen Sie einige Änderungen vor:

• Textgröße: 22px (Desktop), 18px (Tablet), 15px (Telefon)
• Textzeilenhöhe: 1.8em
• Textausrichtung: Mitte

Größe

Verringern Sie als nächstes die Größe dieses Textmoduls auf '96%'.

Abstand

Fügen Sie auch etwas Abstand hinzu:

• Unterer Rand: 200px
• Linker Rand: -50%
• Obere Polsterung: 20px
• Untere Polsterung: 20px

Mischmodus

Und verwenden Sie auch hier den Mischmodus "Multiplizieren".

Zeile klonen

Wir sind fertig mit dem Ändern der ersten Zeile! Lassen Sie uns das gleiche Ergebnis erstellen, aber auf der anderen Seite der Seite. Um uns etwas Zeit zu sparen, klonen wir die Zeile, die wir bereits haben, und nehmen einige Änderungen vor.

Zeileneinstellungen ändern

Spalte 1 Hintergrund mit Farbverlauf

Das erste, was Sie ändern müssen, ist der Verlaufshintergrund von Spalte 1:

• Farbe 2: rgba(255,187,0,0.33)
• Radiale Spaltenrichtung: Rechts

Zeilenausrichtung

Wir möchten, dass die Zeile auf der anderen Seite erscheint, deshalb wählen wir die linke Zeilenausrichtung.

Abstand

Wir passen auch die Abstandseinstellungen an:

• Linker Rand: -25% (Tablet & Telefon)

Grenze

Entfernen Sie den linken Rand, der auf Ihre Zeile angewendet wurde, und wenden Sie ihn stattdessen auf die rechte Seite an:

• Breite des rechten Rands: 14px
• Farbe des rechten Rands: #000000
• Rechter Randstil: Doppelt

Einstellungen für das Titeltextmodul ändern

Abstand

Ändern Sie als nächstes die Abstandseinstellungen Ihres Titel-Textmoduls:

• Linker Rand: 52 % (Desktop & Tablet), 58 % (Telefon)
• Rechte Marge: -52% (Desktop & Tablet), 58% (Telefon)

Einstellungen für Beschreibungstext ändern

Abstand

Zu guter Letzt benötigt das Beschreibungstextmodul noch einige andere Spacing-Werte:

• Linker Rand: 50%
• Rechte Marge: -50%

Vorschau

Nachdem wir nun all die verschiedenen Schritte durchlaufen haben, werfen wir einen letzten Blick auf das Endergebnis auf verschiedenen Bildschirmgrößen.

Abschließende Gedanken

Überlappende Zeilenränder mit den integrierten Optionen von Divi können Ihrer Website die gewünschte Anpassung und Personalisierung verleihen. In diesem Beitrag haben wir Ihnen genau gezeigt, wie das geht. Wir haben ein schönes Beispiel von Grund auf neu erstellt. Dieses Beispiel sieht auf allen Bildschirmgrößen großartig aus und wir haben nur die integrierten Optionen von Divi verwendet! Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!