> 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). # Aussehen ## Übersicht Dieser Leitfaden erklärt, wie Sie Avonni Components innerhalb von Salesforce Experience Cloud stylen und branden. Egal, ob Sie das moderne LWR-Framework oder das traditionelle Aura-Framework verwenden, Sie können das Erscheinungsbild 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 Styling-Optionen. * **Anpassung auf Komponentenebene**: Feinabstimmung einzelner Komponenten, damit sie zu Ihrer Marke passen. * **Theme-Integration**: Erfahren Sie, wie Komponenten globale Site-Styles übernehmen. * **Effizienzwerkzeuge**: Verwenden Sie „Stil-Eigenschaften kopieren/einfügen“, um Konsistenz zu wahren. * **Erweitertes Styling**: Verwenden Sie benutzerdefiniertes CSS für granulare Steuerung *** ## Framework-spezifische Details: LWR vs. Aura Es ist wichtig zu identifizieren, welches Framework Ihre Experience-Site verwendet, da sich die verfügbaren Styling-Werkzeuge deutlich unterscheiden: | Funktion | LWR-Framework | Aura-Framework | | --------------------------------------- | ----------------------------------------------------------------------------------- | -------------------------------------------------- | | **Registerkarte „Stil & Sichtbarkeit“** | Verfügbar. Wird direkt von Salesforce für granulare Abstände und Layouts verwaltet. | Nicht verfügbar. | | **Avonni-Registerkarte „Darstellung“** | Verfügbar für tiefgehendes Komponenten-Styling. | Verfügbar für das Styling von Komponenten. | | **Globale Theme-Bindung** | Volle 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, werden Sie hauptsächlich die Avonni-spezifischen Darstellungseinstellungen und das globale CSS der Site verwenden {% endhint %} *** ## Individuelles Styling Jede Avonni-Komponente bietet einen eigenen Bereich „Darstellung“, in dem Sie ihr Styling anpassen können. Mit diesen Einstellungen können Sie das Erscheinungsbild Ihrer Komponenten personalisieren.
{% hint style="warning" %} Die Avonni Components in Experience Site sind so konzipiert, dass sie die standardmäßigen Styling-Einstellungen automatisch aus dem Theme Ihrer Site übernehmen. Wenn Sie jedoch Styling-Anpassungen auf Komponentenebene vornehmen, überschreiben diese Änderungen gezielt 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 Components übernehmen standardmäßig die Theme-Einstellungen Ihrer Site. * **Mit benutzerdefinierten Stilen überschreiben:** Alle auf Komponentenebene vorgenommenen Anpassungen überschreiben die Standard-Theme-Stile und bieten so 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 Stileingaben erforderlich:** Verbinden Sie die Styling-Attribute der Komponente direkt mit den vordefinierten Theme-Werten von DXP und eliminieren Sie so die Notwendigkeit manueller Styling-Eingaben.
*** ## Stil-Eigenschaften kopieren/einfügen Diese Funktion vereinfacht die Erstellung eines stimmigen visuellen Stils für Ihre Experience Sites. So funktioniert es und das sind die Vorteile: ### **So verwenden Sie es** 1. **Quellkomponente suchen:** Finden Sie eine Komponente mit dem gewünschten Look and Feel (Farben, Schriftarten usw.). 2. **Stile kopieren:** Klicken Sie in den Darstellungseinstellungen der Komponente auf „Stil-Eigenschaften kopieren“. 3. **Auf Zielkomponente anwenden:** Wählen Sie die Komponente aus, die Sie stylen möchten, und wählen Sie dann in den Darstellungseinstellungen „Stil-Eigenschaften einfügen“. ### **Warum es nützlich ist** * **Visuelle Konsistenz:** Behalten Sie mühelos ein einheitliches Erscheinungsbild Ihrer Site bei. * **Spart Zeit:** Vermeiden Sie wiederholte Stil-Anpassungen über mehrere Komponenten hinweg. * **Optimiertes Design:** Konzentrieren Sie sich auf großartige 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 präzise an das Design oder die Markenrichtlinien Ihrer Website an. * **Erweiterte Effekte:** Erzielen Sie visuelle Elemente, die mit den Standardeinstellungen nicht möglich sind (z. B. spezielle Animationen, Hover-Effekte usw.). * **Volle Kontrolle:** Erzielen Sie exakt das gewünschte Erscheinungsbild ohne Einschränkungen. ### **So funktioniert es** 1. **CSS erstellen:** Schreiben Sie Ihre benutzerdefinierten CSS-Stile 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 häufig die Registerkarte „Stil“ für Abstände (Margin/Padding) verwenden, während in **Aura**dieses über benutzerdefinierte CSS-Klassen oder die internen Abstandseinstellungen der Komponente behandelt werden muss. {% 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: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-de/eigenschaftenbereich/appearance.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.