So erstellen Sie atemberaubende Textdesigns mit Abschnittstrennern in Divi

Das Erstellen einzigartiger Textdesigns für Ihre Website kann eine Herausforderung darstellen, insbesondere wenn Sie nicht viel CSS verwenden oder seo-freundlichen Text für Bilder, die Sie in Photoshop entwerfen, ergänzen möchten. Mit Divi (und etwas „out of the box“-Denken) können Sie einzigartige Textdesigns ohne externes CSS oder benutzerdefinierte Bilder erstellen. Der Trick besteht darin, die Abschnittstrenner von Divi zu verwenden, um Ihren Text zu überlagern, um Unterbrechungen und Texturen auf verschiedene Weise hinzuzufügen. In diesem Tutorial werde ich die Leistungsfähigkeit der Abschnittsteiler von Divi erkunden, um einige einzigartige Textdesigns zu erstellen, die Ihre Seitenüberschriften auf die nächste Ebene bringen.

Lass uns anfangen.

Vorgeschmack

Hier sind nur einige Beispiele für die Textgestaltung, die mit dieser Technik möglich ist:

Einstieg

Für dieses Design müssen Sie mit dem Visual Builder eine neue Seite erstellen. Navigieren Sie in Ihrem WordPress-Dashboard zu Seiten > Neu hinzufügen. Geben Sie dann Ihrer Seite einen Titel und stellen Sie den Visual Builder bereit. Wählen Sie die Option „Von Grund auf neu erstellen“. Jetzt können Sie loslegen!

Design Nr. 1: Unterbrochener Text mit einem Verlaufshighlight

In diesem ersten Textdesign verwende ich Abschnittstrenner, um den Text aufzuteilen und ein einzigartig geformtes Hervorhebungselement mit einem Farbverlaufshintergrund hinzuzufügen. Fügen Sie einen neuen Abschnitt mit einem einspaltigen Layout hinzu. Sie müssen zu diesem Zeitpunkt kein Modul hinzufügen. Wir beginnen mit der Anpassung des Abschnitts zuerst.

Abschnittseinstellungen

Öffnen Sie die Abschnittseinstellungen und aktualisieren Sie Folgendes:

Hintergrundfarbe links: rgba(124,218,36,0.66)
Hintergrundfarbe rechts: rgba(0,106.193,0.61)

Breite: 80%
Abschnittsausrichtung: Mitte

Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: #ffffff
Höhe des oberen Teilers: 1.8vw
Horizontale Wiederholung des oberen Teilers: 3x
Anordnung der oberen Trennwände: Über dem Abschnittsinhalt

Unterteiler-Stil: siehe Screenshot
Farbe des unteren Teilers: #ffffff
Höhe des unteren Teilers: 1.8vw
Horizontale Wiederholung des unteren Teilers: 3x
Anordnung der unteren Trennwände: Oben auf dem Abschnittsinhalt

Benutzerdefinierter Rand: 5vw oben, 5vw unten
Benutzerdefiniertes Padding: 0px oben, 0px unten

Da die Gestaltung Ihres Textes mit den Abschnittstrennern erfolgt, ist es wichtig, den Abschnitt kompakt und ohne Auffüllen zu halten, damit die Trennwände den Text mit minimaler Trennerhöhe überlappen. Das Einstellen der Trennwandhöhe mit einer vw-Längeneinheit stellt sicher, dass der Trennwandstil für ein einheitliches Design auf allen Bildschirmgrößen gut skaliert wird. Dem Abschnitt einen benutzerdefinierten Rand zu geben ist optional, aber auch hilfreich für den Abstand, da wir in unserem Textmodul negative Ränder verwenden werden, um ihn über und unter unserem Abschnitt zu erweitern (dies sollte später mehr Sinn machen).

Zeileneinstellungen

Für die Reihe müssen wir nur die Breite und die Polsterung anpassen. Aktualisieren Sie die folgenden Zeileneinstellungen:

Benutzerdefinierte Breite: 100%
Benutzerdefiniertes Padding: 0px oben, 0px unten

Da unser Text der Zeilenspalte hinzugefügt wird, müssen wir die Auffüllung entfernen, damit unsere Trennlinien den oberen und unteren Rand unseres Textes umschließen.

Einstellungen für das Textmodul

Jetzt können wir endlich den Textbaustein zu der einspaltigen Zeile hinzufügen. Fügen Sie innerhalb der Zeile einen Textbaustein mit dem Inhalt „unsere Arbeit“ hinzu. Aktualisieren Sie dann die Designeinstellungen wie folgt:

Textschriftart: Oswald
Textschriftart: TT
Text Textfarbe: #0c71c3
Text Textgröße: 10vw
Textzeilenhöhe: 1em
Textausrichtung: Mitte
Benutzerdefinierter Rand: -5vw oben, -4vw unten
Benutzerdefinierte Polsterung: 2vw oben, 2vw unten

Der Schlüssel hier ist, den benutzerdefinierten negativen Rand zu verwenden, um den Text über und unter dem Abschnitt zu erweitern. Dadurch können die Abschnittstrenner das Innere des Textes überlappen, um den unterbrochenen Designeffekt zu erzeugen. Und der Hintergrundverlauf scheint durch, um ihm einen schönen Design-Touch zu verleihen. Das Ergebnis ist vielleicht eines meiner Lieblingstextdesigns, das die Tür für eine Menge kreativer Variationen öffnet.

Hier ist das endgültige Design.

Textdesign #2: Text mit vertikaler Linienstruktur

Für das zweite Textdesign erstellen Sie einen neuen Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann der Spalte einen Textbaustein hinzu. Anstatt zuerst den Abschnitt anzupassen, dachte ich, dass es am besten ist, mit dem Textmodul zu beginnen, damit Sie den Designprozess besser sehen können.

Texteinstellungen

Fügen Sie in der einspaltigen Zeile einen Textbaustein mit dem Inhalt „unsere Arbeit“ hinzu. Aktualisieren Sie dann die Designeinstellungen wie folgt:

Textschriftart: Poppins
Schriftstärke des Textes: Ultra Bold
Schriftgröße des Textes: 8vw
Textzeilenhöhe: 1em
Textausrichtung: Mitte
Benutzerdefinierter Rand: 0px oben, 0px unten

Zeileneinstellungen

Die Zeileneinstellungen sind die gleichen wie im ersten Entwurfsbeispiel, sodass Sie die Zeilenstile kopieren und in diese Zeile einfügen können. Oder aktualisieren Sie einfach die Zeileneinstellungen wie folgt:

Benutzerdefinierte Breite: 100%
Benutzerdefiniertes Padding: 0px oben, 0px unten

Abschnittseinstellungen

Aktualisieren Sie die Abschnittseinstellungen wie folgt:

Breite: 70%

Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: #ffffff
Höhe des oberen Teilers: 8vw
Horizontale Wiederholung des oberen Teilers: 150x
Anordnung der oberen Trennwände: Über dem Abschnittsinhalt

Unterteiler-Stil: siehe Screenshot
Farbe des unteren Teilers: #ffffff
Höhe des unteren Teilers: 8vw
Horizontale Wiederholung des unteren Teilers: 150x
Unterteiler Flip: Vertikal
Anordnung der unteren Trennwände: Oben auf dem Abschnittsinhalt

Benutzerdefiniertes Padding: 0px oben, 0px unten

Der Schlüssel zu diesem Design ist die Option „Horizontaler Wiederholungsteiler“. Wenn die horizontale Wiederholung der Trennlinie auf 150x mit einer Höhe gleich der Höhe des Textes eingestellt wird, wird eine Reihe überlappender vertikaler Linien erstellt, die sich vom oberen und unteren Rand des Abschnitts erstrecken. Vergessen Sie nicht, den unteren Teiler so einzustellen, dass er vertikal gedreht wird, damit sich die „Linien“ nach oben erstrecken.

Hier ist das endgültige Design.

Design #3: Text mit partieller Textur oben und unten

Um den Prozess für dieses nächste Design zu beschleunigen, duplizieren Sie den Abschnitt, den Sie gerade im zweiten Designbeispiel oben erstellt haben.

Abschnittseinstellungen aktualisieren

Hintergrundfarbe: #e02b20

Top Divider Style: siehe Screenshot
Farbe des oberen Teilers: #e02b20
Höhe des oberen Teilers: 3vw
Horizontale Wiederholung des oberen Teilers: 30x

Unterteiler-Stil: siehe Screenshot
Farbe des unteren Teilers: #e02b20
Höhe des unteren Teilers: 3vw
Horizontale Wiederholung des unteren Teilers: 30x

Der Schlüssel hier ist, sicherzustellen, dass Ihre Teilerfarbe mit der Hintergrundfarbe des Abschnitts übereinstimmt, damit die Teiler nur dort sichtbar sind, wo sie den Text überlappen.

Texteinstellungen aktualisieren

Jetzt müssen Sie nur noch die Texttextfarbe aktualisieren:

Text Textfarbe: #ffffff

Hier ist das endgültige Design.

Eine lustige Design-Alternative zu Design #3

Bevor ich dieses Design verlasse, dachte ich, ich würde sagen, wie der untere Teiler in diesem Abschnitt leicht in Gras verwandelt werden kann, damit der Text aussieht, als würde er auf einem Feld sitzen. Aktualisieren Sie dazu die Einstellungen wie folgt:

Hintergrundfarbe links: #68a4d8 (der Himmel)
Hintergrund mit Farbverlauf rechts: #1c7503 (das Gras)
Startposition: 82%
Endposition: 0%
Benutzerdefinierte Polsterung: 5vw Top
Top Divider Style: Wolken (oder Blasen?)
Farbe des unteren Teilers: #1c7503

Aktualisieren Sie dann die Textfarbe auf #000835

Hier ist das Ergebnis.

Was ist mit Handy?

Da in diesen Designs die Längeneinheit vw verwendet wurde, lassen sich die Text- und Trennlinienstile in allen Browsern gut skalieren, ohne dass zusätzliche Größen auf Tablet und Smartphone zugewiesen werden müssen. Wenn Sie jedoch das Problem haben, dass der Text auf dem Smartphone zu wenig verkleinert wird, müssen Sie möglicherweise den Wert für die Textgröße vw Längeneinheit erhöhen.

Abschließende Gedanken

Ich hoffe, Sie hatten Spaß beim Experimentieren mit Abschnittstrennern für einzigartige Textdesigns. Mit all den verschiedenen Schriftarten, Farben und Trennlinien, die in Divi verfügbar sind, werden Sie sicher keine Probleme haben, für Ihr nächstes Projekt selbst fantastisch aussehende Textdesigns zu erstellen.

Weitere Inspirationen zur kreativen Verwendung von Abschnittstrennern finden Sie in diesen Hintergrundtexturen, Navigationsmenürahmen und Hintergründen für die untere Fußzeile.

Bis zum nächsten Mal freue ich mich, von Ihnen in den Kommentaren zu hören.

Danke schön!