Pre-Built Themes in Lightning Communities

Pre-built themes in Lightning Communities are a set of ready-made visual designs that let you transform the look and feel of your community portal without writing a single line of code.

A quick note on terminology: Lightning Communities was rebranded as Salesforce Experience Cloud, but the underlying technology, including the pre-built themes feature, remains the same. Throughout this article, you will see both terms used interchangeably.

In this guide, you will learn how to change a theme in Experience Builder, customize layout and branding settings, work with the Hero component, assign multiple layouts, and configure audience targeting using page variations — everything you need to make the most of Salesforce community themes.

There are four themes: Stella, Webster, Jepson, and Citizen, which are available to use with any Salesforce Lightning Community templates.

What Are Pre-Built Themes in Lightning Communities?

Pre-built themes are turnkey visual templates that define your community’s color palette, typography, header style, and page layouts. Instead of designing from scratch, you choose a theme, activate it, and customize the details, all within Experience Builder.

Who benefits most: Salesforce admins, community managers, and consultants who need to deliver a polished, branded community quickly.

Pre-built themes are the right tool when you need a fast redesign without a dedicated designer, want to build an MVP community and iterate later, or need a consistent branded look across multiple Lightning community pages.

Available Pre-Built Themes (Stella, Webster, Jepson, Citizen)

There are four Salesforce community themes available to use with any Lightning community template: Stella, Webster, Jepson, and Citizen.

Here is a quick overview of each:

All four themes are compatible with any Salesforce Lightning Community template and can be switched at any time without affecting your existing content.

How to Add and Change a Theme in Experience Builder (Step-by-Step)

Changing a Lightning community theme takes under a minute. Here is exactly how to do it:

1. Open your community in Experience Builder.
2. In the left sidebar, go to Theme (or navigate to Settings) → Themes.
3. Click Change to open the theme gallery.
4. Browse the four available Experience Cloud themes and select the one you want.
5. Click Activate to apply it immediately.

Easy to Customize: Key Salesforce Experience Builder Theme Settings

Once a Lightning community theme is active, every element is adjustable from the Properties panel. Hover over any component on the canvas and click it to open its properties.

The Compact Header properties box, for example, gives you a lot of control. Here is what you can configure:

• Background image: Set a custom banner or brand image for the header.
• Link and menu colors: Align navigation colors with your brand palette.
• Theme layout: Adjust header width and height, set logo width, and control spacing.
• Notifications, App Launcher, User Profile Menu: Enable or disable each of these header elements individually.
• Search component: Choose your preferred search component and set its display style (collapsed (icon only) or expanded (visible search bar).

These Salesforce Experience Builder theme settings give you full control over the community header without touching any code. The same properties-panel approach applies to other theme components throughout the page.

Building Sites Without Code: The Power of Experience Builder in the Salesforce Experience Cloud

Salesforce provides a set of cloud-based resources so you can build your own applications and websites easily, cheaply, and fast. This is where Salesforce Experience Cloud comes in.

Theme Swapping Functionality: What Stays the Same

One of the most practical advantages of pre-built themes is that you can swap between them freely. Each theme saves its own customizations independently, so switching from Webster to Jepson and back preserves the settings you configured in each.

Nothing on your pages breaks. Components, data, layouts, and navigation all remain untouched when you change themes in Experience Builder.

After switching a theme, run through this quick checklist:

• Verify navigation menus still display correctly.
• Check that your logo and header image are rendering as expected.
• Review the homepage Hero component visibility (if applicable).
• Test the search component style (collapsed vs. expanded).
• Preview on mobile to confirm responsive layout.
• Review any custom CSS that may have been written against theme-specific class names.

Hero Theme Options

All four pre-built themes include an optional Hero component, available for the Home page. The Hero component in Experience Cloud adds a full-width banner section with customizable background, layout, and content, which is ideal for making a strong first impression.

How to enable the Hero component:

• Open Theme → Properties and toggle Hero on. It will appear at the top of your Home page.

Once enabled, you can choose between two Hero component function types in the Experience Cloud:

• Search: Displays a prominent search bar inside the Hero. Best for knowledge base or self-service communities where users need to find answers quickly.
• Call to Action: Displays a headline with up to two configurable buttons (primary and secondary).

If you select Call to Action, two additional settings sections appear:

• Primary button: Set the button text, destination URL, and color.
• Secondary button: Set the button text, destination URL, and color.

Both Hero types also allow you to customize the background image, overlay color, headline text, and overall layout through the Properties box.

Related blog: How to Use Global Search in Salesforce Experience Cloud

Multiple Layouts in Experience Builder: Home vs. Other Pages

Three of the four themes (Webster, Jepson, and Citizen) come with two distinct theme layouts in Experience Builder: one designed specifically for the Home page, and a second for all other pages.

The Home page layout typically features a full-width Hero section and a more open, visual structure.

Inner page layouts are more content-focused, with narrower columns and denser information architecture.

To take advantage of multiple layouts, follow these steps:

1. In Experience Builder, navigate to Settings → Theme.
2. Select the layout you want to assign (Home or Default).
   
3. Open the Page properties for each page and assign the correct theme layout.

Audience Targeting Limitation (and Workaround with Page Variations)

The one current limitation of pre-built themes is that theme components do not natively support visibility rules, and you cannot directly apply audience targeting to a theme layout the way you can with individual components.

The good news: you can achieve the same result using Page Variations in Experience Builder. Here is the three-step workaround:

1. Create a custom theme layout: Go to Settings → Theme → Configure and create a new custom theme layout.
   
2. Create a new page variation: Navigate to the page where you want audience-specific theming and add a new page variation.
3. Assign the theme layout to the page variation: Open Page properties for the new variation and assign your custom theme layout to it.
   

You can then apply audience rules to the page variation itself, giving you full control over who sees which visual experience, even without native theme visibility settings.

Best Practices & Common Pitfalls

Keep this checklist handy when configuring or changing pre-built themes in your Lightning Community:

• Always preview the community on both desktop and mobile after applying a new theme.
• Test your search component style (collapsed vs. expanded). Both should be readable and accessible.
• Confirm navigation menus and dropdown colors are readable against your chosen header background.
• Review Hero component settings for each page variation if you have audience targeting set up.
• When using two layouts (Home + Default), audit every page to confirm the correct layout is assigned.
• Avoid writing custom CSS that targets theme-specific class names; these may change when you switch themes.
• Check logo dimensions: each theme has different logo width constraints in the Compact Header properties.
• If you are using Community Notifications, App Launcher, or User Profile Menu, re-enable these explicitly after activating a new theme.
• Use Page Variations (not Audience targeting on theme components) for persona-specific visual experiences.
• Document which customizations belong to which theme if you are actively comparing multiple themes during a redesign.

Need Help with Your Salesforce Experience Cloud Site?

Pre-built themes in Lightning Communities make it possible to launch a visually polished Experience Cloud site faster than ever, but getting the details right (layouts, audience targeting, Hero configuration, branding) still takes expertise.

Advanced Communities specializes in Salesforce Experience Cloud design and development. Whether you are starting from a pre-built theme or need a fully custom portal, our team can help you build, optimize, and scale your community.

Ready to get started? Contact the Advanced Communities team or explore our solutions on AppExchange to see how we can elevate your Salesforce Experience Cloud site.