Auf dem Computer passt alles, auf dem Handy fehlt die Hälfte vom Text. Woran das liegt und wie Sie Ihren Header in Divi so bauen, dass er auf jedem Bildschirm funktioniert.
Warum der Text in Ihrem Headerbild auf dem Handy abgeschnitten wird
Sie haben ein schönes Bild für den Header Ihrer Website gestaltet, mit Ihrem Angebot oder Ihrem Slogan direkt im Bild. Auf dem Computer sieht es perfekt aus. Dann schauen Sie auf dem Handy nach, und vom Text sind nur noch ein paar Buchstaben in der Mitte übrig.
Das ist kein Fehler auf Ihrer Website. So funktionieren Hintergrundbilder.
Was ein Hintergrundbild macht
Ein Hintergrundbild hat eine Aufgabe: Es füllt den Bereich dahinter vollständig aus, ohne weiße Ränder. In Divi heißt diese Einstellung „Abdecken“.
Auf dem Computer ist der Header breit und flach, also genauso geformt wie ein Panoramabild. Das Bild passt hinein, und alles ist sichtbar.
Auf dem Handy ist derselbe Bereich schmal und hoch. Damit das Bild trotzdem die ganze Fläche füllt, wird es vergrößert, bis es von oben bis unten reicht. Dann ist es viel breiter als der Bildschirm, und links und rechts fällt der Rest weg. Bild anzeigen
Warum es gerade den Text erwischt
Bei einer Landschaft oder einem Foto von Ihren Räumen merkt man den fehlenden Rand kaum. Text im Bild ist aber kein echter Text, sondern nur ein Bild von Buchstaben. Er kann nicht in die nächste Zeile umbrechen und nicht kleiner werden. Er wird einfach mit abgeschnitten.
Dazu kommt: Google kann diesen Text nicht lesen, Screenreader für sehbehinderte Menschen auch nicht. Ihre wichtigste Botschaft ist für beide unsichtbar.
Die Lösung: Bild und Text trennen
- Hintergrundbild ohne Text. Am besten ein Motiv, bei dem das Wichtige in der Mitte liegt. Die Mitte bleibt auch auf dem Handy sichtbar.
- Text als echten Text darüber. Ein Textmodul in Divi bricht auf dem Handy automatisch um, passt seine Größe an und wird von Google gelesen.
So sieht Ihr Header auf jedem Bildschirm vollständig aus, und Sie können den Text jederzeit ändern, ohne eine neue Grafik zu bauen.
Und wenn der Text unbedingt ins Bild soll?
Divi erlaubt ein eigenes Hintergrundbild nur fürs Handy (über das Handy-Symbol in den Hintergrund-Einstellungen). Dafür brauchen Sie eine zweite Grafik im Hochformat. Das geht, ist aber eine Notlösung: Jede Änderung machen Sie dann doppelt, und für Google bleibt der Text trotzdem unsichtbar.
Kurz gesagt: Bilder für die Stimmung, echter Text für die Botschaft.
