Howto: Weiße Links bei “Textfarbe: Hell” (helles Layout) in Divi

von | CSS, Webdesign

.et_pb_bg_layout_dark a {
color: white !important;
}

Dieses CSS-Snippet verwende ich in fast jedem Divi Webdesign Projekt.

Denn es ist die elegan­teste Lösung für ein Problem auf das ich schon oft gestoßen bin:

Textmodul
mit heller Schrift­farbe
und einem Link.

Ich habe ein Modul mit dunklem Hinter­grund und heller Schrift.

Ich kann meine Links dennoch nicht oder nur schlecht erkennen.

Woran liegt das?

Oft verwenden wir für das Design einer Webseite eine feste Farbpa­lette mit einer Haupt­ak­zent­farbe, welche wir in den Divi Designein­stel­lungen festlegen. Standard­mäßig ist diese Akzent­farbe auch die Farbe für unsere Perma­links.

Manchmal kommt es vor, dass wir unsere Haupt­ak­zent­farbe auch in einem Banner o.Ä. verwenden, in welchem wir Fließtext inkl. Links stehen haben — damit wir unseren üblicher­weise dunklen Fließtext auf dem dunklen Hinter­grund überhaupt lesen können, stellen wir im Textmodul die Schrift­farbe auf Hell und der Text wird nun standard­mäßig weiß dargestellt.

Textmodul
mit dunkler Schriftfarbe.

Textmodul
mit heller Schriftfarbe.

Doch was passiert mit unseren Links? Obwohl wir die Textfarbe auf Hell umgestellt haben, behalten unsere Links ihre Farbe bei. Im Extremfall ist dies die gleiche Farbe wie der Hinter­grund und sie verschwinden ganz.

Textmodul
mit dunkler Schriftfarbe
und einem Link.

Textmodul
mit dunkler Schrift­farbe
und einem Link.

Textmodul
mit heller Schrift­farbe
und einem Link.

Welche Lösungen gibt es für dieses Problem?

Eine andere Farbe für alle Links nutzen. 

Je nach Farbpa­lette finden wir vielleicht keine gute Alter­native, welche gleich­zeitig zum Thema unserer Webseite passt, sowie auf hellen UND dunklen Hinter­gründen lesbar ist.

Die Farbe der Links für dieses Textmodul ändern.

Das muss dann jedoch für jedes Textmodul einzeln einge­stellt werden — eine unhand­liche Lösung für große Projekte und nachträg­liche Änderungen sind ein Graus.

Wir vergeben eine CSS-Klasse für Textmodule auf dunklen Hintergründen.

Dies kann einige unter Umständen Vorteile bieten, da wir die Klasse auch für andere Dinge nutzen können. Sollten wir es jedoch nur für das bestehende Problem verwenden, wider­spricht dies den gängigen Richt­linien für sauberes Coding (unnötig mehr HTML und CSS).

Wir finden Divi’s eigene Klasse für helle Textmodule und ändern die Farbe der Links. 

Bingo!

Divi gibt dem Modul eine eigene CSS-Klasse, sobald wir im Pagebuilder “Textfarbe: Hell” einstellen.

.et_pb_bg_dark mit Textfarbe weiß und !important wird auf den Text und alle Überschriften angewandt — jedoch nicht auf die Links. Dies können wir einfach nachbessern!

Diese Lösung sollte in 99% der Projekte das gewünschte Ergebnis bei geringstem Aufwand liefern.

↑ Nach oben zum Snippet ↑