rectangle-vertical-historyAX - Galleria

Panoramica

AX - Galleria è un componente di Experience Cloud che visualizza immagini e contenuti in quattro stili di layout sulle pagine dei siti Experience: carosello (slideshow), schede (sezioni organizzate), griglia (multi-colonna) o galleria (esposizione di immagini).

Usalo per mostrare foto di prodotti, portafogli di progetti, immagini di case study, raccolte di risorse o qualsiasi contenuto visivo che gli utenti del portale devono sfogliare. Configura lo stile del layout, la navigazione e le sorgenti delle immagini in Experience Builder senza codice.

Perfetto per cataloghi di prodotti, portafogli visivi, librerie di immagini, esposizioni prima/dopo o ovunque il tuo portale necessiti di display di immagini o contenuti attraenti

Connetti ai dati Salesforce

La Sorgente Dati è dove definisci il contenuto del tuo carosello. Esistono due principali tipi di sorgenti dati: Manuale e Query.

Tipo di origine dati
Descrizione
Quando usare

Origine dati manuale

Prevede l'inserimento manuale dei dati per gli elementi della galleria. Utile per contenuti statici o elementi predefiniti.

Ideale per contenuti che non cambiano frequentemente o per una configurazione rapida con elementi specifici.

Sorgente Dati tramite Query

Consente di recuperare dati tramite una query, estraendo vari record/punti dati da Salesforce.

Ideale per recuperi di dati complessi o quando si utilizzano sorgenti dinamiche.

Impostare una variante

Carosello

La variante Carosello offre un modo dinamico e coinvolgente per mettere in mostra i tuoi contenuti, immagini o schede. È progettata per visualizzare gli elementi in sequenza in formato slideshow, risultando un'ottima scelta per evidenziare contenuti in primo piano, immagini di prodotto o annunci importanti.

Quando usare: Utilizza la variante Carosello quando vuoi:

  • Catturare l'attenzione degli utenti con una presentazione visivamente accattivante.

  • Mostrare più elementi o immagini in modo efficiente in termini di spazio.

  • Creare banner rotanti o sezioni di contenuti in evidenza sul tuo sito.

Caratteristiche:

  • Controlli di navigazione: Naviga il carosello usando controlli intuitivi come pulsanti freccia o puntini di paginazione.

  • Opzione di riproduzione automatica: Imposta il carosello per scorrere automaticamente gli elementi, con la possibilità di mettere in pausa e riprendere.

  • Aspetto personalizzabile: Adatta l'aspetto del carosello per abbinarlo al design del tuo sito, regolando elementi come gli effetti di transizione e la durata di visualizzazione.

Schede

La variante Schede introduce un approccio organizzato e tabulato alla presentazione dei contenuti. Questa variante è ideale per categorizzare le informazioni, offrendo un layout pulito e strutturato che permette agli utenti di navigare e accedere rapidamente alle diverse sezioni di contenuto.

Quando usare: Considera la variante Schede quando hai bisogno di:

  • Presentare informazioni categorizzate in un formato chiaro e segmentato.

  • Permettere agli utenti di passare facilmente tra diverse sezioni di contenuto senza lasciare la pagina.

  • Organizzare contenuti come specifiche di prodotto, categorie di servizi o schede informative in modo user-friendly.

Caratteristiche:

  • Contenuto segmentato: Organizza i tuoi contenuti in schede chiaramente definite, rendendo semplice per gli utenti trovare e visualizzare diverse sezioni.

  • Navigazione intuitiva: Consenti agli utenti di passare senza problemi tra le schede, garantendo un'interazione fluida e intuitiva.

  • Design personalizzabile: Adatta l'aspetto delle schede per allinearlo al tuo branding e all'estetica del sito, modificando elementi come etichette delle schede, layout e schema di colori.

Griglia

Presenta i contenuti in un layout strutturato a più colonne. Ogni elemento occupa una cella all'interno della griglia.

Quando usare: Ideale per mostrare una raccolta di elementi in cui si desidera un'enfasi uguale, come:

  • Elenchi di prodotti

  • Profili dei membri del team

  • Anteprime di post del blog

Caratteristiche

  • Numero di colonne personalizzabile

  • Possibilità di definire lo spazio (gap) tra gli elementi

  • Opzioni per immagini, titoli, descrizioni e pulsanti call-to-action all'interno di ogni cella della griglia

Galleria

Un layout guidato dalle immagini che mette in risalto le immagini in modo prominente.

Quando usare: Ideale per evidenziare contenuti basati su immagini, come:

  • Portfolio fotografici

  • Gallerie di prodotto

  • Contenuti in evidenza incentrati sulle immagini

Caratteristiche

  • Focalizzazione su immagini grandi e di alta qualità

  • Opzioni per includere didascalie o funzionalità lightbox per ingrandire le immagini

  • Potenziale per layout creativi ed effetti al passaggio del mouse

Interazioni

La sezione "Collega a" determina cosa succede quando un utente clicca su un elemento nella tua Avonni Gallery. Usala per indirizzare gli utenti a pagine dettagliate, aprire nuovi contenuti o attivare altre azioni.

Esempio:

  • Ad esempio, mostra case in evidenza in una galleria e consenti agli utenti di cliccare su ogni immagine per visualizzare maggiori dettagli su una pagina separata.

Aspetto e stile

Esplora gli attributi di stile per l'Avonni Gallery, ciascuno progettato per perfezionare la presentazione visiva dei tuoi contenuti, sia che tu stia usando la variante Carosello o Schede:

  1. Dimensione: Regola le dimensioni complessive della galleria per adattarla perfettamente al tuo layout.

  2. Bordo: Personalizza lo stile del bordo, la larghezza e il colore per incorniciare efficacemente i contenuti della galleria.

  3. Didascalia: Stilizza il testo della didascalia associata a ciascun elemento per chiarezza ed enfasi.

  4. Titolo: Modifica il testo del titolo per ogni elemento della galleria affinché risalti o si allinei al tema del tuo sito.

  5. Contenuto: Adatta l'aspetto dell'area contenuti principale all'interno di ogni elemento della galleria per una presentazione visiva coesa.

  6. Media: Personalizza il modo in cui i media (immagini o video) vengono visualizzati, assicurando che completino il design complessivo della galleria.

  7. Elemento dello slideshow: Stilizza gli elementi individuali nel carosello, compresi sfondo, allineamento e spaziatura.

  8. Titolo dell'elemento dello slideshow: Personalizza l'aspetto dei titoli all'interno di ogni elemento del carosello per un impatto e un riconoscimento immediati.

  9. Descrizione dell'elemento dello slideshow: Per migliorare la leggibilità, adatta il carattere, la dimensione e il colore delle descrizioni negli elementi del carosello.

  10. Immagine dello slideshow: Per coerenza visiva, regola la dimensione e il bordo delle immagini nel carosello.

  11. Indicatore attivo dello slideshow: Stilizza l'indicatore per l'elemento attualmente visualizzato, rendendolo prominente e distinto.

  12. Indicatore inattivo dello slideshow: Personalizza gli indicatori per gli elementi non attivi per garantire una navigazione fluida attraverso il carosello.

  13. Pulsante di navigazione dello slideshow: Adatta l'aspetto dei pulsanti di navigazione, assicurandoti che siano facili da usare e in linea con lo stile della tua galleria.

  14. Scheda: Stilizza le singole schede per differenziare le sezioni di contenuto attive e inattive.

  15. Bordo della scheda: Personalizza il bordo di ciascuna scheda per una chiara segmentazione e appeal visivo.

  16. Bordo della scheda attiva/al passaggio: Stilizza il bordo delle schede attive o su cui si passa con il mouse per guidare visivamente gli utenti nelle loro interazioni.

  17. Sfondo della scheda: Regola il colore di sfondo o l'immagine delle schede per allinearle al tema generale del tuo sito.

  18. Etichetta della scheda: Personalizza il font, la dimensione e il colore delle etichette delle schede per chiarezza e armonia visiva.

  19. Sottotitolo della scheda: Adatta l'aspetto dei sottotitoli delle schede, fornendo coerentemente contesto o informazioni aggiuntive.

Ultimo aggiornamento

È stato utile?