# AX - Profilkarte ## Übersicht **AX - Profilkarte** ist eine Experience-Cloud-Komponente, die Benutzer- oder Kontaktinformationen in einem stilisierten Kartenformat mit Profilbildern, Namen, Details und optionalen Hintergrundbildern auf Experience-Sites-Seiten anzeigt. Verwenden Sie sie, um Teammitglieder, Kundenkontakte, Partnervertreter oder Community-Mitwirkende mit einheitlicher visueller Formatierung zu präsentieren. Konfigurieren Sie, welche Felder angezeigt werden, fügen Sie Profilbilder hinzu, passen Sie das Styling an und binden Sie Aktionsschaltflächen im Experience Builder ein. Perfekt für Teamverzeichnisse, Kontaktlisten, Profile von Community-Mitgliedern, Bereiche wie „Lernen Sie Ihren Vertreter kennen“ oder überall dort, wo Ihr Portal professionelle Profilanzeigen benötigt.
{% hint style="danger" %} Diese Komponente [nutzt Slots](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/erste-schritte/die-grundlagen-lernen#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 Profilkarten-Komponente kennenzulernen und mit Ihren Anwendungsfällen zu beginnen. {% @arcade/embed flowId="5SMa268wZsjsteVlpI8B" url="" %} *** ## Tutorials | Name | Beschreibung | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | [**Konfigurieren der Profilkarte zur Anzeige aktueller Benutzerinformationen**](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/tutorials/komponenten/profilkarte/die-profilkarte-so-einrichten-dass-informationen-des-aktuellen-benutzers-angezeigt-werden) | Richten Sie eine Avonni-Karte ein, um Benutzerinformationen in Experience Cloud anzuzeigen und so die Personalisierung zu verbessern. | *** ## Slots Die Avonni-Profilkarten-Komponente bietet eine flexible, dynamische Möglichkeit, über Slots eine Vielzahl von Informationen darzustellen. Diese Slots sind festgelegte Bereiche innerhalb der Komponente, in die andere Komponenten eingefügt werden können, wodurch umfangreiche Anpassungen und Funktionen möglich werden. #### Slot-Typen 1. **Inhalts-Slot:** * Der Hauptbereich für detaillierte Informationen. * Ideal zum Hinzufügen vielfältiger Elemente wie Text, Listen, Bilder oder benutzerdefinierte 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 Textlabels, Avatare, Symbole oder jede Komponente, die Kontext liefert. * Verbessert das sofortige 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 der Karte und die Nutzerbindung. *** ## 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 prominente, stilisierte Überschrift zu geben, die Aufmerksamkeit erregt. | | **Untertitel und Untertiteltextstil** | Fügen Sie einen Untertitel hinzu und passen Sie sein Erscheinungsbild an, um zusätzliche kontextbezogene Informationen mit Stiloptionen bereitzustellen. | Verwenden Sie Untertitel, um zusätzliche Informationen bereitzustellen, wie etwa eine Position oder Abteilung, und erhöhen Sie so die Vollständigkeit der Profilkarte. | | **CMS-Hintergrund oder Hintergrund-URL** | Passen Sie den Hintergrund an, indem Sie ein Bild aus dem CMS wählen oder eine URL angeben, um einen visuell ansprechenden Hintergrund zu ermöglichen. | Ein gut gewähltes Hintergrundbild kann dem Profil Tiefe und Kontext verleihen und seine visuelle Attraktivität erhöhen. | | **CMS-Avatarbild oder Avatarbild-URL** | Definieren Sie den Avatar, indem Sie ein Bild aus dem CMS auswählen oder eine URL verwenden, um der Profildarstellung eine persönliche Note zu verleihen. | Avatare verleihen eine persönliche Note und machen das Profil ansprechender und nachvollziehbarer. | | **Avatar-Variante und -Größe** | Passen Sie Form und Größe des Avatars an und wählen Sie aus Varianten wie Kreis oder Quadrat sowie Größen von x-klein bis x-groß. | Passen Sie das Erscheinungsbild des Avatars an das gesamte Design des Profilkartenlayouts an, um visuelle Kohärenz und Attraktivität sicherzustellen. | | **Avatar-Position** | Positionieren Sie den Avatar auf der Karte und wählen Sie unter anderem Orte 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 | | ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Kopfzeilen-Stilattribute** | Gestalten Sie die Kopfzeile umfassend mit Optionen für Hintergrundfarbe, Textfarbe, Schriftgröße, Schriftstil, Schriftstärke und sogar Rahmenanpassungen. | Feinabstimmung des Erscheinungsbilds der Kopfzeile, um eine visuell auffällige und gut 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: Account-Hervorhebungsbereich (Container) {% @arcade/embed flowId="SM5nEWQrD61sIelW6FK0" url="" %} Verwandeln Sie Ihre Partner-Experience-Site mit einer eleganten, informationsreichen Account-Profildkarte, die wichtige Account-Details, Branding und Aktionen in den Mittelpunkt stellt. *** #### **Was Sie erreichen werden** * **Gebrandete Kopfzeile:** Zeigen Sie den Kontonamen und die Branche zusammen mit einem Firmenlogo an, für sofortige visuelle Wiedererkennung * **Kontextbezogene Aktionen:** Starten Sie direkt von der Karte aus mit nur einem Klick einen neuen Opportunity-Flow * **Kompakte Datensatzdetails:** Zeigen Sie die relevantesten Account-Felder an, ohne die Seite zu überladen *** #### **Bevor Sie beginnen** * **Benutzerdefiniertes Logo-Feld:** Ein benutzerdefiniertes Feld im Account-Objekt zum Speichern der Logo-URL des Unternehmens * **Bildschirm-Flow:** Ein Bildschirm-Flow für eine neue Opportunity, bereit zum Starten * **Schaltflächenkomponente:** In Ihrer Komponentenbibliothek verfügbar * **Record-Detail-Komponente:** In Ihrer Komponentenbibliothek verfügbar *** #### **So richten Sie es ein** {% stepper %} {% step %} #### **Fügen Sie die Profilkarte zu Ihrer Seite hinzu** * Ziehen Sie die Komponente AX – Profilkarte auf die Experience-Account-Datensatzseite {% endstep %} {% step %} #### **Kopfzeile der Karte konfigurieren** * Setzen Sie die Kopfzeile auf `{!Item.Name}` * Setzen Sie den Stil auf `Überschrift 2` * Setzen Sie den Untertitel auf `{!Item.Industry}` {% endstep %} {% step %} #### **Firmenlogo hinzufügen** * Setzen Sie die Avatar-Bild-URL auf `{!Item.LogoURL__c}` * Setzen Sie die Variante auf `Kreis` * Setzen Sie die Größe auf `Mittel` {% endstep %} {% step %} #### **Benutzerdefinierte Aktionsschaltfläche hinzufügen** * Ziehen Sie die Schaltflächenkomponente in den Aktions-Slot {% endstep %} {% step %} #### **Kompaktes Datensatzlayout hinzufügen** * Ziehen Sie die Record-Detail-Komponente in den Inhalts-Slot {% endstep %} {% step %} #### **Sehen Sie sich Ihre Seite in der Vorschau an** * Überprüfen Sie die Karte in der Vorschau, um sicherzustellen, dass Layout, Logo und Aktionsschaltfläche wie erwartet angezeigt werden {% endstep %} {% endstepper %} *** #### **Links** {% content-ref url="ax-datensatzdetails" %} [ax-datensatzdetails](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-datensatzdetails) {% endcontent-ref %} {% content-ref url="ax-schaltflache" %} [ax-schaltflache](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-schaltflache) {% endcontent-ref %} *** ### Beispiel 2: Profilinformationen des aktuellen Benutzers {% @arcade/embed flowId="BS4DEpYpnaHdh1ted1hR" url="" %} Bereiten Sie Ihren Benutzern in dem Moment, in dem sie Ihre Experience-Site besuchen, einen herzlichen, personalisierten Empfang und fördern Sie so die Bindung und die Nutzung der Plattform vom ersten Besuch an. *** #### **Was Sie erreichen werden** * **Personalisierte Begrüßung:** Sprechen Sie jeden Benutzer mit Namen an, mit einer dynamischen Willkommensnachricht, die menschlich und nicht generisch wirkt * **Rollenkontext:** Zeigen Sie die Position des Benutzers unter seinem Namen an, damit Teammitglieder und Kunden sofort verstehen, mit wem sie interagieren * **Profilfoto:** Rufen Sie das Profilbild des Benutzers automatisch ab, für ein gepflegtes, vertrautes Gefühl *** #### **So richten Sie es ein** {% stepper %} {% step %} ### **Fügen Sie die Profilkarte zu Ihrer Seite hinzu** * Ziehen Sie die Komponente AX – Profilkarte auf die Experience-Site-Seite {% endstep %} {% step %} ### **Kopfzeile der Karte konfigurieren** * Setzen Sie die Kopfzeile auf `Willkommen, {!User.Record.Name}` * Setzen Sie den Stil auf `Überschrift 2` * Setzen Sie den Untertitel auf `{!User.Record.Title}` {% endstep %} {% step %} ### **Profilbild einrichten** * Setzen Sie die Avatar-Bild-URL auf `{!User.Record.SmallPhotoUrl}` * Setzen Sie die Avatar-Position auf `Oben mittig` {% endstep %} {% step %} ### **Sehen Sie sich Ihre Seite in der Vorschau an** {% endstep %} {% endstepper %} *** **Links** {% content-ref url="ax-avatar" %} [ax-avatar](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-avatar) {% endcontent-ref %} {% content-ref url="ax-akkordeonabschnitt" %} [ax-akkordeonabschnitt](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/experience-components/ax-akkordeonabschnitt) {% endcontent-ref %}