Homepagebaukasten Sichtbarkeit & Mobile Ansicht

Der Homepage-Baukasten von site.pro passt Inhalte automatisch an unterschiedliche Bildschirmgrössen an. Die mobile Ansicht wird aus der Desktop-Version der Webseite erstellt. Je nach Aufbau der Seite können Elemente auf Smartphones oder Tablets anders dargestellt werden als auf einem Desktop-Gerät.

Mit der Sichtbarkeitsfunktion können Sie einzelne Elemente gezielt auf bestimmten Geräten anzeigen oder ausblenden. Bei Bedarf können Sie unterschiedliche Versionen desselben Inhalts für verschiedene Bildschirmgrössen verwenden.

Sichtbarkeit für verschiedene Geräte verwenden

Wenn ein Element auf Mobilgeräten anders dargestellt werden soll als auf Desktop-Geräten, passen Sie seine Sichtbarkeit für die jeweiligen Geräteansichten an.

Wählen Sie das betreffende Element aus.
Öffnen Sie rechts unten die Einstellung «Sichtbarkeit».
Blenden Sie das Element für die gewünschte Geräteansicht aus, beispielsweise für die mobile Ansicht.
Fügen Sie das Element erneut ein.
Passen Sie die Grösse, Position oder Darstellung für die gewünschte Geräteansicht an.
Aktivieren Sie bei diesem Element nur die gewünschte Ansicht, beispielsweise nur die mobile Ansicht.
Veröffentlichen Sie die Webseite erneut.

Ausgeblendete Elemente bleiben im Homepage-Baukasten erhalten. Sie werden lediglich auf den ausgewählten Geräten nicht angezeigt.

Mobile Ansicht prüfen

Prüfen Sie die Darstellung nach jeder Anpassung in den verschiedenen Geräteansichten.

Bearbeiten Sie die Webseite zuerst in der Desktop-Ansicht.
Öffnen Sie anschliessend die Vorschau im Homepage-Baukasten.
Wechseln Sie zwischen der Desktop-, Tablet- und Smartphone-Ansicht.
Kontrollieren Sie Texte, Bilder, Abstände, Menüs und weitere Elemente.
Nehmen Sie in der mobilen Ansicht gezielte Anpassungen vor.
Verwenden Sie die Sichtbarkeitsfunktion für Inhalte, die auf Mobilgeräten anders dargestellt werden sollen.
Veröffentlichen Sie die Änderungen.
Prüfen Sie die Darstellung zusätzlich auf einem echten Mobilgerät.

Typische Darstellungsprobleme

Sehr grosse Bilder werden auf kleinen Bildschirmen ungünstig zugeschnitten.
Sehr grosse Überschriften können auf Smartphones zu vielen Zeilenumbrüchen führen.
Elemente mit festen Breiten passen sich möglicherweise nicht optimal an kleinere Bildschirme an.
Zu viele Inhalte werden nebeneinander dargestellt.
Schwimmende oder frei platzierte Elemente überlagern sich.
Objekte werden in verschiedenen Geräteansichten unterschiedlich skaliert.
Manuell eingefügte HTML-Elemente oder externe Inhalte werden nicht passend dargestellt.
Veraltete Browserdaten oder der Browser-Cache verhindern die korrekte Anzeige von Änderungen.

Überlappende oder verschobene Inhalte prüfen

Wenn Inhalte überlappen oder verschoben erscheinen, kontrollieren Sie folgende Punkte:

Sind die betroffenen Elemente frei positioniert oder schwimmend?
Überlappen sich die Begrenzungen der Elemente bereits im Editor?
Ist das verwendete Element für kleine Bildschirme geeignet?
Wurden die Änderungen nach der Bearbeitung veröffentlicht?
Wurde die Sichtbarkeit einzelner Elemente für bestimmte Geräteansichten eingeschränkt?

Bei komplexen Layouts kann es sinnvoll sein, für die mobile Ansicht eigene Elemente mit angepasster Grösse, Position oder Darstellung zu verwenden.

Änderungen werden auf dem Mobilgerät nicht angezeigt

Wenn die Änderungen im Homepage-Baukasten korrekt angezeigt werden, auf dem Smartphone jedoch nicht sichtbar sind, prüfen Sie zuerst die mobile Vorschau. Veröffentlichen Sie die Webseite anschliessend erneut und leeren Sie den Browser-Cache.

Weitere Informationen

Grundlagen und weitere Funktionen des Homepage-Baukastens:

https://www.green.ch/de/alles-ueber-den-baukasten

Weitere wichtige Anleitungen zum Homepage-Baukasten:

https://www.green.ch/de/baukasten-wichtigste-anleitungen

Informationen zum Einbinden von Videos im Homepage-Baukasten:

https://www.green.ch/de/homepagebaukasten-video-einbinden