Pre-Built Themes in Lightning Communities
Change your community look in one click
With the summer 18 release, Salesforce has introduced new pre-built themes for communities.
Using these ready-made Community Themes you have a great opportunity to change its look with only one click.
There are four themes: Stella, Webster, Jepson, and Citizen, – which are available to use with any Salesforce Lightning Community templates.
![four themes: Stella, Webster, Jepson, and Citizen](https://advancedcommunities.com/wp-content/uploads/2018/06/1-1-1024x645.jpg)
Let’s discuss the top advantages of community pre-built themes.
EASY TO ADD AND CUSTOMIZE
You can easily add or change the theme in the community builder. Go to the “Theme” section or “Settings” – “Themes”, click “Change”, choose one of the four available themes and “Activate” it.
![customize the themes](https://advancedcommunities.com/wp-content/uploads/2018/06/2-1-1024x710.jpg)
And that is not all.
The themes are very flexible, so you can change and customize them according to your needs as much easy as you just added them.
All the settings are in the properties box. You only have to hover over the cursor on the proper component and click on it.
![Compact header](https://advancedcommunities.com/wp-content/uploads/2023/08/3-1.jpg)
In the Compact Header property box you can customize such options as Background image, links and menu colors, and theme layout, where you can set up header width and height, logo width, enable Notifications, App Launcher, and User Profile Menu.
Here you can also choose the search component and its style (collapsed/expanded).
Building Sites Without Code: The Power of Experience Builder in the Salesforce Experience Cloud
![Post image](https://advancedcommunities.com/wp-content/uploads/2023/01/group-1956.png)
![layout](https://advancedcommunities.com/wp-content/uploads/2023/08/4-1.jpg)
THEME SWAPPING FUNCTIONALITY
You can change themes without any impact on the underlying pages, layouts, and components.
You can try different themes and don’t have to worry about the data. All your changes and customizations will be saved automatically in each theme, so it’s easy to jump between themes without losing customizations.
HERO THEME OPTIONS
All pre-built themes are supplemented by the new Hero component.
The Hero component is optional and available for the Home page. You can enable Hero through the theme properties.
![HERO THEME OPTIONS](https://advancedcommunities.com/wp-content/uploads/2023/08/5-1.jpg)
You can also easily customize Hero’s background, layout, and content through the Properties box. It also can be optimized for the Search or Call to Action function type.
![Properties box](https://advancedcommunities.com/wp-content/uploads/2023/08/6-1.jpg)
If you have chosen the Call to Action functionality, you will see two additional sections of settings for primary and secondary buttons configuration. Here you can set up the button’s text, link, and color.
![Call to Action functionality](https://advancedcommunities.com/wp-content/uploads/2023/08/7-1.jpg)
MULTIPLE LAYOUTS
The three themes (Webster, Jepson, and Citizen) come with two unique layouts: for the homepage and for all other pages.
![two unique layouts: for the homepage and for all other pages](https://advancedcommunities.com/wp-content/uploads/2018/06/8-1-1024x483.jpg)
When you use two theme layouts in your community, review assignments and settings.
![assignments and settings](https://advancedcommunities.com/wp-content/uploads/2023/08/9-1.jpg)
AUDIENCE TARGETING
The only one small disadvantage for today is that new theme components do not currently support visibility settings.
![AUDIENCE TARGETING](https://advancedcommunities.com/wp-content/uploads/2023/08/10-1.jpg)
But it is easy to achieve through Page Variations.
You have to follow the next three steps:
- Go to Settings – Theme – Configure, and create a new custom theme layout;
![theme configuration](https://advancedcommunities.com/wp-content/uploads/2023/08/11-1.jpg)
- Create a new page variation;
- Assign created theme layout to this page variation using Page properties.
![](https://advancedcommunities.com/wp-content/uploads/2018/06/12-1-1024x721.jpg)
Experience new interesting features for your community using pre-built themes and make your community better.
Subscribe to our Newsletter
Receive regular updates on our latest blog posts, news, and exclusive content!