So wenden Sie alternative Textunterstreichungsstile in Divi . an

Textunterstreichungsstile waren schon immer ziemlich einschränkend. Die gängigste Methode zum Unterstreichen von Text im Web ist die Verwendung der CSS-Eigenschaft „text-decoration: underline“. Divi ermöglicht Ihnen sogar, diese Art von Unterstreichung in den Divi Builder-Moduleinstellungen bereitzustellen und zu gestalten. Diese Standardmethode des Unterstreichens hat jedoch Einschränkungen, wenn es um Stil und browserübergreifende Unterstützung geht.

Zugegeben, in den meisten Fällen muss das Unterstreichen von Text nicht kompliziert sein. Das Unterstreichen aller Links auf Ihrer Website, um anzuzeigen, dass sie anklickbar sind, ist beispielsweise eine Standardanwendung, die nicht unbedingt alternative Methoden erfordert. Wenn Sie jedoch die Unterstreichung auf die nächste Stufe bringen möchten, kann dieser Beitrag hilfreich sein.

In diesem Tutorial werde ich Sie durch die Anwendung einiger alternativer Textunterstreichungsstile auf Ihren Text in Divi führen. Ich zeige Ihnen die Standardmethode mit den integrierten Optionen von Divi zum Unterstreichen von Text. Außerdem zeige ich Ihnen, wie Sie den unteren Rahmen als alternative Methode zum Unterstreichen von Text verwenden. Die Verwendung eines unteren Rahmens gibt Ihnen nicht nur mehr Kontrolle über das Styling, sondern wird auch von allen Browsern unterstützt.

Lass uns anfangen.

Unterstreichen von Text mit Textdekoration (übliche Methode)

Die gebräuchlichste und einfachste Methode zum Unterstreichen von Text ist die Verwendung der CSS-Eigenschaft Textdekoration. Mit Divi können Sie Text mithilfe dieser Methode ganz einfach innerhalb der integrierten Optionen eines Moduls formatieren. Achten Sie einfach auf den Text Schriftstil Option und wählen Sie das „U“ Symbol , um die unterstrichenen Text Dekoration zu implementieren. Sobald der Schriftstil für die Unterstreichung ausgewählt ist, haben Sie auch die Möglichkeit, die Farbe und den Stil der Unterstreichung anzupassen.

Dies ermöglicht Ihnen eine Unterstreichungsfarbe, die sich von der tatsächlichen Textfarbe unterscheidet.

Und Sie können aus den folgenden Unterstreichungsstilen wählen:

• Fest
• Doppelt
• Gepunktet
• Gestrichelt
• Wellig

Sie können sogar auf den Unterstreichungsstil von Links innerhalb des Fließtexts abzielen. Dies gibt Ihnen mehr Kontrolle über das Design, wenn Sie das Textmodul verwenden. Wählen Sie einfach die Registerkarte Linkschriftart unter dem Schalter für die Textdesign-Kategorie aus. Wählen Sie für den Link-Schriftstil „Unterstreichen“. Dann können Sie die Farbe und den Stil der Linkunterstreichung entsprechend anpassen.

Einschränkungen des Textdekorations-Unterstreichungsstils

Es fehlt die Möglichkeit, die Breite und Position der Linie anzupassen

Leider gibt es beim Hinzufügen der text-decoration: underline css-Eigenschaft mit den integrierten Einstellungen von Divi keine Möglichkeit, die Breite der Linie oder die Position der Linie anzupassen. Die Breite der Linie ist für die Schriftgröße relevant, daher wird sie mit zunehmender Schriftgröße größer. Und da die Position der Unterstreichung an der Grundlinie liegt, werden die Unterlängen (Kleinbuchstaben, die unter die Grundlinie fallen) der Linie im Weg stehen, was insbesondere bei Wörtern mit vielen Unterlängen (wie „Typografie“) zu Inkonsistenzen führt. .

Diese Einschränkung stellt möglicherweise kein Problem dar, wenn Sie nur Großbuchstaben verwenden, da Sie sich um keine Unterlängen kümmern müssen. Es wäre schön, wenn es Unterstützung für die Anpassung der Unterstreichungsbreite und Unterstreichungsposition gäbe, aber im Moment haben wir kein Glück.

Fehlende Browserunterstützung

Internet Explorer unterstützt weder die Eigenschaft text-decoration-style noch die Eigenschaft text-decoration-color, daher können der Unterstreichungsstil (doppelt, gepunktet, gestrichelt usw.) und die Unterstreichungsfarbe nicht angepasst werden. Safari unterstützt auch nicht die Eigenschaft text-decoration-style, aber Sie können die Unterstreichungsfarbe ändern.

Dieser Mangel an Unterstützung ist nicht auf Divi beschränkt. Selbst benutzerdefiniertes CSS wird Ihnen nicht helfen.

Unterstreichen von Text mit einem unteren Rahmen

Wenn Sie nach einer alternativen Lösung zum Unterstreichen von Textstilen suchen, ist meiner Meinung nach die Verwendung eines unteren Rahmens die beste Option. Hier sind einige gute Gründe dafür:

• Ein Rahmen unterstützt acht verschiedene Rahmenstile, um Ihre Unterstreichung zu gestalten, einschließlich: gepunktet, gestrichelt, durchgehend, doppelt, Nut, Grat, Einsatz und Anfang.
• Sie können die Breite (Stärke) eines Rahmens unabhängig von der Schriftgröße anpassen.
• Sie können Rahmen näher am Text oder weiter vom Text positionieren.
• Sie können den Rändern jede gewünschte Farbe hinzufügen.
• Rahmenstile werden von ALLEN Browsern unterstützt.

Einschränkungen bei der Verwendung von unteren Rändern zum Unterstreichen

• Beschränkt auf eine einzelne Textzeile bei Blockelementen. Aber es gibt Möglichkeiten, dies zu umgehen (siehe unten).
• Positioniert komplett unter den Abseilgeräten und etwas schwierig, die Position richtig zu machen (aber machbar).

Den Unterschied zwischen Block- und Inline-Elementen verstehen

Um zu verstehen, wie das Unterstreichen von Rahmen funktioniert, müssen Sie den Unterschied zwischen Block- und Inline-Elementen kennen.

Blockelemente

Blockelemente erstrecken sich automatisch über die gesamte Breite ihres Containers (es sei denn, es wurde eine benutzerdefinierte Breite festgelegt) und beginnen in einer neuen Zeile. Websites (einschließlich der mit Divi erstellten) sind voller Blockelemente.

Einige Beispiele für gängige Blockelemente sind:

• Divi Abschnitte, Zeilen, Module (div)
• Fließtext oder Absätze (p)
• Überschriften (h1, h2, h3, h4, h5, h6)
• Listen (ol, ul)

Wenn Sie Blockelementen einen unteren Rand hinzufügen, befindet sich der Rand unter dem gesamten Block. Wenn Sie also einen Textabsatz (p) oder eine Überschrift (h1) haben, die in zwei oder mehr Zeilen unterteilt ist, wird der untere Rahmen nur auf den unteren Rand des Blocks angewendet, nicht auf die einzelnen Textzeilen.

Hier ist ein Beispiel dafür, wie das Hinzufügen eines unteren Rahmens zu einem h1-Überschriftenblockelement aussieht, wenn der Text in mehrere Zeilen unterteilt ist.

Obwohl die CSS auf das h1-Tag zielt, wird die Zeile nur auf das Blockelement angewendet. Daher wird die Linie nur ganz unten und nicht auf jede Linie einzeln aufgetragen.

Inline-Elemente

Im Gegensatz zu Blockelementen können Inline-Elemente auf mehrere Zeilen aufgeteilt werden. Wenn Sie also einem Inline-Element (wie zum Beispiel einem Link) einen unteren Rand hinzufügen, wird der untere Rand unterstrichen, auch wenn der Link in eine neue Zeile umbricht. Außerdem können Sie den Abstand von Inline-Elementen anpassen, ohne die Zeilenhöhe des Textkörpers zu beeinflussen, was sich hervorragend zum Positionieren der unteren Randunterstreichung eignet.

Hier ist ein Beispiel für einige Links (die standardmäßig Inline-Elemente sind) mit Unterstrichen am unteren Rand.

Einfach ausgedrückt, können Inline-Elemente eine Unterstreichung des unteren Rands aufweisen, wenn sie in mehrere Zeilen aufgeteilt werden, und Blockelemente können dies nicht.

So fügen Sie einer einzelnen Textzeile (einem Blockelement) die Unterstreichung des unteren Rands hinzu

Hier ist ein Beispiel dafür, wie Sie mit den integrierten Einstellungen des Textmoduls einer einzelnen Textzeile einen unteren Rahmen hinzufügen. Diese Option funktioniert am besten für Kopfzeilen, da Sie den Text auf eine einzelne Zeile beschränken.

Erstellen Sie einen neuen Abschnitt mit einer einspaltigen Zeile. Fügen Sie dann einen Textbaustein mit folgendem Inhalt hinzu:

Underlining Typography

Aktualisieren Sie dann die Textmoduleinstellungen wie folgt:

• Texttextgröße: 46px (Desktop), 40px (Tablet), 26px (Telefon)
• Textzeilenhöhe: 1.8em
• Breite: 517 Pixel (Desktop), 450 Pixel (Tablet), 293 Pixel (Telefon)
• Breite des unteren Rands: 2px
• Farbe des unteren Rands: #0c71c3
• Unterer Randstil: Gepunktet

Wie Sie sehen, kann der Rahmen mit Breite, Farbe und Stil gestaltet werden. Da der untere Rahmen auf das Modul angewendet wird, ist es notwendig, die Breite des Moduls an die gleiche Breite des Textes anzupassen. Sie müssen also die Textgröße und die Modulbreite entsprechend ändern.

So fügen Sie Blockelemente (wie Überschriften), die sich über Linien teilen, eine Unterstreichung des unteren Rands hinzu

Wie bereits erwähnt, erlauben Blockelemente wie Überschriften (h1, h2, h3, etc…) nicht, dass der untere Rand bei jedem Zeilenumbruch inline angewendet wird. Um dies zu umgehen, können wir unseren Text einfach mit einem span-Tag umschließen. Ein Span ermöglicht es Ihnen, Inline-Elemente (wie eine Textgruppe) zu gruppieren, um diesen Elementen einen Stil hinzuzufügen. Wenn wir also einen unteren Rand zu einem h1-Tag (einem Blockelement) haben möchten, können wir den Text innerhalb des h1-Tags mit einem zusätzlichen span-Tag umschließen. Dann können wir dem span-Tag den Unterstreichungsstil für den unteren Rahmen hinzufügen. Auf diese Weise können wir den h1-Tag-Text (oder Teile davon) unterstreichen, auch wenn er in eine andere Zeile umbricht.

Hier ist ein Beispiel dafür, wie Sie Blockelementen (wie Überschriften), die mit benutzerdefiniertem CSS in mehrere Textzeilen aufgeteilt werden, einen unteren Rahmen hinzufügen.

Fügen Sie zunächst einen neuen Abschnitt mit einer einspaltigen Zeile hinzu. Fügen Sie dann der Zeile einen Textbaustein hinzu. Ersetzen Sie im Inhaltsfeld den standardmäßigen Scheintext durch Folgendes:

<h1><span>This is a Heading with Bottom Border Underlining Styled with a Span Tag</span></h1>

Da wir eine untere Rahmenunterstreichung hinzufügen werden, erhöhen wir die Höhe der Überschriftszeile h1 wie folgt:

Fügen Sie als Nächstes die folgende benutzerdefinierte CSS-ID auf der Registerkarte "Erweitert" hinzu:

CSS-ID: Rahmen-Unterstreichung

Öffnen Sie als Nächstes das Seiteneinstellungen-Modal und fügen Sie das folgende benutzerdefinierte CSS hinzu:

.border-underline span {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
}

Dieser Stil des unteren Rahmens wird auf die Elemente innerhalb des span-Tags angewendet. Da es sich beim span-Tag um ein Inline-Element handelt, wird der Text in jeder Zeile unterstrichen.

Die Eigenschaft border-bottom kann nach Belieben angepasst werden. Der erste Wert (2px) legt die Dicke (oder Breite) des Rahmens fest. Der zweite Wert (gestrichelt) legt den Stil des Rahmens fest. Vergessen Sie nicht, dass Sie auch die folgenden Randstile verwenden können: gestrichelte, gepunktete, doppelte, gerillte, geriffelte, eingesetzte und beginnende. Und der dritte Wert (#0c71c3) legt die Farbe des Rahmens fest. Sie können auch das benutzerdefinierte Padding-CSS in Verbindung mit dem Textzeilenhöhenwert in den integrierten Optionen des Textmoduls optimieren, um auch den Abstand genau richtig zu machen.

Wenn Sie das span-Tag nicht benötigen und das gesamte h1-Tag in ein Inline-Element konvertieren möchten, können Sie stattdessen dieses CSS in den Seiteneinstellungen verwenden:

.border-underline h1 {
border-bottom: 2px dashed #0c71c3;
padding: 0.1em 0;  
display: inline;
}

Beachten Sie, dass dieses CSS auf das h1-Tag zielt. Zusätzlich zu den unteren Rand- und Padding-Stilen ändert das "display: inline" das h1-Tag in ein Inline-Element, das es ermöglicht, h1-Text auf mehreren Zeilen zu unterstreichen.

Hinzufügen einer Unterstreichung des unteren Rahmens zu Inline-Links in Divi

Hier ist ein Beispiel dafür, wie Sie Ihrem Inline-Link-Text in Divi mit benutzerdefiniertem CSS einen unteren Rand hinzufügen würden. Erstellen Sie zunächst einen neuen Abschnitt mit einer einspaltigen Zeile und fügen Sie der Zeile einen Textbaustein hinzu.

Verwenden Sie dann den Wysiwyg-Editor, um dem Fließtext einige Links hinzuzufügen, damit Sie mit einigen Links arbeiten können.

Fügen Sie dann eine benutzerdefinierte CSS-Klasse auf der Registerkarte Erweitert wie folgt hinzu:

CSS-Klasse: border-underline

Öffnen Sie nun die Seiteneinstellungen und fügen Sie das folgende benutzerdefinierte CSS hinzu, um den unteren Rand auf alle Links innerhalb des Textmoduls anzuwenden.

.border-underline a {
border-bottom: 1px solid #333333;
padding: 0.1em 0;  
}

Die Eigenschaft border-bottom kann nach Belieben angepasst werden. Der erste Wert (1px) legt die Dicke (oder Breite) des Rahmens fest. Der zweite Wert (durchgezogen) legt den Stil des Rahmens fest. Vergessen Sie nicht, dass Sie auch die folgenden Randstile verwenden können: gestrichelte, gepunktete, doppelte, gerillte, geriffelte, eingesetzte und beginnende. Und der dritte Wert (#333333) legt die Farbe des Rahmens fest.

Wenn Sie also eine untere Rahmenunterstreichung mit einer Breite von 2 Pixeln mit einem gestrichelten Stil und einer anderen Farbe wünschen, können Sie diese Werte durch Folgendes ersetzen:

border-bottom: 2px dashed #0c71c3;

Der Abstandswert kann auch angepasst werden, um die Rahmenunterstreichung vertikal zu positionieren. Wenn Sie also möchten, dass die Zeile weiter vom Text entfernt ist, können Sie den Auffüllwert auf etwa Folgendes erhöhen:

padding: 0.3em 0;

Sie können diesen benutzerdefinierten Abstand auch in Verbindung mit dem Wert für die Textzeilenhöhe in den integrierten Optionen des Textmoduls verwenden, um auch den richtigen Abstand zu erhalten.

Und da es sich bei den Links um Inline-Elemente handelt, bleibt die Rahmenunterstreichung bei Links, die sich über Zeilen hinweg teilen.

Was ist mit Teilern?

Wenn Sie beim Unterstreichen einzelner Textzeilen (Blockelemente) wirklich kreativ werden möchten, können Sie jederzeit das Trennmodul von Divi verwenden. Das Trennmodul verfügt über viele integrierte Optionen wie Stil, Höhe, Breite, Hintergründe, Rahmen, Kastenschatten und mehr. Für noch individuellere Looks können Sie Trennwände sogar übereinander stapeln.

Hier ist ein kurzes Beispiel für ein Trennmodul, das verwendet wird, um Text mit einer Doppellinie mit einem Hintergrund mit Farbverlauf zu unterstreichen.

Fügen Sie einfach ein Trennmodul direkt unter einem Textmodul hinzu, das Ihren Text enthält. Aktualisieren Sie dann Folgendes:

• Hintergrundfarbe links: #2b87da
• Hintergrund mit Farbverlauf rechts: #29c4a9
• Verlaufstyp: Linear
• Verlaufsrichtung: 90deg
• Farbe: #ffffff
• Teilergewicht: 2px
• Höhe: 2px
• Breite: 400px (diese muss an die Breite des obigen Textes angepasst werden)
• Benutzerdefinierte Polsterung: 5 Pixel oben, 5 Pixel unten

Abschließende Gedanken

Ich hoffe, dieses Tutorial bietet Ihnen eine nützliche Alternative zum Hinzufügen von Textunterstreichungsstilen in Divi. Die übliche Methode mit „Text-Dekoration: Unterstreichen“ ist bei weitem die einfachste Lösung, aber die Einschränkungen können lästig sein. Die Unterstreichungsmethode für den unteren Rand gibt Ihnen etwas mehr Kontrolle über den Stil und die Platzierung der Linien. Und das benutzerdefinierte CSS ist definitiv nicht umständlich und kann leicht an Ihre Bedürfnisse angepasst werden. Wenn Sie also Ihre Textunterstreichung auf die nächste Stufe bringen möchten, sollte dies helfen.

Wie immer freue ich mich von dir in den Kommentaren zu hören.

Danke schön!