Anmerkung
Dieser Inhalt ist sowohl für den Flex-Modus im Classic Editor als auch für Editor 2.0 relevant. Um Ihre aktuelle Editor-Version zu identifizieren, sieheSo identifizieren Sie die Editor-Version, die Ihre Website verwendet .
Flexbox-Technologie (kurz „Flex“ genannt) ist ein CSS-Layoutmodul zum Anordnen von Elementen in Abschnitten und Spalten, sodass sie innerhalb eines Containers flexibel (vergrößert oder verkleinert) und perfekt ausgerichtet werden können. Auf diese Weise können Sie pixelgenaue, ansprechende Abschnitte entwerfen, die sich an jede Bildschirmgröße anpassenWenn Sie den klassischen Editor verwenden, können Sie in den Flex-Modus wechseln, um mit der Flexbox-Technologie zu entwerfen. Wenn Sie Editor 2.0 verwenden, verwenden Sie standardmäßig die Flexbox-Technologie
Tipp
Empfohlene Duda Academy-Kurse:
-
Grundlegende Gestaltungsprinzipien. Erfahren Sie mehr über die vier Säulen des Designs (Branding, Typografie, Farbe und Medien)
-
Größe und Einheiten. Erfahren Sie mehr über die verschiedenen Größeneinheiten im Design-Panel und wann Sie sie verwenden sollten.
-
Grundlegendes zum Layout. Erfahren Sie mehr über Spalten und innere Spalten und wie Sie die darin enthaltenen Elemente ausrichten und ihre Größe ändern.
-
Layouts mit erweiterten Rastern. Erfahren Sie, wie Sie komplexe Layouts mit fortschrittlichen Rastern erstellen
Das Designfenster wird auf der rechten Seite des Flex-Modus angezeigt und enthält Ihre Designeigenschaften für das ausgewählte Element (Abschnitt, Spalte, Widget, Innere Spalte oder erweitertes Raster). Jedes Element hat unterschiedliche Eigenschaften, die im Designbereich angepasst werden können. Das heißt, die Designeigenschaften sind je nachdem, welches Element ausgewählt ist, unterschiedlich. Zu den Designeigenschaften gehören je nach ausgewähltem Element Ausrichtung, Layout, Abstand, Größe und mehr.
Um das Designfenster zu öffnen, klicken Sie im Flex-Modus auf ein Element und dann auf Design bearbeiten (Sie müssen sich nur im Flex-Modus befinden, wenn Sie den klassischen Editor verwenden). Das Designfenster wird auf der rechten Seite des Flex-Modus geöffnet, sodass Sie Ihr Design nicht anzeigen und bearbeiten können. Nachdem Sie das Design-Panel geschlossen haben, können Sie es erneut öffnen, indem Sie auf das Design-Panel-Symbol in der oberen rechten Ecke klicken.
Das Design-Panel besteht aus 5 Abschnitten: Ausrichten, Layout, Abstand, 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 einer inneren Spalte. Einzelne Elemente innerhalb einer Spalte oder einer vertikalen inneren Spalte mit vertikalem Autolayout können links, mittig, rechts oder horizontal ausgerichtet werden, sodass sie zu 100% der Containerbreite passen.
Elemente können auch im schwebenden Menü ausgerichtet werden, indem Sie auf den Ausrichten Symbol ().
Voreinstellungen
Wählen Sie aus einem voreingestellten Layout für Elemente innerhalb eines Abschnitts. Zu den Optionen gehören die vertikale oder horizontale Ausrichtung.
Artikel pro Zeile
Wenn sich Ihr Inhalt über mehr als eine Zeile erstreckt, können Sie mithilfe des Dropdownmenüs auswählen, wie viele Elemente pro Zeile angezeigt werden.
Artikel passen
Wird angezeigt, wenn Sie Inhaltszeilen haben, und ermöglicht es Ihnen, zu definieren, wie die Elemente in die Zeilen passen. Dies kann hilfreich sein, wenn Sie eine ungerade Anzahl von Elementen haben.
Volle Breite
Breite, die früher „full bleed“ genannt wurde, ist nur für Abschnitte verfügbar und kann nur vom Haupt-Breakpoint des Desktops aus geändert werden. Wenn umgeschaltet aufAn, ermöglicht es, dass sich der Inhalt über die gesamte Breite des Bildschirms erstreckt. Wenn die Option „Aus“ aktiviert ist, kann sich die Inhaltsbreite über maximal 1920 Pixel erstrecken. Standardmäßig ist die Einstellung für die volle Breite auf Aus gesetzt. Weitere Informationen zu Breakpoints Bildschirmgrößen und Geräte.
Ausrichtung der Inhalte
Ermöglicht es Ihnen, mehrere Elemente in einer Spalte oder inneren Spalte gleichzeitig vertikal oder horizontal auszurichten. Im klassischen Editor können Elemente nur einzeln und horizontal ausgerichtet werden. Weitere Informationen finden Sie unter Ausrichtung und Abstand.
Zeilen ausrichten
Ermöglicht es Ihnen, die Ausrichtung von Zeilen innerhalb einer Spalte oder einer inneren Spalte festzulegen. Diese Einstellung wirkt sich nicht auf die Ausrichtung von Elementen innerhalb von Zeilen aus, sondern nur auf die Zeilen selbst.
Schauen Sie sich das folgende Video an, um mehr über Abstände zu erfahren:
Abstand zwischen Elementen
Ermöglicht es Ihnen, den Abstand zwischen Spalten oder Widgets einmal festzulegen. Dies gilt für alle Spalten in einem Abschnitt oder alle Widgets in einer Spalte. Wenn bei Spalten die Autolayout-Eigenschaft auf vertikal gesetzt ist, wird der Abstand zwischen den Widgets in Pixeln gemessen. Wenn das Autolayout horizontal ist, wird der Abstand zwischen den Widgets in Prozent gemessen. Diese Eigenschaft gilt nicht für Elemente in inneren Spalten oder erweiterten Rastern
Ränder und Abstand festlegen
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 das Element enthalten ist. Standardmäßig sind die Werte für den horizontalen Rand und den Abstand miteinander verknüpft. Wenn Sie den linken Wert 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 Linksymbol.
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ßerer und innerer Abstand.
Polsterung ist der Innenraum des Elements. Klicken Sie auf die Rand- oder Füllzahl, um einen neuen Wert einzugeben, und wählen Sie dann im Drop-down-Menü die Einheit aus, in der der Abstand gemessen wird (px,%, vh, vw oder A). Standardmäßig wird der horizontale Abstand in Prozent und der vertikale Abstand in Pixeln gemessen
Wenn Sie beispielsweise eine Spalte auswählen und den linken Abstand auf 5 px setzen, 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 Rand 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
Abstand oder Rand zurücksetzen
Wenn Sie im Designfenster oder im schwebenden Menü darauf klicken, werden der Abstand oder die Ränder 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 Höchst- und Mindestwerte anpassen. Im Flexmodus kann die Höhe in px, vh, Prozent und A gemessen werden. Die Höhe der flexiblen 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. Beispielsweise haben Textfelder standardmäßig eine Breite von 100%, Schaltflächen haben eine Breite von 280 Pixeln
Bei Abschnitten können Sie nur die Höhe ändern. Die Breite des Abschnitts wird vom Gerät festgelegt, während die Breite des Inhalts im Abschnitt durch die Einstellung Inhaltsbreite im Seitendesign festgelegt wird. Bei Spalten können Sie nur die Breite ändern, die Höhe wird durch die Abschnittshöhe oder durch die inneren Elemente definiert. Für innere Spalten und Widgets können Sie die Höhe und Breite sowie die jeweiligen Mindest- und Höchstwerte festlegen. Jede Größeneinheit kann verwendet werden.
Die Animations- und Hintergrundeigenschaften im Flex-Modus ähneln denen des klassischen Editors. Weitere Informationen zu Animations- und Hintergrundeigenschaften finden Sie unterFügen Sie Animationen hinzuundHintergrund anpassen.
Anmerkung
Parallax ist für alle Widgets und Container verfügbar und kann auf allen Bildschirmgrößen angewendet werden. Um Parallax zu aktivieren, klicken Sie auf das Bild Design bearbeiten, scrolle zum Hintergrund Abschnitt des Design-Panels und öffnen Sie den Position des Bildes Speisekarte.
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 aufgrund der Möglichkeit, Freestyle-Kompositionen und überlappende Elemente zu erstellen, nicht verfügbar sind. Wir empfehlen Ihnen, Ihr Design an verschiedenen Haltepunkten zu überprüfen
Ausrichten
Einzelne Elemente in einem erweiterten Raster können in jede Richtung ausgerichtet und gestreckt werden, da es nicht durch das automatische Layout eingeschränkt ist.
Bestellung
Im Abschnitt „Anordnung“ des Designfensters kann diese Eigenschaft nur verwendet werden, wenn sich in einem erweiterten Raster mehrere Elemente 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 Sie überlappende Elemente.
Layout neu anordnen
Ermöglicht es Ihnen, auszuwählen, wie die Spalten und Zeilen innerhalb des erweiterten Rasters angeordnet werden, um ein Layout zu erstellen.
Layout anpassen
Ermöglicht es Ihnen, auszuwählen, wie die Spalten und Zeilen innerhalb des erweiterten Rasters angeordnet werden, um ein Layout zu erstellen.
Stift
Ermöglicht es Ihnen, die Position des Elements innerhalb des Rasters zu definieren. Einmal festgelegt, bleibt das Element an derselben Position, auch wenn sich die Rastergröße ändert.
Standort des Netzes
Verfügbar für Elemente in erweiterten Rastern, die zur Erstellung eines Layouts in Spalten und/oder Zeilen unterteilt wurden. Es zeigt, wo sich das Element im Raster befindet
Proportionen beibehalten
Wenn umgeschaltet auf An, stellt sicher, dass die Elemente in einem erweiterten Raster ihre Proportionen behalten, auch wenn sich die Größe des Rasters ändert.
Das Bild-Widget enthält auch eine Proportionen beibehalten umschalten, wodurch die ursprünglichen Proportionen beibehalten werden.
Anmerkung
Dieser Inhalt ist sowohl für den Flex-Modus im Classic Editor als auch für Editor 2.0 relevant. Um Ihre aktuelle Editor-Version zu identifizieren, sieheSo identifizieren Sie die Editor-Version, die Ihre Website verwendet .
Das Verständnis und die effektive Verwendung von Größeneinheiten sind entscheidend für die Erstellung von Layouts, die nicht nur optisch ansprechend sind, sondern auch auf verschiedenen Geräten und Bildschirmgrößen reagieren. Das Design-Panel, das sich auf der rechten Seite der Editor-Leinwand im Editor 2.0 oder im Flex-Modus im Classic Editor, dient als Kontrollzentrum für die Entwurfseigenschaften ausgewählter Elemente, einschließlich Abschnitte, Spalten, Widgets, innerer Spalten und erweiterter Raster. Dieser Artikel gibt einen Überblick über die im Design-Panel verfügbaren Größeneinheiten und bietet praktische Beispiele für deren Verwendung
Darüber hinaus ermöglicht Editor 2.0 Benutzern, Größeneinheiten vom Haupt-Breakpoint (Desktop) aus zu konfigurieren, wodurch die Skalierbarkeit für alle Bildschirmgrößen gewährleistet ist. Benutzer können Größeneinheiten an Haltepunkten auf Tablets und Mobilgeräten anpassen, ohne dass dies Auswirkungen auf andere Breakpoints hat. Weitere Informationen finden Sie unterBildschirmgrößen und Geräte.
Tipp
Empfohlener Duda Academy-Kurs:
-
Größeneinheiten. Erfahren Sie mehr über die verschiedenen Größeneinheiten im Design-Panel und wann Sie sie verwenden sollten.
Prozentsatz (%) ist eine dynamische Größeneinheit, die den Anteil des Containers (Abschnitt, Spalte, innere Spalte oder erweitertes Raster) bestimmt, den das Element auf verschiedenen Bildschirmgrößen einnimmt. In der Regel werden für die Breiten von Flex-Elementen standardmäßig Prozentsätze verwendet. Die Verwendung von Prozentwerten wird empfohlen, wenn das Design für alle Bildschirmgrößen einheitlich sein soll, ohne dass an jedem Haltepunkt manuelle Pixelanpassungen erforderlich
Wenn Sie beispielsweise beide Spalten in einem zweispaltigen Layout auf eine Breite von 50% festlegen, wird sichergestellt, dass sie auf allen Bildschirmgrößen automatisch auf 50% skaliert werden.
Prozentsätze sind vorteilhaft, um relative Elementgrößen über verschiedene Bildschirmabmessungen hinweg beizubehalten. Das bedeutet, dass Elemente proportional zu ihrem übergeordneten Container (Abschnitt oder Spalte) skaliert werden, wodurch ein einheitliches Erscheinungsbild des Layouts gewährleistet wird
Beispielsweise nimmt ein Bild, das innerhalb einer Spalte auf 50% Breite eingestellt ist, immer die Hälfte der Spaltenbreite ein, unabhängig von der Bildschirmgröße. Folglich können die Spalte und das Bild auf Mobilgeräten zwar schmaler erscheinen als auf Desktops, das Bild behält jedoch seine proportionale Breite bei. Ebenso gewährleistet die Einstellung des Abstands zwischen den Spalten auf 4% einen gleichbleibenden Abstand zu den Spalten und anderen Bildschirmelementen, der sich an verschiedene Bildschirmgrößen anpasst
Pixel (px) stellen eine feste Maßeinheit dar, die nicht von Schwankungen der Gerätegröße beeinflusst wird. Beispielsweise behält eine Schaltfläche, die auf 250 Pixel eingestellt ist, ihre Größe auf Mobil-, Tablet- und Desktop-Geräten
sich bei der Größenbestimmung jedoch ausschließlich auf Pixel verlassen, kann dies die Reaktionsfähigkeit beeinträchtigen und manuelle Anpassungen an jedem Breakpoint erforderlich machen. Daher sorgen Pixel zwar für eine konsistente Elementgröße, es wird jedoch empfohlen, Prozentsätze zu verwenden, um ein responsives Design zu fördern. Dieser Ansatz minimiert den Bedarf an individuellen Pixelanpassungen an den Breakpoints, wodurch der Designprozess optimiert und die allgemeine Reaktionsfähigkeit verbessert wird
Viewport-Breite (Vw) passt Elemente dynamisch an die Breite des Bildschirms (Viewport) an und gewährleistet so eine proportionale Skalierung auf verschiedenen Geräten. Wenn Sie beispielsweise einem Element 50 Vw zuweisen, wird die Hälfte der Bildschirmbreite zugewiesen.
Viewport-Höhe (Vh) skaliert Elemente dynamisch im Verhältnis zur Bildschirmhöhe (Viewport). Wenn Sie beispielsweise einem Element 25 Vh zuweisen, wird ein Viertel der Bildschirmhöhe für dieses Element reserviert. Dies ist besonders vorteilhaft für Vollbild-Hintergründe (100% Vh) oder Elemente, die eine Synchronisation mit der Bildschirmhöhe erfordern
Die automatische Einheit passt sich dynamisch an die Höhe des Inhalts an, sodass sie für Textblöcke und Spaltenhöhen geeignet ist und sicherstellt, dass sich die Größe an ihren Inhalt anpasst. In der Regel verwenden Textblöcke standardmäßig automatische Einheiten. Mit dieser Funktion können Elemente nahtlos erweitert oder zusammengezogen werden, wobei das proportionale Layoutdesign beibehalten wird.
Mit Fill wird festgelegt, dass ein Element den verbleibenden Platz in seinem Container entlang seiner Breite oder Höhe ausfüllt. Verwenden Sie Fill, wenn Sie möchten, dass sich ein Element an den verbleibenden Platz anpasst, anstatt an einen festgelegten Anteil (%) oder die Größe seines Inhalts (A).
Wenn beispielsweise in einem zweispaltigen Abschnitt die Breite einer Spalte auf 50 % und die der anderen auf Füllen festgelegt ist, nimmt die zweite Spalte die verbleibende Breite ein. Ein Bild, dessen Höhe auf Füllen eingestellt ist, wird auf die Höhe der Spalte gestreckt, in der es sich befindet.
Die Option Füllung ist bei den Einstellungen für Breite und Höhe einiger Elemente verfügbar, beispielsweise bei der Spaltenbreite und der Bildhöhe, jedoch nicht bei den Mindest- oder Höchstwerten. Bei der inneren Spaltenbreite ist diese Option nicht verfügbar.
Das Eltern-Kind-Konzept regelt die Organisation von Elementen, wobei Hauptelemente wie Kopfzeilen, Textkörper, Menüs und Fußzeilen mindestens einen Abschnitt enthalten. Jeder Abschnitt wiederum enthält mindestens eine Spalte, die als Container für verschiedene Elemente wie Text, Bilder oder Widgets wie innere Spalten und erweiterte Raster dient
Übergeordnete Elemente behalten ihre Designeinstellungen bei, sodass ihr Erscheinungsbild zentral gesteuert werden kann. Wenn ein Abschnitt innerhalb eines übergeordneten Elements jedoch bestimmte Einstellungen für die Hintergrundfarbe hat, spiegelt der Hintergrund des übergeordneten Elements diese Anpassung möglicherweise nicht wider. Diese hierarchische Struktur gewährleistet einen systematischen Ansatz bei der Organisation der Website und ermöglicht effiziente Designabläufe und eine kohärente Präsentation der Inhalte
Die Hierarchie der Elemente folgt einer Standardstruktur: Abschnitte enthalten Spalten und Spalten enthalten Widgets. Diese hierarchische Anordnung stellt sicher, dass Sie einem Abschnitt kein Widget direkt hinzufügen können, ohne dass es in einer Spalte verschachtelt ist. Es gibt mehrere Möglichkeiten, ein Element (Abschnitt, Spalte oder Widget) auszuwählen
-
Direkte Auswahl von Objekten im Editor-Canvas: Benutzer können direkt mit Elementen auf der Editor-Arbeitsfläche interagieren, wodurch es einfacher wird, bestimmte Komponenten zu identifizieren und zu ändern, ohne dass eine umfangreiche Navigation durch Bedienfelder oder Menüs erforderlich ist. Nach der Auswahl eines Objekts wird das Designfenster mit allen relevanten Designoptionen für dieses Element im Designbereich auf der rechten Seite angezeigt.
-
Schwebende Menübrotkrumen: Benutzer können mithilfe der Breadcrumbs im schwebenden Menü zu den übergeordneten Containern zurückkehren. Wenn Benutzer ein bestimmtes Element auswählen, können sie einfach auf die blauen Breadcrumbs oben auf dem Element klicken, um zum übergeordneten Container zurückzukehren
-
Breadcrumbs oben im Design-Panel: Das Design-Panel enthält oben auch Navigationsoptionen in Form von Breadcrumbs. Diese Breadcrumbs ermöglichen es Benutzern, schnell zwischen verschiedenen Abschnitten oder Elementen innerhalb der Leinwand zu wechseln
-
Bedienfeld „Ebenen“: Wenn ein Element ausgewählt ist, werden im Ebenenbedienfeld die mit diesem Element verknüpften Ebenen hervorgehoben. Gleichzeitig gibt der Editor visuelles Feedback und hilft so bei der Navigation innerhalb der Leinwand
Flex-Abschnitte sind Zeilen mit zwei Standard-Flex-Spalten, die ein grundlegendes Layout erstellen. Sobald 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 Widgets hinzufügen
Um einen Abschnitt hinzuzufügen:
-
Bewegen Sie den Mauszeiger zwischen den Zeilen und klicken Sie +Abschnitt hinzufügen. Oder klicken Sie mit der rechten Maustaste, um das Kontextmenü zu öffnen, und klicken Sie auf Hinzufügenund wählen Sie dann Flex-Abschnitt.
-
Klicken Sie im Seitenbereich auf Flex-Abschnitte.
-
Wählen Sie den gewünschten Flexabschnitt aus.
-
Klicken Sie Speichern.
Anmerkung
-
Die Option, ein Hintergrundbild statisch zu halten, ist für Tablets und Mobiltelefone aufgrund einer iOS-Einschränkung nicht verfügbar.
-
Sie können auch einen Flex-Abschnitt mit KI erstellen. Eine ausführliche Anleitung zum Erstellen von Flex-Sektionen mit KI finden Sie unterErstellen Sie einen Flex-Abschnitt mit KI.
Um einen Abschnitt zu speichern:
-
Bewegen Sie den Mauszeiger über den gewünschten Abschnitt und klicken Sie auf Flex-Bereich in der oberen linken Ecke des Abschnitts.
-
Klicken Sie Als Abschnitt speichernund klicken Sie dann auf Wählen Sie nur diese Zeile aus.
-
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 Beginnen Sie mit der Erstellung.
-
Klicken Sie Erledigt.
Sie können die Abstände und Elemente eines Abschnitts einfach auf ihre Themenstile zurücksetzen. Zu den Elementen, die zurückgesetzt werden können, gehören Text, Schaltflächen, Bilder, Hintergründe, Breite und Abstände für den Abschnitt und seine Spalten sowie Widgets wie Advanced Accordion, Advanced Tabs und Dynamic Repeater
Um Abschnittsabstände oder Abschnittselemente auf Themenstile zurückzusetzen, klicken Sie auf den Abschnitt, um die schwebende Leiste zu öffnen. Klicken Sie auf das Dreipunktsymbol und wählen Sie Auf Site-Theme zurücksetzen. Von hier aus können Sie entweder klicken Setzen Sie den Abschnittsabstand zurück oder Stil aller Abschnittselemente zurücksetzen.
Anmerkung
Breakpoint-spezifische Einstellungen (Bildschirmgröße) werden beibehalten. Das heißt, wenn Sie Abschnittsabstände oder Elemente auf Designstile auf dem Desktop zurücksetzen, sind die Breakpoints auf Mobilgeräten und Tablets davon nicht betroffen
Sobald du deiner Website einen Abschnitt hinzugefügt hast, kannst du Spalten hinzufügen, die Widgets innerhalb des Abschnitts enthalten. Alle Abschnitte enthalten standardmäßig Spalten, du kannst aber trotzdem zusätzliche Spalten hinzufügen.
Beachten Sie, dass die maximale Anzahl von Spalten 8 beträgt.
Anmerkung
Wenn Sie einer Spalte ein Element hinzufügen, wird die Position durch die Autolayout-Einstellungen bestimmt. Um die Richtung des automatischen Layouts zu ändern, öffnen Sie das Designfenster und wählen Sie im Abschnitt Layout die Option Horizontal oder Vertikal für das automatische Layout aus.
Sie können eine Spalte duplizieren und sie wird rechts neben der Originalkarte hinzugefügt. Sie können keine Spalten hinzufügen, die 100% der Breite überschreiten.
Um eine Spalte zu duplizieren:
-
Klicken Sie, um eine Spalte auszuwählen.
-
Klicken Sie im schwebenden Menü auf Duplizieren Symbol. Oder Sie können mit der rechten Maustaste auf die Spalte klicken, um das Kontextmenü zu öffnen und auszuwählen Duplizieren.
Sie können die Breite einer Spalte ändern, indem Sie deren Rand auf der Arbeitsfläche verschieben oder die Breite im Entwurfsbereich festlegen.
So ändern Sie die Breite einer Spalte:
-
Klicken Sie hier, um die Spalte auszuwählen.
-
Ziehen Sie einen der quadratischen Griffpunkte am Rand der Spalte.
Sie können außerdem im Abschnitt Größe des Designfensters eine genaue Breite festlegen.
Der abgerundete Griff am Rand einer Spalte oder eines Widgets verändert deren Randabstand (äußeren Abstand), nicht jedoch deren Größe. Weitere Informationen finden Sie unter Äußerer und innerer Abstand.
Anmerkung
Die Spalten in einem Abschnitt dürfen zusammen nicht mehr als 100 % seiner Breite einnehmen. Wenn eine Spalte nicht breiter werden kann, verengen Sie zunächst eine benachbarte Spalte.
Sie können eine Spalte löschen, um sie aus dem Abschnitt zu entfernen. Jeder Abschnitt muss jedoch mindestens eine Spalte enthalten, was bedeutet, dass Sie die letzte Spalte nicht aus einem Abschnitt löschen können.
Um eine Spalte zu löschen:
-
Klicken Sie, um die Spalte auszuwählen.
-
Klicken Sie im schwebenden Menü auf Löschen Symbol. Oder Sie können mit der rechten Maustaste auf die Spalte klicken, um das Kontextmenü zu öffnen und auszuwählen Löschen.
Sie können Widgets auf verschiedene Arten zu Spalten, inneren Spalten oder erweiterten Rastern hinzufügen. Wenn Sie sich bereits im Flex-Modus befinden, können Sie Widgets direkt vom Seitenbereich aus hinzufügen, indemWidgetsund wählen Sie dann das gewünschte Widget aus.
Anmerkung
Wenn Sie den Flex-Modus im Classic Editor verwenden, können Sie ein Widget nicht aus dem Seitenbereich in eine Flex-Spalte ziehen und dort ablegen.
Um ein Widget hinzuzufügen:
-
Klicken Sie auf eine Spalte, eine innere Spalte oder ein erweitertes Raster, um sie auszuwählen.
-
Klicken Sie auf das Plussymbol in der Mitte der Spalte, der inneren Spalte oder des erweiterten Rasters. Oder klicken Sie im schwebenden Menü auf das Plussymbol.
-
Wählen Sie ein Widget aus.
Sie können Widgets auch über das Ebenenbedienfeld hinzufügen.
Um ein Widget aus dem Ebenenbedienfeld hinzuzufügen:
-
Klicken Sie, um eine Spalte auszuwählen.
-
Bewegen Sie im Ebenenbedienfeld den Mauszeiger über die Spalte, die innere Spalte oder das erweiterte Raster, zu dem Sie ein Widget hinzufügen möchten, und klicken Sie auf das Plus-Symbol.
-
Wählen Sie ein Widget aus.
Ausrichtung und Abstand können zusammen verwendet werden, um Ihnen bei der Umsetzung Ihrer Designs zu helfen.
Um mehr über die Ausrichtung zu erfahren, schauen Sie sich das folgende Video an:
Wenn Sie mit Flex entwerfen, können Sie Zeit sparen, indem Sie mehrere Elemente innerhalb desselben Abschnitts, derselben Spalte oder inneren Spalte gleichzeitig ausrichten.
So richten Sie mehrere Elemente aus:
-
Wählen Sie den Abschnitt, die Spalte oder die innere Spalte aus und klicken Sie auf das Ausrichtungssymbol (
) im schwebenden Menü.
-
Wählen Sie die gewünschte Ausrichtung aus.
Das Design-Panel bietet zusätzliche Ausrichtungsoptionen, z. B. das Ändern der Richtung des automatischen Layouts, Dehnen 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 Abschnitt Layout des Design-Panels unter Ausrichtung des Inhalts, wählen Sie die gewünschte vertikale und horizontale Inhaltsausrichtung aus.
Wenn Sie Text über das schwebende Menü oder das Designfenster ausrichten, werden sowohl der Text als auch die div Etikett.
Es ist zwar möglich, mehrere Elemente gleichzeitig auszurichten, manchmal müssen Sie jedoch nur die Ausrichtung eines Elements innerhalb einer flexiblen Spalte ändern, ohne die anderen Elemente zu beeinflussen.
Um ein einzelnes Element auszurichten:
-
Wählen Sie das gewünschte Element aus.
-
Klicken Sie im schwebenden Menü auf das Ausrichtungssymbol (
Abstand zwischen Elementen
Sie können den horizontalen oder vertikalen Abstand zwischen Spalten innerhalb desselben Flexabschnitts 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 Spalte, die innere Spalte oder das erweiterte Raster und wählen Sie Design bearbeiten.
-
In der Abstand Abschnitt des Design-Panels unter Abstand zwischen Elementen, geben Sie den Prozentwert des horizontalen Abstands oder den Pixelwert des vertikalen Abstands ein, oder verwenden Sie den Schieberegler, um den Wert für den Abstand zwischen den Elementen festzulegen Abstand zwischen Elementen Feld.
Sie können den Abstand sowohl für Abschnitte als auch für Spalten zurücksetzen, indem Sie auf das Abstand zurücksetzen Symbol im schwebenden Menü.
Flex-Abschnitte erstellen ein Layout und richten Objekte automatisch aus, sodass Sie einfach und schnell schöne Abschnitte entwerfen können. Wenn Sie jedoch ein komplexeres Design mit überlappenden Objekten oder einer Freestyle-Komposition haben, müssen Sie ein erweitertes Raster verwenden. Erweiterte Raster ermöglichen es Ihnen, Elemente in einer Freestyle-Komposition ohne automatisches Layout zu platzieren. Aus diesem Grund empfehlen wir Ihnen, Ihr Design an allen Breakpoints zu überprüfen
Erfahren Sie, wie Sie überlappende Elemente erstellen, indem Sie sich das folgende Video ansehen oder die folgenden Anweisungen befolgen.
So erstellen Sie überlappende Elemente:
-
Klicken Sie, um eine flexible Spalte auszuwählen.
-
Klicken Sie im schwebenden Menü oder in der Flex-Spalte auf das Plussymbol (
).
-
Wählen Sie im Abschnitt Flex-Elemente Erweitertes Raster (zuvor Container genannt). Um sicherzustellen, dass Sie die bewährten Methoden befolgen, ziehen Sie die Kanten des erweiterten Rasters so, dass es sich über die gesamte Breite der flexiblen Spalte erstreckt
-
Wählen Sie im Abschnitt Layout des Design-Panels ein vorgefertigtes Raster aus Ordnen Sie das Layout neu an. Oder wenn Sie Ihr eigenes Grid erstellen möchten, verwenden Sie das Spaltenund ReihenDropdownmenüs von Passen Sie das Layout an 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 sie im erweiterten Raster an.
-
Klicken Sie, um ein Element auszuwählen, und wählen Sie im Bereich Anordnen des Designfensters Nach vorne bringen, Vorbringen, Rückwärts schicken, oder Nach hinten schicken.
Wir empfehlen, Ihr Design an jedem Haltepunkt zu überprüfen, wenn Sie erweiterte Raster verwenden. Bei überlappenden Elementen müssen Sie das Design möglicherweise an bestimmten Haltepunkten anpassen
Beim Webdesign beeinflusst die Auswahl des geeigneten Layoutsystems die Benutzererfahrung erheblich, insbesondere wenn Widget-Layoutelemente wie Inner Column und Advanced Grid in eine Website integriert werden.
Tipp
Empfohlene Duda Academy-Kurse:
-
Layout-Elemente. Eine zweiminütige Einführung in innere Spalten und erweiterte Raster sowie in die Art und Weise, wie diese andere Widgets enthalten und anordnen.
-
Grundlegendes zum Layout. Erfahren Sie mehr über Spalten und innere Spalten und wie Sie die darin enthaltenen Elemente ausrichten und ihre Größe ändern.
-
Layouts mit erweiterten Rastern. Erfahren Sie, wie Sie komplexe Layouts mit fortschrittlichen Rastern erstellen
Das Widget „Innere Spalte“ wird empfohlen für:
-
Modulare Layouts: Perfekt für die Erstellung modularer Layouts, bei denen der Inhalt linear fließt, und eignen sich daher ideal für Navigationsmenüs, Karten oder listenartige Layouts.
-
Responsives Design: Hervorragend geeignet für die Erstellung responsiver Designs, die sich nahtlos an verschiedene Bildschirmgrößen und Geräte anpassen und so eine optimale Ausrichtung und Lesbarkeit gewährleisten.
-
Dynamischer Inhalt: Gut geeignet für den Umgang mit dynamischen Inhalten, die in Länge oder Größe variieren können, sodass Designer das Verhalten und die Größe von Elementen innerhalb eines Containers dynamisch steuern können.
-
Verschachtelte Layouts: Dank der Verschachtelungsfunktionen für innere Spalten eignen sie sich für die Erstellung komplexer verschachtelter Layouts. Designer können bei Bedarf mehr innere Spalten innerhalb des äußeren Containers verschachteln, was Flexibilität und Anpassungsfähigkeit bei der Anordnung von Inhaltshierarchien bietet. In ähnlicher Weise bietet Advanced Grid die Möglichkeit, Widgets, innere Spalten und sogar zusätzliche erweiterte Raster innerhalb der Layoutstruktur zu verschachteln
Das Advanced Grid-Widget wird empfohlen für:
-
Komplexe Layoutstrukturen: Unverzichtbar für die Erstellung komplexer Layouts mit mehreren Zeilen und Spalten und ermöglicht eine präzise Kontrolle über die Platzierung und Größe der Elemente.
-
Nichtlineare Designs: Perfekt für die Gestaltung nichtlinearer Layouts, bei denen Elemente unabhängig von ihrer Quellreihenfolge positioniert werden müssen, um kreative Kompositionen und asymmetrische Anordnungen zu ermöglichen. Das bedeutet, dass Elemente je nach Designanforderungen platziert und angeordnet werden können
-
Responsives Webdesign: Advanced Grid erfordert zwar eine sorgfältige Planung, bietet aber robuste Tools für die Erstellung responsiver Designs. Designer können spezifische Layoutanpassungen wie die Neuanordnung der Spalten, die Anordnung der Elemente und die Rasterabstände bei unterschiedlichen Darstellungsfenstern definieren, um eine optimale Präsentation auf verschiedenen Geräten zu gewährleisten
Wann sollte ich ein Widget für innere Spalten im Vergleich zu einem erweiterten Grid-Widget verwenden?
Innere Spalten eignen sich am besten für modulare Layouts, insbesondere wenn Sie eine präzise Kontrolle über einzelne Elemente innerhalb eines Abschnitts benötigen oder wenn Sie ein automatisches Layout wünschen. Beachten Sie jedoch, dass die inneren Spalten zwar die Abschnittsintegrität beibehalten, das Verschieben von Widgets in ihnen 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 so eine umfassende Kontrolle über die gesamte Layoutstruktur, ideal für zweidimensionale
Advanced Grid (CSS Grid) kann beim Umgang mit komplexen 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 verschachtelte HTML-Elemente enthalten, was im Vergleich zu Advanced Grids möglicherweise zu etwas langsameren Renderzeiten führt
Sie können auch sowohl das Widget für die innere Spalte als auch das erweiterte Raster-Widget im selben Abschnitt und auf der gesamten Website verwenden, um die gewünschten Designs zu erzielen. Dazu gehört es, ein Gleichgewicht zwischen der gesamten Layoutstruktur und den feineren Details der Inhaltsorganisation
Das Verständnis der Eltern-Kind-Beziehungen ist von grundlegender Bedeutung, um Inner Columns und Advanced Grids effektiv nutzen zu können. In diesen Layoutsystemen fungieren die Elemente, in denen sich die Spalte befindet, als übergeordnete Elemente, während die darin enthaltenen Elemente, wie z. B. zusätzliche Widgets, als untergeordnete Elemente betrachtet werden. Diese Beziehung bestimmt, wie Elemente innerhalb des Layouts positioniert und ausgerichtet werden, wodurch Kohärenz und strukturelle Integrität in Ihrem Webdesign gewährleistet
Es ist wichtig zu beachten, dass Sie nicht immer innere Spalten hinzufügen müssen. Oft kann eine einzelne Spalte für viele Anwendungsfälle ausreichen. Die innere Spalte ermöglicht die einfache Platzierung von Elementen entweder horizontal oder vertikal. Zu den Anforderungen gehören ein Abschnitt, der als Flex-Container dient, und eine Spalte für die inneren Spalten, wobei beide Spaltentypen als flexible Elemente dienen und das übergeordnete bzw. untergeordnete Element darstellen.
Advanced Grid ermöglicht die Platzierung von Elementen sowohl in vertikaler als auch in horizontaler Richtung. 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 Container zu deklarieren, sodass alle untergeordneten Elemente zu Rasterelementen werden.