Erscheinungsbild

Überblick

Diese Seite ist Ihr Leitfaden zum Stylen von Avonni-Komponenten für Experience Site. Hier erfahren Sie, wie Sie das Erscheinungsbild Ihrer Site anpassen, um eine nahtlose und visuell ansprechende Benutzererfahrung zu schaffen.

Was Sie lernen werden

• Einzelne Anpassung: Feinabstimmung des Erscheinungsbilds jeder Avonni-Komponente für einen unverwechselbaren Stil, der zu Ihrer Marke passt.

• Themenintegration: Verstehen, wie Avonni-Komponenten mit dem vorhandenen Experience Site-Theme Ihres Projekts verschmolzen werden können, um ein einheitliches Erscheinungsbild zu erzielen und gleichzeitig die Flexibilität zu behalten, Styles bei Bedarf zu überschreiben.

• Effizienzwerkzeuge: Lernen Sie, Style-Eigenschaften zu kopieren/einzufügen, um schnell visuelle Konsistenz auf Ihrer Site herzustellen.

• Erweitertes Styling: Entdecken Sie, wie Sie benutzerdefiniertes CSS verwenden, um noch mehr Anpassungsoptionen zu erschließen und einzigartige Effekte zu erzielen.

Warum es wichtig ist

Eine gut gestaltete Experience Site schafft einen professionellen Auftritt, steigert die Nutzerbindung und stärkt Ihre Markenidentität. Avonni-Komponenten bieten die Flexibilität und Werkzeuge, um das perfekte Erscheinungsbild zu erreichen, ohne umfangreiche Codierung.

Individuelles Styling

Jede Avonni-Komponente bietet einen eigenen Bereich "Erscheinungsbild", in dem Sie ihr Styling anpassen können. Mit diesen Einstellungen können Sie das Aussehen und die Haptik Ihrer Komponenten personalisieren.

Theme-Konsistenz

• Automatische Theme-Übernahme: Avonni-Komponenten passen standardmäßig die Theme-Einstellungen Ihrer Site an.

• Mit benutzerdefinierten Styles ü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: Verknüpfen Sie Avonni-Komponenten mühelos mit den globalen Theme-Einstellungen Ihrer Digital Experience Platform (DXP).

• Keine manuellen Stileingaben erforderlich: Verbinden Sie Styling-Attribute der Komponenten direkt mit den vordefinierten Theme-Werten der DXP, wodurch manuelle Stileingaben entfallen.

Kopieren/Einfügen von Style-Eigenschaften

Diese Funktion vereinfacht die Erstellung eines kohärenten visuellen Stils für Ihre Experience Sites.

So funktioniert es und das sind die Vorteile:

Wie man es verwendet

1. Quellkomponente finden: Suchen Sie eine Komponente mit dem gewünschten Aussehen und Gefühl (Farben, Schriftarten usw.).

2. Stile kopieren: Klicken Sie in den Erscheinungsbildeinstellungen der Komponente auf "Style-Eigenschaften kopieren".

3. Auf Zielkomponente anwenden: Navigieren Sie zu der Komponente, die Sie stylen möchten, und wählen Sie in deren Erscheinungsbildeinstellungen "Style-Eigenschaften einfügen".

Warum es nützlich ist

• Visuelle Konsistenz: Bewahren Sie mühelos ein einheitliches Erscheinungsbild für Ihre Site.

• Sparsamkeit bei der Zeit: Vermeiden Sie wiederholte Stiländerungen über mehrere Komponenten hinweg.

• Gestrafftes Design: Konzentrieren Sie sich auf den Aufbau großartiger Inhalte und Layouts, während das Styling schneller und einfacher wird.

Benutzerdefiniertes CSS-Styling

Möchten Sie das Aussehen von Avonni-Komponenten über die integrierten Styling-Optionen hinaus anpassen? So geht's:

Warum benutzerdefiniertes CSS verwenden

• Einzigartige Markenbildung: Passen Sie Komponenten genau an das Design oder die Markenrichtlinien Ihrer Website an.

• Erweiterte Effekte: Erzielen Sie visuelle Elemente, die mit den Standardoptionen nicht möglich sind (z. B. spezielle Animationen, Hover-Effekte usw.).

• Volle Kontrolle: Erhalten Sie genau das gewünschte Erscheinungsbild ohne Einschränkungen.

Wie es funktioniert

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-Komponenten hinzu