Although Elementor provides widgets for most common use cases, there are situations where using the HTML widget is the simplest or only solution. Many developers use custom HTML to create lightweight UI elements such as hamburger menus, wrappers, icons, or other components that don’t require a dedicated Elementor widget.
However, if you’re using WPML Advanced Translation Editor, you may notice that your custom HTML structure becomes corrupted after translating the page.
In this guide, I’ll explain why this happens and how to prevent WPML from modifying your HTML.
Why WPML Modifies Custom HTML
WPML’s Advanced Translation Editor scans your page content for translatable strings.
If your custom HTML doesn’t contain any text to translate, the element usually won’t appear in the translation editor. However, WPML may still process the HTML internally during translation, which can unexpectedly modify its structure.
This is especially common when using empty HTML elements, such as <span> tags that are styled with CSS.
For example, a simple hamburger menu icon may use the following HTML:
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
</div>
Solution: Use the translate="no" Attribute
The easiest way to prevent this behavior is to explicitly tell translation tools not to process the affected HTML elements.
Although translate="no" is a standard HTML attribute rather than a WPML-specific feature, WPML respects it during translation, making it an effective way to preserve custom HTML.
Simply add the following attribute to every element that should remain unchanged:
translate="no"to every element that should remain unchanged.
Your HTML then becomes:
<div class="hamburger">
<span class="bar" translate="no"></span>
<span class="bar" translate="no"></span>
</div>Once the translate="no" attribute is added, WPML leaves those elements untouched during translation, preserving your original HTML structure.
If multiple nested elements are being modified, simply add the attribute to each affected tag.
When Should You Use translate="no"?
This approach is useful whenever your custom HTML contains elements that should never be translated, for example:
- Hamburger menu icons
- Empty
<span>elements used for styling - Decorative HTML elements
- Animation wrappers
- CSS helper elements
- Custom UI components built with the Elementor HTML widget
Using translate="no" helps preserve your HTML structure while keeping the rest of your page fully translatable.
Conclusion
If you’re using custom HTML inside Elementor together with WPML Advanced Translation Editor, adding the translate="no" attribute is a simple and reliable way to prevent broken HTML structures after translation.
It’s a small change that can save a lot of debugging time and ensure your custom components continue to work correctly across all translated versions of your website.
