# Erscheinungsbild ## Überblick Dieser Leitfaden erklärt, wie Avonni-Komponenten innerhalb von Salesforce Experience Cloud gestaltet und gebrandet werden. Egal, ob Sie das moderne LWR-Framework oder das traditionelle Aura-Framework verwenden — Sie können das Aussehen Ihrer Site anpassen, um ein nahtloses Benutzererlebnis zu schaffen. ### **Was Sie lernen werden** * **Framework-Kompatibilität**: Unterscheiden Sie zwischen Styling-Optionen, die in LWR vs. Aura verfügbar sind. * **Komponentenbezogene Anpassung**: Feinabstimmung einzelner Komponenten, um Ihrer Marke zu entsprechen. * **Theme-Integration**: Erfahren Sie, wie Komponenten globale Site-Styles erben. * **Effizienz-Tools**: Verwenden Sie "Stileigenschaften kopieren/einfügen", um Konsistenz zu gewährleisten. * **Erweitertes Styling**: Verwenden Sie benutzerdefiniertes CSS für feingranulare Kontrolle *** ## Framework-Details: LWR vs. Aura Es ist wichtig zu erkennen, welches Framework Ihre Experience-Site verwendet, da die verfügbaren Styling-Tools erheblich unterschiedlich sind: | 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-Aussehen-Registerkarte** | Verfügbar für tiefgehendes Komponenten-Styling. | Verfügbar für Komponenten-Styling. | | **Globale Theme-Bindung** | Volle Unterstützung für DXP-Branding-Sets. | Beschränkt auf Standard-Theme-Erbschaft. | {% 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 Aussehen-Einstellungen und das globale CSS der Site verwenden {% endhint %} *** ## Individuelle Gestaltung Jede Avonni-Komponente bietet einen eigenen Bereich "Aussehen", in dem Sie ihr Styling anpassen können. Diese Einstellungen ermöglichen es Ihnen, das Aussehen und Gefühl Ihrer Komponenten zu personalisieren.
{% hint style="warning" %} Die Avonni-Komponenten in Experience Sites sind so konzipiert, dass sie die standardmäßigen Styling-Einstellungen aus dem Theme Ihrer Site automatisch übernehmen. Wenn Sie jedoch Styling-Anpassungen auf Komponentenebene vornehmen, überschreiben diese Änderungen gezielt die entsprechenden Standardstile, die durch das Theme Ihrer Site festgelegt wurden. Diese Funktion ermöglicht präzisere und individuellere Designanpassungen für jede Komponente. {% endhint %} ## Theme-Konsistenz * **Automatische Theme-Übernahme:** Avonni-Komponenten passen standardmäßig die Theme-Einstellungen Ihrer Site an. * **Mit benutzerdefinierten Stilen überschreiben:** Alle Anpassungen auf Komponentenebene überschreiben die Standard-Theme-Stile und bieten präzise Designkontrolle für jede Komponente. *** ## Integration mit globalen Theme-Einstellungen * **Nahtlose Theme-Integration:** Verbinden Sie Avonni-Komponenten mühelos mit den globalen Theme-Einstellungen Ihrer Digital Experience Platform (DXP). * **Keine manuellen Stil-Eingaben erforderlich:** Verbinden Sie Styling-Attribute von Komponenten direkt mit den vordefinierten Theme-Werten der DXP, wodurch manuelle Stil-Eingaben entfallen.
*** ## Stileigenschaften kopieren/einfügen Diese Funktion vereinfacht das Erstellen eines kohärenten visuellen Stils für Ihre Experience-Sites. So funktioniert es und das sind die Vorteile: ### **So verwenden Sie es** 1. **Quelle-Komponente finden:** Finden Sie eine Komponente mit dem gewünschten Aussehen (Farben, Schriftarten usw.). 2. **Stile kopieren:** Klicken Sie in den Aussehen-Einstellungen der Komponente auf "Stileigenschaften kopieren". 3. **Auf Ziel-Komponente anwenden:** Wählen Sie die Komponente, die Sie gestalten möchten, und wählen Sie dann in ihren Aussehen-Einstellungen "Stileigenschaften einfügen". ### **Warum es nützlich ist** * **Visuelle Konsistenz:** Erhalten Sie mühelos ein einheitliches Erscheinungsbild für Ihre Site. * **Zeitersparnis:** Vermeiden Sie wiederholte Stil-Anpassungen über mehrere Komponenten hinweg. * **Vereinfachtes 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 Aussehen der Avonni-Komponenten ü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:** Erreichen Sie genau das gewünschte Aussehen 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 einzufügen. 3. **Auf Komponenten anwenden:** Fügen Sie die Namen Ihrer benutzerdefinierten CSS-Klassen zu den Avonni-Komponenten hinzu
{% hint style="warning" %} #### Framework-Hinweis In **LWR**können Sie oft die "Stil"-Registerkarte für Abstände (Margin/Pad­dings) verwenden, während in **Aura**diese über benutzerdefinierte CSS-Klassen oder die internen Abstandseinstellungen der Komponente gehandhabt werden müssen. {% endhint %} --- # Agent Instructions: 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/erscheinungsbild.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.