> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-avatar.md).
# AX - Avatar
## Panoramica
**AX - Avatar** è un componente di Experience Cloud che mostra foto profilo, iniziali o icone nelle pagine di Experience Sites per rappresentare utenti, contatti, account o qualsiasi record Salesforce.
Usalo per mostrare i profili degli utenti del portale, i rappresentanti dell'account, gli elenchi dei contatti o gli identificatori delle entità con uno stile visivo coerente. Il componente visualizza automaticamente le immagini quando disponibili, altrimenti utilizza iniziali o icone.
Perfetto per intestazioni di profilo utente, elenchi di membri della community, directory dei contatti o ovunque gli utenti del portale abbiano bisogno di un'identificazione visiva di persone o entità.
***
## Personalizzare l'Avatar
Il componente Avonni Avatar ti aiuta a creare rappresentazioni visivamente coerenti di utenti o entità all'interno del tuo sito Salesforce Experience Cloud. Ecco una guida passo passo per personalizzare l'Avatar in base alle tue esigenze:
### **Visualizzazione delle iniziali**
Il componente Avatar offre flessibilità nel modo in cui visualizzi le iniziali:
#### **Inserimento manuale**
Se conosci le iniziali che vuoi visualizzare, inseriscile direttamente nel campo "Iniziali".
#### **Generazione dinamica (espressioni)**
Per rendere dinamici i tuoi componenti Avonni, puoi usare [le espressioni di Experience Cloud](/experience-cloud/experience-cloud-it/per-iniziare/learning-the-basics.md#expressions). Per esempio, nel componente Avatar qui sotto, puoi usare la seguente espressione per visualizzare automaticamente il nome dell'utente attualmente connesso:
```
{!User.Record.Name}
```
Puoi sostituire `Nome` con il nome effettivo del campo che memorizza il nome dell'utente nella tua organizzazione Salesforce.
Se desideri generare automaticamente le iniziali da un nome completo, abilita l'opzione "Iniziali autoformattate". Questa utilizzerà le espressioni di Experience Cloud per estrarre e formattare la prima lettera di ogni parola del nome.
Visualizzazione dinamica delle iniziali dal nome dell'utente attuale
### **Immagine personalizzata**
Aggiungi una foto del profilo, un logo o qualsiasi immagine per rendere l'Avatar immediatamente riconoscibile. Carica la tua immagine usando l'opzione **Contenuto selezionato** — il componente la ritaglia e la formatta automaticamente per adattarla alla forma dell'Avatar.
Se non viene aggiunta alcuna immagine, l'Avatar mostra invece le iniziali
### **Variante (forma)**
Scegli tra **cerchio** oppure **quadrato** usando il campo **Variante** per adattarlo al design del tuo portale. Gli avatar circolari funzionano bene per le persone, mentre le forme quadrate sono adatte a loghi o icone di entità
### **Dimensione**
Controlla quanto grande appare l'Avatar nella pagina usando la proprietà **Dimensione** Le opzioni vanno da **x-small** su **xx-large**, così puoi bilanciarlo con il contenuto circostante—più piccolo per gli elenchi in linea, più grande per le intestazioni del profilo.
### **Testo primario e secondario**
Mostra contesto aggiuntivo accanto all'Avatar aggiungendo campi di testo. Usa **Testo primario** per le informazioni più importanti (come un nome completo) e **Testo secondario** per i dettagli di supporto (come la mansione o l'email).
Puoi anche impostare stili di carattere per ogni livello di testo per creare una gerarchia visiva tra le informazioni primarie e secondarie.
### **Tag**
Aggiungi etichette visive per categorizzare o evidenziare informazioni sull'Avatar. I tag appaiono come piccoli badge e possono essere personalizzati con colori diversi usando l'opzione **Variante del tag** utile per mostrare lo stato, il reparto, il ruolo o qualsiasi identificatore rapido.
***
## **Casi d'uso di esempio**
**Profili utente** – Crea intestazioni di profilo complete combinando un'immagine personalizzata con testo primario per il nome dell'utente e testo secondario per la sua mansione o reparto. Ciò offre agli utenti del portale una rappresentazione chiara e professionale nelle loro pagine profilo.
**Forum della community** – Mostra gli Avatar accanto ai post e ai commenti così che i membri della community possano identificare rapidamente chi contribuisce. Questo aggiunge un tocco personale che incoraggia il coinvolgimento e rende le conversazioni più facili da seguire.
**Pagine del team** – Metti in evidenza i membri del team con Avatar che includono nomi, ruoli e tag per reparto o competenza. Ciò aiuta gli utenti del portale a trovare il contatto giusto e a comprendere la struttura del team a colpo d'occhio.
***
## Specifiche
{% tabs %}
{% tab title="Proprietà" %}
| Nome | Descrizione |
| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Iniziali** | Inserisci iniziali specifiche da visualizzare all'interno dell'Avatar. Ti permette di definire manualmente le lettere rappresentative per un utente o un'entità |
| **Iniziali autoformattate** | Questa funzione genera automaticamente e visualizza le iniziali in base a un nome completo fornito, garantendo una rappresentazione coerente senza inserimento manuale |
| **Nome dell'icona di fallback** | Determina l'icona di riserva da mostrare nell'Avatar quando mancano i dati primari (come un'immagine o le iniziali), garantendo continuità visiva |
| **Dimensione** | Regola le dimensioni complessive dell'Avatar per adattarlo a vari contesti dell'interfaccia utente |
| **Variante** | Scegli tra una forma circolare (`cerchio`) o quadrata (`quadrato`) per l'Avatar in base alle tue preferenze di design |
| **Nascondi i dettagli dell'Avatar** | Attiva o disattiva la visualizzazione di dettagli aggiuntivi associati all'Avatar, come testi o tag |
| **Testo primario** | Il testo principale visualizzato accanto all'Avatar, spesso usato per nomi o identificatori principali |
| **Stile del testo primario** | Definisci lo stile del carattere per il testo primario, scegliendo tra opzioni come Intestazione 1-4 o Paragrafo 1-2 |
| **Testo secondario** | Testo aggiuntivo visualizzato sotto il testo primario, adatto a informazioni supplementari o sottotitoli |
| **Stile del testo secondario** | Definisci lo stile del carattere per il testo secondario, con scelte che vanno da Intestazione 1-4 a Paragrafo 1-2 |
| **Testo terziario** | Testo di terzo livello, tipicamente usato per dettagli extra o attributi relativi all'Avatar |
| **Stile del testo terziario** | Scegli lo stile del carattere desiderato per il testo terziario, con opzioni che includono Intestazione 1-4 e Paragrafo 1-2 |
| **Posizione del testo** | Specifica l'allineamento o il posizionamento dei testi associati rispetto all'Avatar, consentendo un migliore layout visivo |
| **Tag** | Imposta le proprietà per eventuali tag badge associati all'Avatar, offrendo un modo per aggiungere marcatori o indicatori categoriali ai tuoi Avatar |
| {% endtab %} | |
{% tab title="Aspetto" %}
| Attributo | Nome proprietà | Descrizione | Valori possibili |
| -------------------- | -------------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------- |
| **Testo primario** | Colore del testo primario | Imposta il colore del testo principale all'interno dell'Avatar | Valori colore standard, classi utility colore |
| **Testo primario** | Dimensione del font del testo primario | Modifica la dimensione del testo primario | Valori della dimensione del font (ad es. 12px, 1rem) |
| **Testo primario** | Stile del font del testo primario | Controlla lo stile del font (ad es. italic, oblique) | Opzioni standard di stile del font |
| **Testo primario** | Peso del font del testo primario | Definisce il grado di grassetto del testo primario | Valori del peso del font (ad es. normal, bold) |
| **Testo secondario** | Colore del testo secondario | Imposta il colore del testo supplementare | Valori colore standard, classi utility colore |
| **Testo secondario** | Dimensione del font del testo secondario | Modifica la dimensione del testo secondario | Valori della dimensione del font (ad es. 12px, 1rem) |
| **Testo secondario** | Stile del font del testo secondario | Controlla lo stile del font (ad es. italic, oblique) | Opzioni standard di stile del font |
| **Testo secondario** | Peso del font del testo secondario | Definisce il grado di grassetto del testo secondario | Valori del peso del font (ad es. normal, bold) |
| **Testo terziario** | Colore del testo terziario | Imposta il colore del testo di terzo livello | Valori colore standard, classi utility colore |
| **Testo terziario** | Dimensione del font del testo terziario | Modifica la dimensione del testo terziario | Valori della dimensione del font (ad es. 12px, 1rem) |
| **Testo terziario** | Stile del font del testo terziario | Controlla lo stile del font (ad es. italic, oblique) | Opzioni standard di stile del font |
| **Testo terziario** | Peso del font del testo terziario | Definisce il grado di grassetto del testo terziario | Valori del peso del font (ad es. normal, bold) |
| **Icona** | Colore di sfondo dell'icona | Imposta il colore di sfondo dell'area icona | Valori colore standard, classi utility colore |
| **Icona** | Colore in primo piano dell'icona | Imposta il colore dell'immagine dell'icona o delle iniziali | Valori colore standard, classi utility colore |
| **Icona** | Utilità colore in primo piano dell'icona | Applica uno schema di colori predefinito all'icona | Nomi specifici delle classi utility |
| **Icona** | Adattamento dell'oggetto immagine dell'icona | Controlla come un'immagine icona si adatta al proprio spazio | fill, contain, cover, none, scale-down |
| **Bordo** | Dimensione del bordo | Specifica la larghezza del bordo dell'Avatar | Valori in pixel (ad es. 1px, 2px) |
| **Bordo** | Raggio del bordo | Controlla il grado di arrotondamento degli angoli dell'Avatar | Valori in pixel, % (ad es. 50% per un cerchio) |
| **Bordo** | Colore del bordo | Imposta il colore del bordo dell'Avatar | Valori colore standard, classi utility colore |
| **Bordo** | Stile del bordo | Definisce l'aspetto del bordo (ad es. solid, dashed) | Stili standard del bordo CSS |
| **Iniziali** | Colore delle iniziali | Imposta il colore del testo per le iniziali visualizzate | Valori colore standard, classi utility colore |
| **Iniziali** | Colore delle iniziali al passaggio del mouse | Colore delle iniziali quando si passa il mouse sopra l'Avatar | Valori colore standard, classi utility colore |
| **Iniziali** | Peso del font delle iniziali | Controlla il grado di grassetto del testo delle iniziali | Valori del peso del font (ad es. normal, bold) |
| **Iniziali** | Colore dell'entità | Colore di sfondo quando vengono generate le iniziali | Valori colore standard, classi utility colore |
| **Iniziali** | Peso del font dell'entità | Peso del font delle iniziali generate da un'entità | Valori del peso del font (ad es. normal, bold) |
| {% endtab %} | | | |
| {% endtabs %} | | | |
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-avatar.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.