Spalten

Die Spalten-Komponente gibt Ihnen leistungsstarke Kontrolle über das Layout und die Anordnung Ihrer Dynamic Components.

Einrichten Ihrer Spalten

1. Gesamtlayout konfigurieren

Bevor Sie Inhalte zu Ihren Spalten hinzufügen, ist es hilfreich, das Gesamtlayout und die Struktur der Spaltenkomponente zu definieren.

Horizontale Ausrichtung

Diese Einstellung bestimmt, wie das gesamte Spaltenraster horizontal innerhalb seines Containers positioniert wird.

• Links: Richtet die Spalten an der linken Seite des Containers aus.

• Mitte: Zentriert die Spalten innerhalb des Containers.

• Rechts: Richtet die Spalten an der rechten Seite des Containers aus.

Dies ist nützlich, um sicherzustellen, dass Ihre Inhalte ausgewogen aussehen oder gemäß Ihrer Designabsicht auf verschiedenen Bildschirmgrößen ausgerichtet sind.

Vertikale Ausrichtung

Dies steuert die vertikale Positionierung der Spalten innerhalb des Containers.

• Oben: Richtet alle Spalten oben im Container aus.

• Mitte: Zentriert die Spalten vertikal.

• Unten: Richtet alle Spalten unten im Container aus.

Diese Einstellung ist entscheidend für Layouts mit variierenden Spaltenhöhen und sorgt dafür, dass alle Spalten gleichmäßig ausgerichtet sind.

Zeilenumbruch zulassen

Wenn aktiviert, erlaubt diese Option, dass Spalten auf neue Reihen umgebrochen werden, wenn die Bildschirmgröße oder die Containerbreite nicht alle Spalten in einer einzigen Zeile aufnehmen kann. Dies ist für responsives Design unerlässlich, damit Ihr Layout auf verschiedenen Geräten funktional und ansprechend bleibt.

2. Spalten erstellen

Nachdem Sie das Gesamtlayout festgelegt haben, können Sie einzelne Spalten zu Ihrer Komponente hinzufügen.

Spalten hinzufügen

3. Jede Spalte anpassen

Nachdem Sie Ihre Spalten hinzugefügt haben, können Sie jede einzeln anpassen, um das gewünschte Layout und Erscheinungsbild zu erzielen.

Feste oder flexible Breite

• Feste Breite: Legt eine bestimmte Breite für die Spalte fest. Dies ist nützlich, wenn Sie genaue Kontrolle über das Layout benötigen, z. B. für Kopfzeilen oder bestimmte Inhaltsbereiche, die sich beim Bildschirmwechsel nicht verändern sollen.

• Flexibel: Die Breite der Spalte ist dynamisch und wird basierend auf dem Inhalt und dem verfügbaren Platz angepasst. Dies ist ideal für responsives Design, bei dem die Inhaltsgröße variieren kann.

Flexibilität: Für flexible Spalten können Sie ihr Verhalten weiter mit der Einstellung „Flexibilität“ feinabstimmen:

• Auto: Die Spalte passt ihre Breite automatisch basierend auf dem Inhalt und dem verfügbaren Platz an.

• Verkleinern: Die Spalte kann schrumpfen, wenn nicht genügend Platz vorhanden ist, um alle Spalten in einer einzigen Zeile darzustellen.

• Wachsen: Die Spalte kann wachsen, um freien Platz im Container auszufüllen.

• Nicht schrumpfen: Verhindert, dass die Spalte schrumpft, selbst wenn der Platz begrenzt ist.

• Nicht wachsen: Verhindert, dass die Spalte wächst, selbst wenn zusätzlicher Platz verfügbar ist.

• Keine Flexibilität: Deaktiviert die Flexibilität vollständig, sodass sich die Spalte wie eine Spalte mit fester Breite verhält.

Ausrichtungsversatz

Mit dieser Einstellung können Sie steuern, wie die Spalte im Vergleich zu benachbarten Spalten ausgerichtet ist. Sie können die Ausrichtung nach links, rechts, oben oder unten „versetzen“, um visuelle Trennung oder Gruppierung zwischen Spalten zu erzeugen.

Innenabstand (Padding)

Sie können den Innenabstand anpassen, um Platz um den Inhalt innerhalb einer Spalte hinzuzufügen. Wählen Sie aus verschiedenen Padding-Optionen, um Abstand an den linken und rechten Seiten der Spalte oder an allen Seiten hinzuzufügen.

Durch das Anpassen dieser Einstellungen können Sie komplexe und responsive Layouts erstellen, die sich gut an verschiedene Anzeige­kontexte anpassen und sicherstellen, dass Ihr Design auf verschiedenen Geräten und Bildschirmgrößen gut aussieht und effektiv funktioniert.

können Sie Felder auf einer Seite zur Erstellung eines neuen Datensatzes automatisch vorausfüllen. Sie können Variablen für die zu öffnende Seite zur Erstellung eines neuen Datensatzes festlegen.

Erstellen eines responsiven 3-Spalten-Layouts