Background Color Classes
With Style Kits you can make use of easy background color classes and apply dynamic background colors to any section or column. For example, in your layouts, you might have certain sections that use a light or a dark background-color, and you want this to be consistent to all the layouts. Even better, you can control these colors dynamically from the style kits panel, by applying intuitive classes on the Sections (or columns) that you want.
This way, if you want at some point to change the color of your light or dark background color globally, you don't need to browse through your pages and copy/paste styles among your sections to update the colors.
Let's see how this works.
The Background Color Classes panel
In the Elementor Theme Style Editor, click on the the Background color classes panel. The panel will expand and show you tabs that contain the styling information for the light, dark and accent classes.
☝🏻 The Free version of Style Kits includes only the light and dark background classes. The third accent background class is offered in Style Kits Pro.
Light Background
In the first tab you will find the following color controls:
- Background color
- Text Color
- Headings Color
You can apply this style to any section or column by adding the class: sk-light-bg to the CSS Classes field under the Advanced tab of the section or Column. The background color, and the nested typographic elements will inherit the colors that you defined in the Light tab.
☝🏻 Remember to add the class without the dot, so it's simply sk-light-bg instead of .sk-light-bg
Dark background
Apart from sections with light background color, you almost definitely use sections that have a dark background color. In the same logic, the Dark background color option allows you to add color to such sections, with consistency and dynamic site-wide control.
In the second tab of the Background Classes panel you will find the following color controls:
- Background color
- Text Color
- Headings Color
You can apply this style to any section or column by adding the class: sk-dark-bg to the CSS Classes field under the Advanced tab of the section or Column. The background color, and the nested typographic elements will inherit the colors that you defined in the Dark tab.
Accent background
If you are looking for even more flexibility on how you manage surface colors, a third background class is part of Style Kits Pro. You can use it to highlight sections or columns with an accent
