# 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](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/per-iniziare/imparare-le-basi#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**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/casi-duso/creazione-di-un-layout-a-griglia)                                             | Impara a creare un layout a griglia dinamico con i componenti Avonni per mostrare prodotti o funzionalità.      |
| [**Configurare Avonni Layout per essere responsivo**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/componenti/layout/configurazione-del-layout-per-essere-reattivo) | 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.