> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-layout.md). # AX - Layout ## Übersicht **AX - Layout** ist eine Experience-Cloud-Komponente, die andere Komponenten auf Experience-Sites-Seiten in strukturierte Zeilen und Spalten mit flexibler Größenanpassung und Ausrichtung organisiert. Verwenden Sie sie, um mehrspaltige Layouts, responsive Raster oder benutzerdefinierte Seitenstrukturen zu erstellen, indem Sie Komponenten per Drag-and-drop in Layoutbereiche ziehen. Steuern Sie Spaltenbreiten, Abstände, Ausrichtung und responsives Verhalten für unterschiedliche Bildschirmgrößen im Experience Builder. Perfekt für Dashboard-Layouts, Formularabschnitte, Inhaltsraster, Vergleichstabellen oder überall dort, wo Ihr Portal eine strukturierte, mehrspaltige Inhaltsorganisation benötigt, die sich an Mobilgeräte und Desktop anpasst. {% hint style="danger" %} Diese Komponente [nutzt Slots](/experience-cloud/experience-cloud-de/erste-schritte/learning-the-basics.md#understanding-slots) für erweiterte Anpassungen und ist damit ideal für LWR-Sites. Aura-Sites unterstützen dieses Maß an Anpassung nicht. {% endhint %} ## Konfiguration ### Eigenschaften **Horizontale Ausrichtung** passt die horizontale Ausrichtung des Inhalts innerhalb des Layouts an und sorgt für eine ausgewogene, harmonische Darstellung. **Vertikale Ausrichtung** steuert die vertikale Ausrichtung des Inhalts und präsentiert ihn auf eine optisch ansprechende Weise, die Ihren Designzielen entspricht. **An den Rand ziehen** ermöglicht es dem Inhalt, sich bis zu den Grenzen des Layouts auszudehnen und Layouts zu gestalten, die den verfügbaren Platz maximieren. **Mehrere Zeilen** ermöglicht es dem Layout, Inhalte über mehrere Zeilen hinweg aufzunehmen und sie in einer strukturierten, organisierten Reihenfolge zu verteilen. **Als Abschnitt anzeigen** legt fest, dass das Layout als eigenständiger Abschnitt innerhalb der Seite dargestellt wird. **Spaltenlayout** legt fest, wie Inhalte innerhalb von Spalten angezeigt werden, und schafft eine rasterartige Struktur für eine systematische, ordentliche Anordnung — siehe [Spaltenlayouteinstellungen](#column-layout-settings) unten. ### Spaltenlayouteinstellungen Die Einstellungen für das Spaltenlayout bieten Flexibilität bei der Organisation von Seiteninhalten und stellen sicher, dass sie sich responsiv an unterschiedliche Bildschirmgrößen und Geräte anpassen, während sie ein sauberes, strukturiertes Erscheinungsbild beibehalten. #### Typ Legt die Art des Spaltenlayouts fest. * **Optionen:** * **`Flexibel`**: Die Spalten dieses Layouttyps passen ihre Größe dynamisch an den Inhalt und den verfügbaren Bildschirmplatz an. Diese Option ist ideal für responsive Designs, bei denen sich das Layout an verschiedene Gerätegrößen anpassen muss. * **`Fest`**: Diese Option hält die Spalten unabhängig von der Bildschirmgröße oder dem Inhaltsvolumen in einer konstanten Größe. Feste Spalten sind hilfreich, wenn ein einheitliches und konsistentes Layout erforderlich ist. * **Verwendung:** Wählen Sie **`Flexibel`** für flüssige Layouts, die sich an unterschiedliche Bildschirmgrößen anpassen müssen, und **`Fest`** für Layouts, die konsistente Spaltenbreiten erfordern. #### Größe Legt die Breite der Spalten innerhalb des Rasters fest. Das Rastersystem basiert in der Regel auf einer 12-Einheiten-Struktur. * **Bereich:** 1 bis 12, wobei jede Einheit einen Anteil an der insgesamt verfügbaren Breite darstellt. * **Verwendung:** Weisen Sie eine Größe zu, um zu definieren, wie viel Platz jede Spalte einnehmen soll. Wenn Sie beispielsweise in einem Raster mit 12 Einheiten die Größe 4 festlegen, würde die Spalte ein Drittel des verfügbaren horizontalen Raums einnehmen. #### Ausrichtungsversatz Passt die Position der Spalte innerhalb ihres Containers an. * **Optionen:** * **`Links`**: Verschiebt die Spalte zum linken Rand des Containers. * **`Rechts`**: Verschiebt die Spalte zum rechten Rand. * **`Oben`**: Richtet die Spalte näher am oberen Rand des Containers aus. * **`Unten`**: Positioniert die Spalte nahe am unteren Rand des Containers. * **Verwendung:** Verwenden Sie diese Einstellung, um die Position von Spalten im Verhältnis zu ihrer Umgebung fein abzustimmen und so die visuelle Attraktivität und den räumlichen Ausgleich des Layouts zu verbessern. #### Innenabstand Steuert den Innenabstand der Spalte. * **Optionen:** * **`Horizontal`**: Passt den Innenabstand links und rechts der Spalte an. * **`Rundum`**: Fügt an allen Seiten der Spalte Innenabstand hinzu. * **Verwendung:** Wenden Sie Innenabstand an, um innerhalb der Spalte Platz zu schaffen, sodass der Inhalt nicht direkt an den Rändern anliegt, was die Lesbarkeit und die visuelle Ästhetik verbessert. Die Einstellungen für das Spaltenlayout der Avonni-Layout-Komponente sind unerlässlich, um in Salesforce-Experience-Cloud-Sites ausgefeilte und funktionale Layouts zu erstellen. ## Anwendungsfälle | Name | Beschreibung | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | [**Erstellen Sie ein Rasterlayout**](/experience-cloud/experience-cloud-de/tutorials/use-cases/creating-a-grid-layout.md) | Lernen Sie, mit Avonni Components ein dynamisches Rasterlayout zu erstellen, um Produkte oder Funktionen zu präsentieren. | | [**Avonni Layout so konfigurieren, dass es responsiv ist**](/experience-cloud/experience-cloud-de/tutorials/components/layout/configuring-the-layout-to-be-responsive.md) | Lernen Sie, mit Avonni Layout in Experience Cloud über verschiedene Geräte hinweg responsive, benutzerfreundliche Layouts zu erstellen. | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-layout.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.