With the introduction of V4 the Elementor Editor is taking great strides in improving our UI, making website design faster and more efficient than ever. While using V4, you’ll notice a number of changes.
Introducing classes
The biggest change in V4 is the use of classes. An element’s look and feel – its style- is determined by its classes. Every element has at least one class, called local, which is used to style that individual element while more classes can easily be added. Classes increase efficiency by allowing creators to reuse styles across their entire site.
Example: Alex is building a website and wants to use a standard font for most of the website text. They create a class called Text that uses black text with a 12 point sans serif font. Every time they create an element, they just have to add the class Text and the text will be set to this style.
For more information about classes see:
- Classes in Elementor
- The Elementor Editor Class Manager
- Element states
- Prioritize conflicting styles
Standardization
Elements in Elementor Editor V3 used three tabs to control their content and style – Content, Style and Advanced. In V4, the number of tabs was reduced and standardized. Every element now has two tabs – General and Style. The General tab is customized according to the element’s needs while the Style tab is standardized across all elements. This allows you to easily unify your site’s look and feel.
For more information about V4 styles, see:
- Style tab – Layout
- Style tab – Spacing
- Style tab – Size
- Style tab – Position
- Style tab – Typography
- Style tab – Background
- Style tab – Border
- Style tab – Effects
- Adding a layered background
More responsive controls
In Elementor Editor V3, responsive controls are found in the options panel and are applied to a limited number of options. In V4, responsive editing is done by switching to a responsive mode.
For more information about responsive editing, see:
Summary
The chart below summarizes the changes you’ll see in V4 elements:
| Feature changes | Elementor Editor V3 | V4 |
| Element options | Three tabs available in the panel – Content, Style and Advanced. Options customized per element. | Two tabs available in the panel – General and Style. All Style options standardized. |
| Classes | Global settings created via Global colors, fonts and widgets. | Elements are edited and standardized by using classes. |
| Class Manager | No Class Manager | Class Manager allows users to edit and prioritize classes and styles. |
| Class indicators | No class indicators | Class indicators let users understand when class settings conflict with one another and which take priority. |
| Layered backgrounds | No layered backgrounds | Users can create mutli-layered backgrounds |
| Gradient backgrounds | Limited to two colors | Users can add an unlimited amount of colors to gradient backgrounds |
| Box shadows | No layered box shadows | Users can create mutli-layered box shadows |
| Sticky elements | Elements can stick to the top or bottom of the the page | Elements can stick to the top, bottom, right, or left of page. |
| Responsive editing | Responsive editing done from the options panel. Only marked options can be edited for responsive modes. | Responsive editing done using the top editor panel. All options can be customized for responsive editing. |
| HTML code | Allowed in some widgets | Not allowed |
| Reset to default | Many options can be reset to their default by clicking a reset button. | No reset to default available. |
