Custom HTML widget no longer renders element.
-
Hello. On my page is an Elementor HTML widget. In it is this element:
<input type="number">For many years this element rendered without issue (see screenshot here). Starting with Elementor v3.31.0, the element does not render (see screenshot here). Any ideas why?
Troubleshooting
- I am using a child theme. I switched to the parent theme, and the WordPress Twenty Twenty-Five theme. No change in the issue.
- I deactivated all plugins. No change in the issue.
Thanks in advance.
The page I need help with: [log in to see the link]
-
Hello,
Thank you for reaching out and providing those details. We appreciate you taking the time to test the themes and deactivate the plugins beforehand. Since the issue persists, it is likely related to internal changes in the 3.31.0 update.
Often, missing elements after an update are caused by outdated CSS data. Please navigate to Elementor > Tools and click the Regenerate CSS & Data button. Additionally, make sure to completely purge any server-side caching or CDN (like Cloudflare), as standard plugin deactivation does not clear these layers.
If the element is still not rendering, the new update might be conflicting with how that specific widget is coded. You can go to Elementor > Settings > Features and temporarily disable performance features like Optimized DOM or Improved CSS Loading to see if that resolves the conflict.
It is also helpful to check your browser console (F12) for any JavaScript errors on that specific page. If none of these steps work, you can temporarily roll back to version 3.30.x via Elementor > Tools > Version Control until this issue is patched.
Hope this helps,
Thank you for your reply. Here are my follow-ups.
I have some more information for you.
I initially said the widget in-question was an HTML widget. That was wrong–my mistake. The widget is an Image Box widget, and I’ve added custom HTML into the `Description’ field. I created a new completely blank page to illustrate the issue: https://kabultec.dreamhosters.com/test-2/ You can see the Elementor config here and the front-end screenshot here. If you reproduce this setup on your end, are you able to reproduce the issue in-question?
FYI I tried all the suggestions you listed, but there was no change in my issue.
If none of these steps work, you can temporarily roll back to version 3.30.x via Elementor > Tools > Version Control
I’ve been using version 3.30.4 for many months now. In that time there have been scores of security-related updates from Elementor. The longer I keep my site using v3.30.x, the longer my site remains vulnerable :-/
Hello. Any update on this? Can you reproduce the issue on your end?
To remind you, I created a new completely blank page to illustrate the issue: https://kabultec.dreamhosters.com/test-2/ You can see the Elementor config here and the front-end screenshot here.I’m reluctant to keep my version at v3.x, mainly for security reasons.
Thanks.
Hi ,
Thank you for the update and for sharing the links and screenshots. Everything makes perfect sense now, and I see exactly what is causing the issue.
Unfortunately, the description field in the Image Box widget does not natively support advanced custom HTML.
Why this happens, This specific field is designed purely for plain text or very basic formatting. When complex HTML is injected into it, WordPress and Elementor run security and sanitization filters (like
wp_kses) every time the page is saved. These filters clean out unexpected code, which explains why it works occasionally but breaks completely at other times, especially after you update the page.To prevent the system from stripping or breaking your code, the best approach is to rebuild that section using a Custom Layout made of three separate, foundational Elementor widgets stacked on top of each other:
- An Image widget at the top.
- A Heading widget right below it.
- A dedicated HTML widget at the bottom. This ensures your custom code remains entirely untouched by WordPress filters.
This will give you the exact same visual layout as the Image Box, but with 100% stable code execution.
Best regards,
Thank you for your reply. Here are my follow-ups.
I understand what you’re saying, and I will move forward with reconstructing my Elementor layout. But I have one final set of questions. The issue is not present in Elementor versions prior to v3.31.0. What exactly about Elementor v3.31.0 resulted in this change? New, more aggressive/secure filtering?
Thanks.
Hi there,
Thank you for contacting us and for your feedback,
Here you can find full documentation of new features and what is implemented in the version 3.31.0 –https://developers.elementor.com/elementor-3-31-developers-update/
https://elementor.com/pro/changelog/
In version 3.31.0, we rolled out a major core update to Editor V4, which officially introduced a custom Attributes feature. Because this allows users to apply custom HTML key-value pairs (likedata-*oraria-*), Elementor implemented a built-in validation and sanitization filter to prevent invalid, broken, or insecure code from being executed. If your previous layout relied on custom inline scripts or specific unescaped HTML attributes, they are now being actively filtered out by this new, stricter security protocol.
Also, with v3.31.0, the “Optimized Markup” performance experiment graduated to a default, stable feature. This feature:- Removes redundant, empty, or deeply nested wrapper
<div>tags to shrink the DOM size. - Automatically wraps new headers and footers in semantic
<header>and<footer>tags rather than traditional<div>containers.
If your old layout, custom CSS, or third-party addons relied on those older, nested
<div>structures or selectors, the cleaner DOM in v3.31.0 will cause those targets to break
If you need a more detailed explanation about this version, you can open an issue on our GitHub account, and our developers will be happy to assist. https://github.com/elementor/elementor/issuesHope this helps.
You must be logged in to reply to this topic.