This tutorial is for advanced WordPress developers, if you are a WPML client and would like to know how to use Elementor with WPML please visit this tutorial
Translating elements for Elementor is done by custom code in WPML.
The code is available now on GitHub in the – Elementor code for WPML on GitHub
This code uses three hooks as described here – In this example
When a post is saved the JSON structure for the layout is read and parsed and all the strings found are registered for translation.
This is the key file that defines the elements in our GitHub
This file defines the structure of the element and lists the fields that we need to translate for each element type and the type of field to use for translation.
Eg. For the ‘heading’ field we have this structure:
Eg. For the ‘heading’ field we have this structure:
'heading' => array(
'conditions' => array( $this->type => 'heading' ),
'fields' => array(
array(
'field' => 'title',
'type' => __( 'Heading', 'wpml-string-translation' ),
'editor_type' => 'LINE'
),
),
),
This specifies that the ‘heading’ element has one field for translation. It is ‘field’ is ‘title’ and it should be edited with the single line editor. The ‘type’ is the label for the field that’s shown in the text editor.
We can also add more advanced elements in the modules directory
These elements are generally elements that allow having multiple items like sliders, accordions, etc.
Translating custom elements are also supported through hooks. This is described here