CSS classes in Elementor

Classes let you combine several different elements so that you can apply one style to them without having to code every element separately. 

How to create a simple CSS class

Elementor greatly simplifies creating CSS classes.

To add elements to a class:

  1. Select an element
  2. In the panel, open the Advanced tab.
  3. In the CSS Classes field, enter a CSS class name. 

Note: When creating a class, do NOT add a period before the class name.

  1. Repeat for every element you want to include in the class.

Example: Alex wants to create a site where every week they can change the color of select text. When building the site, Alex labels all the text elements they want to change with the CSS Class – “change-color”.  In Site Settings, Alex adds the CSS:
.change-color {
    color: green;
}

Now, every time Alex wants to change the color of these elements, they just have to replace green with their selected color.

Related articles

Share it on social networks

Was this article helpful?

Related content

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page