> 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-container.md). # AX - Container ## Übersicht **AX - Container** ist eine Experience-Cloud-Komponente, die andere Komponenten auf Experience-Sites-Seiten in einem gestalteten Container mit Rahmen, Hintergründen und Innenabstand umschließt. Verwenden Sie sie, um zusammengehörige Inhalte zu gruppieren, visuelle Abschnitte zu erstellen, Hintergrundfarben oder -bilder hinzuzufügen oder einen einheitlichen Abstand um Komponenten herum anzuwenden. Ziehen Sie beliebige Experience-Cloud-Komponenten per Drag-and-drop in den Container, um in Experience Builder gruppierte Layouts zu erstellen. Perfekt zum Erstellen visueller Abschnitte, zum Gruppieren von Formularfeldern, zum Hinzufügen markengerechter Hintergründe, zum Organisieren von Dashboard-Widgets oder überall dort, wo Ihr Portal Inhalte in einem gestalteten Container umschließen muss. {% 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 %} ## Anleitungen | Name | Beschreibung | | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | | [**Ein Grid-Layout erstellen**](/experience-cloud/experience-cloud-de/anleitungen/use-cases/creating-a-grid-layout.md) | Lernen Sie, ein dynamisches Grid-Layout zu erstellen, um Produkte mit interaktiven Schaltflächen „Mehr erfahren“ zu präsentieren. | ## Das Potenzial Ihrer Site mit Avonni Container maximieren ### Vielseitige Designoptionen für jeden Bedarf Die Avonni-Container-Komponente zeichnet sich durch ihre Auswahl an Stilvarianten aus – Card, Box und Standard – die jeweils für unterschiedliche Inhaltsanforderungen konzipiert sind. * Die **`Karte`** Die Variante ist perfekt für auffällige Abschnitte wie Testimonials und verleiht Ihren Inhalten mehr Ausdruck.
* Die **`Box`** Die Variante eignet sich hervorragend, um Produkte oder wichtige Funktionen hervorzuheben und sie so stärker ins Blickfeld zu rücken.
* Die **`Standard`** Die Variante bietet für konventionellere Inhalte ein klares und stimmiges Erscheinungsbild und sorgt für Harmonie auf Ihrer gesamten Site.
### Dynamische visuelle Elemente, die Ihre Site aufwerten Mit Avonni Container können Sie verschiedene Abschnitte mit einzigartigen Hintergrundbildern zum Leben erwecken. Stellen Sie sich vor, Sie fügen Ihrem Abschnitt „Über uns“ lebendige Teamfotos hinzu oder zeigen ruhige Landschaften für Nachhaltigkeitsthemen. Diese dynamischen visuellen Elemente steigern die ästhetische Wirkung und helfen dabei, die Geschichte Ihrer Marke wirkungsvoller zu vermitteln. ### Lesbarkeit trifft auf Stil Es ist im Webdesign entscheidend, dass Inhalte vor unruhigen oder farbigen Hintergründen gut hervortreten. Avonni Container begegnet dieser Herausforderung mit Überlagerungsfarben. Stellen Sie sich eine dunkle Überlagerung auf einem festlichen Hintergrund vor, durch die Ihre Veranstaltungsdetails hervorstechen, oder einen dezenten Farbton, der Ihren Inhalten mehr Tiefe verleiht und gleichzeitig die Lesbarkeit erhält. ### Vollständige Kontrolle über die Darstellung Avonni Container bietet umfangreiche Kontrolle über Größe, Hintergrund und Rahmen jedes Abschnitts. Das bedeutet, dass Sie präzise festlegen können, wie Ihre Inhalte den verfügbaren Raum nutzen, Hintergrundfarben oder -bilder an Ihr Design anpassen und die Rahmeneinstellungen für mehr Kontur verfeinern können. Jedes dieser Elemente spielt eine entscheidende Rolle bei der Verbesserung der visuellen Struktur Ihrer Seite. ### Anpassungsfähigkeit für unterschiedliche Zielgruppen In der heutigen digitalen Landschaft ist es entscheidend, auf die Bedürfnisse unterschiedlicher Zielgruppen einzugehen. Avonni Container wurde mit dieser Anpassungsfähigkeit im Blick entwickelt. Ob Sie den Card-Stil für Nachrichtenbereiche in Partnerportalen oder den Box-Stil zur Hervorhebung von Sonderangeboten in Kundenportalen verwenden – diese Komponente stellt sicher, dass Ihre Inhalte gesehen werden und bei Ihrer Zielgruppe ankommen. ### Zusammenfassung Die Avonni-Container-Komponente ist mehr als nur ein Werkzeug; sie ist eine Leinwand für Kreativität und eine Lösung für vielfältige Webdesign-Herausforderungen bei der Nutzung von Experience Cloud. Ihre Vielseitigkeit, die dynamischen visuellen Möglichkeiten, die Verbesserung der Lesbarkeit und die anpassbaren Optionen zur Inhaltsdarstellung machen sie unverzichtbar für jede Salesforce-Experience-Cloud-Site. Ganz gleich, ob Sie fesseln, informieren oder einbinden möchten – Avonni Container gibt Ihnen die Möglichkeit, all das stilvoll und effizient umzusetzen. ## Einstellungen {% tabs %} {% tab title="🎛️ Eigenschaften" %} | Name | Beschreibung | Verwendung | | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Variante** |

Wählen Sie eine Stilvariante, um das Gesamtbild des Containers festzulegen.
Mehr erfahren

| Wählen Sie eine Variante, die zu Ihrer Designvision passt – unabhängig davon, ob Sie eine schlichte, eingerahmte oder karteähnliche Darstellung Ihrer Inhalte bevorzugen. | | **Hintergrundbild** | Legen Sie ein Hintergrundbild für den Container fest. | Laden Sie ein Bild hoch oder geben Sie eine URL an, das die visuelle Wirkung des Containers verbessert und zur Stimmung oder thematischen Ausrichtung beiträgt, die Sie vermitteln möchten. | | **Overlay-Farbe** | Wenden Sie eine Farbüberlagerung über dem Hintergrundbild an. | Wählen Sie eine Farbe, die das Hintergrundbild dezent überlagert und dabei hilft, die Sichtbarkeit und Lesbarkeit der Inhalte innerhalb des Containers zu erhalten. | | {% endtab %} | | | {% tab title="Definition der Variante" %} Die **`Variante`** Die Eigenschaft der Avonni-Container-Komponente ist ein entscheidendes Merkmal, das den grundlegenden Stil und die Struktur des Containers definiert und den Rahmen dafür setzt, wie Inhalte darin angezeigt und verwendet werden. Hier ist eine detaillierte Erklärung der einzelnen Varianten: **Standard** * **Beschreibung:** Die **`Standard`** Die Variante bietet einen grundlegenden und minimalistischen Stil. Die Standardeinstellung sorgt für einen klaren und geradlinigen Container ohne zusätzliche gestalterische Elemente. Diese Variante ist ideal für Inhalte, die ein einfaches Layout ohne zusätzliche visuelle Betonung erfordern.

Standard-Beispiele

* **Verwendung:** Verwenden Sie die **`Standard`** Variante, wenn Sie eine unkomplizierte und klare Darstellung benötigen. Sie ist perfekt für Fälle, in denen Inhalte ohne zusätzliche Gestaltung durch den Container hervorstechen sollen. Diese Variante eignet sich für Informationsblöcke, textlastige Abschnitte oder wenn der Fokus ausschließlich auf dem Inhalt und nicht auf dem Container liegen soll. **Box** * **Beschreibung:** Die **`Box`** Die Variante verleiht dem Container mehr Kontur, meist durch Rahmen oder eine leichte Schattierung, wodurch der Eindruck entsteht, dass der Inhalt „eingerahmt“ ist. Diese Variante erzeugt ein Gefühl von Tiefe und Betonung und lässt sie auf der Seite markanter hervortreten.

Box-Beispiele

* **Verwendung:** Entscheiden Sie sich für die **`Box`** Variante, wenn Sie den Container stärker hervorheben möchten, etwa für hervorgehobene Inhalte oder wichtige Hinweise, oder wenn Sie verschiedene Seitenbereiche visuell voneinander trennen möchten. Der Box-Stil ist vorteilhaft in Layouts, in denen mehrere Containerelemente klar voneinander abgegrenzt sein müssen, oder beim Erstellen einer dashboardähnlichen Oberfläche. **Karte** * **Beschreibung:** Die **`Card`** Die Variante verwandelt den Container in ein Layout im Kartenstil, das typischerweise durch Schattierung (für einen schwebenden Effekt), abgerundete Ecken und möglicherweise einen stärker ausgeprägten Rahmen gekennzeichnet ist.

Card-Beispiele

* **Verwendung:** Die **`Card`** Die Variante ist ideal für einzelne Inhaltsblöcke, die eine individuelle Aufmerksamkeit benötigen, wie Profile, Produktbeschreibungen oder interaktive Elemente. Sie ist eine ausgezeichnete Wahl, um ein optisch ansprechendes Raster aus Optionen oder Informationsblöcken zu erstellen, in dem jede Karte einen Inhaltsausschnitt enthält, der Teil einer größeren Sammlung ist. Diese Variante ist besonders effektiv in responsiven Designs, da sich Karten auf verschiedenen Bildschirmgrößen elegant neu anordnen können. #### Zusammenfassung Die richtige **`Variante`** Wahl für den Avonni Container bedeutet, den Stil des Containers mit dem Zweck Ihrer Inhalte und der Gesamtästhetik Ihrer Seite abzustimmen. Ganz gleich, ob Sie sich für die schlichte Einfachheit von **`Standard`**, die klaren Grenzen von **`Box`**, oder die moderne Anmutung von **`Card`**, bietet jede Option eine einzigartige Möglichkeit, Ihre Inhalte innerhalb der Salesforce-Experience-Cloud-Umgebung einzurahmen und hervorzuheben {% endtab %} {% tab title="🎨 Gestaltung" %} | Name | Beschreibung | Verwendung | | ---------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Innenabstand** | Passen Sie den inneren Abstand des Containers an. | Legen Sie die Innenabstandswerte fest, damit der Inhalt des Containers genügend Abstand zu den Rändern hat und so Lesbarkeit und Ästhetik verbessert werden. | | **Größe** | Konfigurieren Sie die Abmessungen des Containers und das Überlaufverhalten seines Inhalts. | Legen Sie konkrete Breiten- und Höhenwerte fest und bestimmen Sie, wie der Container mit Inhalten umgehen soll, die seine Abmessungen überschreiten (Überlauf). | | **Hintergrund** | Passen Sie den Hintergrund an, indem Sie eine Farbe festlegen und Größe sowie Ausrichtung des Hintergrundbilds anpassen. | Konfigurieren Sie diese Einstellungen, um die gewünschte visuelle Wirkung und die Ausrichtung des Hintergrunds im Verhältnis zum Inhalt des Containers zu erzielen. | | **Rahmen** | Definieren Sie das Erscheinungsbild des Rahmens des Containers. | Passen Sie den Rahmen an, indem Sie Größe, Stil, Farbe und Eckenradius auswählen, damit er das Gesamtdesign des Containers ergänzt. | | {% endtab %} | | | | {% endtabs %} | | | --- # 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-container.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.