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.

Questo componente sfrutta gli slot per una personalizzazione avanzata, rendendolo ideale per i siti LWR. I siti Aura non supportano questo livello di personalizzazione.

🎥 Tutorial

Nome	Descrizione
Crea 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	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.