Schrift im Slider mit Kontrast zum Hintergrund gestalten
Schriften über Photos sind oft nur schwer lesbar. Einfach ist es natürlich bei dunklen Photos mit heller Schrift darauf bzw. hellen Photos mit dunkler Schrift. Bei üblichen Photos mit größeren Helligkeitsunterschieden sind jedoch Schriften teilweise nur schwer zu lesen. Abhilfe unter DIVI schaffen folgende Möglichkeiten:
Das Aussehen der Bilder mit einem Filter ändern
In den DIVI-Slider- Einstellungen unter Design / Filter kann man das Hintergrundbild des Sliders einfach ändern. Veränderungen bei Brightness, Contrast oder Opacity führen oft zu besser lesbaren darüber liegenden Schriften. Bei Bilder mit zu vielen Details hilft es auch mit dem Filter-Effekt Blur, die Grafik etwas weichzuzeichnen.
Eine Übersicht über CSS-Filter und wie sich diese Auswirkungen gibt es bei kulturbanause.de
Text mit Text Shadow kontrastreicher gestalten
Ein Schatten schafft bei einer hellen Schrift vor einem hellem Untergrund zusätzlichen Kontrast, während der Schatten vor einem dunklen Hintergrund fast nicht auffällt. Unter DIVI in den Slider-Settings bei Design / Text-Shadow einen möglichst hart mit wenig Blur einstellen, jedoch natürlich nur soweit es sich mit der darunterliegenden Grafik harmonisch verhält Ist der Text weiterhin schlecht auf hellem Hintergrund lesbar so hilft statt einem Schatten auch ein Outline (ebenfalls bei DIVI unter Text-Shadow zu finden), dieses umgibt den ganzen Text mit einer ‚Aura‘ vor hellem Hintergrund.
Nur den Hintergrund im Bereich des Textes dunkler / heller gestalten
Dies ist meiner Ansicht nach die professionellste Möglichkeit. Sie verändert nicht das Foto: Farben, Kontraste, Dynamik etc. bleibt erhalten. Trotzdem ist die Schrift gut lesbar. Beim DIVI-Slider wird mit folgendem Code der Bereich um den Text grafisch eingefärbt:
Im DIVI-Builder unter „Seiteneinstellungen / Fortgeschritten / Benutzerdefinierte CSS“ folgenden Code eingeben:
.et_pb_slide_title, .et_pb_slide_content {
background-color: hsla(35,80%,50%,0.6);
} Dies erzeugt z.B. einen helleren orangen Hintergrund, vor dem eine weiße Schrift gut sichtbar ist.
Durch die Angabe von .et_pb_slide_title, .et_pb_slide_content werden sämtliche Slider auf einer Seite geändert. Möchte man verschiedenen Slidern auf einer Seite mit verschiedene Farben anpassen, so sind den einzelnen Seiten eigene CSS-IDs zu vergeben und dann diese dem .et_pb_slide_title, .et_pb_slide_content voranzustellen.
