Skip to content Skip to sidebar

Home › Support › English Support › [Resolved] Split: span element across the Elementor HTML

[Resolved] Split: span element across the Elementor HTML

This thread is resolved. Here is a description of the problem and solution.

Problem:
If you're experiencing issues with JavaScript not functioning correctly on translated pages using the Elementor HTML widget, it might be due to WPML's Translation Editor not handling large JavaScript blocks well. This can result in modified or escaped scripts, causing them to stop working.
Solution:
We recommend moving the HTML and JavaScript code out of the Elementor HTML widget and registering it as a WordPress shortcode or a small custom plugin. Here's a step-by-step guide:
1. Add the following code to your theme's functions.php file:

function hotel_spider_form_shortcode() {<br />    ob_start();<br />    ?><br />    <!-- Place your complete HTML, CSS and JavaScript here --><br />    <?php<br />    return ob_get_clean();<br />}<br />add_shortcode( 'hotel_spider_form', 'hotel_spider_form_shortcode' );

2. Replace the full HTML and JavaScript in the Elementor HTML widget with the shortcode:
[hotel_spider_form]
This approach ensures that WPML only translates the page content, while the JavaScript is generated by WordPress and remains consistent across all languages. It also simplifies maintenance, as future changes only need to be applied in one place.

If this solution does not resolve your issue or seems outdated, please check the related known issues, verify the version of the permanent fix, and confirm that you have installed the latest versions of themes and plugins. If the problem persists, we highly recommend opening a new support ticket at WPML support forum.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic is split from https://wpml.org/forums/topic/span-html-elements-added-all-accross-the-translated-pages/

Tagged: ,

This topic contains 2 replies, has 0 voices.

Last updated by Dražen 1 month ago.

Assisted by: Dražen.

Author Posts
July 15, 2026 at 12:23 pm #18159685

marcoB-134

Hi Drazen,

Sorry to re-open this ticket.
I was so happy to see that the lay-out issue was fixed that I did not check the initial problem.

Currently I still see span element across the Elementor HTML element on the following pages:
- hidden link
- hidden link

This prevents the iframe from loading.

In the english version the span element do not appear.

Should I try to reset the "Elementor_data" to its default value and then go through the same change/translation process?

Best,

Marco
July 15, 2026 at 12:26 pm #18159689

Dražen
Supporter

Languages: English (English )

Timezone: Europe/Zagreb (GMT+02:00)

Hello Marco,

lets continue here.

Can you please share admin access again, it was automatically cleared once the ticket is closed for safety reasons.

I will check it out further then and see what is wrong.

Regards,
Drazen
July 20, 2026 at 5:46 am #18166064

Dražen
Supporter

Hello,

thanks.

After reviewing the implementation, the issue is caused by using the Elementor HTML widget fro adding custom code / JS scripts. WPML's Translation Editor is not designed to handle large JavaScript blocks inside HTML widgets, so during translation the script can be modified or escaped, which causes it to stop working on the translated page.

As an alternative, I suggest moving the entire HTML and JavaScript code out of the Elementor HTML widget and registering it as a WordPress shortcode or small custom plugin etc.

For example, you /your developer could add something similar to the following in the theme's functions.php file:

function hotel_spider_form_shortcode() {
    ob_start();
    ?>
    <!-- Place your complete HTML, CSS and JavaScript here -->
    <?php
    return ob_get_clean();
}
add_shortcode( 'hotel_spider_form', 'hotel_spider_form_shortcode' );

Then, instead of pasting the full HTML and JavaScript into the Elementor HTML widget, simply insert the shortcode into the page:

[hotel_spider_form]

This way, WPML only translates the page content while the JavaScript is generated by WordPress and remains exactly the same on every language. It is also easier to maintain because any future changes only need to be made in one place instead of updating every translated page.

Could you please give this approach a try and let me know if that helps.

Regards,
Drazen