[Escalated to WPML Developers team] CSS changes on FR page are not being saved

The issue is caused inside WPML. I am escalating to the Second Tier Support for further revision.

Possible workaround:

Inside \sitepress-multilingual-cms\addons\wpml-page-builders\classes\Integrations\Elementor\class-wpml-elementor-data-settings.php:get_field_to_copy()

Change this function:

public function get_fields_to_copy() {
    return [
        '_elementor_version',
        self::META_KEY_MODE,
        '_elementor_page_settings',
        '_elementor_css',
        '_elementor_template_type',
        '_elementor_template_widget_type',
        '_elementor_popup_display_settings',
    ];
}

This function causes the settings are copied over again and again and WPML's custom field settings are not respected.

Change it into:

\sitepress-multilingual-cms\addons\wpml-page-builders\classes\Integrations\Elementor\class-wpml-elementor-data-settings.php:get_field_to_copy()

public function get_fields_to_copy() {
    return [
        '_elementor_version',
        self::META_KEY_MODE,
        //'_elementor_page_settings',
        '_elementor_css',
        '_elementor_template_type',
        '_elementor_template_widget_type',
        '_elementor_popup_display_settings',
    ];
}

Now '_elementor_page_settings' is commented our from this function and will not longer be copied.

After that, make sure to set '_elementor_page_settings' at WPML > Settings > Custom Fields Translation > Show system fields to "Copy once". This is the default setting, and it should copy the settings once and then not copy them again.

IMPORTANT:
Please make sure to take a backup of your site inlcuding database, before taking this change, as I can not guarantee that this workaround could affect other translations negatively.

Sounds as if Elementor PRO's global CSS is not able to display a different style per language.

You basically have the same experience when using the Theme Customizer. Also here, changes can only be made in site's default language. Global CSS always counts for all content in all languages.

Maybe you could solve this by using a different selector and rule set for your translated elements.

I am forwarding this information to our Team and will get back to you once I receive feedback.

The compatibility team proposed two possible workarounds for this issue:

Workaround #1

Edit the original page in the Elementor editor and you use the :lang CSS selector to set different styles for each language

Example to use in the original page:

body {
    background-color: lightblue!important;
}
*:lang(de-DE) body {
    background: lightgreen !important;
}

The default will be light-blue, but for German it will be light-green.

Workaround #2
Open the ...\wp-content\plugins\sitepress-multilingual-cms\addons\wpml-page-builders\classes\Shared\st\compatibility\class-wpml-page-builders-update.php file.

Look for the save function, line 27.

Replace:

	public function save( $post_id, $original_post_id, $converted_data ) {
		$this->save_data( $post_id, $this->data_settings->get_fields_to_save(), $this->data_settings->prepare_data_for_saving( $converted_data ) );
		$this->copy_meta_fields( $post_id, $original_post_id, $this->data_settings->get_fields_to_copy() );
	}

With

	public function save( $post_id, $original_post_id, $converted_data ) {
		if ( WPML_PB_Last_Translation_Edit_Mode::is_translation_editor( $post_id ) ) {
			$this->save_data( $post_id, $this->data_settings->get_fields_to_save(), $this->data_settings->prepare_data_for_saving( $converted_data ) );
			$this->copy_meta_fields( $post_id, $original_post_id, $this->data_settings->get_fields_to_copy() );
		}
	}

You can now edit the translation in the Elementor Editor and manually translate the CSS.

This issue will be solved in a future update of WPML.