Appearance
Overview
This page is your guide to styling Avonni Components for Salesforce Experience Cloud. Here, you'll discover how to tailor your site's look and feel to create a seamless and visually appealing user experience.
What You'll Learn
Individual Customization: Fine-tune the appearance of each Avonni Component for a distinct style that matches your brand.
Theme Integration: Understand how to blend Avonni Components with your existing Experience Cloud theme for a cohesive look while still having the flexibility to override styles when needed.
Efficiency Tools: Learn to use copy/paste style properties to establish visual consistency across your site quickly.
Advanced Styling: Discover how to use custom CSS to unlock even more customization options and achieve unique effects.
Why It Matters
A well-styled Experience Cloud site establishes a professional presence, enhances user engagement, and reinforces your brand identity. Avonni Components provide the flexibility and tools to achieve the perfect look without extensive coding
Individual Styling
Each Avonni Component offers a dedicated Appearance section where you can adjust its styling. These settings let you personalize the look and feel of your components.
The Avonni Components in Salesforce Experience Cloud are designed to automatically adapt the default styling settings from your site's theme.
However, if you make any styling adjustments at the component level, these changes will specifically override the corresponding default styles set by your site's theme. This feature allows for more precise and individualized design customization for each component.
Theme Consistency
Automatic Theme Adoption: Avonni Components default adapt your site's theme settings.
Override with Custom Styles: Any adjustments made at the component level will override the default theme styles, offering precise design control for each component.
Integration with Global Theme Settings
Seamless Theme Integration: Effortlessly link Avonni Components to your Digital Experience Platform's (DXP) global theme settings.
No Manual Style Inputs Required: Directly connect component styling attributes to DXP’s predefined theme values, eliminating the need for manual styling inputs.
Copy/Paste Style Properties
This feature simplifies creating a cohesive visual style for your Experience Cloud Sites.
Here's how it works and the benefits:
How to Use It
Locate Source Component: Find a component with the desired look and feel (colors, fonts, etc.).
Copy Styles: In the component's Appearance settings, click "Copy Style Properties."
Apply to Target Component: Navigate to the component you want to style and select "Paste Style Properties" in its Appearance settings.
Why It's Great
Visual Consistency: Effortlessly maintain a unified look for your site.
Saves Time: Avoid repetitive style adjustments across multiple components.
Streamlined Design: Focus on building great content and layouts, while styling becomes faster and easier.
Custom CSS Styling
Want to tailor the look of Avonni Components beyond the built-in styling options? Here's how:
Why Use Custom CSS
Unique Branding: Match components precisely to your website's design or brand guidelines.
Advanced Effects: Achieve visual elements that aren't possible with standard settings (e.g., special animations, hover effects, etc.).
Full Control: Get the exact look you want without limitations.
How It Works
Create CSS: Write your custom CSS styles, defining your desired changes.
Add to Site: Use Experience Cloud's standard features to include this CSS in your site's head markup.
Apply to Components: Add the names of your custom CSS classes to the Avonni Components
Last updated
