Skip Navigation
Updated
September 19, 2023

The compatibility of the Avada Builder with WPML is assured through the language configuration file. We’ll show you how to use and update this file to maintain compatibility.

This documentation is intended for the Avada development team and web developers using Avada. If you are a client looking to translate a site built with Avada, please see our documentation page about building multilingual sites with Avada and WPML.

On This Page:

Getting Started

Before starting, make sure you have the following installed and activated on your site:

How the Integration of the Avada Builder Works with WPML

To understand how the Avada builder works with WPML, let’s start by creating a simple post using the Avada Builder. We will include a few modules, such as a Text Block, an Alert, and a Flip Box.

A simple page built using the Avada Builder

To translate the post, locate the Language box in the right sidebar and click on the plus icon next to the language you want to translate the post into.

Clicking on the plus icon to translate the post

This takes you to the Advanced Translation Editor, where you can translate your page. Click on the plus icon next to each line to add the translations. When you’re done with them all, click on the Complete button.

Translating the post in the Advanced Translation Editor

Updating the Language Configuration File

You may need to update the page builder shortcodes in the language configuration file for different reasons:

  • Adding a new shortcode to the page builder
  • Adding a new attribute to an existing shortcode
  • Removing an obsolete shortcode

You can download the language configuration file from our repository. You can then add the new shortcodes or attributes to the existing shortcodes in the language configuration file.

Page Builder Shortcode Structure in the Language Configuration File

To extract strings from pages built using the Avada Builder and load them in the Advanced Translation Editor, WPML needs to be configured to identify the shortcodes and attributes containing the strings that require translation.

This is done by adding a file, called wpml-config.xml, which is typically placed in the root folder of your theme. For Avada, we are hosting the language configuration file on our servers. It is set to override the local configuration file placed in Avada’s root folder, ensuring that the configuration file is always up to date.

The wpml-config.xml file is also used to configure the following elements:

  • Custom fields
  • Custom taxonomies
  • Admin texts / wp_options
  • Language switcher configuration
  • Page builder shortcodes

You can learn more about the language configuration file structure and syntax by visiting our page about language configuration files.

As an example, let’s see how we added the Flip Box shortcode to the wpml-config.xml file:

Example of the Avada Builder shortcodes in the language configuration file
<shortcodes>
  <shortcode>
    <tag>fusion_flip_box</tag>
    <attributes>
      <attribute>title_front</attribute>
      <attribute>title_back</attribute>
      <attribute>text_front</attribute>
      <attribute>image</attribute>
    </attributes>
  </shortcode>
</shortcodes>

The structure of the above example can be broken down as follows:

  • All the shortcodes are wrapped with the shortcodes tag
  • The shortcode tag wraps all the tags belonging to one, single shortcode.
  • The tag tag defines the name of the shortcode, which in this case, is the fusion_flip_box.
  • Shortcodes can have one or more attributes, which is why we wrap them in the attributes (plural) tag and use the attribute (singular) tag to define the title of each attribute. In this case, we have the title_front, title_back, text_front, and the image.

For shortcodes that include link attributes, you can make internal links automatically point to the translated version of that post by using the type option for the attribute. Here is an example:

Example of Avada Builder shortcodes that include link attributes
<shortcode>
   <tag>fusion_soundcloud</tag>
   <attributes>
      <attribute type="link">url</attribute>
   </attributes>
</shortcode>

Testing the Updated Language Configuration File

To test the updated language configuration file, confirm you have Avada, the WPML core plugin, and WPML String Translation installed and activated on your site.

You will need to start by overriding the remote language configuration file with the updated one. To do this:

  1. , Go to WPMLSettings and click on the Custom XML Configuration tab. Paste the content of your updated language configuration file into the editor and click Save.
Overriding the existing language configuration file with an updated one
  1. Create a new page and add the new module(s) to it. In case you updated some attributes for existing modules, add these to the page as well. For demonstration purposes, we’ll create a page with the Button module was assume it was newly added to the Avada Builder.
  1. From the Language box, click on the plus icon to translate the page.
Clicking the plus icon to translate the test page with the new module
  1. You’ll be taken to the Advanced Translation Editor, where you can click on the plus icon next to each line to translate the module’s textual elements.
Translating the module’s textual elements in the Advanced Translation Editor
  1. If you want to translate the button link, begin typing the URL name in the Search Source search bar at the top of the page. Remember to click on the Complete button when you’re done adding the translations.
Using the Search Source search bar to translate the button link

To see if the translated page shows all the translated strings and if the updated language configuration file is working properly, you can take a look at your newly translated page on the front-end.

Taking a look at the newly translated page on the front-end

Getting Help

In case you are encountering any issues, please contact our compatibility development team. They will be happy to assist you in checking issues related to the language configuration file.

Once done with the tests, please submit a merge request to our repository. Our compatibility developers will receive your requests and review it.