.et_pb_bg_layout_dark a {
color: white !important;
}
Denn es ist die eleganteste Lösung für ein Problem auf das ich schon oft gestoßen bin:
Textmodul
mit heller Schriftfarbe
und einem Link.
Ich habe ein Modul mit dunklem Hintergrund 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 Farbpalette mit einer Hauptakzentfarbe, welche wir in den Divi Designeinstellungen festlegen. Standardmäßig ist diese Akzentfarbe auch die Farbe für unsere Permalinks.
Manchmal kommt es vor, dass wir unsere Hauptakzentfarbe auch in einem Banner o.Ä. verwenden, in welchem wir Fließtext inkl. Links stehen haben — damit wir unseren üblicherweise dunklen Fließtext auf dem dunklen Hintergrund überhaupt lesen können, stellen wir im Textmodul die Schriftfarbe auf Hell und der Text wird nun standardmäß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 Hintergrund und sie verschwinden ganz.
Textmodul
mit dunkler Schriftfarbe
und einem Link.
Textmodul
mit heller Schriftfarbe
und einem Link.
Welche Lösungen gibt es für dieses Problem?
Eine andere Farbe für alle Links nutzen.
Die Farbe der Links für dieses Textmodul ändern.
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, widerspricht dies den gängigen Richtlinien 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.