WordPress Training
ElementorWordPress

Elementor mobil optimieren: Breakpoints und die häufigsten Fehler

Die Mehrheit Ihrer Besucher kommt vom Handy. Gebaut wird trotzdem fast immer am großen Bildschirm — und geprüft wird die kleine Ansicht, wenn überhaupt, ganz am Schluss. Genau daraus entstehen die Probleme, die ich in Schulungen am häufigsten repariere.

Der eine Umstellungs-Tipp

Bauen Sie die Seite fertig, und prüfen Sie dann jeden Abschnitt sofort mobil, bevor Sie zum nächsten weitergehen. Nicht am Ende alles auf einmal.

Der Unterschied ist erheblich: Wenn Sie im Anschluss zwanzig Abschnitte gleichzeitig korrigieren, verlieren Sie den Überblick, welche Änderung wo gewirkt hat. Abschnitt für Abschnitt ist es jeweils eine Kleinigkeit.

Die Ansicht wechseln Sie im Editor unten links über das Geräte-Symbol.

Wie die Geräteansichten zusammenhängen

Das Prinzip, an dem die meisten anfangs scheitern: Elementor vererbt von groß nach klein.

Was Sie in der Desktop-Ansicht einstellen, gilt automatisch auch für Tablet und Handy — solange Sie dort nichts Abweichendes setzen. Sobald Sie in der Handy-Ansicht einen eigenen Wert eintragen, ist dieser Wert für das Handy festgeschrieben und folgt dem Desktop nicht mehr.

Daraus folgen zwei praktische Regeln:

Ändern Sie Inhalte immer in der Desktop-Ansicht. Wenn Sie einen Text in der Handy-Ansicht bearbeiten, ändert er sich zwar überall — aber Sie verlieren leicht den Überblick, welche Einstellung wo hängt.

Setzen Sie mobile Werte nur dort, wo es nötig ist. Jeder überschriebene Wert ist eine Stelle, die Sie bei künftigen Änderungen zusätzlich pflegen müssen.

Die fünf häufigsten Fehler

Feste Pixelbreiten. Ein Container mit 1200 Pixel Breite passt auf keinen Handybildschirm und erzeugt horizontales Scrollen. Nutzen Sie prozentuale Werte oder eine maximale Breite statt einer festen.

Abstände, die nur für Desktop gedacht sind. 120 Pixel Innenabstand oben und unten sehen am großen Bildschirm großzügig aus. Auf dem Handy bedeuten sie, dass der Besucher an leeren Flächen vorbeiscrollt. Setzen Sie mobil deutlich kleinere Werte — meist die Hälfte oder weniger.

Schriftgrößen ohne mobile Anpassung. Eine 64-Pixel-Überschrift läuft auf dem Handy über fünf Zeilen. Für Überschriften lohnt sich fast immer ein eigener, kleinerer Wert.

Zu kleine Klickflächen. Buttons und Menüpunkte brauchen eine Mindestgröße, damit sie mit dem Daumen zuverlässig getroffen werden — etwa 44 mal 44 Pixel. Zwei Links direkt untereinander mit wenig Abstand sind auf dem Handy eine Zumutung.

Falsche Reihenfolge. Am Desktop steht das Bild links, der Text rechts. Auf dem Handy stapeln sie sich — und plötzlich kommt das Bild vor der Überschrift. Mit Flexbox-Containern ändern Sie die Reihenfolge unter Erweitert pro Ansicht, ohne den Aufbau zu duplizieren. Warum Container hier überlegen sind, steht in Container statt Sections.

Elemente mobil ausblenden — mit Bedacht

Unter Erweitert → Responsiv können Sie Elemente je Gerät ausblenden. Das ist nützlich für dekorative Grafiken, die auf dem Handy nur Platz kosten.

Zwei Einschränkungen: Ausgeblendete Elemente werden trotzdem geladen — Sie sparen Platz, aber keine Ladezeit. Und blenden Sie niemals Inhalte aus, die für das Verständnis nötig sind. Eine mobile Version, der wesentliche Informationen fehlen, ist keine Optimierung.

Eigene Breakpoints

Standardmäßig arbeitet Elementor mit Desktop, Tablet und Handy. Unter Website-Einstellungen → Responsiv lassen sich zusätzliche Schwellen aktivieren, etwa für große Bildschirme oder kleine Handys.

Mein Rat: Lassen Sie es bei den drei Standardansichten, solange Sie kein konkretes Problem haben. Jeder zusätzliche Breakpoint bedeutet eine weitere Ansicht, die Sie bei jeder Änderung prüfen müssen — und die zusätzliche Genauigkeit merkt in der Praxis niemand.

Prüfen: nicht nur im Editor

Die Handy-Ansicht im Editor ist eine Simulation. Sie zeigt die Breite richtig, aber nicht alles: Touch-Verhalten, tatsächliche Schriftdarstellung, Ladeverhalten bei schlechter Verbindung.

Sehen Sie sich die Seite mindestens einmal auf einem echten Gerät an, bevor sie live geht. Und prüfen Sie besonders zwei Dinge: Lässt sich die Seite horizontal verschieben? Dann ist irgendwo ein zu breites Element. Und funktioniert das Menü — klappt es auf, lässt es sich schließen?

Was die Ladezeit betrifft

Mobil ist die Verbindung oft schlechter und das Gerät langsamer. Genau dort werden auch die Core Web Vitals gemessen, die in die Suchbewertung einfließen. Wenn Sie an einer Stelle Ladezeit sparen wollen, dann mobil: Elementor und Core Web Vitals.

Elementor Pro: Die Responsive-Einstellungen gibt es in beiden Versionen. Pro erweitert sie auf Kopfbereich, Footer und Popups — gerade beim Menü auf dem Handy ist das der spürbare Unterschied. Elementor Pro ansehen

Wenn Sie Ihre Seite einmal gemeinsam mobil durchgehen wollen, statt einzelne Symptome zu kurieren, ist das ein typischer Teil meiner Elementor-Schulung.

Tags

AnleitungElementorMobileResponsiveWordPress