So erstellen Sie lebendige Abschnittstitel für Ihr nächstes Divi-Projekt

Wir wissen, dass die meisten von Ihnen immer nach neuen Wegen suchen, um die von Ihnen erstellten Websites einzigartig zu machen. Mit Divi gibt es viele Möglichkeiten, Ihre Website von anderen abzuheben. Heute zeigen wir Ihnen, wie Sie nur mit den integrierten Optionen von Divi beeindruckende Abschnittstitel erstellen können. Dieser Ansatz ist großartig, wenn Sie ein beeindruckendes Design erstellen, die allgemeine Seitenstruktur beibehalten und die Navigation nahtlos halten möchten.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen Blick auf das Ergebnis, das wir auf verschiedenen Bildschirmgrößen erzielen möchten:

Beginnen wir mit dem Erstellen!

Neuen regulären Abschnitt hinzufügen

Abstand

Öffnen Sie zunächst eine neue Seite, wechseln Sie zu Visual Builder und fügen Sie Ihren ersten Abschnitt hinzu. Öffnen Sie die Abschnittseinstellungen, ohne noch Zeilen oder Module hinzuzufügen, und fügen Sie etwas Auffüllung hinzu:

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Neue Zeile hinzufügen

Spaltenstruktur

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

Hintergrundfarbe

Öffnen Sie als nächstes die Zeileneinstellungen und fügen Sie Ihrer gesamten Zeile eine Hintergrundfarbe hinzu:

• Hintergrundfarbe: #f9f9f9

Spalte 1 Hintergrund mit Farbverlauf

Fügen Sie dann Ihrer ersten Spalte einen subtilen Hintergrund mit Farbverlauf hinzu. Dies hilft dabei, die Überlappung der Abschnittstitel zwischen den Spalten zu erstellen.

• Farbe 1: #0031c4
• Farbe 2: #00aeff
• Spalte 1 Gradientenrichtung: 125deg

Größe

Ändern Sie auch den Abstand Ihrer Reihe, um sicherzustellen, dass sie die gesamte Breite des Bildschirms einnimmt.

• Machen Sie diese Zeile in voller Breite: Ja
• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Ändern Sie zuletzt die Abstandseinstellungen entsprechend den verschiedenen Bildschirmgrößen:

• Obere Polsterung: 0px
• Untere Polsterung: 0px
• Spalte 2 obere Polsterung: 200px
• Spalte 2 untere Polsterung: 200px
• Spalte 2 linker Abstand: 350px (Desktop), 50px (Tablet & Telefon)
• Spalte 2 rechts auffüllen: 50px

Abschnittstitel-Textmodul zu Spalte 1 hinzufügen

H2-Texteinstellungen

Nachdem alle Zeileneinstellungen vorgenommen wurden, können wir mit dem Hinzufügen von Modulen beginnen. Wir beginnen mit der ersten Spalte. Hier benötigen wir nur ein Textmodul. Nachdem Sie den H2-Inhalt im Feld Inhalt hinzugefügt haben, ändern Sie die H2-Texteinstellungen:

• Überschrift 2 Schriftstärke: Ultra Bold
• Überschrift 2 Schriftstil: Großbuchstaben
• Überschrift 2 Textausrichtung: Mitte
• Überschrift 2 Textfarbe: #ffffff
• Überschrift 2 Textgröße: 150px
• Überschrift 2 Zeilenhöhe: 1,25em
• Überschrift 2 Textschatten Vertikale Länge: -0.55em
• Überschrift 2 Textschattenfarbe: rgba(0,255,255,0.25)

Abstand

Die Überlappung zwischen den Spalten ist auf Desktop, Tablet und Telefon unterschiedlich. Um die Überlappung zu erstellen, nehmen wir einige Änderungen an den Abstandseinstellungen unseres Textmoduls vor:

• Oberer Rand: 325 Pixel (Desktop), 150 Pixel (Tablet und Telefon)
• Unterer Rand: 325 Pixel, -120 Pixel (Tablet), -110 Pixel (Telefon)
• Rechter Rand: -100% (Desktop), 0px (Tablet & Telefon)

Filter

Zu guter Letzt verwenden wir einen Mischmodus, um den Farbunterschied für den angezeigten Text zu erzeugen.

• Mischmodus: Überlagerung

Titeltextmodul zu Spalte 2 hinzufügen

H3-Texteinstellungen

Kommen wir zur zweiten Spalte. Dort benötigen wir als erstes Modul ein Titel-Textmodul. Nachdem Sie Ihren H3-Inhalt hinzugefügt haben, ändern Sie die H3-Texteinstellungen:

• Überschrift 3 Schriftstärke: Halbfett
• Überschrift 3 Textfarbe: #00aeff
• Überschrift 3 Textgröße: 60px
• Überschrift 3 Buchstabenabstand: -3px

Abstand

Schaffen Sie etwas Platz, indem Sie als nächstes den unteren Rand hinzufügen:

• Unterer Rand: 50px

Trennmodul zu Spalte 2 hinzufügen

Teilerfarbe

Das zweite Modul, das wir benötigen, ist ein Teilermodul. Öffnen Sie die Farbeinstellungen und ändern Sie die Farbe entsprechend der Farbpalette des Designs:

• Teilerfarbe: #00ffff

Größe

Ändern Sie dann die Größeneinstellungen:

• Höhe: 56px
• Breite: 75%

Beschreibungstextmodul zu Spalte 2 hinzufügen

Texteinstellungen

Fahren Sie fort, indem Sie ein Beschreibungstextmodul mit den folgenden Texteinstellungen hinzufügen:

• Textgröße: 17px
• Textzeilenhöhe: 1.3em
• Textausrichtung: Begründen

Größe

Ändern Sie als nächstes die Größeneinstellungen:

• Größe: 70 % (Desktop), 100 % (Tablet & Telefon)

Abstand

Fügen Sie unterhalb dieses Moduls etwas Platz hinzu, indem Sie auch einen unteren Rand verwenden:

• Unterer Rand: 50px

Schaltflächenmodul zu Spalte 2 hinzufügen

Tasteneinstellungen

Das letzte Modul, das wir in dieser Spalte benötigen, ist ein Button-Modul. Ändern Sie nach dem Hinzufügen des CTA die Schaltflächeneinstellungen:

• Benutzerdefinierte Stile für Schaltfläche verwenden: Ja
• Schaltflächentextgröße: 17px
• Schaltflächentextfarbe: #ffffff
• Schaltflächenhintergrundfarbe: #00aeff
• Breite des Tastenrahmens: 0px
• Schaltflächenrandradius: 100px
• Tastenabstand der Buchstaben: -1px
• Schriftstärke: Ultra Bold
• Schriftstil: Großbuchstaben

Abstand

Und um der Schaltfläche ein saubereres Aussehen und Gefühl zu verleihen, fügen wir auch einige Polster hinzu:

• Obere Polsterung: 10px
• Untere Polsterung: 10px
• Linke Polsterung: 30px
• Rechte Polsterung: 30px

Box Schatten

Zu guter Letzt verwenden wir einen subtilen Kastenschatten, um unserem Abschnitt ein wenig Tiefe zu verleihen:

• Stärke der Box-Schattenunschärfe: 54px
• Stärke der Box-Schattenausbreitung: -8px
• Schattenfarbe: rgba(0,0,0,0.3)

Abschnitt klonen

Alle Kopien ändern

Um den zweiten Abschnitt zu erstellen, klonen wir einfach den bereits erstellten Abschnitt und ändern dann die gesamte Kopie.

Zeilenhintergrundfarbe ändern

Für diesen neuen Abschnitt werden wir eine andere Farbpalette verwenden. Beginnen Sie damit, die Hintergrundfarbe Ihrer Zeile zu ändern.

• Hintergrundfarbe: #effef

Hintergrund mit Farbverlauf in Spalte 1 ändern

Wählen Sie dann auch einen anderen Verlaufshintergrund.

• Farbe 1: #5f00a8
• Farbe 2: #9000ff

Schattenfarbe des Abschnittstitels ändern

Wir passen die Textschattenfarbe auch an unsere neue Farbpalette an:

• Überschrift 2 Textschattenfarbe: rgba(255,0,255,0.24)

Abstandseinstellungen für Abschnittstitel ändern

Abhängig von der Länge der Kopie, die Sie verwenden, müssen Sie mit dem negativen rechten Rand herumspielen.

• Rechte Marge: -110% (Desktop)

Textfarbe des Titeltextmoduls ändern

Ändern Sie dann die Textfarbe des Titeltextmoduls in Spalte 2.

• Überschrift 3 Textfarbe: #9000ff

Teilerfarbe ändern

Passen Sie die Teilerfarbe ebenfalls an das Design an.

• Farbe: #ff00ff

Hintergrundfarbe der Schaltfläche ändern

Zum Abschluss müssen Sie die Hintergrundfarbe des Schaltflächenmoduls ändern.

• Schaltflächenhintergrundfarbe: #9000ff

Vorschau

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

Abschließende Gedanken

Es gibt viele Möglichkeiten, wie Sie Ihr Webdesign von anderen Websites abheben können. In diesem Beitrag haben wir Ihnen gezeigt, wie Sie beeindruckende Abschnittstitel und Abschnitte im Allgemeinen erstellen, indem Sie nur die integrierten Optionen von Divi verwenden. Wir haben Spaltenverlaufshintergründe mit Textmodulüberlappungen, Textschatten und Mischmodi kombiniert, um ein atemberaubendes Endergebnis zu erzielen. Wenn Sie Fragen oder Anregungen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten!