Das Design-Panel wird auf der rechten Seite des Flex-Modus angezeigt und enthält Ihre Designeigenschaften für das ausgewählte Element (Abschnitt, Spalte, Widget, Flexbox oder erweitertes Raster). Jedes Element hat unterschiedliche Eigenschaften, die im Design-Panel angepasst werden können, d. h. die Designeigenschaften sind je nach ausgewähltem Element unterschiedlich. Zu den Designeigenschaften gehören Ausrichtung, Layout, Abstand, Größe und mehr, je nach ausgewähltem Element.

Um den Design-Bereich zu öffnen, klicken Sie im Flex-Modus auf ein Element und dann auf Design.Das Design-Panel wird auf der rechten Seite des Flex-Modus geöffnet, so dass Ihre Möglichkeiten, das Design anzuzeigen und zu bearbeiten, nicht beeinträchtigt werden. Oder Sie klicken auf das Symbol Design bearbeiten im schwebenden Menü. Nachdem Sie das Design-Panel geschlossen haben, können Sie es wieder öffnen, indem Sie auf das Symbol Design bearbeiten in der oberen rechten Ecke klicken.

Designbegriffe

Im Folgenden finden Sie die im Design-Panel verwendeten Begriffe und Abkürzungen:

• Px. Pixel sind eine Maßeinheit, die unabhängig von der Größe des Geräts gleich bleibt. Wenn eine Schaltfläche zum Beispiel 280 Pixel groß ist, hat sie auf dem Mobiltelefon die gleiche Größe wie auf dem Tablet oder Desktop.

• Vw. Die Viewport-Breite ist eine Einheit, die auf der Breite des Bildschirms (Viewport) basiert, auf dem die Website angezeigt wird. Zum Beispiel bedeutet 10 Vw, dass das Element so skaliert wird, dass es 10 % der Breite des Bildschirms einnimmt, auf dem es angezeigt wird.
• Vh. Die Viewport-Höhe ist eine Einheit, die auf der Höhe des Bildschirms (Viewport) basiert, auf dem die Website angezeigt wird. Zum Beispiel bedeutet 25 Vh, dass das Element so skaliert wird, dass es 25 % der Breite des Bildschirms einnimmt, auf dem es angezeigt wird.
• %. Prozentualer Anteil des Containers (Abschnitt, Spalte, Flexbox oder erweitertes Raster), den das Element einnimmt. Wenn die Größe eines Elements beispielsweise 10 % beträgt, bedeutet dies, dass das Element so skaliert wird, dass es 10 % des Containers einnimmt, in dem es sich befindet.
• A. Automatische Maßeinheit, die durch die Höhe des Inhalts bestimmt wird.

Ausrichten

Verfügbar für einzelne Elemente innerhalb einer Spalte oder Flexbox. Einzelne Elemente innerhalb einer Spalte oder einer vertikalen Flexbox mit vertikalem Autolayout können links, mittig oder rechts ausgerichtet oder horizontal gestreckt werden, so dass sie 100 % der Containerbreite einnehmen.

Layout

Randlos

Diese Option ist nur für Abschnitte verfügbar und kann nur über den Haupthaltepunkt des Desktops geändert werden. Wenn Sie diese Option auf Ein stellen, kann der Inhalt die gesamte Breite des Bildschirms einnehmen. Wenn Sie die Option auf Aus stellen, kann die Breite des Inhalts maximal 1.200 Pixel betragen. Standardmäßig ist die randlose Einstellung auf Aus gesetzt.

Weitere Informationen zu Haltepunkten finden Sie unter Flex-Haltepunkte.

Elemente ausrichten

Mit dieser Option können Sie mehrere Elemente in einer Spalte oder Flexbox gleichzeitig vertikal ausrichten. Im klassischen Editor können die Elemente nur einzeln und horizontal ausgerichtet werden. Die vertikale Ausrichtung ist hilfreich, weil sie die Position der Elemente zwischen allen Haltepunkten einheitlich gestaltet, ohne zusätzliche Anpassungen vorzunehmen. Weitere Informationen finden Sie unter Ausrichtung und Abstände bei Flex.

Auto-Layout

Mit dieser Option können Sie auswählen, ob Elemente innerhalb von Spalten und Flexboxen automatisch horizontal oder vertikal ausgerichtet werden sollen. Standardmäßig werden die Elemente vertikal ausgerichtet. Elemente können nur in dieselbe Richtung wie die automatische Layout-Ausrichtung verschoben werden. Wenn Elemente zum Beispiel vertikal ausgerichtet sind, können Sie sie nur vertikal und nicht horizontal verschieben. Mit dem automatischen Layout können Sie sicherstellen, dass Ihr Design für jeden Haltepunkt optimiert ist.

Umbrechen

Diese Option ist nur für Spalten und Flexboxen verfügbar, wenn für das automatische Layout die Option Horizontal ausgewählt ist. Wenn diese Option auf Umbrechen gesetzt ist, können Elemente innerhalb der Spalte oder Flexbox ihre Abmessungen beibehalten und umbrechen, wenn sich die Bildschirmbreite ändert.

Zeilen ausrichten

Diese Option ist nur für Spalten und Flexboxen verfügbar, wenn für das automatische Layout die Option Umbrechen ausgewählt ist. Hiermit können Sie die Ausrichtung von Zeilen innerhalb einer Spalte oder Flexbox festlegen. Diese Einstellung wirkt sich nicht auf die Ausrichtung von Elementen innerhalb von Zeilen aus, sondern nur auf die Zeilen selbst.

Abstände

Raum zwischen Elementen

Mit dieser Option können Sie den Abstand zwischen Spalten oder Widgets einmalig festlegen, und zwar für alle Spalten in einem Abschnitt oder alle Widgets in einer Spalte. Bei Spalten wird der Abstand zwischen Widgets in Pixeln gemessen, wenn die Eigenschaft „Auto-Layout“ auf vertikal eingestellt ist. Wenn das automatische Layout auf horizontal eingestellt ist, wird der Abstand zwischen den Widgets in Prozenten gemessen. Diese Eigenschaft gilt nicht für Elemente in Flexboxen oder erweiterten Rastern.

Außenabstände und Innenabstand festlegen

Der Außenabstand ist der Abstand zwischen dem Rand des Elements und dem Rand des Abschnitts, der Spalte, der Flexbox oder des erweiterten Rasters, in dem es enthalten ist.

Der Innenabstand ist der innere Abstand eines Elements. Klicken Sie auf die Zahl für den Außenabstand oder den Innenabstand, um einen neuen Wert einzugeben, und verwenden Sie dann das Dropdown-Menü, um die Einheit auszuwählen, in der der Abstand gemessen wird (px, %, vh oder vw). Standardmäßig werden die horizontalen Abstände in Prozent und die vertikalen Abstände in Pixeln gemessen.

Wenn Sie z. B. eine Spalte auswählen und den linken Innenabstand auf 5 px einstellen, wird ein Abstand von 5 px zwischen dem linken Rand der Spalte und dem äußeren Rand der Elemente innerhalb der Spalte hinzugefügt. Wenn Sie für dieselbe Spalte den linken Außenabstand auf 5 px setzen, wird ein Abstand von 5 px zwischen dem Rand der Spalte und dem Rand des Abschnitts, der sie enthält, hinzugefügt.

Innenabstand oder Außenabstand zurücksetzen

Wenn Sie im Design-Panel oder im schwebenden Menü auf diese Option klicken, werden die Innenabstände oder Außenabstände für das ausgewählte Element auf Null zurückgesetzt.

Größe

Je nach ausgewähltem Element können Sie die Höhe und Breite sowie die Höchst- und Mindestwerte anpassen. Im Flex-Modus kann die Höhe in px, Vh, Prozent und A gemessen werden. Die Höhe von Flex-Spalten und der Abstand zwischen den Spalten kann jedoch nur in Prozent gemessen werden.

Für Abschnitte können Sie nur die Höhe ändern. Die Breite des Abschnitts wird durch das Gerät festgelegt, während die Breite des Inhalts im Abschnitt durch die Einstellung „Inhaltsbreite“ unter „Website-Thema“ festgelegt wird. Bei Spalten können Sie nur die Breite ändern, während die Höhe durch die Höhe des Abschnitts oder durch seine inneren Elemente definiert wird. Für Flexboxen und Widgets können Sie die Höhe und Breite sowie jeweils die Mindest- und Maximalwerte festlegen. Es kann jede beliebige Größeneinheit verwendet werden.

Animation und Hintergrund

Die Animations- und Hintergrundeigenschaften im Flex-Modus sind dieselben wie im klassischen Editor. Weitere Informationen über Animations- und Hintergrundeigenschaften finden Sie unter Animationen hinzufügen und Anpassen Ihres Hintergrundes.

Design-Panel für erweiterte Raster

Erweiterte Raster verfügen über Design-Panel-Eigenschaften, die für andere Elementtypen nicht verfügbar sind, da sie die Möglichkeit bieten, freie Kompositionen und überlappende Elemente zu erstellen. Wir empfehlen Ihnen, Ihr Design an verschiedenen Haltepunkten zu überprüfen.

Ausrichten

Einzelne Elemente in einem erweiterten Raster können in jede beliebige Richtung ausgerichtet und gestreckt werden, da es nicht durch das automatische Layout eingeschränkt ist.

Reihenfolge

Im Abschnitt „Anordnung“ des Design-Panels kann diese Eigenschaft nur verwendet werden, wenn sich mehrere Elemente innerhalb eines erweiterten Rasters befinden. Damit können Sie ein ausgewähltes Element in den Vordergrund, nach vorne, in den Hintergrund oder nach hinten verschieben. Weitere Informationen finden Sie unter Überlappende Elemente in Flex erstellen.

Layout neu anordnen

Mit dieser Option können Sie auswählen, wie die Spalten und Zeilen innerhalb des erweiterten Rasters angeordnet werden, um ein Layout zu erstellen.

Layout anpassen

Verwenden Sie die Dropdown-Menüs, um die Anzahl der Spalten und Zeilen auszuwählen, die Ihr erweitertes Raster haben soll. Sie können auch das Feld Lücke verwenden, um den Abstand zwischen Ihren Spalten festzulegen. Der Abstand für Spalten kann in Pixeln oder Vw und der Abstand für Zeilen kann in Pixeln oder Vh angegeben werden.

PIN

Damit können Sie die Position des Elements innerhalb des Rasters festlegen. Einmal festgelegt, bleibt das Element an der gleichen Position, auch wenn sich die Größe des Rasters ändert.

Rasterposition

Diese Option ist für Elemente in erweiterten Rastern verfügbar, die in Spalten oder Zeilen unterteilt wurden, um ein Layout zu erstellen. Es zeigt an, wo sich das Element im Raster befindet.

Proportionen beibehalten

Wenn diese Option auf Ein gestellt ist, wird sichergestellt, dass die Elemente innerhalb eines erweiterten Rasters ihre Proportionen beibehalten, auch wenn sich die Größe des Rasters ändert.