Elementor
🔥 Elementor v4.3 Beta Release 🔥 #37152
Replies: 4 comments 6 replies
|
Now that's what I'm talking about, what a packed release 🙌 |
|
Hi @loucasl! Welcome to the discussion! 🙌 Looking forward to learn from your feedback! 👀 |
|
Very nice! Now I can make good looking dynamic loops with the accordeon widget 🤩 I'll try to test it more later. |
|
Hey @toineenzo, welcome back! 💪 Thank you, let me know how it goes! 🙏 |
|
Hi, I’m really happy with the latest update. I was able to cross several things off my list thanks to it. The reason I’m writing this now is that although I’ve been testing Elementor V4 since the alpha versions, until now it was mostly just testing. This is the first time I’ve tried to build an entire client project in V4 (that was the plan, at least), and I’ve run into several issues that made it difficult to work with. Overall, I really like V4 and I’m looking forward to eventually working exclusively with it. However, I think some of these issues are important to address because they currently limit what we can do in real-world projects. 1. HTML tags inside Paragraph and HeadingThe biggest problem I encountered was the inability to use HTML tags inside Paragraph and Heading elements. I very often need to have different colors, font sizes, or other formatting within a single heading or paragraph (as shown in the screenshot). Another common use case is having an icon directly after the text, for example an external-link icon or an arrow, where the icon should stay inline with the text and move naturally with it when the text wraps onto multiple lines. Currently, I don’t see any way to achieve this in V4, so I had to switch back to V3 for these cases. I understand that this is related to the Atomic approach, but in practice this is a significant limitation. There are many situations where we simply need to style only part of the text or place an inline icon within the text flow. Could you please explain how these use cases are supposed to be handled in V4? For example, how should I create a heading with differently styled words, or text with an inline icon at the end that remains part of the text flow when it wraps? 
2. Different heading levels and lists in articlesAnother question is how content-heavy pages or articles are supposed to be built. For example, if someone is creating an article that uses different heading levels (H1, H2, H3), bullet lists, numbered lists, inline formatting, etc., what is the recommended V4 workflow for this? I understand the Atomic approach for building page layouts, but content editing is a different use case, and I’m not sure how this is currently supposed to work in V4. 3. Components custom CSSI’ve been looking at the roadmap and I’m happy to see that Components will receive more options and functionality. However, please don’t forget about custom CSS. For example, I had an animation applied to a component and wanted to set a different animation delay for each individual instance. In V3, I could easily do this with custom CSS. In V4, this is currently not possible in the same way. This is quite a significant limitation for more advanced designs and animations. 4. Gradient + border on buttonsThis seems more like a bug. If I create a button with a gradient background and a border, the gradient does not start from the beginning of the button as expected. It appears to be shifted/clipped incorrectly. I was able to work around the issue with the following CSS: white-space: nowrap;
background-origin: border-box;However, I believe this should work correctly without requiring custom CSS. I’ve attached a screenshot showing the issue. 
5. Entrance animations appear to be buggyI haven’t noticed any recent changelog entries addressing the animation issues, but I had to stop using the built-in V4 animations and recreate them myself using JavaScript and CSS. The reason is that the V4 animations currently behave inconsistently. The client actually reported that some elements were visually flashing/jumping during the animation. For a production website, this makes the built-in animations difficult to rely on. 6. Entrance animations conflict with hover effectsAnother issue is that entrance animations seem to conflict with hover effects, particularly For example, if I set an element to 50% opacity, but it also has an entrance animation, the animation can override the element’s final opacity and bring it back to 100%. The same happens with buttons. If I have a button with a hover In other words, the animation and hover states are competing with each other. I hope this feedback is useful. I’m genuinely looking forward to V4 becoming the standard workflow, because I really like the direction you’re taking with it. I would just like to understand how some of these use cases are expected to be handled in V4, and hopefully see some of these limitations and animation issues addressed before V4 becomes the default for production work. Thank you for your response. |
|
Hi @contrastxxx! Welcome back! 🙌 Thank you for the detailed feedback, we really appreciate it! 🙏 Answering your questions: 1. HTML tags in Atomic Paragraphs and HeadingsWe know it's important to have this flexibility, and I'm happy to let you know this is something we are working on, and will be introduced in a future release. 😉 2. Content Writing WorkflowWe are working on introducing an Atomic List element, and in the initial phase of researching ways of improving the document writing workflow. We are open for suggestions. Aside from formatting in general, what do you think would be a good workflow for content writing within the Atomic Design approach? 3. Components Custom CSSCan you explain how you applied the custom CSS before, and what exactly is not working for you now and why? From what I'm getting from you, the idea would be to expose Style fields such as the Custom CSS as Component Properties? 🤔 4. Button box-sizing and text wrap propertiesWe will investigate these. But it sounds like some styles are missing at the theme level? Now that we have Default Styles, we could consider expanding them to include the properties you shared. We will discuss this internally! Thanks! 🙏 5. Interactions Conflict with StatesInteresting, thank you for reporting this. We will investigate it! Awesome feedback! 💪 Let us know if you encounter any other issues. 😉 |
|
Thank you very much for the response! I’m really glad to hear that you are working on these things, because I think this kind of flexibility is very important for creative freedom. 1. HTML tags in Atomic Paragraphs and HeadingsI’m really happy to hear that you are working on this. This is very important for maintaining creative freedom and flexibility when working with content. 2. Content Writing WorkflowRegarding the Atomic List, I can’t say exactly what the ideal workflow should be, but I would imagine something similar to the Paragraph element in V3, where we have complete freedom to format the content. Another important use case is articles written by regular users, not developers. For example, a client writes an article directly in WordPress using the standard WordPress editor, and Elementor simply displays that content. I think this kind of workflow should remain possible within V4. 3. Components Custom CSSHaving Custom CSS available as a Component Property would definitely be useful, as it would allow me to fine-tune things with code when necessary. However, my main point was slightly different. For example, imagine I have 6 identical Components arranged in a 3×2 grid. In V3, I could give each individual element a different animation delay — for example 200ms, 400ms, 600ms, etc. Then, when the user scrolled to that section, the elements would appear one after another, creating a nice staggered animation. This is something I used quite often, and currently I don’t see a way to achieve the same effect in V4 because I cannot individually target each Component instance. So for me, the important part is not necessarily having Custom CSS itself, but having a way to individually control each Component instance when needed. 4. Interactions / AnimationsOne thing I noticed was that you mentioned you would investigate the conflict between Interactions and States, but I didn’t see a response regarding the other animation issue I mentioned. The built-in entrance animations are currently still quite buggy for me. I had to recreate them myself using JavaScript and CSS because the elements were sometimes flashing or jumping during the animation, and the client actually reported this issue. Is this something you are also aware of and planning to investigate/fix? |
|
Thanks for the follow-up @contrastxxx! 🙏 2. Content Writing WorkflowI think some clarification is in order. The Atomic Paragraph is not the same thing as the Text Editor. It's literally one In this case I think what you are looking for is more of an HTML element, maybe? Also, regarding the content from the block editor. That still remains working on the same way it works with V3, the post content renders what the user writes within the block editor. Unless you're saying you would like to see Elementor behaving like the block editor while typing content? 3. Component Custom CSSGot it! You can still do this, although it's not as easy as editing individual elements. Components are like Global Widgets, it's not exactly the same thing. But I understand how this could be useful. Still an interesting idea to allow local changes to component styles. Although we are working on component variables that could cover your needs. As a temporary workaround you can probably use the
&:nth-child(2) {
animation-delay: 200ms;
}
&:nth-child(3) {
animation-delay: 400ms;
}
See if that works for you and let me know. Components are wrapped in a 5. InteractionsWe haven't experienced the issues you reported. So we are going to investigate them as well. 😉 |
|
A big thank you für implementing And perfect timing for the accordion, so i can finally redesign my FAQ sections. |
|
Hey @alexanderpankart! Welcome to the discussion! 🙌 Great to hear that! 💪 Let us know how it goes! 😉 |
Uh oh!
There was an error while loading. Please reload this page.
Hey Beta Testers!
Version 4.3 is here, allowing you to connect Elementor sites to external AI tools through an official MCP, so the AI tools already in your workflow - Claude, Codex, Cursor, or others - can build directly inside Elementor.
Alongside that, the Atomic Editor keeps expanding with deeper Loop control and Atomic Elements.
Make an impact by testing version 4.3 and trying out these new features:
Looking forward to your thoughts and feedback on this update!
Connect AI tools to build and manage your site with Elementor MCP
Elementor 4.3 officially introduces MCP support, opening Elementor up to AI tools you already use. The MCP exposes Elementor's capabilities through WordPress AI Abilities, so any compatible tool - Claude Code, Claude Desktop, Codex, Cursor, and others - can connect and build directly inside your site with native Elementor structure.
What can connected AI tools do with the Elementor MCP
Once connected, an AI tool can work with the core building blocks of an Elementor site:
Elementor-native structure, built to stay in your control
Everything generated with the MCP is saved as a draft, not published, and what comes back is real, editable Elementor structure, ready to open in the visual editor and finish by hand if you want to. None of this replaces what you already do, the Elementor Editor stays exactly as it is and using the MCP is entirely optional.
What you hand off stays the same too. Clients and teammates still get real Elementor structure they can open and edit in the Editor, not code they don't understand.
If the Editor and an AI tool try to modify the same page at the same time, Elementor detects the conflict, notifies you, and gives you the option to refresh or discard changes before continuing.
Part of your existing workflow
Your AI tool can already connect to tools like Figma, Google Drive, Notion, WhatsApp, and many others. Now it can bring what it finds there straight into Elementor: a design from Figma, a doc from Drive, a brief from Notion or a WhatsApp message, turned into real Elementor content.
If your AI tool can read it, whether that's a spec, a set of comments, a screenshot, or a whole file, it can carry that context straight through into the page, section, or component it builds for you. You keep working the way you already do across your other tools, and Elementor becomes the place that context lands directly.
Connecting to the Elementor MCP
The new "Elementor MCP" page, under Elementor in the WordPress dashboard, lets you connect external AI tools with Elementor. Access is limited to site admins, and the connection is per site.
You'll be able to choose from Claude Code, Claude Desktop, Codex, Cursor, or "Other" for any additional MCP-compatible tool.
Connecting is quick: generate and copy a setup prompt for your AI tool of choice, and Elementor creates the required application password in the background, including it in the prompt for you. If you'd rather handle it yourself, a manual configuration option is available too.
The cost of using the MCP is based on whatever your AI tool of choice charges you. Elementor's pricing follows the existing plan structure: basic sections and features can be generated for free, and Pro elements require a Pro plan.
How to test it
Filter, alternate, and handle empty states in Loops [Pro]
Atomic Loops take another step forward in version 4.3, with more control over which content shows up and how different results are presented.
How to test it
Set default styles for every HTML tag from one place
Default Styles gives you centralized control over how each HTML tag supported by the Atomic Editor is styled across your site. Instead of setting styles piece by piece, you can define and manage defaults from a dedicated tab in the Design System panel, so consistency across your site becomes something you set once rather than something you re-check on every page.
The tag list covers the range you'd expect to style site-wide - headings, paragraphs, links, buttons, and structural tags like header, section, article, and aside, with complete style controls available for each one.
How to test it
Build with new Atomic Accordion and Background Video
The Atomic Editor grows with two new Atomic Elements: Accordion and Background Video. Both share the same principle as the rest of the Atomic Editor: every part of the element is its own controllable piece, so you style each one on its own instead of treating the element as a single block.
Accordion
Build expandable and collapsible content sections without reaching for a workaround. Clicking a header expands or collapses its content, giving you a clean way to organize FAQs, feature breakdowns, or any content you want to keep tucked away until a visitor wants it.
Each accordion item breaks down into a header, with its own title and an SVG icon you can style independently, and a content area. The content area starts empty, and you can nest anything inside it, from a single paragraph to a full layout of other elements.
Background Video
Place a locally uploaded video in the background of a section instead of a static image. The content area, the play button, and the pause button are each their own controllable piece, so you can style the controls independently from the video itself.
Visitor-facing play and pause controls are included, so visitors aren't stuck with a video that's forced to run.
How to test it
Additional Updates
More Improvements
Free version
Pro version
How to install the Beta version and activate atomic features
If you still haven't enabled beta testing in Elementor and activated atomic features, please follow these steps:
This will get you set up to test the new atomic features on Elementor 4.3.
Notes
As we make changes to our GitHub in an effort to keep it organized, improve the way we deliver information to you, and our ability to review your feedback, please follow the instructions below when reporting bugs, or making feature requests:
Designated time for release:
September 22nd, 2026 (estimated).Many thanks for your support and help!
Cheers,
The Elementor Team
All reactions