The Elementor Editor Class Manager

Styling elements in the Elementor Editor is based on using classes. For general information about creating classes, see Classes in Elementor. 

After you create a class, it is listed in the Class Manager.

The Class Manager

The Class Manager lets you control classes in several ways:

• Rename Classes
• Delete Classes
• Reorder classes

Access the Class Manager

In order to edit classes you need to access the Class Manager.

To access the Class Manager:

1. Open the Elementor Editor.
2. Select an element.
   
   The element options appear in the panel.
   
3. Click the Style tab.
   
4. Click the Class Manager icon.
   
   Note

   You must save your page before opening the Class Library.
   
   The Class Manager opens.

Rename a class

1. Open the Class Manager.
2. Hover over the name of the class you want to rename.
   
3. Click the ellipses by the class name.
   
4. Select Rename from the dropdown menu.
5. In the text box, type in the new name for the class and hit Enter. 
   
   Note

   The name will change in all elements that have this class.
   
   
6. Click Save changes.

Rename a class from the element options

You can also rename a class from the Style tab of an element.

To rename the class: 

1. Select an element that contains the class you want to rename.
   
2. Click the Style tab.
   
3. Locate the class in the Classes text box.
   
4. Click the ellipses by the class name.
   
5. Select Rename from the dropdown menu.
6. Enter the new name in the Classes text box and hit Return.

Delete a class

1. Open the Class Manager.
2. Hover over the name of the class you want to delete.
   
3. Click the ellipses by the class name.
   
4. Select Delete from the dropdown menu.
   
5. Confirm your decision by clicking Delete in the delete window.  the text box, type in the new name for the class and hit Enter. 
   
   Warning

   This will change the style of all elements using this class.
   
   
6. Click Save changes.

Rearrange Class priority

The order in which the classes appear in the Class Manager determines their priority. Classes that are higher up in the priority list take precedence over those further down. For example, if you have am element that contains two classes –Main_txt which sets the font size to 16PX and Other_txt which sets the font size to 12PX, if Main_txt is above Other_txt, the font size is 16 PX and vice versa. 

To rearrange the class priority: 

1. Open the Class Manager.
2. Hover over the class you want to move in the list.
   
3. Click and hold the handle to the left of the class name. 
4. Drag the class to reorder it.
   In the example below, the Heading element has two classes – ElementBackground and ContainerBackground, each with their own background color. Changing their order in the Class Manager, changes which color takes priority.