Komponenten

Container

Strukturieren Sie Ihre Inhalte mit flexibler Kontrolle.

Die Container-Komponente ist ein flexibler Layout-Wrapper, mit dem Sie Ihre Inhaltsblöcke sauber und konsistent gruppieren, organisieren und anordnen können. Ganz gleich, ob Sie komplexe Layouts erstellen oder einfach nur eine zuverlässige Methode zur Verschachtelung von Komponenten benötigen, Container geben Ihnen die Kontrolle, um Struktur und Semantik mühelos zu verwalten.

Vom semantischen HTML-Tagging über die Benennung von Ankern bis hin zur Thematisierung von Komponenten - jeder Container ist so konzipiert, dass er eine saubere Komposition, Zugänglichkeit und visuelle Kohärenz auf Ihren Seiten ermöglicht.

Intelligente Struktur einfach gemacht

  1. Flexibles Wrapping mit HTML-Tag-Typen.
    Von <div> bis <nav>, wählen Sie was passt.

  2. Gruppieren Sie Blöcke in logische Abschnitte.
    Perfekt für die logische Gliederung von Inhalten.

  3. Namen für interne Navigationsanker.
    Anker zur Aktivierung von Sektions-Links.

Jeder Block, auf Ihre Art gestylt

  1. Integrierte Theming-Optionen.
    Gestalten Sie Inhalte nach Ihren Wünschen.

  2. Sorgen Sie für eine unabhängige Ausrichtung.
    Halten Sie Ihr Layout sauber undmodular.

  3. Verschachtelungsfreundlich.
    Ideal komplexer Layouts.

Anwendungsfälle

Die Container-Komponente ist das Rückgrat der flexiblen Layout-Verwaltung. Sie wird verwendet, um Inhaltsabschnitte zu umhüllen, zu gruppieren und visuell zu strukturieren, und gibt Ihnen die volle Kontrolle über Layout und Semantik, ohne dass Codeänderungen erforderlich sind.

Häufige Szenarien sind:

  • Umhüllen von Abschnitten wie Hero-Blöcken, CTA-Zeilen, Fußzeilen oder Body-Inhalten

  • Strukturierung verschachtelter Elemente mit Abständen dazwischen

  • Einrichten von navigierbaren Ankern für die scrollbasierte Navigation

  • Anwendung konsistenter Layout-Regeln auf allen Seiten

  • Beibehaltung der richtigen Dokumentstruktur mit semantischen Tags (z. B. <section>, <nav> usw.)

  • Verbesserung der Zugänglichkeit durch korrekte HTML-Kennzeichnung

In Projekten, die mit Vertex Forge erstellt werden, helfen Container Redakteuren und Designern bei der Erstellung professioneller Layouts, die skalierbar und übersichtlich bleiben, unabhängig davon, wie komplex die Seite wird.

Konfigurationsoptionen und Funktionen

Die Container-Komponente ist Ihr Schweizer Taschenmesser für das Layout. Sie ermöglicht eine semantische Strukturierung, Abstände, Styling und interne Sektions-Navigation.

Egal, ob Sie große Seitenabschnitte umhüllen oder verschachtelte Layouts fein abstimmen, Container sorgen dafür, dass Ihre Inhalte organisiert, skalierbar und einfach zu verwalten sind.

Flexible Layouts erstellen. Verbessern Sie die Struktur. Halten Sie Ihren Inhalt sauber.

Name

Ein benutzerdefinierter Bezeichner für den Container. Dies dient zwei primären Zwecken:

  • Hilft Ihnen, Abschnitte im visuellen Editor visuell zu identifizieren und zu verwalten.

  • Ermöglicht es, den Abschnitt in Ankerlinks für die interne Navigation zu referenzieren

Der Name muss URL-sicher sein (keine Leerzeichen oder Sonderzeichen).

Typ

Wählen Sie das semantische HTML-Element, als das der Container dargestellt werden soll. Dies verleiht Ihrer Ausgabe Struktur und Bedeutung und verbessert sowohl die Zugänglichkeit als auch die Suchmaschinenoptimierung, indem es für eine saubere und zugängliche Markierung sorgt, die die Struktur und Absicht Ihrer Seite widerspiegelt.

Verfügbare Typen sind:

  • Div - allgemeiner Container

  • Abschnitt - Gruppierung von Inhalten

  • Ordered List / Unordered List - strukturierte Listencontainer

  • Listenelement - Verwendung innerhalb einer Liste

  • Navigation - semantischer Wrapper für Navigationselemente

  • Zitieren - Zitat- oder Zitierbereich

  • Kopfzeile / Fußzeile - semantische Layout-Elemente

  • Aside - für ergänzende Inhalte (z. B. Sidebars)

Content Bereich

Dies ist der Kern Ihres Containers, die eigentlichen Inhaltsblöcke, die darin verschachtelt sind. Hier können Sie beliebige andere Komponenten hinzufügen (z. B. Beschriftungen, Bilder, Accordions, Rich Text usw.).

Verwenden Sie dieses Feld, um Ihre Layouts zu strukturieren, indem Sie mehrere Blöcke kombinieren, stapeln oder in einem bestimmten Abstand zueinander anordnen.

Komponenten Theme

Wenden Sie mit den Einstellungen des Komponententhemas Gestaltungsoptionen auf den Container an. Damit können Sie das Erscheinungsbild, die Abstände und das Layoutverhalten visuell anpassen.

Sie können auch Theme Preset Styles erben oder überschreiben, um die vollständige Kontrolle zu behalten.