Design mit Flex

Das Entwurfsfenster wird auf der rechten Seite des Flex-Modus angezeigt und enthält Ihre Entwurfseigenschaften für das ausgewählte Element (Abschnitt, Spalte, widget, Innere Spalte oder erweitertes Raster). Jedes Element hat unterschiedliche Eigenschaften, die im Design-Panel angepasst werden können, was bedeutet, dass die Design-Eigenschaften unterschiedlich sind, je nachdem, welches Element ausgewählt ist. Zu den Designeigenschaften gehören Ausrichtung, Layout, Abstände, Größe und mehr, abhängig vom ausgewählten Element.

Um das Designfenster zu öffnen, klicken Sie im Flex-Modus auf ein Element und dann auf Design (Sie müssen sich nur im Flex-Modus befinden, wenn Sie den Classic-Editor verwenden). Das Designfenster wird auf der rechten Seite des Flex-Modus geöffnet, sodass Sie Ihr Design nicht anzeigen und bearbeiten können. Sie können auch auf das Symbol Design bearbeiten im schwebenden Menü klicken. Nachdem Sie das Designfenster geschlossen haben, können Sie es wieder öffnen, indem Sie auf das Symbol Design bearbeiten in der oberen rechten Ecke klicken.

Design-Panel-Abschnitte

Das Design-Panel besteht aus 5 Abschnitten: Ausrichten, Layout, Abstände, Größe sowie Animation und Hintergrund. Im Folgenden finden Sie eine Beschreibung der einzelnen Abschnitte und was Sie erreichen können.

Ausrichten

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

Elemente können auch über das schwebende Menü ausgerichtet werden, indem Sie auf das Symbol Ausrichten () klicken.

Layout

Vollfliebig 

Diese Option ist nur für Abschnitte verfügbar und kann nur vom desktop Haupthaltepunkt aus geändert werden. Wenn es auf Ein umgeschaltet ist, kann sich der Inhalt über die gesamte Breite des Bildschirms erstrecken. Wenn diese Option auf Aus umgeschaltet ist, kann die Inhaltsbreite maximal 1.200 Pixel betragen. Standardmäßig ist der Vollschnitt Einstellungen auf Aus umgeschaltet. Weitere Informationen zu Haltepunkten finden Sie unter Bildschirmgrößen und Geräte.

Elemente ausrichten 

Ermöglicht das gleichzeitige vertikale Ausrichten mehrerer Elemente in einer Spalte oder einer inneren Spalte. Im klassischen Editor können Elemente nur einzeln und horizontal ausgerichtet werden. Die vertikale Ausrichtung ist hilfreich, da die Position der Elemente zwischen allen Haltepunkten konsistent bleibt, ohne dass zusätzliche Anpassungen vorgenommen werden müssen. Weitere Informationen finden Sie unter Ausrichtung und Abstände.

Automatisches Layout 

Mit dieser Option können Sie auswählen, ob Elemente innerhalb von Spalten und inneren Spalten 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.

Wickeln 

Nur für Spalten und innere Spalten verfügbar, wenn für das automatische Layout die Option Horizontal stapeln ausgewählt ist. Wenn die Option auf Umbruch festgelegt ist, können Elemente innerhalb der Spalte oder der inneren Spalte ihre Abmessungen beibehalten und umbrochen werden, wenn sich die Bildschirmbreite ändert.

Zeilen ausrichten 

Für Spalten und innere Spalten nur verfügbar, wenn Umbruch für das automatische Layout ausgewählt ist. Ermöglicht es Ihnen, die Ausrichtung von Zeilen innerhalb einer Spalte oder einer inneren Spalte festzulegen. Diese Einstellung hat keinen Einfluss auf die Ausrichtung von Elementen innerhalb von Zeilen, sondern nur auf die Zeilen selbst.

Abstände

Wenn Sie mehr über Abstände erfahren möchten, sehen Sie sich das folgende Video an:

Abstand zwischen den Elementen 

Ermöglicht es Ihnen, den Abstand zwischen Spalten oder widget einmal festzulegen und gilt für alle Spalten in einem Abschnitt oder alle widget in einer Spalte. Wenn die Eigenschaft für das automatische Layout für Spalten auf vertikal festgelegt ist, wird der Abstand zwischen widget in Pixel gemessen. Wenn das automatische Layout horizontal ist, wird der Abstand zwischen widget in Prozent gemessen. Diese Eigenschaft gilt nicht für Elemente in inneren Spalten oder erweiterten Rastern.

Festlegen von Rändern und Abstand 

Der Außenabstand ist der Abstand zwischen dem Rand des Elements und dem Rand des Abschnitts, der Spalte, der inneren Spalte 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 Abstand auf 5 px festlegen, wird zwischen dem linken Rand der Spalte und dem äußeren Rand der Elemente innerhalb der Spalte ein Abstand von 5 px hinzugefügt. Wenn Sie für dieselbe Spalte den linken Rand auf 5 px festlegen, wird zwischen dem Rand der Spalte und dem Rand des Abschnitts, in dem sie enthalten ist, ein Abstand von 5 px hinzugefügt.

Abstand oder Rand 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 Maximal- und Minimalwerte anpassen. Im Flex-Modus kann die Höhe in px, vh, % und A gemessen werden. Die Höhe von Flex-Spalten und der Abstand zwischen den Spalten können jedoch nur in Prozent gemessen werden. Weitere Informationen zu Größeneinheiten finden Sie unter Größeneinheiten.

Die Standardgrößeneinheiten sind für jedes Element unterschiedlich. Zum Beispiel sind Textfelder standardmäßig 100% breit, Schaltfläche sind 280px breit.

Bei Schnitten können Sie nur die Höhe ändern. Die Abschnittsbreite wird vom Gerät festgelegt, während die Breite des Inhalts im Abschnitt durch die Einstellungen für die Inhaltsbreite im Website-Design festgelegt wird. Bei Spalten können Sie nur die Breite ändern, die Höhe wird durch die Abschnittshöhe oder durch ihre inneren Elemente definiert. Für innere Spalten und widget können Sie die Höhe und Breite sowie die jeweils minimalen und maximalen Werte festlegen. Es können Einheiten jeder Größe verwendet werden.

Animation und Hintergrund

Die Animations- und Hintergrundeigenschaften im Flex-Modus sind die gleichen wie im klassischen Editor. Weitere Informationen zu Animations- und Hintergrundeigenschaften finden Sie unter Hinzufügen von Animationen und Anpassen des Hintergrunds.

Das Verständnis und die effektive Nutzung von Größeneinheiten ist entscheidend für die Erstellung von Layouts, die nicht nur visuell ansprechend, sondern auch auf verschiedenen Geräten und Bildschirmgrößen ansprechend sind. Das Design-Panel, das sich im Editor 2.0 auf der rechten Seite des Editor-Canvas oder im Flex-Modus im klassischen Editor befindet, dient als Kontrollzentrum für die Designeigenschaften ausgewählter Elemente, einschließlich Abschnitte, Spalten, widget, innere Spalten und erweiterte Raster. In diesem Artikel werden die im Design-Panel verfügbaren Größeneinheiten vorgestellt und praktische Beispiele für deren Verwendung vorgestellt.

Darüber hinaus können Benutzer mit Editor 2.0 Größeneinheiten vom Haupthaltepunkt (desktop) konfigurieren, um die Skalierbarkeit über alle Bildschirmgrößen hinweg zu gewährleisten. Benutzer können Größeneinheiten für Haltepunkte auf Tablets und Mobilgeräten anpassen, ohne andere Haltepunkte zu beeinflussen. Weitere Informationen finden Sie unter Bildschirmgrößen und Geräte.

In Editor 2.0 regelt das Konzept der übergeordneten und untergeordneten Elemente die Organisation von Elementen, wobei primäre Elemente wie Kopfzeilen, Texte, Menüs und Fußzeilen mindestens einen Abschnitt enthalten. Jeder Abschnitt beherbergt wiederum mindestens eine Spalte, die als Container für verschiedene Elemente wie Text, Bilder oder widget wie innere Spalten und erweiterte Raster dient.

Übergeordnete Elemente behalten ihre Design-Einstellungen bei, so dass ihr Aussehen zentral gesteuert werden kann. Wenn jedoch ein Abschnitt innerhalb eines übergeordneten Elements über bestimmte Einstellungen für die Hintergrundfarbe verfügt, spiegelt der Hintergrund des übergeordneten Elements diese Anpassung möglicherweise nicht wider. Diese hierarchische Struktur sorgt für eine systematische Herangehensweise an die Website-Organisation und ermöglicht effiziente Design-Workflows und eine kohärente Präsentation der Inhalte.

In Editor 2.0 folgt die Hierarchie der Elemente einer Standardstruktur: Abschnitte enthalten Spalten und Spalten enthalten widget. Diese hierarchische Anordnung stellt sicher, dass Sie einem Abschnitt keine widget direkt hinzufügen können, ohne dass er in einer Spalte geschachtelt ist. Es gibt mehrere Möglichkeiten, ein Element (Abschnitt, Spalte oder widgetauszuwählen:

Flex-Abschnitte sind Zeilen mit zwei standardmäßigen Flex-Spalten, die ein grundlegendes Layout erstellen. Nachdem Sie einen Abschnitt hinzugefügt haben, können Sie zusätzliche Spalten, innere Spalten oder erweiterte Raster hinzufügen, entfernen oder neu anordnen, um das gewünschte Layout zu erstellen. Anschließend können Sie diesem Layout widget hinzufügen.

Flex-Abschnitt löschen

Um einen Abschnitt zu löschen, klicken Sie mit der rechten Maustaste, um das Kontextmenü zu öffnen, und wählen Sie Löschen. Oder klicken Sie auf das Löschen-Symbol im schwebenden Menü.

Sobald Sie einen Abschnitt zu Ihrer Website hinzugefügt haben, können Sie Spalten hinzufügen, die Widgets innerhalb des Abschnitts enthalten. Alle Abschnitte enthalten standardmäßig Spalten, aber Sie können trotzdem weitere Spalten hinzufügen.

Flex-Spalte hinzufügen

So fügen Sie eine Spalte hinzu:

1. Wählen Sie eine vorhandene Spalte durch Klicken aus.

2. Klicken Sie im schwebenden Menü auf das Symbol mit den drei horizontalen Punkten () und wählen Sie dann Spalte hinzufügen aus. Oder klicken Sie auf das Pluszeichen am linken oder rechten Rand der Spalte.

Flex-Spalte duplizieren

Sie können eine Spalte duplizieren und sie wird rechts neben der ursprünglichen Karte hinzugefügt. Sie können keine Spalten hinzufügen, die 100 % der Breite überschreiten.

So duplizieren Sie eine Spalte:

1. Wählen Sie eine Spalte durch Klicken aus.

2. Klicken Sie im schwebenden Menü auf das Symbol Duplizieren . Sie können auch mit der rechten Maustaste auf die Spalte klicken, um das Kontextmenü zu öffnen und Duplizieren auszuwählen.

Flex-Spalte löschen

Sie können eine Spalte löschen, um sie aus dem Abschnitt zu entfernen. Jedoch muss jeder Abschnitt mindestens eine Spalte enthalten, d. h. Sie können die letzte Spalte nicht aus einem Abschnitt löschen.

So löschen Sie eine Spalte:

1. Wählen Sie die Spalte durch Klicken aus.

2. Klicken Sie im schwebenden Menü auf das Symbol Löschen . Sie können auch mit der rechten Maustaste auf die Spalte klicken, um das Kontextmenü zu öffnen und Löschen auszuwählen.

Sie können Spalten, inneren Spalten oder erweiterten Rastern auf verschiedene Weise widget hinzufügen. Wenn Sie sich bereits im Flex-Modus befinden, können Sie Widgets direkt über die Seitenleiste hinzufügen, indem Sie auf Widgets klicken und dann das gewünschte Widget auswählen.

So fügen Sie ein Widget hinzu:

Sie können Widgets auch über den Bereich „Ebenen“ hinzufügen.

So fügen Sie ein Widget aus dem Bereich „Ebenen“ hinzu:

Alignment und Abstände können zusammen verwendet werden, um Ihnen bei der Realisierung Ihrer Entwürfe zu helfen.

Abstände

Abstand zwischen den Elementen 

Sie können den horizontalen oder vertikalen Abstand zwischen Spalten innerhalb desselben Flex-Abschnitts oder Widgets innerhalb einer Spalte, einer inneren Spalte oder eines erweiterten Rasters festlegen.

So legen Sie den Abstand zwischen Elementen fest:

1. Klicken Sie mit der rechten Maustaste auf den gewünschten Abschnitt, die gewünschte Spalte, die innere Spalte oder das erweiterte Raster und wählen Sie Design bearbeiten.

2. Geben Sie im Abschnitt Abstände des Design-Panels unter Abstände zwischen Elementen den Prozentwert des horizontalen Raums oder den Pixelwert des vertikalen Raums ein, den Sie zwischen Elementen im Feld Abstände zwischen Elementen festlegen möchten, oder verwenden Sie den Schieberegler.

Sie können den Abstand sowohl für Abschnitte als auch für Spalten zurücksetzen, indem Sie im schwebenden Menü auf das Symbol Abstand zurücksetzen klicken.

Flex-Abschnitte erstellen ein Layout und richten Objekte automatisch aus. So können Sie einfach und schnell schöne Abschnitte gestalten. Wenn Sie jedoch ein komplexeres Design mit sich überlappenden Objekten oder einem Freestyle-Design haben, müssen Sie ein erweitertes Raster verwenden. Erweiterte Raster ermöglichen es Ihnen, Elemente in einem Freestyle-Design ohne automatisches Layout zu platzieren. Aus diesem Grund empfehlen wir Ihnen, Ihr Design an allen Haltepunkten zu überprüfen.

Sehen Sie sich das folgende Video an oder folgen Sie den Anweisungen unten, um zu erfahren, wie Sie überlappende Elemente erstellen.

So erstellen Sie überlappende Elemente:

Wir empfehlen, Ihr Design an jedem Haltepunkt zu überprüfen, wenn Sie erweiterte Raster verwenden. Bei überlappenden Elementen müssen Sie möglicherweise das Design an bestimmten Haltepunkten anpassen.

Im Webdesign beeinflusst die Wahl des passenden Layoutsystems maßgeblich die User Experience, insbesondere bei der Integration widget Layout-Elemente wie Inner Column und Advanced Grid in eine Website.

Die innere Spalte widget wird empfohlen für: 

Die erweiterte Grid- widget wird empfohlen für: 

Wann sollte ich eine innere Spalte widget widgetim Vergleich zu einem erweiterten Raster verwenden? 

Innere Spalten eignen sich am besten für modulare Layouts, insbesondere wenn Sie eine präzise Steuerung über einzelne Elemente innerhalb eines Abschnitts benötigen oder wenn Sie ein automatisches Layout wünschen. Beachten Sie jedoch, dass die Integrität der inneren Spalten zwar beibehalten wird, das Verschieben von widget innerhalb der Spalten jedoch im Vergleich zu erweiterten Rastern weniger flexibel ist.

Innere Spalten ermöglichen die individuelle Steuerung von Zeilen oder Spalten, ideal für eindimensionale Layouts. Advanced Grids ermöglicht die gleichzeitige Bearbeitung von Zeilen und Spalten und bietet eine umfassende Kontrolle über die gesamte Layoutstruktur, ideal für zweidimensionale Layouts.

Advanced Grid (CSS Grid) kann bei der Handhabung komplexer Layouts einen marginalen Vorteil haben, indem es die DOM-Struktur, die Rendering-Effizienz, das Laden von Ressourcen, die Reaktionsfähigkeit und die Minimierung von HTTP-Anfragen optimiert. Innere Spalten sind zwar effektiv, können aber mehr geschachtelte HTML-Elemente enthalten, was im Vergleich zu erweiterten Rastern möglicherweise zu etwas langsameren Renderingzeiten führt.

Sie können auch sowohl die innere Spalte widget als auch das erweiterte Raster widget im selben Abschnitt und auf der gesamten Website verwenden, um die gewünschten Designs zu erzielen. Dabei geht es darum, ein Gleichgewicht zwischen der gesamten Layoutstruktur und den Feinheiten der Content-Organisation zu finden.