# 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 a più colonne, griglie responsive o strutture di pagina personalizzate trascinando e rilasciando i 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 richieda un'organizzazione strutturata dei contenuti a più colonne che si adatti a mobile e desktop. {% hint style="danger" %} Questo componente [sfrutta gli slot](/experience-cloud/experience-cloud-it/per-iniziare/imparare-le-basi.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/casi-duso/creazione-di-un-layout-a-griglia.md) | Impara a creare un layout a griglia dinamico con i componenti Avonni per mostrare prodotti o funzionalità. | | [**Configurare Avonni Layout per essere responsivo**](/experience-cloud/experience-cloud-it/tutorial/componenti/layout/configurazione-del-layout-per-essere-reattivo.md) | Impara a creare layout responsivi e user-friendly con Avonni Layout in Experience Cloud su diversi 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 si allinei in modo coerente, mantenendo un aspetto bilanciato e armonioso in tutto il layout. | | **Allineamento verticale** | Manipola l'allineamento verticale del contenuto all'interno del layout. | Ottimizza il posizionamento verticale del contenuto, assicurando che venga presentato in modo visivamente gradevole e in linea con gli obiettivi generali del design. | | **Estendi fino al bordo** | Permetti al contenuto di estendersi verso i bordi del layout. | Utilizza questa opzione per creare layout che massimizzino lo spazio, migliorando la visibilità e la presentazione degli elementi di contenuto. | | **Più Righe** | Consenti l'alloggio del contenuto su più righe. | Attiva questa funzione quando il tuo layout richiede la distribuzione dei contenuti in una sequenza verticale, facilitando una presentazione strutturata e organizzata. | | **Visualizza come Sezione** | Imposta il layout in modo che si manifesti come una sezione distinta all'interno della pagina. | Imposta il layout in modo che si manifesti come una sezione distinta all'interno della pagina. | | **Layout di Colonne** | Determina il modo in cui il contenuto viene visualizzato all'interno delle colonne. | Personalizza la configurazione delle colonne per stabilire una struttura a griglia, favorendo un'organizzazione sistematica e ordinata dei contenuti per una migliore navigazione visiva. | ## Impostazioni del Layout a Colonne Le impostazioni del layout a colonne offrono flessibilità nell'organizzazione dei contenuti della pagina, assicurando che si adattino in modo responsive a diverse dimensioni di schermo e dispositivi mantenendo un aspetto pulito e strutturato. #### Tipo Determina la natura del layout a colonne. * **Opzioni:** * **`Flessibile`**: Le colonne in questo tipo di layout adattano la loro dimensione in modo dinamico in base al contenuto e allo spazio disponibile sullo schermo. Questa opzione è ideale per design responsive in cui il layout deve adattarsi a varie dimensioni di dispositivo. * **`Fisso`**: Questa opzione mantiene una dimensione costante per le colonne, indipendentemente dalla dimensione dello schermo o dal volume del contenuto. Le colonne fisse sono utili quando è richiesta un'unità e una coerenza di layout. * **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 di griglia è tipicamente basato su una struttura a 12 unità. * **Intervallo:** 1 a 12, dove ogni unità rappresenta una proporzione della larghezza totale disponibile. * **Utilizzo:** Assegna una dimensione per definire quanto spazio ogni colonna dovrebbe occupare. 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 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. * **`Inferiore`**: Posiziona la colonna vicino alla parte inferiore del contenitore. * **Utilizzo:** Usa questa impostazione per perfezionare la posizione delle colonne rispetto all'ambiente circostante, migliorando l'appeal 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 ridosso dei bordi, 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: 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-layout.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.