Translating Elementor plugin

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:

'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