Bildschirmgrößen und Geräte

Breakpoints (auch Bildschirmgrößen genannt) sind Pixelbereiche für die Breite verschiedener Geräte, etwa Desktop, Tablet und Mobilgerät. Fällt die Gerätebreite in den festgelegten Bereich eines Breakpoints, passt die Website ihr Layout an: Inhalt und Design sind dann für diese Gerätegröße und Ausrichtung optimiert. Ein Beispiel: Auf einem Desktop-Computer siehst du das vollständige Menü der Website, auf einem Mobilgerät stattdessen ein Hamburger-Menü.

Diese Breakpoints stehen im Editor zur Verfügung:

• Desktop (1025px-1399px). Das ist der Standard-Breakpoint.
• Wide desktop (1400px und mehr). Nur im Flex mode im Classic Editor verfügbar.
• Tablet (768px-1024px)
• Mobile (767px und darunter). Wir empfehlen immer, Änderungen am Mobile-Breakpoint auf einem echten Mobilgerät zu prüfen, statt ein Desktop-Fenster zu verkleinern.
• Mobile landscape (468px-767px). Nur im Flex mode im Classic Editor verfügbar.

Design-, Layout- und Inhaltsänderungen am Standard-Breakpoint „Desktop" übernimmt die Website automatisch auf die anderen Breakpoints. Bei Inhalten gilt das unabhängig vom Breakpoint: Fügst du ein Widget oder einen Abschnitt hinzu, bearbeitest du Text oder löschst du einen Abschnitt, gilt die Änderung automatisch auf allen anderen Breakpoints, egal auf welchem du sie vorgenommen hast. Ein Widget, das du auf dem Tablet-Breakpoint hinzufügst, erscheint also auch auf allen anderen Breakpoints.

Änderst du jedoch die Position oder Größe eines Elements auf bestimmten Breakpoints, werden diese Änderungen nicht auf andere Breakpoints übertragen. Änderst du zum Beispiel die Größe eines Elements auf dem Mobile-Breakpoint, gilt die Änderung nur für den Mobile- und den Mobile-landscape-Breakpoint und für keinen anderen.

Anpassungen pro Bildschirmgröße (Flex mode und Editor 2.0)

Hinweis: Dieser Inhalt gilt sowohl für den Flex mode im Classic Editor als auch für Editor 2.0.

Manchmal musst du einen Breakpoint überschreiben. Auf dem Haupt-Breakpoint steht ein Bild zum Beispiel rechts neben einem Absatz, auf dem Mobilgerät brauchst du das Bild aber oben und den Absatz darunter.

Die folgenden Änderungen an einem Element überschreiben den Haupt-Breakpoint:

• Ausrichtung
• Position
• Größe
• Abstand

Sobald du einen Breakpoint überschrieben hast, kannst du die Änderung nicht mehr rückgängig machen, indem du den Stil am selben Objekt im Haupt-Breakpoint änderst.

Auf einer bestimmten Bildschirmgröße ausblenden (Flex mode und Editor 2.0)

Hinweis: Dieser Inhalt gilt sowohl für den Flex mode im Classic Editor als auch für Editor 2.0.

Du kannst bestimmte Elemente auf einzelnen Breakpoints über das Ebenen-Panel oder über das schwebende Menü des Elements ausblenden. Du kannst zum Beispiel ein Bild auf Mobilgeräten ausblenden, ohne dass dies andere Breakpoints beeinflusst.

Hinweis: Wenn du ein Element ausblendest, das weitere verschachtelte Elemente enthält, werden auf diesem Breakpoint auch alle verschachtelten Elemente ausgeblendet. Blendest du zum Beispiel eine Flex-Spalte aus, werden auch die Widgets in dieser Flex-Spalte ausgeblendet.

So blendest du ein Element auf einem bestimmten Breakpoint aus:

1. Wechsle zu dem Breakpoint, auf dem du das Element ausblenden möchtest, indem du in der oberen Navigationsleiste die entsprechende Ansicht anklickst.
2. Klicke auf das Element, das du ausblenden möchtest.
3. Klicke im schwebenden Menü auf das Symbol mit den drei waagerechten Punkten und wähle die Option zum Ausblenden bei dieser Breakpoint-Größe. Oder nutze dieselbe Option im Ebenen-Panel neben dem Element.

Auf einer bestimmten Bildschirmgröße ausblenden (Classic Editor)

Fast alles im Editor kannst du geräteweise bearbeiten, nur Header und Footer nicht. Der Weg dorthin: Du legst Inhalte an, die nur auf einem bestimmten Gerät sichtbar sind.

So bearbeitest du Inhalte geräteweise:

1. Kopiere den Inhalt, den du gerätespezifisch machen möchtest. Klicke mit der rechten Maustaste auf das Widget, klicke auf „Kopieren" und dann auf „Einfügen".
2. Klicke mit der rechten Maustaste auf eines der Widgets, wähle die Option zum geräteabhängigen Ausblenden und dann das Gerät, auf dem das Widget ausgeblendet werden soll. Setzt du eine Schaltfläche zum Beispiel auf Ausblenden für den Desktop, wird sie auf dem Desktop entfernt, auf dem Tablet und dem Mobilgerät aber angezeigt.
3. Klicke auf den ursprünglichen Inhalt und wähle die Option zum geräteabhängigen Ausblenden. Blende den Inhalt dann auf den Geräten aus, auf denen du diesen Inhalt nicht ändern möchtest. Wenn du deine kopierte Schaltfläche zum Beispiel auf Ausblenden für den Desktop setzt, blendest du die ursprüngliche Schaltfläche auf Tablet und Mobilgerät aus. So hast du zwei verschiedene Schaltflächen: eine auf dem Desktop und eine andere auf Tablet und Mobilgerät.
4. Wenn der Inhalt auf allen drei Geräten unterschiedlich sein soll, kannst du ihn noch einmal kopieren (sodass du insgesamt drei Kopien desselben Inhalts hast) und auf jedem Gerät eine andere Schaltfläche anzeigen.
5. Du hast nun zwei (oder drei) identische, aber getrennte Inhalte, von denen jeder auf einem anderen Gerät angezeigt wird. Weitere Änderungen an diesem Inhalt wirken sich nur auf das Gerät aus, für das er angezeigt wird.

Ausgeblendete Inhalte können nach dem Veröffentlichen oder erneuten Veröffentlichen weiterhin im Code der Live-Website auftauchen. Das ist normal und liegt an der verwendeten Technik: Blendest du ein Widget, einen Abschnitt oder andere Inhalte im Editor für ein bestimmtes Gerät aus, geschieht das über CSS Media Queries. Das HTML bleibt also auf der Webseite vorhanden, es wird nur nicht angezeigt. Deshalb kann ein Audit-Tool, das die Website scannt, diesen ausgeblendeten Inhalt finden, obwohl du ihn für entfernt gehalten hast.

Zwischen Geräteansichten wechseln

Eine responsive Website funktioniert auf Desktop, Tablet und Mobilgerät. Im responsiven Editor kannst du deshalb schon beim Bearbeiten in jede dieser Ansichten wechseln und prüfen, wie deine Website auf den verschiedenen Geräten aussieht, noch bevor du sie veröffentlichst. So haben deine Kunden ein gutes Erlebnis, egal mit welchem Gerät sie deine Website öffnen.

Um die Geräteansicht zu wechseln, klicke in der oberen Navigationsleiste auf eine der Geräteschaltflächen.

Die verschiedenen Geräteansichten sind keine separaten Versionen deiner Website. Löschst du ein Element in einer Ansicht (zum Beispiel Mobilgerät), wird es von der gesamten Website entfernt (Desktop, Tablet und Mobilgerät). Klicke stattdessen mit der rechten Maustaste auf das Element und wähle die Option, ein Element auf einem bestimmten Gerät auszublenden.

Gerätevorschauen geben nicht immer genau wieder, was du auf einem echten Gerät siehst. Merkmale wie Schriftarten, die Größe des Gerätefensters, die Benutzeroberfläche und das Browserverhalten können dazu führen, dass diese Vorschauen unterschiedlich stark vom echten Bild abweichen. Die genaueste Version der Website siehst du auf einem echten Gerät.

Geräteweise bearbeiten (Classic Editor)

Änderungen an einem Gerät erscheinen auf allen Geräten. Löschst du zum Beispiel eine Zeile in der Tablet-Ansicht, fehlt sie auch in der Desktop- und der Mobilansicht, denn die Inhalte sind über alle Geräte hinweg dieselben. Willst du aber je Gerät unterschiedliche Inhalte zeigen, nutze die Funktionen zum geräteweisen Bearbeiten: So bekommen deine Besucher genau die Inhalte, die zu ihrem Gerät passen.

Wenn du Änderungen für ein bestimmtes Gerät vornimmst, musst du oft die Ansicht wechseln. Weitere Informationen findest du oben unter „Zwischen Geräteansichten wechseln".

Änderungen, die andere Geräte nicht beeinflussen

Viele Einstellungen zeigen an, welche Geräte sie betreffen. Eine Einstellung kann zum Beispiel „Change affects desktop and tablet" anzeigen, zusammen mit einem Symbol für die betroffenen Geräte.

Es gibt mehrere Änderungen im Editor, die sich ohne Auswirkung auf das Mobilgerät vornehmen lassen. Das sind:

• Abstand (Ränder und Innenabstände)
• Positionierung
• Breite
• Höhe
• Website- bzw. Seitenhintergrund
• Schriftgröße (betrifft keinen Text, der zuvor im Mobilgerät bearbeitet wurde)
• Änderungen an Header und Footer in der Tablet-Ansicht betreffen nicht die Desktop- und Mobilansicht

Jede andere Änderung, die du in einer Geräteansicht vornimmst, wirkt sich auf andere Geräte aus.

Widget-spezifische Änderungen

Viele Widgets funktionieren auf allen Geräten gut. Zwischen den Geräten gibt es aber teils große Unterschiede, sodass manche Widgets je Gerät andere Funktionen oder Design-Entscheidungen brauchen.

Die folgende Liste zeigt, welche Widgets du für bestimmte Geräte anpassen solltest, mit Design-Vorschlägen und Hinweisen.

Hintergrundbilder

Die Seitenverhältnisse unterscheiden sich je nach Gerät stark. Gestalte die Bilder auf deiner Website deshalb mit besonderer Sorgfalt. Ein seitenfüllender Hintergrund in einer Zeile kann auf dem Desktop toll aussehen und auf dem Mobilgerät schlecht: Der Desktop eignet sich eher für breite Bilder, beim Mobilgerät ist es genau umgekehrt. Unter Thema kannst du pro Gerät einen anderen Seitenhintergrund festlegen. Wir empfehlen ein breites Hintergrundbild für den Desktop und ein schmales für Mobilgerät oder Tablet.

Slider-Widget

Wie beim Hintergrundbild sehen die Bilder, die du für die Desktop-Version des Slider-Widgets ausgewählt hast, auf Tablet oder Desktop möglicherweise nicht so gut aus. Wir empfehlen eine der beiden Möglichkeiten:

• Passe die Rahmengröße des Sliders so an, dass er auf dem Mobilgerät passt, oder
• blende den Slider auf dem Desktop aus und erstelle stattdessen eine eigene Version für das Mobilgerät.

Bild- und Symbol-Widget

Die Größe des Bild-Widgets wird in der Mobilversion nicht automatisch angepasst. Prüfe deshalb auf dem Mobilgerät jede Stelle, an der du das Bild-Widget verwendest, und passe die Größe bei Bedarf an.

Hover-Effekte auf Mobilgerät oder Tablet

Anders als Desktop-Geräte haben Tablets und Mobilgeräte gar keinen Hover-Effekt. Jedes Hover-Layout und jede Hover-Option ist auf Tablet und Mobilgerät deaktiviert.

Karten-Widget

Das Karten-Widget hat gerätespezifische Optionen dafür, wann es als Schaltfläche oder als Karte angezeigt wird.

Kontaktformular-Widget

Kontaktformulare werden auf dem Mobilgerät immer mit einem Eingabefeld pro Zeile angezeigt.

vcita-Widget

Das vcita-Widget für Online-Terminbuchung hat eine Option, auf dem Gerät deiner Wahl nur eine Schaltfläche anzuzeigen.

Responsives Tablet (Classic Editor)

Wegen Apples Umstellung für iPads (iPadOS) zeigen iPads dieselbe Ansicht wie der Desktop. Du kannst aber zu einem responsiven Desktop-Tablet-Layout wechseln, damit alle Anpassungen auf Live-Websites sichtbar sind.

Ein responsives Layout zeigt die obere Navigationsleiste auf größeren Desktops und wechselt automatisch zum Hamburger-Menü-Header, wenn die Bildschirmgröße 1024px oder kleiner ist. Das Layout für kleine Bildschirme kann bei Bedarf angepasst werden.

Hinweis:

• Bei den meisten Websites ist diese Funktion automatisch aktiviert und der unten genannte Schalter ist nicht verfügbar.
• Bei Websites, für die dies noch nicht aktiviert wurde, wird die Option zum Deaktivieren entfernt, sobald die Funktion einmal aktiviert ist.
• Die Mobilansicht einer im Classic Editor erstellten Website, einschließlich des Headers, richtet sich nach dem verwendeten Gerät, nicht nach der Größe des Browserfensters. Wenn du dein Desktop-Browserfenster verkleinerst, um einen mobilen Viewport zu simulieren, gibt das also nicht genau wieder, wie die Website oder der Header auf echten Mobilgeräten aussieht. Die echte mobile Darstellung, einschließlich des Headers, siehst du am besten direkt auf einem Mobilgerät.

So nutzt du responsive Website-Layouts:

1. Klicke im Seitenpanel auf Thema.
2. Klicke auf Site Layout.
3. Klicke unter Desktop auf den Schalter Responsive Layout. Du hast die folgenden Optionen:
   • Wähle ein Website-Layout für über 1024px.
   • Wähle ein Website-Layout für 1024px und darunter.

Nach dem Wechsel zu responsiven Website-Layouts kannst du in der oberen Navigation zwischen den Ansichten Large Desktop (über 1024px), Small Desktop/Tablet (1024px und darunter) und Mobile wechseln. Weitere Informationen findest du oben unter „Zwischen Geräteansichten wechseln".

Wichtige Hinweise zum responsiven Tablet

Im Folgenden findest du zusätzliche Informationen zum responsiven Tablet:

• Das CSS ist für die Breakpoints Large Desktop und Small Desktop/Tablet identisch, und du siehst kein Tablet-CSS.
• Übergänge sind flüssiger und beruhen nicht auf der Browsererkennung.
• Wenn du Elemente auf deiner Website ausgeblendet hast, stelle sicher, dass sie sichtbar sind, bevor du das responsive Layout aktivierst. Schalte dazu das responsive Layout aus und blende alle ausgeblendeten Elemente ein. Anschließend kannst du das responsive Layout aktivieren und die gewünschten Elemente wieder ausblenden.
• Die Personalisierung zeigt kein Tablet-Gerät mehr. Die Auswahl von Desktop betrifft auch die Tablet-Ansichten.
• Beachte, dass die folgenden Tablet-Anpassungen automatisch das Desktop-Layout anzeigen und nicht angepasst werden müssen:
  • Layouts der Bildergalerie
  • Tablet-Personalisierungsregeln
  • Animationen