Haltepunkte im Überblick

Haltepunkte sind Pixelbereiche, die der Breite verschiedener Geräte entsprechen, wie z. B. Desktop, Tablet und Mobilgerät. Wenn die Breite eines Geräts innerhalb des vordefinierten Pixelbereichs eines Haltepunkts liegt, wird das Layout der Website so angepasst, dass der Inhalt und das Design für diese Größe und Ausrichtung des Geräts optimiert sind. Wenn ich zum Beispiel eine Website auf einem Desktop-Computer anschaue, kann ich das vollständige Menü der Website sehen, aber wenn ich die Website mit meinem mobilen Gerät aufrufe, sehe ich stattdessen ein Hamburger-Menü.

Flex-Haltepunkte

Der wichtigste Haltepunkt für Flex ist Desktop. Wenn Sie Design- oder Inhaltsänderungen am Desktop-Haltepunkt vornehmen, werden die Änderungen automatisch auf die anderen Haltepunkte für breite Desktops, Tablets und Mobilgeräte angewendet. Wenn Sie Inhalte ändern, z. B. ein Widget hinzufügen, ein Bild ersetzen oder Text bearbeiten, wird die Änderung automatisch auf alle anderen Haltepunkte angewendet, unabhängig davon, an welchem Haltepunkt die Änderung vorgenommen wurde.

Wenn Sie jedoch Änderungen an der Position oder Größe eines Elements an bestimmten Haltepunkten vornehmen, gelten die Änderungen nicht für andere Haltepunkte. Wenn Sie z. B. die Größe eines Elements am mobilen Haltepunkt ändern, gilt die Änderung nur für die Haltepunkte „Mobil“ und „Mobiles Querformat“ und nicht für andere Haltepunkte.

In Flex gibt es die folgenden Standard-Haltepunkte:

• Desktop (1025–1399 Pixel)

• Breiter Desktop (1400 Pixel und höher)

• Tablet (768–1024 Pixel)

• Mobilgerät (767 Pixel und weniger)

• Mobiles Querformat (468–767 Pixel)

Sie können oben auf der Seite zwischen den Haltepunkten wechseln, indem Sie die unterschiedlichen Ansichten anklicken.

Strukturelle Änderungen

Strukturelle Änderungen an einem Haltepunkt wirken sich auf alle anderen Haltepunkte aus. Wenn Sie sich an einem anderen Haltepunkt als dem Haupthaltepunkt (Desktop) befinden und eine strukturelle Änderung vornehmen, wird eine Warnmeldung angezeigt, die Sie darüber informiert, dass die Änderung alle Haltepunkte betrifft. Strukturelle Änderungen umfassen Inhalts- oder Layoutänderungen, wie das Hinzufügen oder Löschen von Abschnitten, Spalten, Flexboxen, Widgets oder erweiterten Rastern.

An einem Haltepunkt ausblenden

Sie können bestimmte Elemente an bestimmten Haltepunkten über den Bereich „Ebenen“ oder das schwebende Menü des Elements ausblenden. So können Sie beispielsweise ein Bild auf mobilen Geräten ausblenden, ohne dass dies Auswirkungen auf andere Haltepunkte hat.

Um ein Element an einem bestimmten Haltepunkt auszublenden:

1. Wechseln Sie zu dem Haltepunkt, an dem Sie das Element ausblenden möchten, indem Sie in der oberen Navigation auf die Ansicht klicken.

2. Klicken Sie auf das Element, das Sie ausblenden möchten.

3. Klicken Sie auf das Symbol mit den drei horizontalen Punkten () im schwebenden Menü und wählen Sie An diesem Haltepunkt ausblenden. Oder klicken Sie im Bereich „Ebenen“ neben dem Element auf An diesem Haltepunkt ausblenden.

Überschreibungen von Haltepunkten

Wenn Sie Inhalte ändern, können Sie die Änderung von einem beliebigen Haltepunkt aus vornehmen und sie wirkt sich auf alle Haltepunkte aus. Es gibt jedoch bestimmte Situationen, in denen Sie einen Haltepunkt überschreiben müssen. Zum Beispiel befindet sich am Haupthaltepunkt ein Bild rechts von einem Absatz, aber auf dem Handy muss das Bild oben und der Absatz unten sein.

Im Folgenden finden Sie Änderungen, die Sie an einem Element vornehmen können und die den Haupthaltepunkt überschreiben:

• Ausrichtung

• Position

• Größe

• Abstände