> 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-profile-card.md). # AX - Profilkarte ## Übersicht **AX - Profilkarte** ist eine Experience-Cloud-Komponente, die Benutzer- oder Kontaktinformationen in einem formatierten Kartenlayout mit Profilbildern, Namen, Details und optionalen Hintergrundbildern auf Experience-Sites-Seiten anzeigt. Verwenden Sie sie, um Teammitglieder, Kundenkontakte, Partnervertreter oder Community-Beitragende mit einheitlicher visueller Formatierung hervorzuheben. Konfigurieren Sie, welche Felder angezeigt werden, fügen Sie Profilbilder hinzu, passen Sie das Design an und binden Sie Aktionsschaltflächen im Experience Builder ein. Perfekt für Teamverzeichnisse, Kontaktlisten, Profile von Community-Mitgliedern, Abschnitte wie „Lernen Sie Ihren Vertreter kennen“ oder überall dort, wo Ihr Portal professionelle Profilanzeigen benötigt.
{% hint style="danger" %} Diese Komponente [nutzt Slots](/experience-cloud/experience-cloud-de/erste-schritte/learning-the-basics.md#understanding-slots) für erweiterte Anpassungen und ist damit ideal für LWR-Sites. Aura-Sites unterstützen dieses Maß an Anpassung nicht. {% endhint %} *** ## Erste Schritte Verwenden Sie dieses einfache Tutorial, um die Grundlagen der Profilkartenkomponente zu lernen und mit Ihren Anwendungsfällen zu beginnen. {% @arcade/embed url="" flowId="5SMa268wZsjsteVlpI8B" %} *** ## Anleitungen | Name | Beschreibung | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | [**Die Profilkarte für die Anzeige aktueller Benutzerinformationen konfigurieren**](/experience-cloud/experience-cloud-de/anleitungen/components/profile-card/set-up-the-profile-card-to-display-current-user-information.md) | Richten Sie eine Avonni-Karte ein, um Benutzerinformationen auf Experience Cloud anzuzeigen und die Personalisierung zu verbessern. | *** ## Slots Die Avonni-Profilkartenkomponente bietet eine flexible, dynamische Möglichkeit, über Slots eine breite Palette von Informationen darzustellen. Diese Slots sind festgelegte Bereiche innerhalb der Komponente, in die andere Komponenten eingefügt werden können, was umfangreiche Anpassungen und Funktionen ermöglicht. #### Slot-Typen 1. **Inhalts-Slot:** * Der primäre Bereich für detaillierte Informationen. * Ideal zum Hinzufügen vielfältiger Elemente wie Text, Listen, Bilder oder benutzerdefinierter Komponenten. * Kann verwendet werden, um umfassende Daten oder interaktive Elemente anzuzeigen. 2. **Kopfzeilen-Slot:** * Für Titel, Überschriften oder einführende Inhalte vorgesehen. * Geeignet für Textbeschriftungen, Avatare, Symbole oder jede Komponente, die Kontext liefert. * Verbessert das unmittelbare Verständnis des Zwecks der Profilkarte. 3. **Aktions-Slot:** * Reserviert für interaktive Elemente wie Schaltflächen oder Hyperlinks. * Erleichtert die Benutzerinteraktion und bietet Aktionen wie das Bearbeiten von Profilen und die Navigation. * Erhöht die Interaktivität und das Benutzerengagement der Karte. *** ## Einstellungen {% tabs %} {% tab title="🎛️ Eigenschaften" %} | Name | Beschreibung | Verwendung | | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Titel und Titeltextstil** | Definieren Sie den Titel und sein Erscheinungsbild, indem Sie aus einer Vielzahl von Textstilen wie H1, H2, H3, H4, P1 und P2 wählen. | Nutzen Sie dies, um Ihrer Profilkarte eine hervorgehobene, stilisierte Überschrift zu geben, die Aufmerksamkeit erregt. | | **Untertitel und Untertiteltextstil** | Fügen Sie einen Untertitel hinzu und passen Sie sein Erscheinungsbild an, sodass mit Stiloptionen zusätzliche Kontextinformationen möglich sind. | Verwenden Sie Untertitel, um zusätzliche Informationen wie eine Position oder Abteilung bereitzustellen und so die Aussagekraft der Profilkarte zu erhöhen. | | **CMS-Hintergrund oder Hintergrund-URL** | Passen Sie den Hintergrund an, indem Sie ein Bild aus dem CMS auswählen oder eine URL angeben, wodurch ein visuell ansprechender Hintergrund möglich wird. | Ein gut gewähltes Hintergrundbild kann dem Profil Tiefe und Kontext verleihen und seine visuelle Attraktivität steigern. | | **CMS-Avatarbild oder Avatar-Bild-URL** | Definieren Sie den Avatar, indem Sie ein Bild aus dem CMS auswählen oder eine URL verwenden, sodass die Profilpräsentation eine persönliche Note erhält. | Avatare verleihen eine persönliche Note und machen das Profil ansprechender und nahbarer. | | **Avatar-Variante und -Größe** | Passen Sie Form und Größe des Avatars an, indem Sie Varianten wie Kreis oder Quadrat und Größen von extra klein bis extra groß wählen. | Passen Sie das Erscheinungsbild des Avatars an die gesamte Designästhetik der Profilkarte an und sorgen Sie so für visuelle Kohärenz und Attraktivität. | | **Avatar-Position** | Positionieren Sie den Avatar auf der Karte und wählen Sie unter anderem Positionen wie oben links, oben mittig oder unten rechts. | Passen Sie die Position des Avatars an, um innerhalb der Profilkarte ein ausgewogenes und harmonisches Layout zu erzielen. | | {% endtab %} | | | {% tab title="🎨 Gestaltung" %} | Name | Beschreibung | Verwendung | | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Gestaltungsattribute der Kopfzeile** | Gestalten Sie die Kopfzeile umfassend mit Optionen für Hintergrundfarbe, Textfarbe, Schriftgröße, Schriftstil, Schriftschnitt und sogar Rahmenanpassungen. | Feinabstimmen des Erscheinungsbilds der Kopfzeile, um eine visuell auffällige und leicht lesbare Kopfzeile der Profilkarte zu erstellen. | | **Hintergrundfarbe und Rahmen** | Passen Sie die allgemeine Hintergrundfarbe der Karte an und definieren Sie Rahmeneigenschaften wie Größe, Radius und Farbe. | Diese Funktionen ermöglichen eine weitere visuelle Abgrenzung und Verfeinerung des Erscheinungsbilds der Profilkarte und stellen sicher, dass sie Ihren Designvorlieben entspricht. | | {% endtab %} | | | | {% endtabs %} | | | *** ## Anwendungsbeispiele ### Beispiel 1: Hervorhebungsfeld für Konten (Container) {% @arcade/embed url="" flowId="SM5nEWQrD61sIelW6FK0" %} Verwandeln Sie Ihre Partner-Experience-Site mit einer ausgefeilten, informationsreichen Profilkarte für Konten, die wichtige Kontodetails, Branding und Aktionen in den Mittelpunkt stellt. *** #### **Was Sie erreichen werden** * **Markenbezogene Kopfzeile:** Zeigen Sie den Kontonamen und die Branche mit einem Firmenlogo an, um sofortige visuelle Wiedererkennung zu erzielen * **Kontextbezogene Aktionen:** Starten Sie mit nur einem Klick direkt von der Karte aus einen neuen Opportunity-Flow * **Kompakte Datensatzdetails:** Zeigen Sie die relevantesten Kontofelder an, ohne die Seite zu überladen *** #### **Bevor Sie beginnen** * **Benutzerdefiniertes Logo-Feld:** Ein benutzerdefiniertes Feld auf dem Kontoobjekt zum Speichern der URL des Firmenlogos * **Bildschirm-Flow:** Ein neuer Bildschirm-Flow für Opportunities, bereit zum Start * **Schaltflächenkomponente:** In Ihrer Komponentenbibliothek verfügbar * **Datensatzdetailkomponente:** In Ihrer Komponentenbibliothek verfügbar *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die Profilkarte Ihrer Seite hinzu** * Ziehen Sie die Komponente AX – Profilkarte auf die Experience-Kontodatensatzseite {% endstep %} {% step %} #### **Kopfzeile der Karte konfigurieren** * Kopfzeile festlegen auf `{!Item.Name}` * Stil festlegen auf `Überschrift 2` * Untertitel festlegen auf `{!Item.Industry}` {% endstep %} {% step %} #### **Firmenlogo hinzufügen** * Avatar-Bild-URL festlegen auf `{!Item.LogoURL__c}` * Variante festlegen auf `Kreis` * Größe festlegen auf `Mittel` {% endstep %} {% step %} #### **Benutzerdefinierte Aktionsschaltfläche hinzufügen** * Ziehen Sie die Schaltflächenkomponente in den Aktions-Slot {% endstep %} {% step %} #### **Ein kompaktes Datensatzlayout hinzufügen** * Ziehen Sie die Datensatzdetailkomponente in den Inhalts-Slot {% endstep %} {% step %} #### **Sehen Sie sich Ihre Seite in der Vorschau an** * Überprüfen Sie die Karte im Vorschaumodus, um sicherzustellen, dass Layout, Logo und Aktionsschaltfläche wie erwartet angezeigt werden {% endstep %} {% endstepper %} *** #### **Links** {% content-ref url="/pages/a253f06b22ccd6ec4f2fe11cd4ee49a608cc1dce" %} [AX - Datensatzdetails](/experience-cloud/experience-cloud-de/experience-components/ax-record-detail.md) {% endcontent-ref %} {% content-ref url="/pages/ddfa61ffe86d642dee4531c737dab63c342c2df6" %} [AX - Button](/experience-cloud/experience-cloud-de/experience-components/ax-button.md) {% endcontent-ref %} *** ### Beispiel 2: Informationen zum aktuellen Benutzerprofil {% @arcade/embed url="" flowId="BS4DEpYpnaHdh1ted1hR" %} Geben Sie Ihren Benutzern in dem Moment, in dem sie auf Ihrer Experience-Site ankommen, einen herzlichen, personalisierten Empfang, bauen Sie eine Verbindung auf und fördern Sie die Akzeptanz der Plattform bereits beim ersten Besuch. *** #### **Was Sie erreichen werden** * **Personalisierte Begrüßung:** Sprechen Sie jeden Benutzer mit einer dynamischen Willkommensnachricht namentlich an, die menschlich und nicht generisch wirkt * **Rollenkontext:** Zeigen Sie unter dem Namen des Benutzers seine Position an, damit Teamkollegen und Kunden sofort verstehen, mit wem sie interagieren * **Profilfoto:** Rufen Sie das Profilbild des Benutzers automatisch ab, um ein gepflegtes, vertrautes Gefühl zu vermitteln *** #### **So richten Sie es ein** {% stepper %} {% step %} ### **Fügen Sie die Profilkarte Ihrer Seite hinzu** * Ziehen Sie die Komponente AX – Profilkarte auf die Experience-Site-Seite {% endstep %} {% step %} ### **Kopfzeile der Karte konfigurieren** * Kopfzeile festlegen auf `Willkommen, {!User.Record.Name}` * Stil festlegen auf `Überschrift 2` * Untertitel festlegen auf `{!User.Record.Title}` {% endstep %} {% step %} ### **Das Profilbild einrichten** * Avatar-Bild-URL festlegen auf `{!User.Record.SmallPhotoUrl}` * Avatar-Position festlegen auf `Oben mittig` {% endstep %} {% step %} ### **Sehen Sie sich Ihre Seite in der Vorschau an** {% endstep %} {% endstepper %} *** **Links** {% content-ref url="/pages/28f4a607bbfb650ac649c377b14f53a8702df9ab" %} [AX - Avatar](/experience-cloud/experience-cloud-de/experience-components/ax-avatar.md) {% endcontent-ref %} {% content-ref url="/pages/34a96c3b8599eba833479d353aee4771f1eaf87b" %} [AX - Akkordeon-Abschnitt](/experience-cloud/experience-cloud-de/experience-components/ax-accordion-section.md) {% endcontent-ref %} --- # 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/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.