Experience Cloud Developer Guide

Get Up to Speed with Experience Builder Sites
Develop Experience Builder Sites: The Basics
Customize the Look and Feel of an Experience Builder Template
Update a Template with the Theme Panel
Override Template Elements with Custom CSS
Use Custom Fonts in Your Experience Builder Site
Customize the Theme Layout of Your Template
Create Custom Content Layout Components for Experience Builder
Configure Swappable Search and Profile Menu Components
Standard Design Tokens for Experience Builder Sites
Develop Secure Sites: Lightning Locker and CSP
Analyze and Improve Experience Builder Site Performance
Use a CMS with Your Experience Builder Site
Report on Deflections: The Deflection Signals Framework
Deploy an Experience Cloud Site from Sandbox to Production
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Customize the Look and Feel of an Experience Builder Template

You can control the appearance of an Experience Builder template in several ways, each of varying complexity and granularity.
Within Experience Builder, you can modify styles that are specific to the template and therefore can’t be shared between sites. The options in Experience Builder are the simplest to use and don’t require coding.
  • The Theme panel updates the template with simple, point-and-click properties. This approach is ideal for admins to use.

    Individual component property panels, such as for headers or search, provide additional more specific adjustments in look and feel.

    Note

  • The CSS Editor lets you create custom CSS that overrides the basic styles of template elements. This option is suitable if you’re familiar with CSS and want to make only minor modifications to some out-of-the-box components or template elements.

    With the introduction of theme swapping, any custom CSS you have entered is now tied directly to your active theme. For existing sites, ensure that any desired custom CSS you may currently be using is copied to the newly selected theme. Where custom CSS is necessary, use design tokens for Experience Builder sites in your theme layouts where it makes sense (brandLogoImage, action color, etc) to ease the pain of future updates to the template and themes.

    Note

However, to completely customize the appearance of a template, you need to build your own components.
  • Custom Aura components encapsulate a CSS resource as part of the component bundle, making the components reusable across sites.
  • Content layout components define the content regions of your page and contain components.
  • Theme layout components let you customize the structural layout of the template, such as the header and footer, and override its default styles.