# AX - Galleria

## Panoramica

**AX - Gallery** è un componente di Experience Cloud che visualizza immagini e contenuti in quattro stili di layout nelle pagine dei siti Experience: carosello (presentazione), schede (sezioni organizzate), griglia (multi-colonna) o galleria (vetrina di immagini).

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

Perfetto per cataloghi di prodotti, portfolio visivi, librerie di immagini, vetrine prima/dopo o ovunque il tuo portale abbia bisogno di visualizzazioni accattivanti di immagini o contenuti

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FJToiKLlnA4RZIeE7I0Ni%2F2024-02-07_21-13-18%20(1).gif?alt=media&#x26;token=76515588-cbb1-4dcc-9004-5001d1189ff5" alt=""><figcaption></figcaption></figure>

***

## Per iniziare

Usa questo semplice tutorial per apprendere le basi del componente Gallery e iniziare a costruire i tuoi casi d'uso.

{% @arcade/embed flowId="QrGyk84126ycSIM6P0oX" url="<https://app.arcade.software/share/QrGyk84126ycSIM6P0oX>" %}

***

## Connetti ai dati Salesforce

L'origine dati è il punto in cui definisci il contenuto del tuo carosello. Esistono due tipi principali di origini dati: **Manuale** e **Query**.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F81HTiPtGZjjWPmHbMDF5%2F2024-02-07_21-14-11.png?alt=media&#x26;token=2179494c-b3d0-4570-b763-3f336626fb55" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th>Tipo di origine dati</th><th width="248.33333333333331">Descrizione</th><th>Quando usarlo</th></tr></thead><tbody><tr><td><strong>Origine dati manuale</strong></td><td>Comporta l'inserimento manuale dei dati per gli elementi della galleria. Utile per contenuti statici o elementi predefiniti.</td><td>Ideale per contenuti che non cambiano frequentemente o per una configurazione rapida con elementi specifici.</td></tr><tr><td><strong>Origine dati da query</strong></td><td>Consente di recuperare i dati tramite una query, estraendo vari record/punti dati da Salesforce.</td><td>Ideale per il recupero di dati complessi o quando si effettua l'estrazione dei dati.</td></tr></tbody></table>

## **Impostazione di una variante**

### **Carosello**

La variante Carosello offre un modo dinamico e coinvolgente per mettere in evidenza i tuoi contenuti, immagini o schede. È progettata per visualizzare gli elementi in sequenza in formato presentazione, rendendola una scelta eccellente per evidenziare contenuti in primo piano, immagini di prodotti o annunci importanti.

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FSDPeJtaR0mY1bFLE2Dic%2F2024-02-07_21-17-09.png?alt=media&#x26;token=76edae56-e5be-4800-9299-e0ce0c69c213" alt=""><figcaption></figcaption></figure>

**Quando usarlo:** Utilizza la variante Carosello quando vuoi:

* Catturare l'attenzione degli utenti con una presentazione visivamente accattivante.
* Visualizzare 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 nel carosello con controlli intuitivi come pulsanti freccia o punti di paginazione.
* **Opzione di riproduzione automatica:** Imposta il carosello affinché scorra automaticamente tra gli elementi, con la possibilità di mettere in pausa e riprendere.
* **Aspetto personalizzabile:** Adatta l'aspetto del carosello al design del tuo sito regolando elementi come gli effetti di transizione e la durata della visualizzazione.

### **Schede**

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

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FXPjifQ0PqC8J5k1SVBrq%2F2024-02-07_21-18-03.png?alt=media&#x26;token=88201252-88f4-4360-8cf7-135bab8bf714" alt=""><figcaption></figcaption></figure>

**Quando usarlo:** Considera la variante Schede quando devi:

* Presentare informazioni categorizzate in un formato chiaro e suddiviso in sezioni.
* Consentire agli utenti di passare facilmente da una sezione di contenuto all'altra senza lasciare la pagina.
* Organizzare contenuti come specifiche di prodotto, categorie di servizi o schede informative in modo intuitivo per l'utente.

**Caratteristiche:**

* **Contenuto suddiviso in sezioni:** Organizza i tuoi contenuti in schede chiaramente definite, rendendo semplice per gli utenti trovare e visualizzare le diverse sezioni.
* **Navigazione intuitiva:** Consenti agli utenti di passare senza problemi da una scheda all'altra, garantendo un'interazione fluida e intuitiva.
* **Design personalizzabile:** Adatta l'aspetto delle schede al tuo branding e all'estetica del sito, modificando elementi come le etichette delle schede, il layout e le combinazioni di colori.

### **Griglia**

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

**Quando usarlo:** Ideale per visualizzare una raccolta di elementi in cui si desidera dare uguale rilievo, come ad esempio:

* Elenco di prodotti
* Profili dei membri del team
* Anteprime di post del blog

**Caratteristiche**

* Numero di colonne personalizzabile
* Possibilità di definire la spaziatura (gap) tra gli elementi
* Opzioni per immagini, titoli, descrizioni e pulsanti di invito all'azione all'interno di каждой cella della griglia

### **Galleria**

Un layout orientato alle immagini che mette in evidenza in modo prominente le immagini.

**Quando usarlo:** Ideale per mettere in risalto contenuti basati su immagini, come ad esempio:

* Portfolio fotografici
* Gallerie di prodotti
* Contenuti in evidenza incentrati sulle immagini

**Caratteristiche**

* Focus su immagini grandi e di alta qualità
* Opzioni per includere didascalie o funzionalità lightbox per ingrandire le immagini
* Possibilità di layout creativi ed effetti al passaggio del mouse

## Interazioni

La sezione "Collega a" determina cosa accade quando un utente fa clic 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 fare clic su ogni immagine per visualizzare maggiori dettagli in una pagina separata.

***

## Aspetto grafico

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

<figure><img src="https://4258905998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FtiBUANZLlzY5aTG4C29z%2F2024-02-07_21-18-53.png?alt=media&#x26;token=5eb49b41-6c43-4f90-bc97-acc5b1fabce7" alt=""><figcaption></figcaption></figure>

1. **Dimensione:** Regola le dimensioni complessive della galleria per adattarla perfettamente al tuo layout.
2. **Bordo:** Personalizza lo stile, la larghezza e il colore del bordo per incorniciare efficacemente i contenuti della tua galleria.
3. **Didascalia:** Stilizza il testo della didascalia associato a ogni elemento per maggiore chiarezza ed enfasi.
4. **Titolo:** Modifica il testo del titolo di ogni elemento della galleria per farlo risaltare o allinearlo al tema del tuo sito.
5. **Adatta l'aspetto dell'area contenuto principale in ogni elemento della galleria per garantire una** presentazione visiva coerente.
6. **Media:** Personalizza il modo in cui i media (immagini o video) vengono visualizzati per garantire che si integrino con il design complessivo della tua galleria.
7. **Elemento della presentazione:** Stilizza i singoli elementi nel carosello, inclusi sfondo, allineamento e spaziatura.
8. **Titolo dell'elemento della presentazione:** Personalizza l'aspetto dei titoli all'interno di ogni elemento del carosello per un impatto e un riconoscimento immediati.
9. **Descrizione dell'elemento della presentazione:** Per migliorare la leggibilità, adatta font, dimensione e colore delle descrizioni negli elementi del carosello.
10. **Immagine della presentazione:** Per una coerenza visiva, regola dimensione e bordo delle immagini nel carosello.
11. **Indicatore attivo della presentazione:** Stilizza l'indicatore dell'elemento attualmente visualizzato, rendendolo ben visibile e distinto.
12. **Indicatore inattivo della presentazione:** Personalizza gli indicatori per gli elementi non attivi per garantire una navigazione fluida nel carosello.
13. **Pulsante di navigazione della presentazione:** Adatta l'aspetto dei pulsanti di navigazione, assicurandoti che siano intuitivi e coerenti 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 ogni scheda per una chiara segmentazione e un aspetto gradevole.
16. **Bordo della scheda attiva/in hover:** Stilizza il bordo delle schede attive o su cui si passa il mouse per guidare visivamente gli utenti durante le 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 font, dimensione e colore delle etichette delle schede per chiarezza e armonia visiva.
19. **Sottotitolo della scheda:** Adatta l'aspetto dei sottotitoli delle schede, fornendo in modo coerente contesto o informazioni aggiuntive.

***

## Esempi di casi d'uso

### Esempio 1: Carosello di notizie per i clienti

{% @arcade/embed flowId="pOjxSsq8rQ3YgZFvjMgr" url="<https://app.arcade.software/share/pOjxSsq8rQ3YgZFvjMgr>" %}

Tieni i tuoi clienti informati e coinvolti mostrando i tuoi ultimi articoli direttamente nella home page di Experience Cloud. Il componente AX Gallery rende facile visualizzare un carosello di notizie dinamico e ricco di immagini che si aggiorna automaticamente quando vengono pubblicati nuovi contenuti.

***

#### **Cosa otterrai**

* **Contenuti freschi a colpo d'occhio:** Mostra gli articoli Knowledge più recenti nella home page, completi di immagini, così i visitatori non perdono mai un aggiornamento.
* **Navigazione semplice:** Consenti ai clienti di scorrere le notizie aziendali in un layout carosello pulito e strutturato.
* **Filtraggio mirato:** Mostra solo gli articoli News sfruttando un campo picklist personalizzato, mantenendo il carosello focalizzato e pertinente.

***

#### **Prima di iniziare**

* **`campo ImageId__c` campo:** Crea un campo Testo sull'oggetto Knowledge per memorizzare l'ID del documento di contenuto dell'immagine di ogni articolo.
* **`Type__c` campo:** Crea un campo Picklist sull'oggetto Knowledge per categorizzare gli articoli, assicurandoti che il **News** valore esista e sia applicato ai tuoi articoli.

***

#### **Come configurarlo**

{% stepper %}
{% step %}

#### **Aggiungi il componente alla tua pagina**

* Trascina il **AX Gallery** componente nella pagina desiderata in Experience Builder.
  {% endstep %}

{% step %}

#### **Personalizza la visualizzazione del componente**

* Imposta il **Titolo** su `Carosello di notizie`.
* Imposta il **Didascalia** su `Esplora i nostri articoli settimanali`.
* Imposta il **Numero di colonne** su `3`.
  {% endstep %}

{% step %}

#### **Configura la tua origine dati**

* Crea una nuova query nella configurazione dell'origine dati.
* Seleziona **Knowledge** come oggetto (assicurati di selezionare la seconda opzione Knowledge nell'elenco).
* Aggiungi un filtro: **Type\_\_c uguale a** `News`.
* Imposta l'ordine di ordinamento su **Data di creazione, decrescente** così i tuoi articoli più recenti appaiono sempre per primi.
  {% endstep %}

{% step %}

#### **Configura la mappatura dei dati**

* Mappa **Titolo** al campo Knowledge `Titolo` .
* Mappa **Origine dei media** su `campo ImageId__c` per recuperare le immagini degli articoli.
* Imposta il **Velocità di riproduzione** su `5`.
  {% endstep %}

{% step %}

#### **Anteprima del tuo lavoro**

* Usa l'anteprima di Experience Builder per verificare che il carosello mostri gli articoli, le immagini e il layout corretti prima della pubblicazione.
  {% endstep %}
  {% endstepper %}

***

### Esempio 2: Galleria prodotti per i clienti

{% @arcade/embed flowId="aIu9ZNuteXdewe19LJL0" url="<https://app.arcade.software/share/aIu9ZNuteXdewe19LJL0>" %}

Offri ai tuoi clienti un modo visivamente coinvolgente per scoprire il tuo catalogo prodotti, direttamente dalla home page. Combinando il componente AX Gallery con i dati dei tuoi prodotti, puoi creare un carosello accattivante che mette in evidenza i prodotti in primo piano e guida i visitatori direttamente alle pagine dei dettagli del prodotto.

***

#### **Cosa otterrai**

* **Una vetrina visiva dei prodotti:** Mostra le cuffie in evidenza in un carosello ricco di immagini che incoraggia la navigazione.
* **Navigazione fluida:** Consenti ai clienti di passare dal carosello direttamente alle singole pagine di dettaglio dei prodotti con facilità.
* **Un'esperienza homepage curata:** Evidenzia i prodotti più importanti mostrando nella home page solo il catalogo in evidenza.

***

#### **Prima di iniziare**

* **`Type__c` campo:** Crea un campo Picklist sull'oggetto Product2 e assicurati che il **Headphone** valore esista, così puoi filtrare il carosello sui prodotti corretti.
* **`ContentDocumentId__c` campo:** Crea un campo Testo sull'oggetto Product2 per memorizzare l'URL dell'immagine di ciascun prodotto.

***

#### **Come configurarlo**

{% stepper %}
{% step %}

#### **Aggiungi il componente alla tua pagina**

* Trascina il **AX Gallery** componente nella pagina desiderata in Experience Builder.
  {% endstep %}

{% step %}

#### **Personalizza la visualizzazione del componente**

* Imposta il **Titolo** su `Carosello prodotti`.
* Imposta il **Didascalia** su `Esplora i nostri prodotti in evidenza!`
* Imposta il **Numero di colonne** su `3`.
  {% endstep %}

{% step %}

#### **Configura la tua origine dati**

* Crea una nuova query nella configurazione dell'origine dati.
* Seleziona **Product** come oggetto.
  {% endstep %}

{% step %}

#### **Configura la mappatura dei dati**

* Mappa **Titolo** al `Nome prodotto` .
* Mappa **Origine dei media** su `ContentDocumentId__c` per visualizzare l'immagine di ciascun prodotto.
* Imposta il **Velocità di riproduzione** su `5`.
  {% endstep %}

{% step %}

#### **Anteprima del tuo lavoro**

* Usa l'anteprima di Experience Builder per verificare che i tuoi prodotti, le immagini e il layout del carosello appaiano come previsto prima della pubblicazione.
  {% endstep %}
  {% endstepper %}