Lesefortschritt:

Links auf der Divi-Website stylen

31. Juli 2022 | CSS-Stylesheet, Divi-Theme

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.

Auch das Webdesign von Dr. Code stiess auf das Gestaltungsproblem. Die Lauftextfarbe ist in dunklem grau, die Links in dunklem blau. Der Unterschied ist fast nicht sichtbar:

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

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This