Anmerkung
Dieser Inhalt ist sowohl für den Flex-Modus im Classic Editor als auch für Editor 2.0 relevant. Informationen zum Identifizieren Ihrer aktuellen Editor-Version finden Sie unter Identifizieren der Editor-Version, die von Ihrer Website verwendet wird .
Die Flexbox-Technologie (kurz „flex“ genannt) ist ein CSS-Layoutmodul zum Anordnen von Elementen in Abschnitten und Spalten, das es ihnen ermöglicht, sich flexibel zu bewegen (zu vergrößern/zu verkleinern) und sich perfekt innerhalb eines Containers auszurichten. Dies ermöglicht es Ihnen, pixelgenaue, responsive Abschnitte zu gestalten, die sich an jede Bildschirmgröße anpassen. Im klassischen Editor können Sie den Flex-Modus aktivieren, um mit Flexbox zu designen. Im Editor 2.0 ist Flexbox standardmäßig aktiviert.
Tipp
Empfohlene Kurse der Duda Academy:
-
Basic Gestaltungsprinzipien. Lernen Sie die vier Säulen des Designs kennen (Branding, Typografie, Farbe und Medien).
-
Größe und Einheiten. Lernen Sie die verschiedenen Größeneinheiten im Designpanel kennen und erfahren Sie, wann Sie diese verwenden sollten.
-
Layout-Grundlagen. Lerne mehr über Spalten und innere Spalten und wie man Elemente darin ausrichtet und ihre Größe anpasst.
-
Layouts mit erweiterten Rastern. Lerne, wie du komplexe Layouts mit fortgeschrittenen Rastern erstellst.
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 Design-Panel zu öffnen, klicken Sie im Flex-Modus auf ein Element und anschließend auf „Design bearbeiten“ (Sie müssen sich nur im Flex-Modus befinden, wenn Sie den klassischen Editor verwenden). Das Design-Panel öffnet sich auf der rechten Seite des Flex-Modus, sodass es Ihre Möglichkeit, Ihr Design anzuzeigen und zu bearbeiten, nicht beeinträchtigt. Nach dem Schließen des Designpanels können Sie es durch Klicken auf das Designpanel-Symbol in der oberen rechten Ecke wieder öffnen.
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.
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.
Volle Breite
Die volle Breite, die zuvor als "randlos" bezeichnet wurde, 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 1920 Pixel betragen. Standardmäßig ist die Einstellung in voller Breite auf Aus umgeschaltet. Weitere Informationen zu Haltepunkten finden Sie unter Bildschirmgrößen und Geräte.
Inhaltsausrichtung
Ermöglicht es Ihnen, mehrere Elemente gleichzeitig vertikal oder horizontal in einer Spalte oder einer inneren Spalte auszurichten. Im klassischen Editor können Elemente nur einzeln und horizontal ausgerichtet werden. Weitere Informationen finden Sie unter Ausrichtung und Abstände.
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.
Zeilen ausrichten
Hiermit können Sie die Ausrichtung von Zeilen innerhalb einer Spalte oder inneren Spalte festlegen. Diese Einstellung wirkt sich nicht auf die Ausrichtung von Elementen innerhalb von Zeilen aus, sondern nur auf die Zeilen selbst.
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
Ränder sind 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. Standardmäßig sind die Werte für den horizontalen Rand und den Abstand verknüpft. Wenn Sie den Wert für links anpassen, wird der Wert für die rechte Seite automatisch entsprechend aktualisiert. Wenn Sie nicht möchten, dass die Werte verknüpft werden, klicken Sie auf das Verknüpfungssymbol.
Beachten Sie, dass Inline-Ränder für Elemente innerhalb von Spalten oder inneren Spalten direkt auf der Leinwand angepasst werden können. Weitere Informationen finden Sie unter Äußere und innere Abstände.
Padding ist der innere Raum des Elements. Klicken Sie auf die Zahl für Rand oder Innenabstand, um einen neuen Wert einzugeben, und wählen Sie dann im Dropdown-Menü die Einheit aus, in der der Abstand gemessen wird (px, %, vh, vw oder A). Standardmäßig werden horizontale Abstände in Prozent und vertikale Abstände in Pixel 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.
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.
Die Animations- und Hintergrundeigenschaften im Flex-Modus ähneln denen des klassischen Editors. Weitere Informationen zu Animations- und Hintergrundeigenschaften finden Sie unter Hinzufügen von Animationen und Anpassen des Hintergrunds.
Hinweis
Parallaxe ist für alle widget und Container verfügbar und kann auf alle Bildschirmgrößen angewendet werden. Um die Parallaxe zu aktivieren, klicken Sie auf das Bild, wählen Sie Design bearbeiten, scrollen Sie zum Abschnitt Hintergrund des Design-Bedienfelds und öffnen Sie das Menü Bildposition .
Die Option, ein Hintergrundbild statisch zu halten, ist für Tablets, Mobilgeräte und Mac OS aufgrund einer iOS-Einschränkung nicht verfügbar.
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.
Bestellung
Im Abschnitt "Anordnung" des Entwurfsfensters kann diese Eigenschaft nur verwendet werden, wenn sich mehrere Elemente in einem erweiterten Raster befinden. Ermöglicht es Ihnen, ein ausgewähltes Element nach vorne, nach vorne, nach hinten oder nach hinten zu bringen. Weitere Informationen finden Sie unter Erstellen von überlappenden Elementen.
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
Mit dieser Option können Sie auswählen, wie die Spalten und Zeilen innerhalb des erweiterten Rasters angeordnet werden, um ein Layout zu erstellen.
Stecknadel
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.
Position des Gitters
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 umgeschaltet ist, wird sichergestellt, dass die Elemente in einem erweiterten Raster ihre Proportionen beibehalten, auch wenn sich die Größe des Rasters ändert.
Das Bild-Widget enthält auch einen Schalter für Proportionen beibehalten , der die ursprünglichen Proportionen beibehält.
Anmerkung
Dieser Inhalt ist sowohl für den Flex-Modus im Classic Editor als auch für Editor 2.0 relevant. Informationen zum Identifizieren Ihrer aktuellen Editor-Version finden Sie unter Identifizieren der Editor-Version, die von Ihrer Website verwendet wird .
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-Bedienfeld, das sich im Editor 2.0 auf der rechten Seite der Editor-Arbeitsfläche 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.
Tipp
Empfohlener Kurs der Duda Academy:
-
Größenangaben. Lernen Sie die verschiedenen Größeneinheiten im Designpanel kennen und erfahren Sie, wann Sie diese verwenden sollten.
Der Prozentsatz (%) ist eine dynamische Größeneinheit, die den Anteil des Containers (Abschnitt, Spalte, innere Spalte oder erweitertes Raster) bestimmt, der vom Element über verschiedene Bildschirmgrößen hinweg eingenommen wird. In der Regel sind die Breiten von Flex-Elementen standardmäßig in Prozent angegeben. Die Verwendung von Prozentsätzen wird empfohlen, wenn das Design über alle Bildschirmgrößen hinweg konsistent bleiben soll, ohne dass an jedem Haltepunkt manuelle Pixelanpassungen erforderlich sind.
Zum Beispiel stellt Einstellungen beide Spalten in einem zweispaltigen Layout auf 50 % Breite sicher, dass sie auf allen Bildschirmgrößen automatisch auf 50 % skaliert werden.
Prozentsätze sind vorteilhaft, um relative Elementgrößen über verschiedene Bildschirmdimensionen hinweg beizubehalten. Das bedeutet, dass die Elemente proportional zu ihrem übergeordneten Container (Abschnitt oder Spalte) skaliert werden, um ein einheitliches Erscheinungsbild des Layouts zu gewährleisten.
Wenn beispielsweise ein Bild, das auf eine Breite von 50 % innerhalb einer Spalte eingestellt ist, unabhängig von der Bildschirmgröße immer die Hälfte der Spaltenbreite einnimmt. Folglich können die Spalte und das Bild auf mobilen Geräten im Vergleich zu desktopschmaler erscheinen, das Bild behält jedoch seine proportionale Breite bei. Ebenso sorgt Einstellungen für den Abstand zwischen den Spalten auf 4% für konsistente Abstände relativ zu den Spalten und anderen Bildschirmelementen, die sich über verschiedene Bildschirmgrößen hinweg anpassen.
Pixel (px) stellen eine feste Maßeinheit dar, die nicht von der Gerätegröße beeinflusst wird. Eine auf 250 Pixel festgelegte Schaltfläche behält beispielsweise ihre Größe auf Mobilgeräten, Tablets und desktop Geräten bei.
Wenn Sie sich jedoch bei der Größenanpassung ausschließlich auf Pixel verlassen, kann dies die Reaktionsfähigkeit beeinträchtigen, sodass an jedem Haltepunkt manuelle Anpassungen erforderlich sind. Während Pixel die Konsistenz der Elementgröße gewährleisten, wird daher die Verwendung von Prozentsätzen empfohlen, um ein responsives Design zu fördern. Dieser Ansatz minimiert den Bedarf an individuellen Pixelanpassungen an Haltepunkten, rationalisiert den Designprozess und verbessert die allgemeine Reaktionsfähigkeit.
Die Viewport-Breite (Vw) passt Elemente dynamisch an die Bildschirmbreite (Viewport) an und sorgt so für eine proportionale Skalierung auf verschiedenen Geräten. Wenn Sie z.B. einem Element 50 Vw zuweisen, wird die Hälfte der Bildschirmbreite zugewiesen.
Viewport height (Vh) skaliert Elemente dynamisch in Bezug auf die Höhe des Bildschirms (Viewport). Wenn Sie z. B. einem Element 25 Vh zuweisen, wird ein Viertel der Bildschirmhöhe für dieses Element reserviert. Dies ist besonders vorteilhaft für Vollbildhintergründe (100 % Vh) oder Elemente, die eine Synchronisierung mit der Bildschirmhöhe erfordern.
Die automatische Einheit passt sich dynamisch an die Höhe des Inhalts an, wodurch sie für Textblöcke und Spaltenhöhen geeignet ist und sicherstellt, dass sie sich entsprechend ihrem Inhalt anpassen. In der Regel werden Textblöcke standardmäßig auf automatische Einheiten gesetzt. Diese Funktion ermöglicht es, Elemente nahtlos zu erweitern oder zu verkleinern, wobei das proportionale Layout-Design beibehalten wird.
Das Parent-Child-Konzept regelt 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.
Die Hierarchie der Elemente folgt 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:
-
Direkte Auswahl von Objekten im Arbeitsbereich des Editors: Benutzer können direkt mit Elementen auf der Arbeitsfläche des Editors interagieren, was das Identifizieren und Ändern bestimmter Komponenten erleichtert, ohne dass eine umfangreiche Navigation durch Bedienfelder oder Menüs erforderlich ist. Wenn Sie ein Objekt auswählen, wird das Designfenster mit allen relevanten Designoptionen für dieses Element im Designfenster auf der rechten Seite angezeigt.
-
Schwebende Menü-Breadcrumbs: Benutzer können mithilfe von Breadcrumbs im schwebenden Menü zurück zu übergeordneten Containern navigieren. Bei der Auswahl eines bestimmten Elements können Benutzer einfach auf die blauen Breadcrumbs am oberen Rand des Elements klicken, um zum übergeordneten Container zurückzukehren.
-
Breadcrumbs oben im Design-Panel: Das Design-Panel enthält auch Navigationsoptionen am oberen Rand in Form von Breadcrumbs. Diese Breadcrumbs ermöglichen es Benutzern, schnell zwischen verschiedenen Abschnitten oder Elementen innerhalb der Leinwand zu springen.
-
Ebenen-Panel: Wenn ein Element ausgewählt ist, werden im Ebenenbedienfeld die Ebenen hervorgehoben, die mit diesem Element verknüpft sind. Gleichzeitig bietet der Editor visuelles Feedback, das die Navigation innerhalb der Leinwand unterstützt.
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.
So fügen Sie einen Abschnitt hinzu:
-
hover Sie zwischen den Zeilen und klicken Sie auf +Abschnitt hinzufügen. Oder klicken Sie mit der rechten Maustaste, um das Kontextmenü zu öffnen, klicken Sie auf Hinzufügen und wählen Sie dann Flex-Abschnitt aus.
-
Klicken Sie in der Seitenleiste auf Flex Sections.
-
Wählen Sie den gewünschten Flex-Abschnitt aus.
-
Klicken Sie auf Speichern.
Hinweis
-
Die Option, ein Hintergrundbild statisch zu halten, ist für Tablets und Mobilgeräte aufgrund einer iOS-Einschränkung nicht verfügbar.
-
Sie können auch einen Flex-Abschnitt mit KI erstellen. Ausführliche Anweisungen zum Erstellen von Flex-Profilen mit AI finden Sie unter Erstellen eines Flex-Profils mit AI.
So speichern Sie einen Abschnitt:
-
hover über den gewünschten Abschnitt und klicken Sie in der oberen linken Ecke des Abschnitts auf Flex-Schnitt .
-
Klicken Sie auf Als Abschnitt speichern und dann auf Nur diese Zeilen auswählen.
-
Geben Sie einen Abschnittsnamen ein, wählen Sie die Kategorie aus, unter der der Abschnitt gespeichert werden soll, und wählen Sie die Berechtigungen für den Abschnitt aus.
-
Klicken Sie auf Erstellen starten.
-
Klicken Sie auf Fertig.
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.
Beachten Sie, dass die maximale Anzahl von Spalten 8 beträgt.
Hinweis
Wenn Sie einer Spalte ein Element hinzufügen, wird die Position durch die Einstellungen für das automatische Layout bestimmt. Um die Wegbeschreibung für das Auto-Layout zu ändern, öffnen Sie das Design-Panel und wählen Sie im Abschnitt Layout die Option horizontal oder vertikal für das Auto-Layout aus.
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:
-
Wählen Sie eine Spalte durch Klicken aus.
-
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.
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:
-
Wählen Sie die Spalte durch Klicken aus.
-
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.
Hinweis
Wenn Sie den Flex-Modus im Classic-Editor verwenden, können Sie einen widget nicht per Drag & Drop in eine Flex-Spalte aus dem Seitenbereich ziehen.
So fügen Sie ein Widget hinzu:
-
Klicken Sie auf eine Spalte, eine innere Spalte oder ein erweitertes Raster, um das Element auszuwählen.
-
Klicken Sie auf das Plus-Symbol in der Mitte der Spalte, der inneren Spalte oder des erweiterten Rasters. Oder klicken Sie im schwebenden Menü auf das Plus-Symbol.
-
Wählen Sie ein Widget aus.
Sie können Widgets auch über den Bereich „Ebenen“ hinzufügen.
So fügen Sie ein Widget aus dem Bereich „Ebenen“ hinzu:
-
Wählen Sie eine Spalte durch Klicken aus.
-
Bewegen Sie im Bereich „Ebenen“ den Mauszeiger über die Spalte, die innere Spalte oder das erweiterte Raster, zu der bzw. dem Sie ein Widget hinzufügen möchten, und klicken Sie auf das Plus-Symbol.
-
Wählen Sie ein Widget aus.
Alignment und Abstände können zusammen verwendet werden, um Ihnen bei der Realisierung Ihrer Entwürfe zu helfen.
Weitere Informationen zur Ausrichtung finden Sie im folgenden Video:
Beim Entwerfen mit Flex können Sie Zeit sparen, indem Sie mehrere Elemente gleichzeitig innerhalb desselben Abschnitts, derselben Spalte oder derselben inneren Spalte ausrichten.
So richten Sie mehrere Elemente aus:
-
Wählen Sie den Abschnitt, die Spalte oder die innere Spalte aus und klicken Sie im schwebenden Menü auf das Ausrichtungssymbol (
).
-
Wählen Sie die gewünschte Ausrichtung aus.
Der Design-Bereich bietet zusätzliche Ausrichtungsoptionen, wie z. B. das Ändern der Richtung des automatischen Layouts, Strecken und mehr.
So richten Sie Elemente aus dem Design-Panel aus:
-
Klicken Sie mit der rechten Maustaste auf den gewünschten Abschnitt, die gewünschte Spalte oder die innere Spalte und wählen Sie Design bearbeiten.
-
Im Layout-Bereich des Designpanels wählen Sie unter Inhaltsausrichtung die gewünschte vertikale und horizontale Inhaltsausrichtung aus.
Beim Ausrichten von Text aus dem schwebenden Menü oder dem Entwurfsfenster werden sowohl der Text als auch die div tagausgerichtet.
Es ist zwar möglich, mehrere Elemente gleichzeitig auszurichten, aber manchmal müssen Sie nur die Ausrichtung eines Elements innerhalb einer Flex-Spalte ändern, ohne die anderen Elemente zu ändern.
So richten Sie ein einzelnes Element aus:
-
Wählen Sie das gewünschte Element aus.
-
Klicken Sie im schwebenden Menü auf das Ausrichtungssymbol (
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:
-
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.
-
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:
-
Wählen Sie eine Flex-Spalte durch Klicken aus.
-
Klicken Sie im schwebenden Menü oder in der Flex-Spalte auf das Pluszeichen (
).
-
Wählen Sie im Abschnitt Flex-Elemente die Option Erweitertes Raster (zuvor Container genannt) aus. Um sicherzustellen, dass Sie Best Practices befolgen, ziehen Sie die Ränder des erweiterten Rasters so, dass es sich über die gesamte Breite der Flex-Spalte erstreckt.
-
Wählen Sie im Abschnitt "Layout" des Design-Bedienfelds ein vorgefertigtes Raster aus "Layout neu anordnen" aus. Wenn Sie Ihr eigenes Raster erstellen möchten, verwenden Sie die Dropdown-Menüs Spalten und Zeilen unter Layout anpassen , um Spalten und/oder Zeilen hinzuzufügen.
-
Klicken Sie im schwebenden Menü auf das Plus-Symbol, wählen Sie dann die gewünschten Widgets aus und ordnen Sie diese im erweiterten Raster an.
-
Klicken Sie, um ein Element auszuwählen, und wählen Sie im Abschnitt "Anordnen" des Designfensters die Option "In den Vordergrund", "Nach vorne", "Nach hinten" oder "In den Hintergrund".
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.
Tipp
Empfohlene Kurse der Duda Academy:
-
Layout-Grundlagen. Lerne mehr über Spalten und innere Spalten und wie man Elemente darin ausrichtet und ihre Größe anpasst.
-
Layouts mit erweiterten Rastern. Lerne, wie du komplexe Layouts mit fortgeschrittenen Rastern erstellst.
Die innere Spalte widget wird empfohlen für:
-
Modulare Layouts: Perfekt für die Erstellung modularer Layouts, bei denen der Inhalt linear fließt, ideal für Navigationsmenüs, Karten oder listenartige Layouts.
-
Responsive Design: Ausgezeichnet in der Erstellung responsiver Designs, die sich nahtlos an verschiedene Bildschirmgrößen und Geräte anpassen und so optimale Ausrichtung und Lesbarkeit gewährleisten.
-
Dynamischer Inhalt: Gut geeignet für die Verarbeitung dynamischer Inhalte, die in Länge oder Größe variieren können, sodass Designer das Elementverhalten und die Größe innerhalb eines Containers dynamisch steuern können.
-
Verschachtelte Layouts: Durch die Verschachtelungsfunktionen für die innere Spalte eignen sie sich zum Erstellen komplexer verschachtelter Layouts. Designer können bei Bedarf weitere innere Spalten innerhalb des äußeren Containers schachteln, was Flexibilität und Anpassungsfähigkeit bei der Anordnung von Inhaltshierarchien bietet. In ähnlicher Weise bietet Advanced Grid die Möglichkeit, widget, innere Spalten und sogar zusätzliche erweiterte Raster innerhalb seiner Layoutstruktur zu verschachteln.
Die erweiterte Grid- widget wird empfohlen für:
-
Komplexe Layoutstrukturen: Unverzichtbar für die Erstellung komplizierter Layouts mit mehreren Zeilen und Spalten, die eine präzise Kontrolle über die Platzierung und Größe von Elementen ermöglichen.
-
Nichtlineare Designs: Perfekt für die Gestaltung nichtlinearer Layouts, bei denen Elemente unabhängig von ihrer Quelle positioniert werden müssen. Das bedeutet, dass Elemente je nach Designanforderung platziert und angeordnet werden können.
-
Responsives Webdesign: Advanced Grid erfordert zwar eine sorgfältige Planung, bietet aber eine robuste tool für die Erstellung responsiver Designs. Designer können spezifische Layoutanpassungen definieren, wie z. B. die Neuanordnung von Spalten, die Spannweite von Elementen und Rasterabstände bei unterschiedlichen Viewport-Größen, um eine optimale Darstellung auf verschiedenen Geräten zu gewährleisten.
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.
Das Verständnis von Beziehungen zwischen über- und untergeordneten Elementen ist von grundlegender Bedeutung, um innere Spalten und erweiterte Raster effektiv zu nutzen. In diesen Layoutsystemen fungiert die Spalte, in der sich Elemente befinden, als übergeordnetes Element, während die darin enthaltenen Elemente, z. B. zusätzliche widget, als untergeordnete Elemente betrachtet werden. Diese Beziehung bestimmt, wie Elemente innerhalb des Layouts positioniert und ausgerichtet werden, um Kohärenz und strukturelle Integrität in Ihrem Webdesign zu gewährleisten.
Es ist wichtig zu beachten, dass Sie nicht immer innere Spalten hinzufügen müssen. Oft kann für viele Anwendungsfälle eine einzige Spalte ausreichen. Die innere Säule ermöglicht die einfache Platzierung von Elementen entweder horizontal oder vertikal. Zu den Anforderungen gehören ein Abschnitt, der als Flex-Container fungiert, und eine Spalte für innere Spalten, wobei beide Spaltentypen als Flex-Elemente dienen und das übergeordnete bzw. untergeordnete Element darstellen.
Advanced Grid ermöglicht die Platzierung von Elementen sowohl in der vertikalen als auch in der horizontalen Wegbeschreibung. Zu den Anforderungen gehören ein Abschnitt, der als Container fungiert, und ein erweitertes Raster, um das Rasterlayout für das übergeordnete Element oder den übergeordneten Container zu deklarieren, sodass alle untergeordneten Elemente zu Rasterelementen werden.