Inhaltsverzeichnis
Mit dem «Custom Code» von Elementor Pro oder dem Plugin Code Snippet kann der Link-Stil verändert werden.
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».
Um den Klassennamen auf den Link anzusprechen, musst du im Texteditor auf «Text» umschalten und die Klasse folgend eintragen.
Bei einem <a class="textlink" href=https://linkziel.ch>Link/Hyperlink</a>
handelt es sich um eine Verknüpfung, die verschiedene Internetseiten miteinander verbindet.
Hier kannst du auch die Klasse für den Link vergeben. Gehe über die drei Punkte zu «Als HTML bearbeiten.
Bei einem <a class="textlink" href=https://linkziel.ch>Link/Hyperlink</a>
handelt es sich um eine Verknüpfung, die verschiedene Internetseiten miteinander verbindet.