# AX - Profile Card ## Panoramica **AX - Scheda profilo** è un componente di Experience Cloud che mostra informazioni dell'utente o del contatto in un formato di scheda stilizzato con foto del profilo, nomi, dettagli e immagini di sfondo opzionali nelle pagine dei siti Experience. Usalo per presentare membri del team, contatti dei clienti, rappresentanti dei partner o contributori della community con una formattazione visiva coerente. Configura quali campi vengono visualizzati, aggiungi immagini del profilo, personalizza lo stile e includi pulsanti di azione in Experience Builder. Perfetto per directory del team, elenchi di contatti, profili dei membri della community, sezioni "Incontra il tuo rappresentante" o ovunque il tuo portale abbia bisogno di visualizzazioni professionali dei profili.
{% hint style="danger" %} Questo componente [utilizza gli slot](/experience-cloud/experience-cloud-it/per-iniziare/apprendere-le-basi.md#understanding-slots) per la personalizzazione avanzata, rendendolo ideale per i siti LWR. I siti Aura non supportano questo livello di personalizzazione. {% endhint %} *** ## Per iniziare Usa questo semplice tutorial per imparare le basi del componente Scheda profilo e iniziare a creare i tuoi casi d'uso. {% @arcade/embed flowId="5SMa268wZsjsteVlpI8B" url="" %} *** ## Tutorial | Nome | Descrizione | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | | [**Configurazione della Scheda profilo per visualizzare le informazioni dell'utente corrente**](/experience-cloud/experience-cloud-it/tutorial/componenti/profilo-carta/imposta-la-scheda-profilo-per-visualizzare-le-informazioni-dellutente-corrente.md) | Configura una Avonni Card per visualizzare le informazioni dell'utente su Experience Cloud, migliorando la personalizzazione. | *** ## Slot Il componente Avonni Scheda profilo offre un modo flessibile e dinamico per presentare un'ampia gamma di informazioni tramite slot. Questi slot sono aree designate all'interno del componente in cui è possibile inserire altri componenti, consentendo un'ampia personalizzazione e funzionalità. #### Tipi di slot 1. **Slot contenuto:** * L'area principale per le informazioni dettagliate. * Ideale per aggiungere elementi diversi come testo, elenchi, immagini o componenti personalizzati. * Può essere utilizzata per visualizzare dati completi o elementi interattivi. 2. **Slot intestazione:** * Dedicato a titoli, intestazioni o contenuti introduttivi. * Adatto per etichette di testo, avatar, icone o qualsiasi componente che fornisca contesto. * Migliora la comprensione immediata dello scopo della Scheda profilo. 3. **Slot azioni:** * Riservato a elementi interattivi come pulsanti o collegamenti ipertestuali. * Facilita l'interazione dell'utente, offrendo azioni come la modifica dei profili e la navigazione. * Aumenta l'interattività della scheda e il coinvolgimento dell'utente. *** ## Impostazioni {% tabs %} {% tab title="🎛️ Proprietà" %} | Nome | Descrizione | Utilizzo | | -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | **Titolo e stile del testo del titolo** | Definisci il titolo e il suo aspetto scegliendo tra una varietà di stili di testo come H1, H2, H3, H4, P1 e P2. | Usalo per dare alla tua scheda profilo un'intestazione prominente e stilizzata che catturi l'attenzione. | | **Sottotitolo e stile del testo del sottotitolo** | Aggiungi un sottotitolo e personalizzane l'aspetto, consentendo ulteriori informazioni contestuali con opzioni di stile. | Usa i sottotitoli per fornire informazioni extra, come una posizione o un reparto, migliorando la completezza della scheda profilo. | | **Sfondo CMS o URL dello sfondo** | Personalizza lo sfondo scegliendo un'immagine dal CMS o fornendo un URL, consentendo uno sfondo visivamente più ricco. | Un'immagine di sfondo ben scelta può aggiungere profondità e contesto al profilo, migliorandone l'appeal visivo. | | **Immagine avatar CMS o URL dell'immagine avatar** | Definisci l'avatar selezionando un'immagine dal CMS o usando un URL, aggiungendo un tocco personale alla rappresentazione del profilo. | Gli avatar aggiungono un tocco personale, rendendo il profilo più coinvolgente e immediato. | | **Variante e dimensione dell'avatar** | Personalizza la forma e la dimensione dell'avatar, scegliendo tra varianti come cerchio o quadrato e dimensioni da x-small a x-large. | Adatta l'aspetto dell'avatar al design complessivo estetico della scheda profilo, garantendo coerenza visiva e appeal. | | **Posizione dell'avatar** | Posiziona l'avatar sulla scheda, scegliendo tra posizioni come in alto a sinistra, in alto al centro o in basso a destra, tra le altre. | Regola la posizione dell'avatar per ottenere un layout equilibrato e armonioso all'interno della scheda profilo. | {% endtab %} {% tab title="🎨 Stile" %} | Nome | Descrizione | Utilizzo | | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Attributi di stile dell'intestazione** | Personalizza ampiamente l'intestazione con opzioni per colore di sfondo, colore del testo, dimensione del carattere, stile, peso e persino personalizzazione del bordo. | Affina l'aspetto dell'intestazione per creare un'intestazione della scheda profilo visivamente accattivante e facilmente leggibile. | | **Colore di sfondo e bordo** | Personalizza il colore di sfondo complessivo della scheda e definisci le proprietà del bordo come dimensione, raggio e colore. | Queste funzionalità consentono un'ulteriore distinzione visiva e rifinitura dell'aspetto della scheda profilo, assicurando che sia in linea con le tue preferenze di design. | {% endtab %} {% endtabs %} *** ## Esempi di casi d'uso ### Esempio 1: Pannello evidenziato dell'account (contenitore) {% @arcade/embed flowId="SM5nEWQrD61sIelW6FK0" url="" %} Trasforma il tuo sito partner experience con una scheda profilo account raffinata e ricca di informazioni che mette in primo piano i dettagli chiave dell'account, il branding e le azioni. *** #### **Cosa otterrai** * **Intestazione brandizzata:** Mostra il nome dell'account e il settore con il logo dell'azienda per un riconoscimento visivo immediato * **Azioni contestuali:** Avvia un flusso Nuova opportunità direttamente dalla scheda con un solo clic * **Dettaglio record compatto:** Mostra i campi account più pertinenti senza sovraccaricare la pagina *** #### **Prima di iniziare** * **Campo logo personalizzato:** Un campo personalizzato sull'oggetto Account per archiviare l'URL del logo dell'azienda * **Flusso schermata:** Un flusso schermata Nuova opportunità, pronto per l'avvio * **Componente pulsante:** Disponibile nella tua libreria dei componenti * **Componente Dettaglio record:** Disponibile nella tua libreria dei componenti *** #### **Come configurarlo** {% stepper %} {% step %} #### **Aggiungi la Scheda profilo alla tua pagina** * Trascina il componente AX – Scheda profilo sulla pagina record dell'account Experience {% endstep %} {% step %} #### **Configura l'intestazione della scheda** * Imposta Intestazione su `{!Item.Name}` * Imposta Stile su `Titolo 2` * Imposta Sottotitolo su `{!Item.Industry}` {% endstep %} {% step %} #### **Aggiungi il logo dell'azienda** * Imposta URL immagine avatar su `{!Item.LogoURL__c}` * Imposta Variante su `Cerchio` * Imposta Dimensione su `Media` {% endstep %} {% step %} #### **Aggiungi un pulsante di azione personalizzato** * Trascina il componente Pulsante nello slot Azioni {% endstep %} {% step %} #### **Aggiungi un layout record compatto** * Trascina il componente Dettaglio record nello slot Contenuto {% endstep %} {% step %} #### **Anteprima della tua pagina** * Rivedi la scheda in modalità anteprima per confermare che il layout, il logo e il pulsante di azione vengano visualizzati come previsto {% endstep %} {% endstepper %} *** #### **Link** {% content-ref url="/pages/32c41c4ec20b132e395248826b7548bf488451b2" %} [AX - Record Detail](/experience-cloud/experience-cloud-it/experience-components/ax-record-detail.md) {% endcontent-ref %} {% content-ref url="/pages/cdbb0d98532d59b1866f6ec05b0e8cf510f2805d" %} [AX - Button](/experience-cloud/experience-cloud-it/experience-components/ax-button.md) {% endcontent-ref %} *** ### Esempio 2: Informazioni del profilo dell'utente corrente {% @arcade/embed flowId="BS4DEpYpnaHdh1ted1hR" url="" %} Offri ai tuoi utenti un benvenuto caloroso e personalizzato nel momento in cui arrivano sul tuo sito experience, creando connessione e incoraggiando l'adozione della piattaforma fin dalla prima visita. *** #### **Cosa otterrai** * **Saluto personalizzato:** Indirizza ogni utente per nome con un messaggio di benvenuto dinamico che risulti umano, non generico * **Contesto del ruolo:** Mostra il titolo dell'utente sotto il suo nome, in modo che colleghi e clienti possano capire immediatamente con chi stanno interagendo * **Foto profilo:** Recupera automaticamente l'immagine del profilo dell'utente per un aspetto curato e familiare *** #### **Come configurarlo** {% stepper %} {% step %} ### **Aggiungi la Scheda profilo alla tua pagina** * Trascina il componente AX – Scheda profilo sulla pagina del sito Experience {% endstep %} {% step %} ### **Configura l'intestazione della scheda** * Imposta Intestazione su `Benvenuto, {!User.Record.Name}` * Imposta Stile su `Titolo 2` * Imposta Sottotitolo su `{!User.Record.Title}` {% endstep %} {% step %} ### **Configura l'immagine del profilo** * Imposta URL immagine avatar su `{!User.Record.SmallPhotoUrl}` * Imposta Posizione avatar su `In alto al centro` {% endstep %} {% step %} ### **Anteprima della tua pagina** {% endstep %} {% endstepper %} *** **Link** {% content-ref url="/pages/48a95ab29750c822bc3e964f0254621d788e7679" %} [AX - Avatar](/experience-cloud/experience-cloud-it/experience-components/ax-avatar.md) {% endcontent-ref %} {% content-ref url="/pages/a9f763e1cdab4d6dc5a5ace52e7352d38f24796f" %} [AX - Accordion Section](/experience-cloud/experience-cloud-it/experience-components/ax-accordion-section.md) {% endcontent-ref %} --- # 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-profile-card.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.