> 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-de/experience-components/ax-avatar.md).
# AX - Avatar
## Übersicht
**AX - Avatar** ist eine Experience-Cloud-Komponente, die Profilbilder, Initialen oder Symbole auf Experience-Sites-Seiten anzeigt, um Benutzer, Kontakte, Konten oder jeden Salesforce-Datensatz darzustellen.
Verwenden Sie sie, um Portalbenutzerprofile, Kundenbetreuer, Kontaktlisten oder Entitätskennungen mit einheitlicher visueller Gestaltung anzuzeigen. Die Komponente zeigt automatisch Bilder an, wenn verfügbar, oder fällt auf Initialen bzw. Symbole zurück.
Perfekt für Kopfzeilen von Benutzerprofilen, Listen von Community-Mitgliedern, Kontaktverzeichnisse oder überall dort, wo Portalbenutzer eine visuelle Identifikation von Personen oder Entitäten benötigen.
## Konfiguration
Die Avonni-Avatar-Komponente hilft Ihnen dabei, visuell konsistente Darstellungen von Benutzern oder Entitäten innerhalb Ihrer Salesforce-Experience-Cloud-Site zu erstellen. Hier ist eine Schritt-für-Schritt-Anleitung, um den Avatar an Ihre Bedürfnisse anzupassen:
### Initialen anzeigen
Die Avatar-Komponente bietet Flexibilität dabei, wie Sie Initialen anzeigen:
#### **Manuelle Eingabe**
Wenn Sie die anzuzeigenden Initialen kennen, geben Sie sie direkt in das Feld „Initialen“ ein.
#### **Dynamische Generierung (Ausdrücke)**
Um Ihre Avonni-Komponenten dynamisch zu gestalten, können Sie [Experience-Cloud-Ausdrücke](/experience-cloud/experience-cloud-de/erste-schritte/learning-the-basics.md#expressions). Zum Beispiel können Sie in der untenstehenden Avatar-Komponente den folgenden Ausdruck verwenden, um den Namen des aktuell angemeldeten Benutzers automatisch anzuzeigen:
```
{!User.Record.Name}
```
Sie können `Name` durch den tatsächlichen Feldnamen ersetzen, in dem der Benutzername in Ihrer Salesforce-Organisation gespeichert ist.
Wenn Sie Initialen automatisch aus einem vollständigen Namen generieren möchten, aktivieren Sie die Option „Initialen automatisch formatiert“. Dabei werden Experience-Cloud-Ausdrücke verwendet, um den ersten Buchstaben jedes Wortes im Namen zu extrahieren und zu formatieren.
Initialen dynamisch aus dem Namen des aktuellen Benutzers anzeigen
### Benutzerdefiniertes Bild
Fügen Sie ein Profilfoto, ein Logo oder ein beliebiges Bild hinzu, damit der Avatar sofort erkennbar ist. Laden Sie Ihr Bild über die **Ausgewählter Inhalt** -Option hoch — die Komponente schneidet und formatiert es automatisch so zu, dass es in die Avatar-Form passt.
Wenn kein Bild hinzugefügt wird, zeigt der Avatar stattdessen Initialen an
### Variante (Form)
Wählen Sie zwischen **Kreis** oder **quadratisch** mithilfe des **Variante** Felds, um das Design Ihres Portals anzupassen. Runde Avatare eignen sich gut für Personen, während quadratische Formen für Logos oder Entitätssymbole geeignet sind
### Größe
Steuern Sie, wie groß der Avatar auf der Seite angezeigt wird, indem Sie die **Größe** Eigenschaft verwenden. Die Optionen reichen von **sehr klein** auf **xx-groß**, sodass Sie ihn mit dem umgebenden Inhalt ausbalancieren können — kleiner für Inline-Listen, größer für Profilköpfe.
### Primär- und Sekundärtext
Zeigen Sie zusätzlichen Kontext neben dem Avatar an, indem Sie Textfelder hinzufügen. Verwenden Sie **Primärtext** für die wichtigsten Informationen (z. B. den vollständigen Namen) und **Sekundärtext** für unterstützende Details (z. B. Berufsbezeichnung oder E-Mail-Adresse).
Sie können auch für jede Textebene Schriftstile festlegen, um eine visuelle Hierarchie zwischen den primären und sekundären Informationen zu schaffen.
### Tags
Fügen Sie visuelle Beschriftungen hinzu, um Informationen über den Avatar zu kategorisieren oder hervorzuheben. Tags erscheinen als kleine Abzeichen und können mithilfe der **Tag-Variante** Option mit unterschiedlichen Farben gestaltet werden — nützlich, um Status, Abteilung, Rolle oder eine andere schnelle Kennung anzuzeigen.
### Eigenschaften
**Initialen** zeigt bestimmte Initialen für einen Benutzer oder eine Entität an, und **Initialen automatisch formatiert** generiert sie automatisch aus einem angegebenen vollständigen Namen für eine konsistente Darstellung ohne manuelle Eingabe.
**Fallback-Symbolname** legt das Ersatzsymbol fest, das angezeigt wird, wenn keine Primärdaten (ein Bild oder Initialen) vorhanden sind, und sorgt so für visuelle Kontinuität.
**CMS-Bild** und **Bild-URL oder Ausdruck** legt das Avatar-Bild fest — verweisen Sie auf ein vom CMS verwaltetes Asset oder geben Sie eine URL/einen Ausdruck an. **Href** macht den Avatar zu einem Link zur angegebenen Adresse.
**Variante** wählt eine runde (`Kreis`) oder quadratische (`quadratisch`) Form, und **Größe** passt die Gesamtgröße an (x-klein bis xx-groß). **Icon-Position** richtet das Fallback-Symbol innerhalb des Avatars aus (`Anfang`, `zentriert`, `Ende`).
**Primärtext**, **Sekundärtext** und **Tertiärtext** zeigt den Haupt-, den ergänzenden und den Text der dritten Ebene neben dem Avatar an (oft ein Name, dann eine Rolle, dann ein zusätzliches Detail); ihre Textstile (Überschrift 1–4 oder Absatz 1–2) werden auf der Registerkarte „Stil“ festgelegt. **Textposition** gibt die Ausrichtung dieser Texte relativ zum Avatar an (`links`, `zentriert`, `rechts`).
**Avatar-Details ausblenden** zeigt oder verbirgt die zusätzlichen Details, die dem Avatar zugeordnet sind, wie Texte oder Tags.
**Tags** fügen dem Avatar Abzeichen-Tags als Kategorisierungs- oder Kennzeichnungselemente hinzu.
**Entitätssymbolname**, **Entitätsinitialen**, **Entitätsbildquelle**, **Entitätsvariante** und **Entitätsposition** konfigurieren Sie ein überlagertes sekundäres „Entität“-Abzeichen auf dem Avatar — sein Symbol, seine Initialen, sein Bild, seine Form (`Kreis`/`quadratisch`) und seine Eckposition.
**Aktionen** fügen dem Avatar Aktionsschaltflächen hinzu, und **Verknüpfen mit** definiert eine Interaktion, die ausgelöst wird, wenn auf den Avatar geklickt wird.
## Anwendungsfälle
**Benutzerprofile** – Erstellen Sie vollständige Profilköpfe, indem Sie ein benutzerdefiniertes Bild mit Primärtext für den Namen des Benutzers und Sekundärtext für seine Berufsbezeichnung oder Abteilung kombinieren. So erhalten Portalbenutzer auf ihren Profilseiten eine klare, professionelle Darstellung.
**Community-Foren** – Zeigen Sie Avatare neben Beiträgen und Kommentaren an, damit Community-Mitglieder schnell erkennen können, wer Beiträge leistet. Das verleiht eine persönliche Note, die die Beteiligung fördert und Gespräche leichter nachvollziehbar macht.
**Teamseiten** – Stellen Sie Teammitglieder mit Avataren dar, die Namen, Rollen und Tags für Abteilung oder Fachgebiet enthalten. So finden Portalbenutzer schneller den richtigen Kontakt und verstehen die Teamstruktur auf einen Blick.
## Styling
{% tabs %}
{% tab title="Primärtext" %}
| Eigenschaftsname | Beschreibung | Mögliche Werte |
| ------------------------------- | --------------------------------------------------------- | ----------------------------------------- |
| **Primäre Textfarbe** | Legt die Farbe des Haupttextes innerhalb des Avatars fest | Standard-Farbwerte, Farb-Hilfsklassen |
| **Primäre Textschriftgröße** | Ändert die Größe des Primärtexts | Schriftgrößenwerte (z. B. 12px, 1rem) |
| **Primärer Textschriftstil** | Steuert den Schriftstil (z. B. kursiv, schräg) | Standard-Schriftstiloptionen |
| **Primäres Textschriftgewicht** | Legt die Fettstärke des Primärtexts fest | Schriftgewichtswerte (z. B. normal, fett) |
| {% endtab %} | | |
{% tab title="Sekundärtext" %}
| Eigenschaftsname | Beschreibung | Mögliche Werte |
| --------------------------------- | ---------------------------------------------- | ----------------------------------------- |
| **Sekundäre Textfarbe** | Legt die Farbe des ergänzenden Textes fest | Standard-Farbwerte, Farb-Hilfsklassen |
| **Sekundäre Textschriftgröße** | Ändert die Größe des Sekundärtexts | Schriftgrößenwerte (z. B. 12px, 1rem) |
| **Sekundärer Textschriftstil** | Steuert den Schriftstil (z. B. kursiv, schräg) | Standard-Schriftstiloptionen |
| **Sekundäres Textschriftgewicht** | Legt die Fettstärke des Sekundärtexts fest | Schriftgewichtswerte (z. B. normal, fett) |
| {% endtab %} | | |
{% tab title="Tertiärtext" %}
| Eigenschaftsname | Beschreibung | Mögliche Werte |
| -------------------------------- | ------------------------------------------------ | ----------------------------------------- |
| **Tertiäre Textfarbe** | Legt die Farbe des Textes der dritten Ebene fest | Standard-Farbwerte, Farb-Hilfsklassen |
| **Tertiäre Textschriftgröße** | Ändert die Größe des Tertiärtexts | Schriftgrößenwerte (z. B. 12px, 1rem) |
| **Tertiärer Textschriftstil** | Steuert den Schriftstil (z. B. kursiv, schräg) | Standard-Schriftstiloptionen |
| **Tertiäres Textschriftgewicht** | Legt die Fettstärke des Tertiärtexts fest | Schriftgewichtswerte (z. B. normal, fett) |
| {% endtab %} | | |
{% tab title="Symbol" %}
| Eigenschaftsname | Beschreibung | Mögliche Werte |
| --------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------- |
| **Symbol-Hintergrundfarbe** | Legt die Hintergrundfarbe des Symbolbereichs fest | Standard-Farbwerte, Farb-Hilfsklassen |
| **Symbol-Vordergrundfarbe** | Legt die Farbe des Symbols oder der Initialen fest | Standard-Farbwerte, Farb-Hilfsklassen |
| **Symbol-Vordergrundfarbe-Hilfsklasse** | Wendet ein vordefiniertes Farbschema auf das Symbol an | Spezifische Hilfsklassennamen |
| **Objektanpassung des Symbolbildes** | Steuert, wie ein Symbolbild in seinen verfügbaren Platz eingepasst wird | füllen, enthalten, abdecken, keine, herunterskalieren |
| {% endtab %} | | |
{% tab title="Rahmen" %}
| Eigenschaftsname | Beschreibung | Mögliche Werte |
| ---------------- | ---------------------------------------------------------------------------- | ------------------------------------------ |
| **Rahmengröße** | Gibt die Breite des Avatar-Rahmens an | Pixelwerte (z. B. 1px, 2px) |
| **Rahmenradius** | Steuert den Grad der Abrundung der Ecken des Avatars | Pixelwerte, % (z. B. 50 % für einen Kreis) |
| **Rahmenfarbe** | Legt die Farbe des Avatar-Rahmens fest | Standard-Farbwerte, Farb-Hilfsklassen |
| **Rahmenstil** | Definiert das Erscheinungsbild des Rahmens (z. B. durchgezogen, gestrichelt) | Standard-CSS-Rahmenstile |
| {% endtab %} | | |
{% tab title="Initialen" %}
| Eigenschaftsname | Beschreibung | Mögliche Werte |
| -------------------------------- | ----------------------------------------------------------------- | ----------------------------------------- |
| **Initialenfarbe** | Legt die Textfarbe der angezeigten Initialen fest | Standard-Farbwerte, Farb-Hilfsklassen |
| **Initialenfarbe beim Hover** | Farbe der Initialen, wenn der Avatar mit der Maus überfahren wird | Standard-Farbwerte, Farb-Hilfsklassen |
| **Schriftgewicht der Initialen** | Steuert die Fettstärke des Initialentextes | Schriftgewichtswerte (z. B. normal, fett) |
| **Entitätsfarbe** | Hintergrundfarbe, wenn Initialen generiert werden | Standard-Farbwerte, Farb-Hilfsklassen |
| **Entitätsschriftgewicht** | Schriftgewicht der aus einer Entität generierten Initialen | Schriftgewichtswerte (z. B. normal, fett) |
| {% 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-de/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.
