Elementor
Feedback on Elementor v4 Alpha — Building a Scalable Style System #32293
Replies: 14 comments 6 replies
-
|
Hello @julianwitzel! Thank you for sharing your feedback about the Editor V4! We really appreciate it! 🙏 Please note, Editor V4 components such as Global Classes, Variables, and Atomic Elements are currently not compatible with existing V3 components, such as the Site Settings, Nested Elements, and other widgets such as the WordPress Menu, and HTML widgets. For these integrations, please submit separate Feature Requests. We understand users are eager to have complete compatibility between the two versions, and may miss some of the existing features in V3. The goal with this forum is to gather feedback about the new features introduced with Editor V4, to understand your experience with these new components, and ensure a good workflow. As Editor V4 evolves, we will be introducing new capabilities and integration, or even replacing functionalities currently available in V3 such as Global Colors and Fonts being replaced by Variables. As a gentle reminder, we also ask to keep the discussions focused on one topic at a time, to help us track them and provide feedback correctly. Please, next time, ensure you follow these guidelines described in the Feedback Form. I will answer each point on a new comment so we can keep things organized, and we would appreciate your help in keeping things organized as well going forward! Kind regards |
Beta Was this translation helpful? Give feedback.
-
A: Yes, we are aware Div Blocks currently have default paddings of |
Beta Was this translation helpful? Give feedback.
-
A: This is actually something we introduced in version 3.30, and you can already add CSS variables as custom units in any field that accepts numbered values. All you have to do is to click on the field's unit, select the pencil option, and then type your custom CSS variable. You can see this in action in the video below: v4.custom.units-optimized.mp4Hope that helps! 🙂 |
Beta Was this translation helpful? Give feedback.
-
A: I assume you are talking about the Text Editor widget. In this case this will not be possible. The Text Editor widget uses the TinyMCE Editor, built-in WordPress as the default text editor. Manipulating content inside this widget would cause too many incompatibility problems, not to mention it would open up the possibility to introduce possible vulnerable points. However, we do have plans to introduce a Rich Text / WYSIWYG Atomic Element in the future, that will allow users to apply semantic markup. For now, Atomic Elements are single purpose widgets, meant to be used combined with other widgets. This will become more evident once we introduce Components. We do not plan to implement V4 classes on V3 components for the time being due to backward compatibility. |
Beta Was this translation helpful? Give feedback.
-
A: Thanks for raising this issue. 🙏 |
Beta Was this translation helpful? Give feedback.
-
A: As indicated before, the Global Class system will only be available on Editor V4 atomic elements. For the time being we have no plans to include this system on V3 widgets. We may change this in the future, or most likely will be introducing new ways of achieving the same designs with Atomic Components. For the Off-Canvas widget, the Advanced tab is not available intentionally, since it applies to the wrapper tag of the Off-Canvas widget, which is hidden by default. We do not intend to change V3 elements to ensure Backward Compatibility. Updating to Editor v4 should not break any site. Instead users will most likely have an option to convert existing V3 widget into V4 atomic elements and components. |
Beta Was this translation helpful? Give feedback.
-
A: These are great ideas! Thanks for sharing them. I don't believe we will be able to introduce an option to edit SVGs directly in the editor, as this would create a potential risk to security. However, for adding links, we have considered this approach, but we opted to avoid the complexity. In this case you can wrap your SVG atomic element with a Flexbox or Div Block element, and add your link. Keep in mind the goal of atomic elements is to have only one element per widget, accessible directly by the class system. Wrapping the SVG widget with a link would defeat this purpose, because then you'd be targeting the |
Beta Was this translation helpful? Give feedback.
-
A: Please refer to my answer here: https://github.com/orgs/elementor/discussions/32293#discussioncomment-14212394 |
Beta Was this translation helpful? Give feedback.
-
A: Super interesting ideas and suggestions! Thank you for sharing these! 🙏 |
Beta Was this translation helpful? Give feedback.
-
A: Another great idea! 💪 editor.v4.base.classes-optimized.mp4Having a way of doing this in a Global Space such as the Site Settings would be a great way of handling the base styles of all atomic elements! Thanks for sharing this with us! 🙏 |
Beta Was this translation helpful? Give feedback.
-
A: Please submit a Feature Request for this point. This is not part of Editor V4. Thank you. |
Beta Was this translation helpful? Give feedback.
-
A: Currently with the Atomic Button element this happens automatically under the hood. If no link is added to the button, the element will render with the Is there a reason why you would prefer this option to be available? Can you share some examples? |
Beta Was this translation helpful? Give feedback.
-
A: You can currently access the Class Manager from the top of the Unified Style tab as illustrated in the screenshot below: 
We do have plans to have a similar interface for Variables as well. I assume you want to have a button in the Top Bar as well, is that correct? 
That's also a great idea! Thanks for sharing it! 🙏 |
Beta Was this translation helpful? Give feedback.
-
I came here to post about this exact thing. I went straight to the layout options to try to set the default padding to 0 but it's not there. That should definity be an option. However, I'm not sure it would fix my issue with that setting. It's overriding framework settings because of it's specificity. These things need to be in a layer, or have the ability to disble them completely instead if just setting it to 0. That way they can easily be overwritten by frameworks. If I can't easily implement core framework or even ACSS then this would be a huge fail! |
Beta Was this translation helpful? Give feedback.
-
|
Hi @nicholaszein thanks for the reply. After some further investigation, I've found that the default padding etc, is a specificity issue. The classes used for the default styling use child selectors, which raise specificity to 0,2,0 and overwrite any framework styling (ex ".elementor .e-flexbox-base"). If the parent ".elementor" wasn't added, or if the default styling was in a cascade layer, then it wouldn't be an issue. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @rwattner im not sure how this would prevent you from using "frameworks". It's just a matter of increasing specificity in your framework's CSS. As we mentioned before, options to change the default values for this specific case will be added in the future. |
Beta Was this translation helpful? Give feedback.
-
|
@nicholaszein Most frameworks' specificity can't be easily raised without the use of cascade layers, if at all. The most popular WP frameworks included(ACSS, Core, etc). Allowing the default values to be changed doesn't solve the issue. Any value applied using such a specific selector is problematic(overwriting 0px is no different than overwriting 10px). I've been using Elementor since day 1 and have now become proficient with other "more professional" builders that always utilize these frameworks. I've really been looking forward to using them with Elementor because of how massively more powerful/professional it would make the builder. Thanks for taking the time to reply to this. I really do appreciate it! |
Beta Was this translation helpful? Give feedback.
-
|
You've made good points @rwattner! Thank you. I just wanted to make sure I'm covering all bases. Apologies if I sounded defensive. I forgot to explain why I'm asking these questions. So here's why: We use the But this is the time when we can make changes and plan better. So applying minimal styles IS one of our priorities, for once to reduce the size of our output, consequently improving performance, but also to allow our class system to be effective as well. We will definitely discuss this internally and weight all pros and cons. The padding is really only there to facilitate manipulation and ensure separation of elements at a basic level (between other reasons), but it doesn't mean we can't tweak things to ensure more flexibility. This is why we are gathering feedback. To understand all use cases. Thank you again for sharing your use case! 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
@nicholaszein You didn't offend at all! I'm just happy to be able to state my case. All of that makes perfect sense. I guess to sum up my point. It would be absolutely HUGE if there was an "advanced" option to disable this, just like there is in the hello theme. That would be perfect! 🤞🤞🤞 Thanks again for your time! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Description
Summary [Added by Mod]
Note
@nicholaszein said: To ensure we can track the entire discussion, I'm including a summary list of items discussed in this thread. Going forward we will enforce the need to keep only one item per thread to avoid duplicates and to easily track the changes.
var()to size controls.11. Allow variables or Dynamic Content inside the HTML widget.3. Add Heading Classes in V3 Rich Text elements.5. Allow to use Global Classes on V3 Widgets.6. SVG Interaction & Editing.7. Allow to add Global Classes to the V3 WordPress Menu widget [Pro].8. Allow to replace the nested Container inside the V3 Off-Canvas widget [Pro] with atomic elements such as the Div Block.I tested the new editor (v4 alpha) in a staging environment, aiming to replicate the style system we use in Webflow projects. A system like this enables faster builds while maintaining top-tier quality. Below are my findings and suggestions.
1. Default Spacing in Containers
padding: 10px.If not, containers should have no default styles (
padding: 0; max-width: unset;etc.).✅ 2. Variable Support for Units
var(--content-width)).Example: In a
.wrapperclass, allowwidth: var(--content-width).3. Heading Classes in Rich Text
.e-heading-baseclass..e-heading-baseautomatically to all headings within Rich Text.4. Class Caching Issues
Example: Observed with
.wrapperclass.5. Class Usage on All Elements
6. SVG Interaction & Editing
7. WordPress Menu Widget Styling
8. Offset Menu Structure
9. Variable Organization & Modes
color/primary/50to auto-create nested folders (e.g., “color” → “primary” → “50”).lightanddark), similar to Figma. Swapping modes should update all relevant values.--(e.g.,color/primary/50→--color--primary--50).10. Base Class Styling
.e-heading-basefor all H1s).11. Dynamic HTML Widget Content
12. Button tag selection
aorbuttontag.13. Quick Access to Variables & Class Manager
Summary:
These improvements would make Elementor v4 far more capable for large-scale, maintainable design systems, bringing it closer to professional workflows from tools like Webflow and Figma. This would increase both build speed and quality consistency.
Agreement
Beta Was this translation helpful? Give feedback.
All reactions