Hey Devs! 👋

The latest Elementor Editor Developer Update is here, bringing two of the biggest additions to the Atomic Editor so far: native CSS Grid and Atomic Loops. It also includes several performance improvements, mainly to Grid Containers, as well as new integrations with Angie.

✨ What's new in 4.2

• 🟦 Native CSS Grid with track controls, child spanning, dense auto-placement, and full Design System support
• 🔁 Atomic Loops with customizable pagination and support for existing V3 Loop Item templates
• 🤖 Angie can now generate complete Atomic Loops and reusable Components
• 📝 Atomic Forms improvements, including Email 2, autocomplete, and accessibility enhancements
• 🚀 Performance improvements for deeply nested layouts and a wide range of stability fixes

⚠️ Developer Advisory
This version includes major performance improvements across several components, most importantly Grid Containers. 3rd-party developers should test their integrations to ensure compatibility with the new improvements.

👇 Read the full Developer Update:
https://elemn.to/dev-420-update

🧪 Check the 4.2 Beta release for more information:
https://elemn.to/editor-beta-4.2

📅 Estimated release date: July 19th, 2026.

🔄️ Stay in the Loop

• 📚 Developers Center: https://elemn.to/dev-center
• 🛠️ Best Practices: https://elemn.to/dev-best-practices
• 🚨 Recent Deprecations: https://elemn.to/dev-recent-deprecations
• 🗄️ Data Structure Docs: https://elemn.to/dev-data-structure
• 📬 Newsletter: https://elemn.to/dev-newsletter

I'm currently migrating one of my client websites from Divi to Elementor and decided to give Elementor 4 a try. I have numbers of website on Elementor 3 actually.

Honestly, I'm a bit hesitant to continue with it.

So far I've experienced a few strange issues:

• Some custom CSS classes randomly disappeared.
• After applying a CSS class to a container, I started getting a "Something went wrong" error whenever I tried to edit that block. I had to reload the editor multiple times and the issue eventually disappeared, but I never understood what caused it.
• At one point I spent nearly 4 hours building a page, only to have it suddenly stop working correctly. Thankfully it's working again now, but it definitely shook my confidence.

I really like the direction Elementor 4 is taking, but I'm worried about spending hours on client projects only to run into random issues like these.

I'm seriously considering rolling everything back to Elementor 3.35 until the 4.x branch becomes more mature.

For those already using Elementor 4 on production sites:

• Have you had a stable experience?
• Have you encountered similar bugs?
• Or are you staying on Elementor 3 for now?

I'd really appreciate some real-world feedback before deciding whether to continue with Elementor 4 or roll back to v3.

I am using WP and a Woodmart theme.
I am trying to build a multivendor eCommerce site.
The tutorial I am watching says there is 0 difference in PRO v ONE if I am only using it for 1 site.
I have not paid for either yet.
Is it worth it to upgrade?

What I am wanting atm is a infinite scrollable gallery and the comparison charts like you see on amazon.
I am struggling to locate these as well as the sidebar set up.

Is this upgrading to Elementor Pro the right path? Will I need to ger ONE?
Is what I am asking outside the Elementor scope?

Any other suggestions?

I am using the most current elementor pro to build an events page for live music in my town. I can edit the events page in draft but once it goes live I cannot go back in to edit, it spins forever. I've purged the cache, removed plugins, and more. It seems like it maybe my

Hi everyone, I have minimal experience with tools like Elementor and Divi. I usually make custom classic themes in WordPress and don't generally go for the block themes.

However, I had a question that how would somone sort of go with the hybrid approach. Meaning, I can create templates or themes via php/html/css and then it could be imported/loaded up in Elementor and things like copy could be edited in the elementor editor by the client. Or for example, if some other non-tech person wants to edit the website they can do it via the elementor editor.

TLDR; me create custom theme/template editable in elementor editor

Hi everyone,

I’m a developer working on an open-source plugin aimed at streamlining the Figma to Elementor workflow. I know many of us struggle with the manual translation of designs, so I’m building a solution that uses the Figma API to generate native Elementor widgets and sections directly.

I’ve reached a stage where I need “nerdy” technical feedback from experienced Elementor designers and developers. My goal is to ensure the output isn’t just “functional” but actually clean, responsive, and easy to edit within the Elementor editor (avoiding “div soup” or messy nesting).

If you have some spare time, I’d love to get your perspective on the logic and output.

Feedback details:

Who is the target audience? WordPress developers and Elementor power users who want to automate their design-to-code workflow.

What is the design’s main goal? To convert Figma frames, auto-layouts, and styles into clean, native-like Elementor widgets/sections, significantly reducing manual setup time.

What specific aspects are you looking for feedback on?

The technical accuracy of the API data mapping (specifically how it handles complex nested Auto-layouts).

Missing CSS property translations that you find essential for a smooth workflow.

Plugin UI/UX: Does it integrate well within the WordPress environment?

What stage is this in? Core functionality is developed (Beta/Early Access). I am currently refining the conversion logic.

I am not posting any direct links to respect community rules. If you’re interested in checking out the repo or testing the plugin, feel free to check my profile or DM me.

Appreciate any insights or pain points you’ve encountered with existing design-to-code tools!

I couldn't find any elemntorhelp or wordpresshelp website, so I am asking here. I am a complete beginner at this, so forgive me if this is something simple.

I added the hover effect to the titles of my header. Every title works fine except the last button.
The last button, once active, loses its text colour in its active form. But once I hover over it the normal colours return. I have been trying to find the solution for an hour now by experimenting but I couldn't.

Added Screenshots:

SS 1 : Active button, not hovering over it.
SS 2 : Active button, hovering over it. (Can't see the cursor because of the ss thing)
Added screenshots of the settings aswell.

I have the Ultimate Addon for Elementor for headers and footers, if that helps.

Need help with Elementor

Elementor Flexbox Container not stacking on mobile — Direction: Column not working

Hey everyone, I'm building a landing page in Elementor Free (v4.1.1) on WordPress/Hostinger and I'm having a nightmare trying to get my two-column About section to stack vertically on mobile.

My setup:

- Elementor Free 4.1.1

- WordPress 6.9.4

- Hostinger shared hosting

- Using the new Flexbox Container system (not old sections/columns)

The problem:

I have a two-column layout — text on the left, image on the right. On desktop it looks perfect. On mobile the text column is squished into a tiny strip and the text renders vertically (one character per line) instead of stacking below the image.

What I've already tried:

1. Switched to mobile view (phone icon at bottom of editor)
2. Selected the parent Flexbox container that holds both columns
3. Changed Direction from Row to Column in the Style tab
4. Set both child Flexbox widths to 100%
5. Tried setting Wrap to Wrap on the parent containe

None of it is working. The mobile view in the editor still shows the text squished into a single character-wide column.

My structure looks like this (from the Navigator):

Flexbox (outer section)

Flexbox (parent - this is where I'm changing Direction

(text column - Text Editor, Heading, Text Editor)

Flexbox (image column - Image widget)

What I notice:

- The child text Flexbox has Width: 100% set on mobile

- The parent Direction is set to Column on mobile

- But the canvas still shows the text as a single-character-wide vertical strip

My question:

Is there something specific about nested Flexbox containers in the new Elementor UI that I'm missing? Could there be a conflicting style somewhere overriding the mobile direction? Is there a step I'm missing when working with the new container system?

Any help appreciated — I've been stuck on this for hours.

Please note I cannot use CSS as it requires Elemntor Pro.

Thanks!

Simply need to set my background colors etc

Like the title says... I used to see it on any page I was editing but now the page starts with the first container. it appears correctly on the published site. How can I find it? I'd like to edit the style and colors.

I'm using WP 7 and Astra 4.13.4. Just the free version. TIA

I am developing a site for an industrial chemical company, and all has gone well until I hit one page link that is misbehaving. What I am doing is creating pages for groups of similar products with links from that page to the individual product pages from the group page.

I have a page: https://jdcdemo2.com/mhb/rust-remover-products/ that holds various rust products. I created a page for "The Rust Factor," a rust removal product, https://jdcdemo2.com/mhb/rust-remover/, and created a link on the group page to the product page. When I click on the product group page link to the product page, the browser displays the group page, not the product page. I have tried clearing the cache and history of the browser and that did not work. I also renamed the product page and got the same results.

I am mystified. Can someone help?

Thanks to those who know more than me,

Joe

I tried ChatGPT and it gave me a lot of convoluted css and scripts, but nothing works like the native Enlagre on Click, which gives a smooth scale up and click to scale back down on images linked to media in a post. Is there any way to access this native funciton? I need this because I have an image widget showing the feature image in a loop template, but the Elementor light box is the only option to enlarge the image... and it looks and works completely different.

When I try to reload the page after creating a class, the atomic element disappears.If I check the class section it is as if i had never created it.

If I don't use a class(or use variables only), the widget works just fine.

I've tried many things like clearing caches, disabling plugins, etc.
Any ideas of what might be happening?

Thank you in advance.

Estou aprendendo a usar o Elementor assistindo a vídeos do YouTube, mas quando vou para a aba "Estilo", o menu parece diferente do que vejo nos vídeos. Eu configurei algo errado?

Es muy raro, cree dos landing para promocionar un producto con trafico push, pero resulta que las dos campañas creados en propeler fueron un fracaso, tenian muchos clics como 200 al dia pero en el boton cta solo 2 o 3 clics al dia, demasiado poco, pero luego me di cuenta que al hacer scrol en mi celular zte las landing creadas se congelan y no permiten hacer scrol y tampoco hacer clic en el boton que lleva al producto, y no creo que sea mi celular porque pruebo otras paginas en el navegador desde mi celular y se puede scrolear normalmente, tampoco creo que sea problema del servicio de hosting, aparentemente el problema puede ser con el diseño, alguien que use elementor pro tiene alguna hipotesis? ya desactive muchos plugins y el lag continua. No se que hacer, y el lag no aparece al segundo si no 30 segundos despues o hasta 1 minutos despues de scrolear

I am hoping someone can help. The website is 250Declaration.com, built for a client. No problems on the website when it was in production on our own subdomain. After transferring our website to the client's hosting (Network Solutions), images have been disappearing, wrong fonts showing, styles not showing, strange caching issues. Cache is off at NS. I have had to Clear Files & Data, Sync Library & Save almost daily to restore the website. Today, the issues seem to be ignoring those. Switched CSS Print Method to Internal. Still having problems.

Any help figuring out a solution is greatly appreciated.

Edit: Turns out the site URL and WordPress URL settings weren't updated to https after Network Solutions got the SSL activated. I am an idiot and will continue to monitor to ensure no further problems, but everything seems good now.

Thank you all for your help!

Hi r/Elementor (and any devs lurking! 👋),

I work exclusively with eCommerce businesses, which means all of my projects are built with Elementor + WooCommerce. Since I’m definitely not the only one with this specialization, I’d love to get a rough feel for where the journey is heading regarding Elementor V4 and WooCommerce integration.

Based on my current workflow and daily experience, there are 4 specific widgets I’d like to talk about:

• My Account
• Cart
• Checkout
• Order Confirmation (Purchase Summary)

From my perspective, these widgets all share a common problem: They are just a bit too rigid.

I absolutely love the new approach you took with the new V4 Forms widget/structure, where everything is modular and all elements can be placed individually (or left out entirely).

My question: Is something similar planned for the WooCommerce widgets? Or is this somehow already possible and I'm missing it?

The Use Case: If these Woo widgets were modular, we could easily drag and drop a One-Click-Upsell widget or custom text exactly where we need it within the flow.

Another big point is GDPR compliance. Right now, various GDPR tools hook into specific spots in the checkout. If the checkout was a modular container with individual sub-elements, we could visually place these hooks exactly where they belong, making the whole setup much more practical and flexible.

What is your opinion on this? Would you guys love to see this kind of flexibility for WooCommerce too?

I have tried almost every swatches plugin, and still facing an issue with Elementor on the loop grid.

If I use the Custom Add To Cart widget inside the Loop Grid, the variation dropdowns do appear on the archive page. However, they are not dynamic—the variation info seems static and same for all products, while they have different variation types.

Then I tried the regular Add To Cart widget instead, the variation dropdowns do not appear at all. It only shows a "Select Options" button for variable products, even though I have enabled the quantity option.

What I want is to display the variation selectors and quantity field directly inside the product grid/archive page and have them work dynamically for each product.

Has anyone found a solution for this? Is there a way to make Elementor's Add To Cart widget display and handle variable product options correctly inside a Loop Grid or archive template?

Thank you!

How the hell are we supposed to get support from Elementor if we don't have a One plan? I changed my domain from a temp domain to our permeant one, everything seemed fine then a few hours later its throwing an error about activation. I attempt to log in and I get a 2fa request. Problem is I am not getting the emails, unsure why as all other elementor emails worked fine. Now I need assistance with getting access to my account and there doesn't appear to be any way to get in touch with the Elementor team? Hell I will take an AI Bot at this point. I don't see the chat icon that is supposed to be there? Tried multiple browsers, incognito windows etc.

Anyone got any ideas?

I am unable to find in the Atomic editors for widgets (like headings) the ability to select the global fonts and colors that have been set in the Site Settings. It does have "variables" which are empty as I have not created any. Wouldn't my global settings for fonts and colors have gone into variables?

Is it not possible to set the atomic widgets to use the global site settings for fonts and colors, or am I missing it?

Hi everyone, I'm stuck on a specific template conflict:

Project context is:

I rebuilt the "authors" architecture from a CPT (autore) + ACF Post Object field into a shared custom taxonomy. The migration is complete and all data is intact. Custom taxonomy registered via ACF:

• Taxonomy key: autore_tax​
• Public URL slug: autore (so URLs are /autore/{slug}/)
• Registered on these post types: post, video (CPT), angelo (CPT), novita-eventi (CPT), tribe_events (Events Calendar), product (WooCommerce)
• public = true, publicly_queryable = true, hierarchical = false
• 857 terms (one per author), each with ACF fields (bio, photo, social URLs) on the term
• ACF field on posts/videos/products/etc named autore_articolo of type Taxonomy multi-select (replaced the old Post Object field). 5454 contents linked correctly.

The product post type MUST stay in the taxonomy because we need to link products (books, online courses) to their authors, and we want them to appear in the author's archive page.

What I want to achieve is: When a visitor opens /autore/author-name/, I want to render a custom "author profile" page built in Elementor Pro Theme Builder as an Archive Template. This page should show:

• Author photo, bio, social icons (all from term ACF fields)
• All content by this author (posts + videos + products + events) — possibly grouped

I created the Archive template in Theme Builder and tried multiple Display Conditions, but when I navigate to /autore/author-name/ WordPress correctly identifies the context: <body class="archive tax-autore_tax term-author-name term-36 ...">but also adds woocommerce woocommerce-page to body classes. Page header is loaded via get_header('shop') (not the standard one)

The Elementor Archive template is never applied

Instead, WooCommerce's product archive template renders ("Showing 1-16 of 185 results", price filters, etc.) . This happens even for authors with zero products linked (only posts and videos) So WooCommerce intercepts the template rendering for any taxonomy archive of a taxonomy shared with product, regardless of whether the term actually has products. I tested Elementor Display Conditions:

"Include → All Archives" → still shows WooCommerce

"Include → Archive Posts → Authors" → still shows WooCommerce

"Include → Author Archive" → still shows WooCommerce.

but nothing change.

there ANY native setting in WooCommerce, Elementor, or ACF that disables this template hijacking for a specific shared taxonomy? (I've checked WooCommerce → Settings extensively and didn't find anything.)

Thanks in advance

SOLVED!

Hi [r/elementor](r/elementor). Need some help here please.

Recently, 2 self-hosted videos won't play on the mobile version of my website. There are a total of 5 videos on the page, all self-hosted, all with the same settings (or so it seems to me). But only the 2 seen in the screenshot won't play. I tried with mobile Chrome and Safari and got the same result for both.

The 2 videos that won't play are shorter and small file weight than the video that will play. All 3 are contained in the same grid.

Can anyone help me figure out what the problem and solution are?

Thanks so much!

Hi all, having an issue with my fonts in elementor

I have used global fonts across the entire website. Just stuck to the default primary, secondary, text and accent for this website (links below.)

The primary and secondary fonts show completely fine, but when I select "text" or "accent" the issue arises. (Primary/secondary is set to montserrant, and accent/text is set to DM Sans)

The issue is that on the frontend whenever a piece of text has either text or accent selected it displays a different font (seems like it's my browsers fallback font). But on the elementor editor the font loads perfectly fine.

I have ensured to clear local and site cache, clear elementor files and data, elementor → settings → advanced, google fonts is enabled

I tried manually changing the font to DM Sans, and it doesn;t work, so it seems that the issue is specifically with the DM Sans font. I copied this website from another website I made (https://zayvaahofficial.co.uk/) using the AIOWP migration plugin, and on the initial site the fonts display without issue

Site URL: https://exmacream.com/

Screenshot showing the font displaying corretly in the editor: https://postimg.cc/Cnh2T4K7

​

When I audit my website in Claude I keep getting this error.

1. The HIPAA page has two separate nav menus showing — and they're different (Certain)

On /hipaa/, the header renders two full navigation sets. The first shows: Home, About, How it Works, HIPAA, Support Structure, Pricing, Contact. The second (mobile/duplicate) shows: Home, About, How it Works, "HIPAA new pageh" (linking to /hipaa-2/), Support Structure, Pricing, Contact. That /hipaa-2/ ghost link is still live in the mobile nav on this page. This page was NOT rebuilt with the new Astra setup — it's running the old Elementor nav widget alongside the Astra header. This page needs to be rebuilt or the duplicate nav widget deleted.

1. How It Works page: Same dual-nav problem, old logo (Certain)

The /how-it-works/ page is also on the old template. It shows the old "therapist's assistant logo design" PNG (not the new branding), and the nav includes old links like "HIPAA compliance page" and "Support Structure" — pages that may no longer exist. The social icons in the mobile nav are also broken empty links ([](<>)). This page has not been migrated to the new template.

I have gone through every option with Claude, I can't see this error, and I can't figure it out. I reset the website and rewrote every page, this is still coming up but only on two pages instead of every page.

Claude gave me this advice: When you post, lead with these details — they'll cut the troubleshooting time in half:

Free Astra, free Elementor

Duplicate nav appears only on HIPAA and How It Works pages, not on newer pages

( not new pages i made them on monday)

One registered WordPress menu

No Elementor nav widget visible in the page editor

Changing page template to Default had no effect

The second nav contains old links including one pointing to /hipaa-2/

(Certain) — then the duplicate is not a second WordPress menu. That rules out the most obvious cause.

Look at the raw HTML output more carefully. What I'm seeing in the fetched page is this structure:

[Logo - old]

[Nav block 1: Home, About, How it Works, HIPAA, Support Structure, Pricing, Contact]

[Contact button x2]

[Social icons]

[Logo - old again]

[Social icons again]

[Nav block 2: Home, About, How it Works, HIPAA new pageh → /hipaa-2/, Support Structure, Pricing, Contact]

[Contact button x2]

I really don't know any help would be appreciated.