Trick # 161 | Dieser Beitrag beinhaltet 476 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Im Divi-Theme lässt sich von Haus aus die Farbe der dargestellten Links definieren – jedoch ist damit mit Customizing auch schon Schluss. Beim Webdesign werden damit Links ab und an zu diskret dargestellt. Das lässt sich mit minimalem Aufwand ändern.
Dies ist ein Lauftext, auf welchen ein Link folgt und zum Schluss wieder Lauftext.
Man muss schon genau hinsehen, um den Link zu erkennen. Darum haben wir ins CSS-Stylesheet der Website eingegriffen und unter Design/Customizer/Zusätzliches CSS folgenden Code hinterlegt:
p > a, ol > li > a, ul > li > a {
text-decoration: underline 1px #293280;
}Nun ist der Link deutlich besser zu erkennen:
Dies ist ein Lauftext, auf welchen ein Link folgt und zum Schluss wieder Lauftext.
Den Hover-Effekt mit dem hellgrünen Hintergrund haben wir mit folgendem CSS-Code erzielt:
p > a:hover, ol > li > a:hover, ul > li > a:hover {
text-decoration: underline 1px #293280;
background-color: rgba(89,177,75,0.2);
}Es war das Ziel, dass die Navigationspunkte in den Menüs nicht von der geänderten Linkdarstellung betroffen sind. Deswegen haben wir ausschliesslich die Links in Paragraphen (p) und Listen (ol, ul und li) angesteuert.
Weitere Stylingmöglichkeiten
Aber es geht noch mehr: Die Link-Unterstreichung kann auch mit mehr Abstand dargestellt werden. Dafür blenden Sie die Unterstreichung aus und setzen stattdessen «border» ein. Der CSS-Code (einzufügen unter Design/Customizer/Zusätzliches CSS) sieht dann so aus:
p > a, ol > li > a, ul > li > a {
text-decoration: none;
border-bottom: 5px solid #293280;
padding-bottom:3px;
}Damit würde sich unser obiger Beispielsatz so präsentieren:
Dies ist ein Lauftext, auf welchen ein Link folgt und zum Schluss wieder Lauftext.
Ganz einfach. Oder?
Werbung
Werbung
