> 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/eigenschaftenbereich/appearance.md). # Darstellung ## Übersicht Dieser Leitfaden erklärt, wie Sie Avonni Components in Salesforce Experience Cloud gestalten und an Ihr Branding anpassen. Ganz gleich, ob Sie das moderne LWR-Framework oder das traditionelle Aura-Framework verwenden, Sie können das Erscheinungsbild und die Benutzererfahrung Ihrer Site anpassen, um ein nahtloses Nutzererlebnis zu schaffen. ### **Was Sie lernen werden** * **Framework-Kompatibilität**: Unterscheiden Sie zwischen den in LWR und Aura verfügbaren Stiloptionen. * **Anpassung auf Komponentenebene**: Feinabstimmung einzelner Komponenten, damit sie zu Ihrer Marke passen. * **Theme-Integration**: Erfahren Sie, wie Komponenten globale Site-Styles übernehmen. * **Effizienz-Tools**: Verwenden Sie „Stileigenschaften kopieren/einfügen“, um Konsistenz zu gewährleisten. * **Erweiterte Gestaltung**: Verwenden Sie benutzerdefiniertes CSS für granulare Steuerung *** ## Framework-spezifische Details: LWR vs. Aura Es ist wichtig zu erkennen, welches Framework Ihre Experience-Site verwendet, da sich die verfügbaren Styling-Tools erheblich unterscheiden: | Funktion | LWR-Framework | Aura-Framework | | ------------------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------- | | **Tab „Stil und Sichtbarkeit“** | Verfügbar. Wird direkt von Salesforce für feine Abstände und Layout verwaltet. | Nicht verfügbar. | | **Avonni-Tab „Darstellung“** | Für umfassende Gestaltung von Komponenten verfügbar. | Für die Gestaltung von Komponenten verfügbar. | | **Globale Theme-Verknüpfung** | Vollständige Unterstützung für DXP-Branding-Sets. | Beschränkt auf die standardmäßige Theme-Vererbung. | {% hint style="warning" %} #### Wichtig Die Registerkarte Stil und Sichtbarkeit ist eine native Salesforce-Funktion, die direkt von der Plattform verwaltet wird. Sie ist nur für Sites verfügbar, die mit dem **LWR-Framework** erstellt wurden. Wenn Sie eine **Aura** -Site verwenden, nutzen Sie in erster Linie die Avonni-spezifischen Darstellungseinstellungen und das globale CSS der Site {% endhint %} *** ## Individuelle Gestaltung Jede Avonni-Komponente bietet einen eigenen Bereich „Darstellung“, in dem Sie das Styling anpassen können. Mit diesen Einstellungen können Sie das Erscheinungsbild Ihrer Komponenten personalisieren.
{% hint style="warning" %} Die Avonni-Komponenten in der Experience Site sind so konzipiert, dass sie die standardmäßigen Styling-Einstellungen des Themes Ihrer Site automatisch übernehmen. Wenn Sie jedoch Styling-Anpassungen auf Komponentenebene vornehmen, überschreiben diese Änderungen speziell die entsprechenden Standardstile, die vom Theme Ihrer Site festgelegt wurden. Diese Funktion ermöglicht eine präzisere und individuellere Designanpassung für jede Komponente. {% endhint %} ## Theme-Konsistenz * **Automatische Übernahme des Themes:** Avonni-Komponenten übernehmen standardmäßig die Theme-Einstellungen Ihrer Site. * **Mit benutzerdefinierten Stilen überschreiben:** Alle auf Komponentenebene vorgenommenen Anpassungen überschreiben die Standard-Theme-Stile und bieten präzise Designkontrolle für jede Komponente. *** ## Integration mit globalen Theme-Einstellungen * **Nahtlose Theme-Integration:** Verknüpfen Sie Avonni Components mühelos mit den globalen Theme-Einstellungen Ihrer Digital Experience Platform (DXP). * **Keine manuellen Style-Eingaben erforderlich:** Verknüpfen Sie die Styling-Attribute der Komponenten direkt mit den vordefinierten Theme-Werten von DXP, sodass keine manuellen Style-Eingaben mehr nötig sind.
*** ## Stileigenschaften kopieren/einfügen Diese Funktion vereinfacht es, einen stimmigen visuellen Stil für Ihre Experience Sites zu erstellen. So funktioniert es und das sind die Vorteile: ### **So verwenden Sie es** 1. **Quellkomponente finden:** Suchen Sie eine Komponente mit dem gewünschten Erscheinungsbild (Farben, Schriftarten usw.). 2. **Stile kopieren:** Klicken Sie in den Darstellungseinstellungen der Komponente auf „Stileigenschaften kopieren“. 3. **Auf Zielkomponente anwenden:** Wählen Sie die Komponente aus, die Sie gestalten möchten, und wählen Sie dann in den Darstellungseinstellungen „Stileigenschaften einfügen“. ### **Warum es nützlich ist** * **Visuelle Konsistenz:** Sorgen Sie mühelos für ein einheitliches Erscheinungsbild Ihrer Site. * **Spart Zeit:** Vermeiden Sie wiederholte Stil-Anpassungen über mehrere Komponenten hinweg. * **Optimiertes Design:** Konzentrieren Sie sich auf die Erstellung großartiger Inhalte und Layouts, während das Styling schneller und einfacher wird.
*** ## Benutzerdefiniertes CSS-Styling Möchten Sie das Erscheinungsbild von Avonni Components über die integrierten Styling-Optionen hinaus anpassen? So geht's: ### **Warum benutzerdefiniertes CSS verwenden** * **Einzigartiges Branding:** Passen Sie Komponenten exakt an das Design oder die Markenrichtlinien Ihrer Website an. * **Erweiterte Effekte:** Erzielen Sie visuelle Elemente, die mit Standard-Einstellungen nicht möglich sind (z. B. spezielle Animationen, Hover-Effekte usw.). * **Volle Kontrolle:** Erhalten Sie genau das gewünschte Erscheinungsbild ohne Einschränkungen. ### **So funktioniert es** 1. **CSS erstellen:** Erstellen Sie Ihre benutzerdefinierten CSS-Styles und definieren Sie die gewünschten Änderungen. 2. **Zur Site hinzufügen:** Verwenden Sie die Standardfunktionen von Experience Cloud, um dieses CSS in das Head-Markup Ihrer Site einzubinden. 3. **Auf Komponenten anwenden:** Fügen Sie die Namen Ihrer benutzerdefinierten CSS-Klassen zu den Avonni Components hinzu
{% hint style="warning" %} #### Hinweis zum Framework In **LWR**, können Sie für Abstände (Margin/Padding) oft den Tab „Stil“ verwenden, während Sie in **Aura**, diese über benutzerdefinierte CSS-Klassen oder die internen Abstandseinstellungen der Komponente gehandhabt werden müssen. {% endhint %} --- # 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/eigenschaftenbereich/appearance.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.