# AX - Avatar ## Panoramica **AX - Avatar** è un componente di Experience Cloud che visualizza immagini del profilo, iniziali o icone nelle pagine dei siti Experience per rappresentare utenti, contatti, account o qualsiasi record Salesforce. Usalo per mostrare i profili degli utenti del portale, i rappresentanti degli account, le liste di contatti o gli identificatori di entità con uno stile visivo coerente. Il componente visualizza automaticamente le immagini quando disponibili o ricorre alle iniziali o alle icone. Perfetto per intestazioni di profili utente, elenchi di membri della community, directory dei contatti o in qualsiasi punto in cui gli utenti del portale necessitino 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: ### **Visualizzare le iniziali** Il componente Avatar offre flessibilità nel modo in cui visualizzi le iniziali: #### **Inserimento manuale** Se conosci le iniziali che desideri visualizzare, inseriscile direttamente nel campo "Initials".
#### **Generazione dinamica (Espressioni)** Per rendere dinamici i tuoi componenti Avonni, puoi usare [Experience Cloud Expressions](/experience-cloud/experience-cloud-it/per-iniziare/imparare-le-basi.md#expressions). Ad 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 a partire da un nome completo, abilita l'opzione "Initials Auto Formatted". Questo utilizzerà le espressioni di Experience Cloud per estrarre e formattare la prima lettera di ogni parola nel nome.

Visualizzare le iniziali dinamicamente dal nome dell'utente corrente

### **Immagine personalizzata** Aggiungi una foto del profilo, un logo o qualsiasi immagine per rendere l'Avatar immediatamente riconoscibile. Carica la tua immagine utilizzando l'opzione **Selected Content** — il componente la ritaglia e la formatta automaticamente per adattarla alla forma dell'Avatar. Se non viene aggiunta alcuna immagine, l'Avatar visualizza invece le iniziali ### **Variante (Forma)** Scegli tra **cerchio** o **quadrato** usando il campo **Variante** per adattarsi 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 utilizzando la **Dimensione** proprietà. Le opzioni vanno da **x-small** a **xx-large**, così puoi bilanciarlo con il contenuto circostante—più piccolo per elenchi in linea, più grande per intestazioni di profili. ### **Testo primario e secondario** Visualizza un contesto aggiuntivo accanto all'Avatar aggiungendo campi di testo. Usa **Primary Text** per l'informazione più importante (come un nome completo) e **Secondary Text** per dettagli di supporto (come ruolo o email). Puoi anche impostare gli stili dei caratteri 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 relative all'Avatar. I tag appaiono come piccoli distintivi e possono essere stilizzati con colori diversi utilizzando l'opzione **Tag Variant** —utile per mostrare stato, dipartimento, ruolo o qualsiasi identificatore rapido. *** ## **Esempi di casi d'uso** **Profili utente** – Crea intestazioni di profilo complete combinando un'immagine personalizzata con il testo primario per il nome dell'utente e il testo secondario per il loro ruolo o dipartimento. Questo offre agli utenti del portale una rappresentazione chiara e professionale nelle loro pagine profilo. **Forum della community** – Visualizza gli Avatar accanto a post e commenti in modo 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** – Mostra i membri del team con Avatar che includono nomi, ruoli e tag per dipartimento o competenza. Questo aiuta gli utenti del portale a trovare il contatto giusto e a comprendere la struttura del team a colpo d'occhio. *** ## Attiva una finestra di conferma dopo l'interazione. Essenziale per azioni che richiedono la conferma o l'accettazione dell'utente. {% 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à | | **Initials Auto Formatted** | Questa funzione genera e visualizza automaticamente le iniziali basandosi su un nome completo fornito, garantendo una rappresentazione coerente senza input manuale | | **Nome icona di riserva** | Determina l'icona di backup da mostrare nell'Avatar quando i dati principali (come un'immagine o le iniziali) sono assenti, garantendo continuità visiva | | **Dimensione** | Regola le dimensioni complessive dell'Avatar per adattarlo a diversi contesti dell'interfaccia utente | | **Variante** | Scegli tra una forma circolare (`cerchio`) o una quadrata (`quadrato`) per l'Avatar in modo da allinearlo alle tue preferenze di design | | **Nascondi dettagli dell'Avatar** | Attiva per mostrare o nascondere dettagli aggiuntivi associati all'Avatar, come testi o tag | | **Primary Text** | Il testo principale visualizzato accanto all'Avatar, spesso usato per nomi o identificatori principali | | **Stile del testo primario** | Designa lo stile del carattere per il testo primario, scegliendo tra opzioni come Heading 1-4 o Paragraph 1-2 | | **Secondary Text** | Testo aggiuntivo visualizzato sotto il testo primario, adatto per informazioni supplementari o sottotitoli | | **Stile del testo secondario** | Definisci lo stile del carattere per il testo secondario, con scelte che vanno da Heading 1-4 a Paragraph 1-2 | | **Testo terziario** | Testo di terzo livello, tipicamente usato per dettagli aggiuntivi o attributi relativi all'Avatar | | **Stile del testo terziario** | Scegli lo stile di carattere desiderato per il testo terziario, con opzioni che includono Heading 1-4 e Paragraph 1-2 | | **Posizione del testo** | Specifica l'allineamento o il posizionamento dei testi di accompagnamento in relazione all'Avatar, consentendo un migliore layout visivo | | **Tag** | Imposta le proprietà per eventuali tag distintivi associati all'Avatar, fornendo un modo per aggiungere marcatori o indicatori categoriali ai tuoi Avatar | | {% endtab %} | | {% tab title="Aspetto" %} | Attributo | Nome della proprietà | Descrizione | Valori possibili | | ------------------- | --------------------------------------------- | -------------------------------------------------------------- | ---------------------------------------------------- | | **Primary Text** | Colore del testo primario | Imposta il colore del testo principale all'interno dell'Avatar | Valori di colore standard, classi di utilità colore | | **Primary Text** | Dimensione del carattere del testo primario | Modifica la dimensione del testo primario | Valori di dimensione del carattere (es., 12px, 1rem) | | **Primary Text** | Stile del carattere del testo primario | Controlla lo stile del carattere (es., italic, oblique) | Opzioni standard di stile del carattere | | **Primary Text** | Peso del carattere del testo primario | Definisce lo spessore (boldness) del testo primario | Valori di peso del carattere (es., normal, bold) | | **Secondary Text** | Colore del testo secondario | Imposta il colore del testo supplementare | Valori di colore standard, classi di utilità colore | | **Secondary Text** | Dimensione del carattere del testo secondario | Modifica la dimensione del testo secondario | Valori di dimensione del carattere (es., 12px, 1rem) | | **Secondary Text** | Stile del carattere del testo secondario | Controlla lo stile del carattere (es., italic, oblique) | Opzioni standard di stile del carattere | | **Secondary Text** | Peso del carattere del testo secondario | Definisce lo spessore (boldness) del testo secondario | Valori di peso del carattere (es., normal, bold) | | **Testo terziario** | Colore del testo terziario | Imposta il colore del testo di terzo livello | Valori di colore standard, classi di utilità colore | | **Testo terziario** | Dimensione del carattere del testo terziario | Modifica la dimensione del testo terziario | Valori di dimensione del carattere (es., 12px, 1rem) | | **Testo terziario** | Stile del carattere del testo terziario | Controlla lo stile del carattere (es., italic, oblique) | Opzioni standard di stile del carattere | | **Testo terziario** | Peso del carattere del testo terziario | Definisce lo spessore (boldness) del testo terziario | Valori di peso del carattere (es., normal, bold) | | **Icona** | Colore di sfondo dell'icona | Imposta il colore di sfondo dell'area dell'icona | Valori di colore standard, classi di utilità colore | | **Icona** | Colore in primo piano dell'icona | Imposta il colore dell'immagine dell'icona o delle iniziali | Valori di colore standard, classi di utilità colore | | **Icona** | Utilità colore in primo piano dell'icona | Applica uno schema di colore predefinito all'icona | Nomi specifici delle classi di utilità | | **Icona** | Adattamento dell'oggetto immagine dell'icona | Controlla come un'immagine icona si adatta al suo spazio | fill, contain, cover, none, scale-down | | **Bordo** | Dimensione del bordo | Specifica la larghezza del bordo dell'Avatar | Valori in pixel (es., 1px, 2px) | | **Bordo** | Raggio del bordo | Controlla la rotondità degli angoli dell'Avatar | Valori in pixel, % (es., 50% per un cerchio) | | **Bordo** | Colore del bordo | Imposta il colore del bordo dell'Avatar | Valori di colore standard, classi di utilità colore | | **Bordo** | Stile del bordo | Definisce l'aspetto del bordo (es., solid, dashed) | Stili standard di bordo CSS | | **Iniziali** | Colore delle iniziali | Imposta il colore del testo per le iniziali visualizzate | Valori di colore standard, classi di utilità colore | | **Iniziali** | Colore delle iniziali al passaggio del mouse | Colore delle iniziali quando l'Avatar è in hover | Valori di colore standard, classi di utilità colore | | **Iniziali** | Peso del carattere delle iniziali | Controlla lo spessore del testo delle iniziali | Valori di peso del carattere (es., normal, bold) | | **Iniziali** | Colore dell'entità | Colore di sfondo quando le iniziali vengono generate | Valori di colore standard, classi di utilità colore | | **Iniziali** | Peso del carattere dell'entità | Peso del carattere delle iniziali generate da un'entità | Valori di peso del carattere (es., normal, bold) | | {% endtab %} | | | | | {% endtabs %} | | | | --- # Agent Instructions: 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-avatar.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.