Brand Your Aura Site

Customize the look and feel of your Aura site using the Theme panel in Experience Builder or develop your own custom components to achieve a pixel-perfect design.

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 component development.

  • 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.

  • The CSS Editor lets you create custom CSS to style elements across your site. This option is suitable if you’re familiar with CSS and want to make only minor modifications to some template components. With theme swapping in Aura sites, custom CSS is tied directly to your active theme.

To customize the appearance of your site completely, however, you need to develop your own custom components. Aura sites support both Lightning web components and Aura components. Where possible, we recommend developing Lightning web components we because they perform better and are easier to develop.

  • Custom Lightning web components and 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.