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:
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.
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
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.
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.
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
Quellkomponente suchen: Finden Sie eine Komponente mit dem gewünschten Look and Feel (Farben, Schriftarten usw.).
Stile kopieren: Klicken Sie in den Darstellungseinstellungen der Komponente auf „Stil-Eigenschaften kopieren“.
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
CSS erstellen: Schreiben Sie Ihre benutzerdefinierten CSS-Stile und definieren Sie die gewünschten Änderungen.
Zur Site hinzufügen: Verwenden Sie die Standardfunktionen von Experience Cloud, um dieses CSS in das Head-Markup Ihrer Site einzubinden.
Auf Komponenten anwenden: Fügen Sie die Namen Ihrer benutzerdefinierten CSS-Klassen zu den Avonni Components hinzu
Zuletzt aktualisiert
War das hilfreich?