> 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 markenbezogener Hintergründe, zum Organisieren von Dashboard-Widgets oder überall dort, wo Ihr Portal Inhalte in einem gestalteten Container umschlossen benötigt. {% 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 **Variante** wählt eine Stilvariante, die das Gesamtbild des Containers definiert — eine schlichte, kastenförmige oder kartenähnliche Darstellung Ihrer Inhalte ([mehr erfahren](#variant-definition)). **CMS-Hintergrundbild** und **Hintergrundbild-URL oder Ausdruck** legt ein Hintergrundbild für den Container fest — verweisen Sie auf ein CMS-Bild oder geben Sie eine URL an, die die visuelle Wirkung verstärkt und die gewünschte Stimmung oder den thematischen Ton vermittelt. **Überlagerungsfarbe** legt eine Farbüberlagerung über das Hintergrundbild und hilft so dabei, die Sichtbarkeit und Lesbarkeit des Inhalts innerhalb des Containers zu erhalten. ### Definition der Variante Die **`Variante`** Die Eigenschaft der Avonni-Container-Komponente ist eine entscheidende Funktion, die den grundlegenden Stil und die Struktur des Containers definiert und damit vorgibt, wie Inhalte darin angezeigt werden und mit ihnen interagiert wird. Hier ist eine detaillierte Erklärung jeder Variante: **Standard** * **Beschreibung:** Die **`standard`** Die Variante bietet einen grundlegenden und minimalistischen Stil. Die Standardeinstellung liefert einen sauberen und unkomplizierten Container ohne zusätzliche stilistische Elemente. Diese Variante eignet sich ideal für Inhalte, die ein einfaches Layout ohne zusätzliche visuelle Hervorhebung benötigen.

* **Verwendung:** Verwenden Sie die **`standard`** Verwenden Sie die Variante, wenn Sie eine unkomplizierte und saubere Darstellung benötigen. Sie ist perfekt für Fälle, in denen der Inhalt ohne zusätzliches Styling des Containers hervorstechen soll. Diese Variante eignet sich für Informationsblöcke, textlastige Bereiche oder wenn der Fokus rein auf dem Inhalt und nicht auf dem Container liegen soll. **Box** * **Beschreibung:** Die **`Box`** Die Variante verleiht dem Container mehr Definition, meist durch Rahmen oder einen leichten Schatten, wodurch der Eindruck entsteht, der Inhalt sei „eingefasst“. Diese Variante erzeugt ein Gefühl von Tiefe und Betonung und hebt ihn auf der Seite deutlicher hervor.

* **Verwendung:** Entscheiden Sie sich für die **`Box`** Verwenden Sie die Variante, wenn Sie mehr Aufmerksamkeit auf den Container lenken möchten, z. B. für hervorgehobene Inhalte oder wichtige Hinweise, oder wenn Sie verschiedene Seitenbereiche visuell voneinander abgrenzen möchten. Der kastenförmige Stil ist vorteilhaft in Layouts, in denen mehrere Container-Elemente eine deutliche Trennung benötigen, oder beim Erstellen einer dashboardähnlichen Oberfläche. **Karte** * **Beschreibung:** Die **`Karte`** Die Variante verwandelt den Container in ein kartenartiges Layout, das typischerweise durch Schattierung (für einen schwebenden Effekt), abgerundete Ecken und möglicherweise einen stärker ausgeprägten Rahmen gekennzeichnet ist.

* **Verwendung:** Die **`Karte`** Die Variante eignet sich ideal für separate Inhaltsblöcke, die einen individuellen Fokus 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 unterschiedlichen Bildschirmgrößen elegant anordnen können. #### Zusammenfassung Die richtige Wahl des **`Variante`** für den Avonni Container bedeutet, den Stil des Containers mit dem Zweck Ihrer Inhalte und der Gesamtästhetik Ihrer Seite abzustimmen. Ob Sie sich für die schlichte Einfachheit von **`standard`**, die klaren Grenzen von **`Box`**, oder die moderne Ausstrahlung von **`Karte`**, jede Option bietet eine einzigartige Möglichkeit, Ihre Inhalte innerhalb der Salesforce-Experience-Cloud-Umgebung zu rahmen und hervorzuheben ## Anwendungsfälle | Name | Beschreibung | | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | | [**Erstellen Sie ein Rasterlayout**](/experience-cloud/experience-cloud-de/tutorials/use-cases/creating-a-grid-layout.md) | Lernen Sie, ein dynamisches Rasterlayout zu erstellen, um Produkte mit interaktiven „Mehr erfahren“-Schaltflächen zu präsentieren. | ### Vielseitige Designoptionen für jeden Bedarf Die Avonni-Container-Komponente zeichnet sich durch ihre Vielzahl an Stilvarianten aus – Card, Box und Standard – die jeweils darauf ausgelegt sind, unterschiedliche Inhaltsanforderungen zu erfüllen. * Die **`Karte`** Die Variante eignet sich perfekt für auffällige Bereiche wie Testimonials und verleiht Ihren Inhalten das gewisse Etwas.

* Die **`Box`** Die Variante glänzt, wenn es darum geht, Produkte oder wichtige Funktionen hervorzuheben und sie ins Blickfeld zu rücken.

* Die **`Standard`** Die Variante bietet für eher konventionelle Inhalte ein sauberes und stimmiges Erscheinungsbild und sorgt für Harmonie auf Ihrer gesamten Website.

### Dynamische visuelle Elemente, um Ihre Website aufzuwerten Mit Avonni Container können Sie verschiedene Abschnitte durch einzigartige Hintergrundbilder 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, die Geschichte Ihrer Marke wirkungsvoller zu vermitteln. ### Lesbarkeit trifft auf Stil Es ist im Webdesign entscheidend, dass Inhalte sich von lebhaften oder farbigen Hintergründen abheben. Avonni Container meistert diese Herausforderung mit der Verwendung von Farbüberlagerungen. Stellen Sie sich eine dunkle Überlagerung auf einem festlichen Hintergrund vor, die Ihre Veranstaltungsdetails hervorhebt, oder einen dezenten Farbton, der Ihren Inhalten Tiefe verleiht und gleichzeitig die Lesbarkeit erhält. ### Vollständige Kontrolle über die Darstellung Avonni Container bietet umfassende Kontrolle über die Größe, den Hintergrund und die Rahmen jedes Abschnitts. Das bedeutet, dass Sie fein abstimmen können, wie Ihre Inhalte den verfügbaren Raum einnehmen, Hintergrundfarben oder Bilder an Ihr Thema anpassen und die Rahmeneinstellungen für zusätzliche Konturierung optimieren 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 verschiedener 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 zum Hervorheben von Sonderangeboten in Kunden-Hubs verwenden — diese Komponente sorgt dafür, 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, ihre dynamischen visuellen Möglichkeiten, ihre Verbesserungen der Lesbarkeit und ihre anpassbaren Optionen zur Inhaltsanzeige machen sie für jede Salesforce-Experience-Cloud-Website unverzichtbar. Ob Sie begeistern, informieren oder binden möchten — Avonni Container ermöglicht Ihnen all das mit Stil und Effizienz. ## Styling {% tabs %} {% tab title="Innenabstand" %} Passen Sie den Innenabstand des Containers an. Definieren Sie die Padding-Werte, damit der Inhalt des Containers einen angemessenen Abstand zu den Rändern hat, was Lesbarkeit und Ästhetik verbessert. {% endtab %} {% tab title="Größe" %} Konfigurieren Sie die Abmessungen des Containers und das Überlaufverhalten seines Inhalts. Legen Sie konkrete Werte für Breite und Höhe fest und bestimmen Sie, wie der Container mit Inhalt umgehen soll, der seine Abmessungen überschreitet (Überlauf). {% endtab %} {% tab title="Hintergrund" %} Passen Sie den Hintergrund an, indem Sie eine Farbe festlegen und Größe sowie Ausrichtung des Hintergrundbilds justieren. Konfigurieren Sie diese Einstellungen, um die gewünschte visuelle Wirkung und die Ausrichtung des Hintergrunds in Bezug auf den Inhalt des Containers zu erreichen. {% endtab %} {% tab title="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.