[Resolved] span html elements added all accross the translated pages

Hello Marco,

Thank you for reporting this.

Could you please try creating a new test page in Elementor with the same JavaScript/iframe implementation, making sure to place the code inside Elementor's HTML widget, and then translate the page using the WPML Translation Editor?

After the translation is complete, please check whether the same issue occurs on the translated page.

This will help us determine whether the problem is specific to this page or if it can be reproduced consistently with the current setup.

Please let me know the results, and we'll continue investigating from there.

Regards,
Drazen

Hi Marco,

Thank you for the additional information.

I agree that, based on your findings, the iframe script itself does not appear to be the cause. Since the same layout issue also occurs on the Contact page where the form is built directly into the page, it points to something else affecting those translated pages, I do see some CSS rules, so could be that if you have custom CSS and custom theme.

At this point, it's difficult to determine the exact cause without inspecting the website.

Could you please share WordPress administrator access preferably to staging site? That will allow me to compare the original and translated pages, inspect how they are built, and investigate what is causing the layout differences.

Once I have access, I'll take a closer look and update you with my findings.

Thank you!
Drazen

Hello,

I identified this as a known compatibility issue between WPML and Elementor V4 Atomic Global Classes.

We are working on fix in new versions, as a workaround, please you use next approach:

Add the following entries to your site’s XML via WPML > Settings > Custom XML

<wpml-config>
    <custom-fields>
        <custom-field action="copy">_elementor_global_variables</custom-field>
        <custom-field action="copy">_elementor_global_classes</custom-field>
        <custom-field action="copy">_elementor_global_classes_labels</custom-field>
        <custom-field action="copy">_elementor_global_classes_order</custom-field>
    </custom-fields>
</wpml-config>

Add next workaround to your child theme functions.php

add_filter( 'elementor/atomic-widgets/settings/transformers/classes', 'wpmlsupp13746_resolve_unmapped_global_classes', 20, 1 );

function wpmlsupp13746_resolve_unmapped_global_classes( $classes ) {
	if ( ! is_array( $classes ) || ! class_exists( '\Elementor\Modules\GlobalClasses\Global_Class_Post' ) ) {
		return $classes;
	}

	foreach ( $classes as $index => $value ) {
		if ( ! is_string( $value ) || ! preg_match( '/^g-[0-9a-f]{7}$/', $value ) ) {
			continue;
		}

		$post  = \Elementor\Modules\GlobalClasses\Global_Class_Post::find_by_class_id( $value );
		$label = $post ? $post->get_label() : '';

		if ( $label ) {
			$classes[ $index ] = $label;
		}
	}

	return $classes;
}

After adding the configuration:

1. Back up the website and database.
2. Open the Default Kit in the primary language. (wp-admin/post.php?post=8&action=edit&lang=en)
3. Make a small change, save it.
4. Click to translate and update translation
5. Go to Elementor → Tools and run Clear Files & Data or Regenerate CSS & Data.
6. Clear all WordPress, server and browser caches.
7. Verify the affected page in the secondary language.

Let me know how it goes.

Regards,
Drazen

Hi Marco,

Thank you for the update.

The page itself should not be retranslated. Instead, you need to update the translation of the Elementor Default Kit.

Please check my previous reply, where I included a link that takes you directly to the Default Kit. After making the change, translate the Default Kit, complete the translation, and then check the page again.

Please give that a try and let me know how it goes.

Kind regards,
Dražen

Hello Marco,

I just made a small change to the Default Kit and updated the German translation. After doing that, the German page is now displaying correctly on my end.

Could you please check it on your side as well?

Regarding your question about the `add_filter()` call: that's a perfectly valid question. Simplified, in PHP, functions are parsed before execution, so the order of the function declaration and the `add_filter()` call generally doesn't matter. As long as both are loaded during the request, WordPress can safely hook the function.

Please let me know whether the German page now appears correctly for you also.

Kind regards,
Dražen