> 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 in strukturierte Zeilen und Spalten mit flexibler Größe und Ausrichtung auf Experience-Sites-Seiten 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 verschiedene Bildschirmgrößen im Experience Builder. Perfekt für Dashboard-Layouts, Formularabschnitte, Inhaltsraster, Vergleichstabellen oder überall dort, wo Ihr Portal strukturierte, mehrspaltige Inhaltsorganisation benötigt, die sich an Mobilgeräte und Desktops 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 %} ## 🎥 Tutorials | Name | Beschreibung | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | [**Ein Grid-Layout erstellen**](/experience-cloud/experience-cloud-de/anleitungen/use-cases/creating-a-grid-layout.md) | Lernen Sie, mit Avonni-Komponenten ein dynamisches Rasterlayout zu erstellen, um Produkte oder Funktionen zu präsentieren. | | [**Avonni Layout auf Responsivität konfigurieren**](/experience-cloud/experience-cloud-de/anleitungen/components/layout/configuring-the-layout-to-be-responsive.md) | Lernen Sie, mit Avonni Layout in Experience Cloud auf verschiedenen Geräten responsive, benutzerfreundliche Layouts zu erstellen. | ## Eigenschaften | Name | Beschreibung | Verwendung | | --------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | **Horizontale Ausrichtung** | Richten Sie die horizontale Ausrichtung des Inhalts innerhalb des Layouts an | Verwenden Sie diese Einstellung, um sicherzustellen, dass der Inhalt kohärent ausgerichtet ist und über das gesamte Layout hinweg ein ausgewogenes und harmonisches Erscheinungsbild bewahrt. | | **Vertikale Ausrichtung** | Manipulieren Sie die vertikale Ausrichtung des Inhalts innerhalb des Layouts. | Optimieren Sie die vertikale Positionierung des Inhalts und stellen Sie sicher, dass er auf ansprechende Weise präsentiert wird, die mit den allgemeinen Designzielen übereinstimmt. | | **Zur Begrenzung ziehen** | Erlauben Sie dem Inhalt, sich bis zu den Grenzen des Layouts auszudehnen. | Verwenden Sie diese Option, um Layouts zu erstellen, die den Raum maximieren und die Sichtbarkeit sowie Präsentation von Inhaltselementen verbessern. | | **Mehrere Zeilen** | Ermöglichen Sie die Aufnahme von Inhalt über mehrere Zeilen hinweg. | Aktivieren Sie diese Funktion, wenn Ihr Layout die Verteilung von Inhalt in einer vertikalen Reihenfolge erfordert und so eine strukturierte und organisierte Darstellung erleichtert. | | **Als Abschnitt anzeigen** | Legen Sie fest, dass das Layout als eigenständiger Abschnitt auf der Seite angezeigt wird. | Legen Sie fest, dass das Layout als eigenständiger Abschnitt auf der Seite angezeigt wird. | | **Spaltenlayout** | Bestimmen Sie, auf welche Weise Inhalte in Spalten angezeigt werden. | Passen Sie die Spaltenkonfiguration an, um eine rasterähnliche Struktur zu schaffen und eine systematische und ordentliche Anordnung von Inhalten für eine verbesserte visuelle Navigation zu fördern. | ## Spaltenlayout-Einstellungen Die Spaltenlayout-Einstellungen bieten Flexibilität bei der Organisation von Seiteninhalten und stellen sicher, dass sie sich responsiv an verschiedene Bildschirmgrößen und Geräte anpassen, während ein sauberes, strukturiertes Erscheinungsbild erhalten bleibt. #### Typ Bestimmt die Art des Spaltenlayouts. * **Optionen:** * **`Flexibel`**: Spalten in diesem Layouttyp 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 behält eine konstante Größe für die Spalten bei, unabhängig von Bildschirmgröße oder Inhaltsmenge. Feste Spalten sind hilfreich, wenn ein einheitliches und konsistentes Layout erforderlich ist. * **Verwendung:** Wählen Sie **`Flexibel`** für fließende Layouts, die sich an verschiedene Bildschirmgrößen anpassen müssen, und **`Fest`** für Layouts, die Konsistenz bei den Spaltenbreiten erfordern. #### Größe Legt die Breite der Spalten innerhalb des Rasters fest. Das Rastersystem basiert typischerweise auf einer 12-Einheiten-Struktur. * **Bereich:** 1 bis 12, wobei jede Einheit einen Anteil der insgesamt verfügbaren Breite darstellt. * **Verwendung:** Weisen Sie eine Größe zu, um festzulegen, wie viel Platz jede Spalte einnehmen soll. Beispielsweise würde eine Größe von 4 in einem Raster mit 12 Einheiten bedeuten, dass die Spalte ein Drittel des verfügbaren horizontalen Raums einnimmt. #### Ausrichtungsversatz Passt die Position der Spalte innerhalb ihres Containers an. * **Optionen:** * **`Links`**: Verschiebt die Spalte in Richtung der linken Kante des Containers. * **`Rechts`**: Verschiebt die Spalte in Richtung der rechten Kante. * **`Oben`**: Richtet die Spalte näher am oberen Rand des Containers aus. * **`Unten`**: Positioniert die Spalte in der Nähe des unteren Randes 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 inneren Abstand der Spalte. * **Optionen:** * **`Horizontal`**: Passt den Innenabstand links und rechts der Spalte an. * **`Rundum`**: Fügt auf allen Seiten der Spalte Innenabstand hinzu. * **Verwendung:** Wenden Sie Innenabstand an, um innerhalb der Spalte Platz zu schaffen, damit der Inhalt nicht direkt an den Rändern anliegt, und verbessern Sie so die Lesbarkeit und die visuelle Ästhetik. Die Spaltenlayout-Einstellungen der Avonni-Layout-Komponente sind unerlässlich, um in Salesforce Experience Cloud Sites ausgefeilte und funktionale 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.