> 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-it/experience-components/ax-container.md).
# AX - Contenitore
## Panoramica
**AX - Contenitore** è un componente di Experience Cloud che racchiude altri componenti in un contenitore stilizzato con bordi, sfondi e padding nelle pagine di Experience Sites.
Usalo per raggruppare insieme contenuti correlati, creare sezioni visive, aggiungere colori o immagini di sfondo oppure applicare spaziatura coerente attorno ai componenti. Trascina e rilascia qualsiasi componente di Experience Cloud all'interno del contenitore per creare layout raggruppati in Experience Builder.
Perfetto per creare sezioni visive, raggruppare campi modulo, aggiungere sfondi brandizzati, organizzare widget della dashboard o ovunque il tuo portale abbia bisogno di contenuti racchiusi in un contenitore stilizzato.
{% hint style="danger" %}
Questo componente [utilizza gli slot](/experience-cloud/experience-cloud-it/per-iniziare/learning-the-basics.md#understanding-slots) per una personalizzazione avanzata, rendendolo ideale per i siti LWR. I siti Aura non supportano questo livello di personalizzazione.
{% endhint %}
## Tutorial
| Nome | Descrizione |
| ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------- |
| [**Crea un layout a griglia**](/experience-cloud/experience-cloud-it/tutorial/use-cases/creating-a-grid-layout.md) | Scopri come creare un layout a griglia dinamico per mettere in mostra i prodotti con pulsanti interattivi 'Scopri di più'. |
## Sfruttare al massimo il potenziale del tuo sito con Avonni Container
### Opzioni di design versatili per ogni esigenza
Il componente Avonni Container si distingue per la sua gamma di varianti di stile - Card, Box e Standard - ciascuna progettata per soddisfare diverse esigenze di contenuto.
* La **`Scheda`** La variante è perfetta per sezioni d'impatto come le testimonianze, aggiungendo un tocco di stile ai tuoi contenuti.
* La **`Box`** La variante dà il meglio quando si tratta di mettere in evidenza prodotti o funzionalità chiave, facendoli risaltare.
* La **`Standard`** La variante offre un aspetto pulito e coerente per contenuti più convenzionali, mantenendo l'armonia in tutto il tuo sito.
### Elementi visivi dinamici per valorizzare il tuo sito
Con Avonni Container, puoi dare vita a varie sezioni grazie a immagini di sfondo uniche. Immagina di aggiungere foto vivaci del team alla sezione 'Chi siamo' oppure di rappresentare paesaggi sereni per i temi legati alla sostenibilità. Questi elementi visivi dinamici migliorano l'appeal estetico e aiutano a comunicare la storia del tuo brand in modo più efficace.
### La leggibilità incontra lo stile
Fare in modo che i contenuti risaltino su sfondi affollati o colorati è fondamentale nel web design. Avonni Container affronta questa sfida con l'uso di colori di sovrapposizione. Immagina una sovrapposizione scura su uno sfondo festoso, che faccia risaltare i dettagli del tuo evento, oppure una tonalità delicata che aggiunga profondità ai contenuti mantenendone la leggibilità.
### Controllo totale sulla presentazione
Avonni Container offre un controllo esteso su dimensioni, sfondo e bordi di ogni sezione. Ciò significa che puoi rifinire con precisione il modo in cui i tuoi contenuti occupano lo spazio, adattare colori o immagini di sfondo al tuo tema e regolare le impostazioni del bordo per una definizione aggiuntiva. Ognuno di questi elementi svolge un ruolo fondamentale nel migliorare la struttura visiva della tua pagina.
### Adattabilità per pubblici diversi
Nell'attuale panorama digitale, soddisfare le esigenze di pubblici diversi è fondamentale. Avonni Container è progettato tenendo conto di questa adattabilità. Che tu utilizzi lo stile Card per le sezioni news nei portali partner o lo stile Box per evidenziare offerte speciali negli hub clienti, questo componente garantisce che i tuoi contenuti vengano visti e risuonino con il tuo pubblico.
### Riepilogo
Il componente Avonni Container è molto più di un semplice strumento: è una tela per la creatività e una soluzione alle diverse sfide del web design quando si usa Experience Cloud. La sua versatilità, le capacità visive dinamiche, i miglioramenti della leggibilità e le opzioni adattabili di visualizzazione dei contenuti lo rendono indispensabile per qualsiasi sito Salesforce Experience Cloud. Che tu voglia catturare l'attenzione, informare o coinvolgere, Avonni Container ti consente di fare tutto con stile ed efficienza.
## Impostazioni
{% tabs %}
{% tab title="🎛️ Proprietà" %}
| Nome | Descrizione | Utilizzo |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Variante** |
Scegli una variante di stile per definire l'aspetto generale del contenitore. Scopri di più
| Seleziona una variante in linea con la tua visione di design, che tu preferisca una presentazione semplice, in box o simile a una card per i tuoi contenuti. |
| **Immagine di sfondo** | Imposta un'immagine di sfondo per il contenitore. | Carica o fornisci un URL per un'immagine che migliori l'appeal visivo del contenitore, contribuendo all'atmosfera o al tono tematico che desideri trasmettere. |
| **Colore di sovrapposizione** | Applica una sovrapposizione di colore sopra l'immagine di sfondo. | Scegli un colore che si sovrapponga in modo discreto all'immagine di sfondo, aiutando a mantenere la visibilità e la leggibilità dei contenuti all'interno del contenitore. |
| {% endtab %} | | |
{% tab title="Definizione della variante" %}
La **`Variante`** La proprietà del componente Avonni Container è una funzionalità cruciale che definisce lo stile e la struttura fondamentali del contenitore, preparando il terreno per il modo in cui i contenuti al suo interno vengono visualizzati e con cui si interagisce. Ecco una spiegazione dettagliata di ciascuna variante:
**Standard**
* **Descrizione:** La **`standard`** La variante standard offre uno stile base e minimalista. L'impostazione predefinita fornisce un contenitore pulito e lineare senza elementi stilistici aggiuntivi. Questa variante è ideale per contenuti che richiedono un layout semplice senza bisogno di un'enfasi visiva extra.
Esempi Standard
* **Utilizzo:** Usa la **`standard`** variante quando hai bisogno di una presentazione semplice e pulita. È perfetta nei casi in cui i contenuti devono risaltare senza ulteriori elementi di stile del contenitore. Questa variante è adatta a blocchi informativi, sezioni ricche di testo o quando vuoi che l'attenzione sia rivolta solo ai contenuti e non al contenitore.
**Box**
* **Descrizione:** La **`box`** La variante aggiunge maggiore definizione al contenitore, di solito tramite bordi o una leggera ombreggiatura, dando l'impressione che il contenuto sia racchiuso in un box. Questa variante crea un senso di profondità e rilievo, facendolo risaltare più chiaramente sulla pagina.
Esempi Box
* **Utilizzo:** Scegli la **`box`** variante quando vuoi attirare maggiormente l'attenzione sul contenitore, ad esempio per contenuti in evidenza o avvisi importanti, o quando vuoi separare visivamente le diverse sezioni della pagina. Lo stile box è utile nei layout in cui più elementi contenitore richiedono una separazione distinta o quando si crea un'interfaccia simile a una dashboard.
**Scheda**
* **Descrizione:** La **`card`** La variante trasforma il contenitore in un layout in stile card, solitamente caratterizzato da ombreggiatura (che conferisce un effetto sospeso), angoli arrotondati e possibilmente un bordo più marcato.
Esempi Card
* **Utilizzo:** La **`card`** La variante è ideale per blocchi distinti di contenuto che richiedono attenzione individuale, come profili, descrizioni di prodotti o elementi interattivi. È un'ottima scelta per creare una griglia visivamente accattivante di opzioni o blocchi di informazioni, in cui ogni card contiene una parte di contenuto che fa parte di una raccolta più ampia. Questa variante è particolarmente efficace nei design responsive, poiché le card possono riorganizzarsi con eleganza su schermi di dimensioni diverse.
#### Riepilogo
Scegliere la variante giusta **`Variante`** per Avonni Container consiste nell'abbinare lo stile del contenitore allo scopo dei tuoi contenuti e all'estetica complessiva della pagina. Che tu scelga la semplicità senza ornamenti di **`standard`**, i confini definiti di **`box`**, o il fascino moderno di **`card`**, ogni opzione offre un modo unico per incorniciare ed enfatizzare i tuoi contenuti all'interno dell'ambiente Salesforce Experience Cloud
{% endtab %}
{% tab title="🎨 Stile" %}
| Nome | Descrizione | Utilizzo |
| -------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Padding** | Regola lo spazio interno del contenitore. | Definisci i valori di padding per assicurare che i contenuti del contenitore abbiano uno spazio adeguato dai bordi, migliorando leggibilità ed estetica. |
| **Dimensione** | Configura le dimensioni del contenitore e il comportamento di overflow dei suoi contenuti. | Imposta valori specifici di larghezza e altezza e determina come il contenitore deve gestire i contenuti che superano le sue dimensioni (overflow). |
| **Sfondo** | Personalizza lo sfondo impostando un colore e regolando le dimensioni e l'allineamento dell'immagine di sfondo. | Configura queste impostazioni per ottenere l'impatto visivo e l'allineamento desiderati dello sfondo rispetto ai contenuti del contenitore. |
| **Bordo** | Definisci l'aspetto del bordo del contenitore. | Personalizza il bordo selezionandone dimensione, stile, colore e raggio degli angoli, assicurandoti che si integri con il design complessivo del contenitore. |
| {% 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-it/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.