> 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-layout.md). # AX - Layout ## Panoramica **AX - Layout** è un componente di Experience Cloud che organizza altri componenti in righe e colonne strutturate con dimensionamento e allineamento flessibili nelle pagine di Experience Sites. Usalo per creare layout multicolonna, griglie responsive o strutture di pagina personalizzate trascinando e rilasciando componenti nelle sezioni del layout. Controlla larghezze delle colonne, spaziatura, allineamento e comportamento responsive per diverse dimensioni dello schermo in Experience Builder. Perfetto per layout di dashboard, sezioni di moduli, griglie di contenuti, tabelle di confronto o ovunque il tuo portale necessiti di un'organizzazione strutturata di contenuti multicolonna che si adatti a dispositivi mobili e desktop. {% 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) | Impara a creare un layout a griglia dinamico con i Componenti Avonni per mettere in evidenza prodotti o funzionalità. | | [**Configurare Avonni Layout per essere responsivo**](/experience-cloud/experience-cloud-it/tutorial/components/layout/configuring-the-layout-to-be-responsive.md) | Impara a creare layout responsive e facili da usare con Avonni Layout in Experience Cloud su vari dispositivi. | ## Proprietà | Nome | Descrizione | Utilizzo | | ---------------------------- | --------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Allineamento orizzontale** | Regola l'allineamento orizzontale del contenuto all'interno del layout | Utilizza questa impostazione per assicurare che il contenuto sia allineato in modo coerente, mantenendo un aspetto equilibrato e armonioso in tutto il layout. | | **Allineamento verticale** | Modifica l'allineamento verticale del contenuto all'interno del layout. | Ottimizza il posizionamento verticale del contenuto, assicurandoti che sia presentato in modo visivamente gradevole e coerente con gli obiettivi generali del design. | | **Estendi al bordo** | Consenti al contenuto di estendersi verso i bordi del layout. | Utilizza questa opzione per creare layout che massimizzano lo spazio, migliorando la visibilità e la presentazione degli elementi di contenuto. | | **Righe multiple** | Consenti di distribuire il contenuto su più righe. | Attiva questa funzione quando il tuo layout richiede la distribuzione del contenuto in una sequenza verticale, facilitando una presentazione strutturata e organizzata. | | **Mostra come sezione** | Imposta il layout in modo che si presenti come una sezione distinta all'interno della pagina. | Imposta il layout in modo che si presenti come una sezione distinta all'interno della pagina. | | **Layout a colonne** | Determina la modalità con cui il contenuto viene visualizzato all'interno delle colonne. | Personalizza la configurazione delle colonne per stabilire una struttura simile a una griglia, favorendo un'organizzazione sistematica e ordinata del contenuto per una migliore navigazione visiva. | ## Impostazioni del layout a colonne Le impostazioni del layout a colonne offrono flessibilità nell'organizzazione del contenuto della pagina, garantendo che si adatti in modo responsive a diverse dimensioni dello schermo e dispositivi, mantenendo al contempo un aspetto pulito e strutturato. #### Tipo Determina la natura del layout a colonne. * **Opzioni:** * **`Flessibile`**: Le colonne in questo tipo di layout regolano dinamicamente le proprie dimensioni in base al contenuto e allo spazio disponibile sullo schermo. Questa opzione è ideale per i design responsive in cui il layout deve adattarsi a diverse dimensioni dei dispositivi. * **`Fisso`**: Questa opzione mantiene una dimensione costante per le colonne, indipendentemente dalle dimensioni dello schermo o dalla quantità di contenuto. Le colonne fisse sono utili quando è richiesto un layout uniforme e coerente. * **Utilizzo:** Scegli **`Flessibile`** per layout fluidi che devono adattarsi a diverse dimensioni dello schermo, e **`Fisso`** per layout che richiedono coerenza nelle larghezze delle colonne. #### Dimensione Imposta la larghezza delle colonne all'interno della griglia. Il sistema a griglia è in genere basato su una struttura di 12 unità. * **Intervallo:** Da 1 a 12, dove ogni unità rappresenta una proporzione della larghezza totale disponibile. * **Utilizzo:** Assegna una dimensione per definire quanto spazio deve occupare ciascuna colonna. Ad esempio, impostare una dimensione di 4 in una griglia a 12 unità significherebbe che la colonna occupa un terzo dello spazio orizzontale disponibile. #### Scostamento dell'allineamento Regola la posizione della colonna all'interno del suo contenitore. * **Opzioni:** * **`Sinistra`**: Sposta la colonna verso il bordo sinistro del contenitore. * **`Destra`**: Sposta la colonna verso il bordo destro. * **`In alto`**: Allinea la colonna più vicino alla parte superiore del contenitore. * **`In basso`**: Posiziona la colonna vicino alla parte inferiore del contenitore. * **Utilizzo:** Usa questa impostazione per perfezionare la posizione delle colonne rispetto agli elementi circostanti, migliorando l'aspetto visivo e l'equilibrio spaziale del layout. #### Padding Controlla la spaziatura interna della colonna. * **Opzioni:** * **`Orizzontale`**: Regola il padding sui lati sinistro e destro della colonna. * **`Intorno`**: Aggiunge padding su tutti i lati della colonna. * **Utilizzo:** Applica il padding per creare spazio all'interno della colonna, assicurando che il contenuto non sia a filo con i bordi e migliorando la leggibilità e l'estetica visiva. Le impostazioni del layout a colonne del componente Avonni Layout sono essenziali per creare layout rifiniti e funzionali nei siti Salesforce Experience Cloud. --- # 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-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.