Mobilansicht kaputt — und die meisten Besucher sehen genau die.

Wie Elementor Gerätewerte vererbt.

Elementor arbeitet mit Geräteansichten: Desktop, Tablet, Mobil und auf Wunsch weitere. Ein Wert, der für Desktop gesetzt wird, gilt auch für kleinere Geräte, solange dort kein eigener Wert gesetzt ist.

Das ist praktisch und die Quelle der meisten Probleme. Ein Innenabstand von hundert Pixeln sieht auf dem großen Bildschirm großzügig aus — auf einem Handy frisst er ein Drittel der Breite. Wer ihn nur für Desktop setzt und für Mobil vergisst, bekommt genau das.

Die Regel: Bei jedem Wert, der von der Bildschirmbreite abhängt — Abstände, Breiten, Schriftgrößen —, auch die Mobilansicht prüfen und bei Bedarf einen eigenen Wert setzen.

Die häufigsten Fehler.

Horizontales Scrollen.

Das deutlichste Zeichen einer kaputten Mobilansicht: Die Seite lässt sich seitlich verschieben, und rechts erscheint ein leerer Streifen. Irgendein Element ist breiter als der Bildschirm.

Die Suche danach ist mühsam, wenn man rät, und schnell, wenn man die Entwicklerwerkzeuge des Browsers nutzt: In der Mobilansicht die Elemente durchgehen und schauen, welches über den Rand ragt. Häufige Verdächtige: Elemente mit fester Breite, Animationen, die von außerhalb hereinfahren, eingebettete Inhalte wie Karten oder Videos, lange Wörter oder Adressen ohne Umbruch.

Ein beliebter Notbehelf ist, das Überlaufen für die ganze Seite per CSS zu unterbinden. Das versteckt das Symptom, kann aber andere Funktionen stören — etwa klebende Kopfbereiche. Besser: das verursachende Element finden und korrigieren.

Feste Breiten.

Breiten in Pixeln sind auf großen Bildschirmen bequem und auf kleinen gefährlich. Ein Element mit fester Breite von 500 Pixeln passt auf kein Handy.

Besser sind relative Angaben: Prozent, eine maximale Breite statt einer festen, oder Container, die ihre Kinder flexibel anordnen. Mit Containern lässt sich vieles ohne Breitenangaben lösen, weil sich Elemente den verfügbaren Platz teilen (Container umstellen).

Schriftgrößen.

Eine Überschrift in Größe 72 ist auf dem Desktop eindrucksvoll und auf dem Handy eine Katastrophe — lange Wörter brechen mitten im Wort um oder ragen über den Rand. Gerade deutsche Komposita sind dafür anfällig.

Die Lösung: Schriftgrößen für Mobil eigens setzen oder mit Einheiten arbeiten, die sich der Bildschirmbreite anpassen. Am besten über die globalen Schrifteinstellungen, nicht Überschrift für Überschrift — dann stimmt es überall auf einmal.

Umgekehrt gilt: Fließtext nicht zu klein. Unter einer gewissen Größe wird Text auf Mobilgeräten schwer lesbar, und Browser vergrößern ihn teils selbst, was das Layout verschiebt (Lesbarkeit).

Doppelte Abschnitte.

Ein verbreiteter Trick: Ein Abschnitt wird zweimal gebaut, einmal für Desktop, einmal für Mobil, und je nach Gerät einer ausgeblendet. Das funktioniert optisch, hat aber Nachteile.

Beide Fassungen werden geladen, auch die ausgeblendete. Das kostet Ladezeit. Inhalte stehen doppelt im Code, was Suchmaschinen und Screenreader verwirren kann. Und jede Änderung muss zweimal gemacht werden — was erfahrungsgemäß irgendwann vergessen wird, sodass Desktop und Mobil unterschiedliche Inhalte zeigen.

Mit Containern ist dieser Trick fast immer überflüssig: Reihenfolge, Richtung und Abstände lassen sich je Gerät einstellen (Elementor langsam).

Reihenfolge ändern.

Ein typischer Wunsch: Auf dem Desktop steht das Bild links und der Text rechts, auf Mobil soll der Text zuerst kommen. Mit Containern lässt sich die Reihenfolge je Gerät umkehren, ohne doppelte Abschnitte.

Wichtig für die Barrierefreiheit: Die Reihenfolge im Code sollte der logischen Lesereihenfolge entsprechen. Wer nur optisch umsortiert, hat für Screenreader und Tastaturnutzer eine andere Reihenfolge als für sehende Besucher (Barrierefreiheit).

Bilder auf Mobilgeräten.

Große Hintergrundbilder werden auf Mobilgeräten oft so beschnitten, dass das Wesentliche fehlt — ein Gesicht halb abgeschnitten, ein Produkt außerhalb des Ausschnitts. Elementor erlaubt, die Position des Bildausschnitts je Gerät zu setzen, oder ein eigenes Bild für Mobil zu hinterlegen.

Gleichzeitig zählt die Dateigröße: Auf Mobilgeräten mit langsamer Verbindung kostet ein großes Bild im Kopfbereich spürbar Zeit (Mobil schneller).

Richtig testen.

1. Gerätevorschau in Elementor — für den ersten Eindruck.
2. Entwicklerwerkzeuge des Browsers — mit mehreren Breiten, auch sehr schmalen.
3. Echtes Handy — mindestens eines, gern ein älteres.
4. Quer- und Hochformat.
5. Menü, Formulare, Schaltflächen bedienen, nicht nur ansehen.

Die Gerätevorschau allein reicht nicht. Sie zeigt eine bestimmte Breite, aber Handys gibt es in vielen Breiten, und manches Problem zeigt sich erst bei einer schmaleren.

Warum Google das interessiert.

Google bewertet Websites nach ihrer Mobilfassung. Eine Website, die auf Mobilgeräten schlecht bedienbar ist, hat damit einen Nachteil — unabhängig davon, wie gut sie auf dem Desktop aussieht (Technisches SEO).

Dazu kommen die Ladewerte: Verschiebungen beim Laden und lange Ladezeiten werden auf Mobilgeräten gemessen und fließen in die Bewertung ein (CLS verbessern).

Wenn du nicht weiterkommst.

Wenn deine Website auf dem Handy nicht stimmt und du sie sauber statt mit Notlösungen reparieren willst. Ich finde die Ursache, behebe sie und erkläre dir, was passiert ist. Wenn die Website gerade steht, hilft der Notfall-Support, dauerhaft begleitet die WordPress-Wartung.

Orientierungswerte, keine Fixpreise — nach einem kurzen Gespräch bekommst du ein Festpreisangebot.

Wer hilft.

Ich bin Manuel Killert, Webentwickler aus Quakenbrück. WordPress und seine Page-Builder sind mein Fachgebiet — ich baue damit seit Jahren, unterrichte das Thema als Dozent und kenne Elementor nicht nur aus der Oberfläche, sondern von innen: wie es Daten speichert, CSS erzeugt, Skripte lädt und mit Theme, Cache und Erweiterungen zusammenspielt.

Das ist bei Elementor der entscheidende Unterschied. Die meisten Probleme sehen aus wie Gestaltungsfragen und sind in Wahrheit technische: ein erzeugtes Stylesheet, das nicht neu geschrieben wurde, ein Speicherlimit, ein Konflikt zweier Erweiterungen. Wer das Innere kennt, findet die Ursache in Minuten statt in Stunden.

Was du bekommst: eine Diagnose in verständlicher Sprache, eine Behebung, die hält, und eine ehrliche Einschätzung, ob Elementor für deine Website weiterhin die richtige Wahl ist — auch wenn die Antwort lautet, dass alles so bleiben kann.