Aufblitzen eines schwarzen Hinterrunds bevor das Bild geladen hat
Diese Besonderheit mag nicht in jedem Template vorkommen und meiner Erfahrung nach passiert das auch nur bei den Bannern auf Index-Seiten.
Und zwar gibt’s diese eine Sekunde in der man eine bestimmte Hintergrundfarbe aufblitzen sieht, bevor dein Banner vollständig geladen ist.
Ist dir das mal aufgefallen?
Es ist super auffällig, wenn die Hintergrundfarbe ganz und gar nicht zu deinen Markenfarben passt.
Viele denken sofort an eine Lösung mit CSS, aber es gibt eine einfachere Möglichkeit im Style Editor. Sie ist nur ein bisschen versteckt und zugegebenermaßen überhaupt nicht offensichtlich.
Hier erstmal der Weg zur Lösung:
Öffne eine Seite, wo du ein Bannerbild verwendest und gehe dann zum Style Editor, damit die notwendige Einstellungsoption im Menü auch angezeigt wird.
Im Beispielvideo habe ich eine Index Seite, die ein Bannerbild mit knallrotem Hintergrund im obersten Abschnitt hat.
Beim Laden der Seite sieht man für einige Sekunden einen schwarzen Hintergrund aufblitzen, bevor das eigentliche Bild geladen wird.
Sieht blöd aus. Deshalb ändern wir das jetzt mal.
Scrollen wir im Style Editor einfach mal bis zum Abschnitt HAUPTBEREICH. Da sieht man jetzt erst mal nirgendwo die Farbe schwarz. Deshalb ist es überhaupt nicht offensichtlich.
Wenn man aber im Abschnitt INHALT: OVERLAY, die Overlay: Farbe aufmacht, sieht man, dass die Farbe schwarz ausgewählt ist, die aber fast komplett transparent gestellt ist.
Jetzt kannst du also hier die gleiche Farbe einstellen, wie der Hintergrund deiner gesamten Seite einstellen und die Transparenz ganz auf null schieben. Und damit ist der schwarze Hintergrund weg.
Und jetzt schauen wir noch an, warum das so ist
Die Eistellung Overlay: Farbe ist dazu da über deinem Banner-Bild eine sozusagen “Deckschicht” aufzutragen und erzeugt so eine Art Filter auf deinem Bild.
Das kann auf unterschiedlichen Wegen erreicht werden:
Entweder wir legen über dem Bild eine farbige “Deckschicht” und machen sie fast transparent. - Das ist die offensichtliche Lösung.
Oder wir machen das so wie in dieser Squarespace Einstellung: Wir legen eine Hintergrundfarbe unter den Banner und machen den Banner selbst so transparent, dass der Hintergrund durchscheint.
Das war’s!
Diese Eistellung gibt’s übrigens auch bei den Index Galerien
Um dort die Hintergrund-Farbe beim Ladeprozess zu ändern, gehst du wieder in den Style Editor unter Home > Website-Stil. Und dann zum INDEX: GALERIE Abschnitt > Bild: Overlay. Und machst das gleich wie oben.