Follow this tutorial to learn how to create multilingual WordPress sites using the Avada theme and WPML. Avada is a highly responsive theme with a modern and clean design with many features such as premium sliders, unlimited colors, advanced theme options, and more. If you have chosen Avada as your site’s theme, this tutorial teaches you how to turn it into a multilingual site with WPML.

Content

Getting started

Make sure that the Avada theme is activated, by going to the Appearance -> Themes page.

Make sure that the WPML Multilingual CMS, WPML String Translation, WPML Translation Management, and WPML Media Translation plugins are activated.

Translating your pages

With WPML, you can translate any types of contents on your site, including pages and posts. For an easy start, read our Getting Started Guide.

Translating pages built using the Fusion Builder

WPML allows you to translate content in three ways: you can translate yourself, send content to your own translators, or send jobs to a translation service. Please visit our documentation page for exact steps on how to translate contents build page builders.

You can also watch a short video of translating pages built with the Fusion builder:

Translating pages built using the Fusion Builder Live Editor

To translate a page built using the Fusion Builder Live Editor, follow the steps below:

  1. After building your page using the Fusion Builder Live Editor, you need to publish the page to be able to translate it. Simply, click the publish icon then click Save.
    Building and publishing a page using the Fusion Builder Live Editor
  2. Click the Exit to page back-end option to navigate to the default page editor.
    Exit to page back-end
  3. Click the plus icon in the language box to translate the page.
    Click the plus icon to translate the page

Adding translation support for Fusion Builder elements

WPML allows you to manually enable the translation of additional Avada Theme/Fusion Builder elements and element attributes.

To translate any textual element in any these shortcodes, you must add them to the Custom XML Configuration tab found on the WPML -> Settings page.

Let’s consider an example of a Person element which includes texts that require translation. In this case, you would add the following code on the Custom XML Configuration page.

Example - Person element
<wpml-config>
  <shortcode>
    <tag>fusion_person</tag>
    <attributes>
      <attribute>picture</attribute>
      <attribute>social links</attribute>
    </attributes>
  </shortcode>
</wpml-config>

The following is the list of all shortcodes you can add manually, along with their attributes:

  • Portfolio (fusion_portfolio) | Attributes: cat_slug, exclude_cats
  • Post Slider (fusion_postslider) | Attributes: excerpt, category
  • Recent Posts (fusion_recent_posts) | Attributes: cat_slug, exclude_cats
  • Column (fusion_builder_column) | Attributes: background_image, link
  • Container (fusion_builder_container) | Attributes: background_image, video_preview_image
  • Content Boxes (fusion_content_box) | Attribute: image
  • Countdown (fusion_countdown) | Attribute: background_image
  • Faq (fusion_faq) | Attribute: featured_image
  • Flip Box (fusion_flip_boxes) | Attribute: image
  • Image (fusion_image) | Attribute: image
  • Image Frame (fusion_imageframe) | Attribute: lightbox_image
  • Person (fusion_person) | Attributes: picture, social links
  • Sharing (fusion_sharing) | Attribute: pinterest_image
  • Testimonial (fusion_testimonial) | Attribute: image
  • WooCommerce Carousel (fusion_products_slider) | Attribute: cat_slug

You can find more information on the page about defining page builder shortcodes in the language configuration file.

Maintaining the Fusion Builder Compatibility with WPML

We have prepared a documentation that explains how the Fusion Builder works with WPML. Additionally, it explains the process of updating the language configuration file in order to maintain the compatibility between WPML and Fusion builder. Feel free to check it here.

Translating Fusion Builder global elements, columns, and containers

Fusion Builder allows you to save Elements, Columns and Containers as Global Elements. Global elements are saved to your Fusion Builder Library and you can insert the global item into any page you want. Updating any instance of a global item will update all the items inserted into the different pages on your website.

Here is a quick video that demonstrates the global emenets, columns, and containers translation process:

Translating the Fusion Builder global items is a simple two-steps process:

  1. Translate the global item text by clicking the plus icon in the language box on the global item editing screen.
  1. Translate the page that includes the global item that you have already translated. Note that WPML will not load the global item text into the Translation Editor page. This is normal as we have already translated the global element text.
Click the plus icon to translate the Global item

Inserting a translated Global Element, Column, and Container to a page

You can insert the translated global element, container or column into any page on your website without worrying about translating its texts. Simply, click the plus button to translate the page content. The translated global element text won’t be loaded to the Translation Editor page as they are already translated. Translate other elements on the page and mark all the translated fields as Translation is complete.

Translating Porfolio pages and categories

To translate Portfolio items or any custom post type items, you need to follow the same steps as for translating any other types of pages. Visit our documentation page for exact steps on translating the contents yourself.

Click on the plus icon to translate the Portfolio page

Portfolio Categories can be translated while translating your pages, on the Translation Editor screen. There, you can translate the Portfolio elements as well as your Portfolio Categories.

Additionally, you can translate your Portfolio Categories on the WPML -> Taxonomy Translation page. Select the Portfolio Categories from the drop-down menu and a list of your categories will appear. Click the plus icon to translate a category for the respective language and use the dialog box that appears to add your translation.

Translate the categories using the Taxonomy Translation page

Keep in mind that the translations of categories are universal: if you make a change, they will be updated everywhere.

Translating Avada Sliders

Avada comes with its own custom slider called Fusion Slider. It is also bundled with the Slider Revolution and Layer Slider.

To help you learn how to translate sliders created using Slider Revolution we created a detailed tutorial that explains the process of translating Slider Revolution using WPML. We also created a document that provides step-by-step instructions on translating sliders created with Layer Slider using WPML.

To translate sliders created using the Fusion Slider, follow the steps below:

  1. Navigate to Fusion Slider -> Add or Edit Slides. Choose the slide (slides that belong to the same slider) that you want to translate. In this example, we will translate the Home page slide. Click the plus icon under the language you want to translate your slider into.
    Click on the plus Icon to translate the slide(s)
  1. You will be taken to the Translation Editor page. Translate the slide content and save the translation.
  1. Ensure that the slider is added to the page using the Fusion Page Options. Using the Fusion page builder to add the slider to the page results in issues when displaying the slider on the front-end.
    Ensure adding the slider using the Fusion page options
  1. Navigate to Pages -> All Pages and click on the plus icon to translate the page that includes the slider. In our example is is the Home page.
    Click on the plus icon to translate the page that includes the slider
  1. You will be taken to the Translation Editor page. Translate the page content and publish the translated page.

This is how the translated slider looks like on the front-end:

The translated slider

Translating texts from Avada theme, plugins and other places

Besides contents coming from posts and pages in your site, there are usually some texts coming from other places. Most common examples are themes and plugins.

To learn how to translate these texts, read our documentation page about translating strings.

Translating Avada’s menus

With WPML, you can easily synchronize your language menus. For more information, please check our page about translating menus.

Getting help from our support

We have supporters in our forum who are ready six days a week to help you. They are trained in how to use WPML with Avada theme.

If you are working with a developer for your site, please use our Translation support forum to get help with translating your site’s content.

If you are setting up the site and WPML yourself, please use our Technical support forum.

Need help with building and maintaining your site?

If you need help with building or maintaining your site, take a look at our list of WPML Contractors. They are experienced developers specialized in developing multilingual sites.

Get WPML

You can test WPML for 30 days and see if you like it.
If you are not happy with our plugin, we refund you without any questions in the 30 days.

Buy and Download