Working with colors

An essential aspect of your design is Colour. Style Kits provide an intuitive method for managing color, through panels that are added in the Theme Style Editor. Here is a useful article that explains the Color System we are using in Style Kits.

⚠️ Any color that has been manually added on individual elements/widgets, will always override the Style Kit colors. For the Style Kit colors to work, make sure that the elements do not have inline styles applied on them.

The Accent Colors Panel

In the Elementor Theme Style Editor, head over to the Accent Colors section at Style Kits Panel. There you will find the color pickers for defining the primary and secondary accent colors.

Primary Accent

This is used as the primary link color. Icons and dividers also inherit this value.

☝🏻 You can set a different link color if you want, under the Typography panel. This way your primary accent color will only apply on your icons. Importantly link & link hover color under the default Typography panel will always take precedence over our Primary Accent color.

Secondary Accent

The secondary accent color will apply on your buttons, and will replace the default Elementor button color.

☝🏻 If you select a different color for your buttons under the Buttons panel, it will override the Secondary accent color.

You can customize the color of each individual button size, through the Buttons panel.

Background Color classes

Another highly useful panel for managing colors (specifically section and column background colors) is the Background color Classes panel.

This panel allows you to apply light and dark background colors on your sections with the help of simple classes. Read in detail how this works in this article.