Inhalte für verschiedene Endgeräte anpassen
Ihre Webseite soll auf jedem Gerät gut aussehen und optimal nutzbar sein – vom großen Desktop-Monitor bis zum kleinen Smartphone-Bildschirm. Unser Editor unterstützt Sie dabei, indem er Ihre Inhalte, die Sie für die Desktopansicht erstellen, automatisch für Tablets und Handys anpasst. Um jedoch die bestmögliche Darstellung und Benutzerfreundlichkeit auf allen Endgeräten zu gewährleisten, zeigen wir Ihnen in diesem Artikel, wie Sie die Ansicht und einzelne Inhalte individuell anpassen können. So stellen Sie sicher, dass Ihre Botschaft überall klar und ansprechend ankommt.
Die Vorgehensweise erklären wir Ihnen an einem konkreten Beispiel. Auf dem Desktop haben Sie beispielsweise folgende Aufmachung für Ihre Überschrift gewählt:

Auf dem Handy erhalten wir dadurch folgende Ansicht:

Wir empfehlen im Anschluss an die Bearbeitung für den Desktop die Ansichten auf den beiden anderen Endgeräten zu überprüfen. In unserem Beispiel fallen zwei wesentliche Punkte auf:
Das untere Bild ist kleiner/schmaler als das obere Bild
Zwei identische Bilder auf dem Handy könnten eventuell nicht die gewünschte Wirkung wie auf dem Desktop erzielen
Um alle Inhalte und Bilder in voller Größe darstellen zu können, müssen auf den mobilen Endgeräten die Breite der Spalten teilweise manuell angepasst werden. Fahren Sie hierzu mit der Maus über die Spalte, bis an der rechten Außenseite ein breiter, lilafarbener Balken erscheint. Diesen klicken Sie an, halten die Maus gedrückt und ziehen die Spaltenbreite auf die volle Bildschirmbreite.
Achtung: Auf den mobilen Endgeräten können Sie lediglich die Breite der Spalten anpassen, also die äußere Form. Sobald Sie an dieser Stelle Inhalte (wie das Bild selbst oder den Text) anpassen, wirken sich diese Änderungen auch auf die Desktop/Tablet-Ansicht aus.
In unserem Beispiel möchten wir nun jedoch nur auf dem Handy das untere Bild entfernen, damit die Endnutzer die Webseite auf dem handy angenehmer ansehen können. Für diese Anpassung begeben wir uns nun wieder zur Desktopansicht. Wir fahren mit der Maus über die Spalte in der sich das Bild befindet. Wir klicken auf die drei Punkte und wählen den Menüpunkt "Auf dem Gerät anzeigen" aus. Dort entfernen wir den haken bei "Auf Handy anzeigen":

Die Spalte wird nun auf dem Handy ausgeblendet, bleibt jedoch auf dem Desktop und Tabelt erhalten. Sie können sowohl Module, Spalten als auch Zeilen auf diese Weise auf den verschiedenen Endgeräten ausblenden.
Auf diesem Weg könnten Sie auch komplette Inhalte für nur ein Endgerät designen und auf allen anderen Geräten ausblenden. Allerdings emphehlen wir diese Option nur in wirklich sinvollen Situationen, da Sie ansonsten drei Webseiten individuell pflegen müssten.
Schlagworte: Webdesign, Mobile Optimierung, Tablet Ansicht, Handy Ansicht, Mobile Webseite, Editor Anpassung, Spaltenbreite anpassen, Inhalte ausblenden, Gerätespezifische Inhalte, Webseite bearbeiten, Display Anpassung, Mobile Darstellung, User Experience, Design Anpassung, Inhalte pro Gerät
Die Vorgehensweise erklären wir Ihnen an einem konkreten Beispiel. Auf dem Desktop haben Sie beispielsweise folgende Aufmachung für Ihre Überschrift gewählt:

Auf dem Handy erhalten wir dadurch folgende Ansicht:

Wir empfehlen im Anschluss an die Bearbeitung für den Desktop die Ansichten auf den beiden anderen Endgeräten zu überprüfen. In unserem Beispiel fallen zwei wesentliche Punkte auf:
Das untere Bild ist kleiner/schmaler als das obere Bild
Zwei identische Bilder auf dem Handy könnten eventuell nicht die gewünschte Wirkung wie auf dem Desktop erzielen
Anpassen der Spaltenbreiten auf dem Tablet und dem Handy
Um alle Inhalte und Bilder in voller Größe darstellen zu können, müssen auf den mobilen Endgeräten die Breite der Spalten teilweise manuell angepasst werden. Fahren Sie hierzu mit der Maus über die Spalte, bis an der rechten Außenseite ein breiter, lilafarbener Balken erscheint. Diesen klicken Sie an, halten die Maus gedrückt und ziehen die Spaltenbreite auf die volle Bildschirmbreite.
Achtung: Auf den mobilen Endgeräten können Sie lediglich die Breite der Spalten anpassen, also die äußere Form. Sobald Sie an dieser Stelle Inhalte (wie das Bild selbst oder den Text) anpassen, wirken sich diese Änderungen auch auf die Desktop/Tablet-Ansicht aus.
Einfügen abweichender Inhalte auf den verschiedenen Endgeräten
In unserem Beispiel möchten wir nun jedoch nur auf dem Handy das untere Bild entfernen, damit die Endnutzer die Webseite auf dem handy angenehmer ansehen können. Für diese Anpassung begeben wir uns nun wieder zur Desktopansicht. Wir fahren mit der Maus über die Spalte in der sich das Bild befindet. Wir klicken auf die drei Punkte und wählen den Menüpunkt "Auf dem Gerät anzeigen" aus. Dort entfernen wir den haken bei "Auf Handy anzeigen":

Die Spalte wird nun auf dem Handy ausgeblendet, bleibt jedoch auf dem Desktop und Tabelt erhalten. Sie können sowohl Module, Spalten als auch Zeilen auf diese Weise auf den verschiedenen Endgeräten ausblenden.
Auf diesem Weg könnten Sie auch komplette Inhalte für nur ein Endgerät designen und auf allen anderen Geräten ausblenden. Allerdings emphehlen wir diese Option nur in wirklich sinvollen Situationen, da Sie ansonsten drei Webseiten individuell pflegen müssten.
Schlagworte: Webdesign, Mobile Optimierung, Tablet Ansicht, Handy Ansicht, Mobile Webseite, Editor Anpassung, Spaltenbreite anpassen, Inhalte ausblenden, Gerätespezifische Inhalte, Webseite bearbeiten, Display Anpassung, Mobile Darstellung, User Experience, Design Anpassung, Inhalte pro Gerät
Aktualisiert am: 18/06/2025
Danke!