1.4.1 Links im Lauftext unterstreichen (Elementor, Gutenberg)

Individuellen Link-Stil gestalten

Mit dem «Custom Code» von Elementor Pro oder dem Plugin Code Snippet kann der Link-Stil verändert werden.

Zeigt den Hover-Effekt als Beispiel

Beachte den Farbkontrast der Link-Unterstreichung, wähle die Farbe individuell zu deinem Design aus.

Du hast die Farbe für dich ausgewählt? Dann vergebe diesem mal einen Klassennamen. In meinem Beispiel benenne ich diesen .textlink

<style>

.textlink{
	background-image: linear-gradient(180deg, #faed27 0%, #f5ff00 100%);
	background-repeat: no-repeat;
	background-size: 100% 0.4em;
	background-position: 0 120%;
	transition: background-size 0.25s ease-in, color 0.25s ease-in;
	padding: 0 3px;
	margin: 0 -3px;
}
.textlink:hover {
	background-size: 100% 80%;
	padding: 0 3px;
	margin: 0 -3px;
}
.textlink:focus{
	background-size: 100% 80%;
	color: #233542;
	padding: 0 3px;
	margin: 0 -3px;
	}

</style>

Mit diesem CSS-Code ist die Gestaltung der Unterstreichung erstellt. Aber jetzt müssen wir die jeweiligen Links im Fliesstext ansprechen. Dafür nehmen wir das Widget «Texteditor» oder im Gutenberg den Block «Absatz».

Eingabe im Texteditor-Widget von Elementor

Um den Klassennamen auf den Link anzusprechen, musst du im Texteditor auf «Text» umschalten und die Klasse folgend eintragen.

Im Texteditor bei Elementor den Link bearbeiten kann

Bei einem <a class="textlink" href=https://linkziel.ch>Link/Hyperlink</a> handelt es sich um eine Verknüpfung, die verschiedene Internetseiten miteinander verbindet.

Eingabe im Absatz-Block in Gutenberg

Hier kannst du auch die Klasse für den Link vergeben. Gehe über die drei Punkte zu «Als HTML bearbeiten.

WordPress-Gutenberg wo HTML bearbeitet werden kann

Bei einem <a class="textlink" href=https://linkziel.ch>Link/Hyperlink</a> handelt es sich um eine Verknüpfung, die verschiedene Internetseiten miteinander verbindet.