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.

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-Frameworkerstellt wurden. Wenn Sie eine Aura -Site verwenden, werden Sie hauptsächlich die Avonni-spezifischen Aussehen-Einstellungen und das globale CSS der Site verwenden

---

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.

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.

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

Framework-Hinweis

In LWRkönnen Sie oft die "Stil"-Registerkarte für Abstände (Margin/Pad­dings) verwenden, während in Auradiese über benutzerdefinierte CSS-Klassen oder die internen Abstandseinstellungen der Komponente gehandhabt werden müssen.