Zum Hauptinhalt springen

Mobile Ansicht

Verfasst von Oliver Scharfenberger

Hier erfährst Du, wie Du Deine Seiten für mobile Geräte (Smartphone und Tablet) anpasst — getrennt von der Desktop-Ansicht.

Schritt 1: In die mobile Ansicht wechseln

Sobald Deine Webseite in der Desktop-Ansicht steht, gehst Du in der Vorschau in die mobile Ansicht. Hier siehst Du, wie Deine Seite später auf einem Smartphone aussieht. Du kannst hier dieselben Dinge ändern wie in der Desktop-Ansicht — Text-Styling, Farbpalette und so weiter — auch Widgets hinzufügen.

Schritt 2: Änderungen nur für mobile Geräte

Fügst Du in der mobilen Ansicht ein Widget ein (zum Beispiel einen Abstandhalter), erscheint rechts oben ein blaues Symbol. Das bedeutet: Diese Änderung wird nur auf mobilen Geräten angezeigt. Wechselst Du zurück zur Desktop-Ansicht, ist dort nichts verändert.

Schritt 3: Bestehende Elemente nur für Mobile anpassen

Würdest Du einen bestehenden Text in der mobilen Ansicht ändern, ändert er sich auch auf dem Desktop. Trick: Kopiere den ganzen Block, blende ihn in der mobilen und Tablet-Ansicht aus und füge die Kopie wieder ein. Das eingefügte Element trägt das Symbol "nur auf mobilen Geräten". Jetzt kannst Du in der mobilen Version Text in die Mitte ziehen, Buttons positionieren und so weiter — der Desktop bleibt unberührt.

Schritt 4: Option "gestreckt"

Bei den meisten Blöcken ist "gestreckt" voreingestellt. Das hat einen Grund: Schaltest Du es ab, rückt auf dem Smartphone alles eng nebeneinander und wird schwer zu lesen. Mit "gestreckt" wird alles untereinander angeordnet und groß dargestellt — auf dem Smartphone deutlich angenehmer.

Schritt 5: Spaltenreihenfolge umkehren

Mit dieser Option vertauschst Du zwei Spalten miteinander. Das ist praktisch, wenn auf Mobile zum Beispiel ein Bild und ein Text in einer anderen Reihenfolge erscheinen sollen als auf Desktop.

Brauchst Du noch mehr Hilfe? Schau in unserem Helpcenter nach weiteren Artikeln oder wende Dich an unseren Support.

Hat dies deine Frage beantwortet?