Flex ist ein Modus zum Entwerfen perfekter, reaktionsschneller Bereiche mit zusätzlichen Designfunktionen. Mit Flex können Sie Websites schnell erstellen und bearbeiten, während Sie weiterhin die Erstellungsfunktionen des klassischen Editors verwenden, mit dem Sie bereits vertraut sind. Im Vergleich zum klassischen Editor bietet Flex automatisches Layout, Ausrichtung und Verteilung mehrerer Elemente, responsive Größeneinheiten und mehr Kontrolle über Spalten. Dadurch lassen sich responsive Designs schneller erstellen und bearbeiten als im klassischen Editor.

Sie können entweder einen Flex-Abschnitt zu einer vorhandenen Website hinzufügen oder eine neue Website mit einer Flex-Vorlage erstellen. Wenn Sie eine flexible Vorlage verwenden, werden alle Abschnitte mit Flex erstellt. Die Kopfzeile wird nicht mit Flex erstellt, und wenn Sie eine neue Seite, einen Store, einen Blog oder eine neue Mitgliedschaftsseite hinzufügen, werden diese standardmäßig nicht mit Flex erstellt. Sie können diesen Seiten jedoch Flex-Abschnitte hinzufügen.

Begriffe im Zusammenhang mit Flex

Im Folgenden finden Sie Definitionen zu Begriffen, die sich speziell auf Flex beziehen.

• Flex-Modus. Hier erstellen und bearbeiten Sie flexible Abschnitte. Im Flex-Modus haben Sie Zugriff auf Designfunktionen, die im klassischen Editor nicht verfügbar sind. Sie haben jedoch weiterhin Zugriff auf die Erstellungsfunktionen des klassischen Editors.

• Flex-Abschnitt. Eine Reihe mit standardmäßigen Flex-Spalten, die ein Layout erstellen. Sie können Flex-Spalten innerhalb eines Flex-Abschnitts hinzufügen, entfernen oder ihre Reihenfolge ändern. Flex-Abschnitte können als Vorlagen für die spätere Verwendung gespeichert werden.

• Flex-Spalte. Hier fügen Sie Widgets hinzu. Flex-Spalten haben ein automatisches Layout, d. h. die enthaltenen Widgets werden automatisch vertikal oder horizontal ausgerichtet. Aufgrund des automatischen Layouts können Sie Elemente innerhalb einer Flex-Spalte nicht frei verschieben. Stattdessen müssen Sie die Einstellungen für Ausrichtung, Abstand und Rand verwenden, um Elemente zu verschieben.

• Vertikale und horizontale Flexboxen. Hierbei handelt es sich um einen Container, der Widgets automatisch vertikal oder horizontal ausrichtet. Aufgrund des automatischen Layouts können Sie Elemente innerhalb einer vertikalen oder horizontalen Flexbox nicht frei verschieben. Stattdessen müssen Sie die Einstellungen für Ausrichtung, Abstand und Rand verwenden, um Elemente zu verschieben.

• Erweitertes Raster. Wird verwendet, um freie Formen oder überlappende Elemente zu erstellen. Das erweiterte Raster bietet kein automatisches Layout und keine vertikale Ausrichtung wie bei Flex-Spalten. Aus diesem Grund empfehlen wir Ihnen, Ihr Design an allen Haltepunkten zu überprüfen.

• Haltepunkt. 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.

• Flex-Elemente. Ein erweitertes Raster oder eine horizontale oder vertikale Flexbox, die in einer Flex-Spalte platziert wird.

Hierarchie der Elemente

Im Flex-Modus enthalten Flex-Abschnitte Flex-Spalten und Flex-Spalten enthalten Widgets. Dies ist eine Standardhierarchie, d. h. Sie können kein Widget zu einem Flex-Abschnitt hinzufügen, ohne eine Flex-Spalte zu haben.

Elemente auswählen

Es gibt mehrere Methoden zur Auswahl eines Elements (Flex-Abschnitt, Flex-Spalte oder Widget):

• Fahren Sie mit der Maus über das Element und klicken Sie darauf. Wenn Sie mit dem Mauszeiger über ein Element fahren, achten Sie auf den blauen Umriss, der anzeigt, welches Element durch Ihren Klick ausgewählt wird.

• Wählen Sie Elemente im Ebenen-Bereich aus. Klicken Sie in der Seitenleiste auf Ebenen. Von hier aus können Sie ein beliebiges Element aus dem ausgewählten Abschnitt auswählen.

• Wählen Sie Elemente im Design-Bereich aus. Klicken Sie im Design-Bereich auf die Breadcrumbs, um ein Element auszuwählen.

• Wählen Sie Elemente aus dem schwebenden Menü aus. Wenn Sie bereits ein Element ausgewählt haben, fahren Sie mit der Maus über den Elementnamen über dem schwebenden Menü, und es wird ein Breadcrumb von Flex-Elementen angezeigt.

FLEX-MODUS

Ebenen-Bereich

Der Element-Bereich wird auf der linken Seite des Flex-Modus dargestellt und zeigt die Flex-Elemente im ausgewählten Abschnitt an. Die Elemente werden entsprechend ihrer Hierarchie angezeigt, wobei die Abschnitte die oberste Ebene bilden. Im Ebenen-Bereich können Sie neue Elemente hinzufügen, Elemente auswählen, Elemente neu anordnen, Elemente umbenennen und Elemente an bestimmten Haltepunkten ein- oder ausblenden.

Design-Bereich

Der Design-Bereich wird auf der rechten Seite des Flex-Modus angezeigt und enthält Ihre Design-Steuerelemente für das ausgewählte Element (Flex-Abschnitt, Flex-Spalte oder Widget). Die Designoptionen umfassen Layout, Größe, Ausrichtung und mehr, je nach ausgewähltem Element.

Schwebendes Menü

Das schwebende Menü wird angezeigt, wenn Sie ein Element auswählen. Mit dem schwebenden Menü können Sie zwischen den Elementen hin- und herschalten, Elemente hinzufügen, die Inhalts- oder Design-Bereiche öffnen, das Element duplizieren, die Ausrichtung anpassen, das Element löschen und vieles mehr.

Häufig gestellte Fragen

Worin unterscheiden sich Flex und der klassische Editor?

Im Vergleich zum klassischen Editor bietet Flex zusätzliche Designfunktionen, mit denen Sie schneller und einfacher responsive Websites erstellen können. Hier sind einige Designfunktionen, die Flex Ihnen bietet, der klassische Editor aber nicht:

• Sparen Sie Zeit. Flex basiert auf einem automatisierten Layout, d. h. das Design wird für jeden Haltepunkt optimiert.

• Ausrichtung des Inhalts. Damit können Sie alle Elemente in einer Flex-Spalte gleichzeitig ausrichten. Im klassischen Editor hingegen müssen Sie jedes Element einzeln ausrichten.

• Automatische Ausrichtung. Flex-Spalten und Flexboxen passen Elemente automatisch vertikal oder horizontal an.

• Anzahl der Spalten. Im Flex-Modus können Sie mehr als 4 Spalten zu einem Abschnitt mit einer Bildschirmbreite von bis zu 100 % hinzufügen.

• Raum zwischen Elementen. Damit können Sie den Abstand zwischen den Elementen einmalig festlegen und er gilt für alle Elemente in einer Flex-Spalte.

• Elementgröße. Passen Sie die Elementgrößen an, um die Bildschirmhöhe in Pixel und die Bildschirmbreite in Prozent zu optimieren.

• Schnellere Bearbeitung. Mit den erweiterten Designfunktionen von Flex können Sie ein bestehendes Design viel schneller bearbeiten als im klassischen Editor.

Was ist der Unterschied zwischen Flex Version 1.0 und Version 2.0?

Alles, was vor dem 18. Juli 2022 mit Flex erstellt wurde, wurde mit der Flex Version 1.0 erstellt. Zuvor erstellte Vorlagen oder Teamabschnitte können weiterhin mit Flex Version 1.0 bearbeitet werden, aber neu erstellte Designs verwenden künftig Flex Version 2.0. Wenn Sie eine Vorlage oder einen Teamabschnitt bearbeiten, die/der in Flex 1.0 erstellt wurde, erscheint in der oberen Leiste, im Namen des Bereichs und im Ebenen-Bereich ein Hinweis auf die Flex Version 1.0. Seit dem 18. Juli 2022 nutzen alle neuen Websites oder Websites, die vorher nicht Flex verwendet haben, die Flex Version 2.0 und sie können nicht mehr auf die Flex Version 1.0 zugreifen.

Die Flex Version 2.0 ist vereinfacht und ähnelt dem klassischen Editor mehr als die Version 1.0. Version 2.0 bietet mehr vordefinierte Komponenten, so dass Benutzer Designs schneller erstellen und bearbeiten können. Anstatt ein Raster zum Platzieren von Objekten zu verwenden, können Benutzer jetzt Spalten hinzufügen, die als Layout für Widgets dienen. Die Spalten bieten dem Benutzer ein automatisches Layout, d. h. die Objekte sehen an jedem Haltepunkt ohne zusätzliche Bearbeitung gut aus.

Einschränkungen

Derzeit können Sie im Flex-Modus keine zusätzlichen Sprachen zu Ihrer Website hinzufügen. Dafür müssen Sie zuerst den Flex-Modus verlassen. Weitere Informationen zu mehrsprachigen Websites finden Sie unter Eine mehrsprachige Website konfigurieren.