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.

What you will need

  • The Avada theme (version 5.0.3 or above), also available at Theme Forest.
  • A recent version of WPML (version 3.7 or above), including the String Translation, Translation Management and Media translation add-ons.

Contents

Getting started and what to check

Is your site already configured by your developer?
Check with them to make sure that the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management) are installed. Also, make sure that the Avada theme is installed and activated.

Are you setting up WPML yourself?
Then you need to follow the steps below.

  • Set up WPML from the WPML -> Languages page. See our WPML Getting Started Guide for a complete reference. The initial, simple three-step setup is self-explanatory, asking you to choose your default language, a set of active languages, and a language selector. (For starters, choose the footer language selector; you can change this later.)
  • Next, install and activate the core WPML plugins (WPML Multilingual CMS, WPML String Translation, WPML Translation Management) followed by other WPML plugins that may depend on them.
  • Install the Avada theme and activate it. Avada’s documentation will provide you with all the information needed to set it up. You can also find an excellent collection of tutorials and step-by-step videos on Avada’s YouTube channel.
  • Activate the WPML Translation Editor. Go to the WPML -> Settings page. There, check the Use the translation editor option under the How to translate posts and pages section and click Save.

Translating your pages

With WPML, you can also translate any types of contents in your site, including pages and posts. For an easy start, read our Getting Started guide to site translation.

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.

List of all the current translatable Avada Theme/Fusion Builder Elements

The following textual elements found in Fusion Builderare currently supported by WPML:

  • Alert
  • Blog
  • Button
  • Chart
  • Checklist
  • Column
  • Container
  • Content Boxes
  • Countdown
  • Counter Boxes
  • Dropcap
  • Events
  • FAQ
  • Flip Boxes
  • Fusion Slider
  • Google Map
  • Image
  • Image Before & After
  • Image Carousel
  • Layer Slider
  • Lightbox
  • Menu Anchor
  • Modal
  • Modal Text Link
  • One Page Text Link
  • Person
  • Popover
  • Pricing Table
  • Progress Bar
  • Revolution Slider
  • Section Separator
  • Separator
  • Sharing Box
  • Slider
  • Social Links
  • Soundcloud
  • Table
  • Tabs
  • Tagline Box
  • Testimonials
  • Textblock
  • Title
  • Toggle

Adding support for more 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.

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

Updating a page and its translation

On our page about using WPML with page builders, you can learn how to update your translation if you modify the content of the default language page.

Translating Fusion Builder global elements, columns, and containers

Translation support for global elements, rows, and sections is supported by:

  • WPML Multilingual CMS (4.0.6 or above)
  • WPML String Translation (2.8.6 or above)
  • WPML Translation Management (2.6.6 or above)

Here is a quick video that demonstrates the translation process:

Let’s take a look at a simple example. We have created a page using the Fusion Builder. The page includes a text element and a Flip Box element that we set as a global element.

A simple page that contains a global element

To translate the global element follow the steps below:

    1. Navigate to Fusion Builder -> Library. Click the Edit link.
Navigate to the Fusion library page and click the edit button to translate the global element
    1. Click the + icon to translate the global element in the desired language. This will take you to the Translation Editor page.
Click on the + icon to translate the global module
    1. Enter the translated texts and select the Translation is complete check box. Once you complete translating the texts, click the Save & Close button.
Add the global module translated text and save
    1. Navigate back to the content editing page where you have created the global element. Click on the + icon found in the language meta box to translate the page. This will take you to the Translation Editor page.
Translate the page that includes the global module that you have translated
    1. You will notice that the global element texts are not loaded to the Translation Editor page. This is normal as we have already translated the global element text. Add the translated text for other elements on the page, tick the Translation is complete checkbox for each field and click Save & Close.
Translate the other elements text and Save & Close

All the textual elements load into the front-end including the global element text. Let’s see how it renders on the front-end:

Translated page on the front-end

You can follow the exact same steps above to translate global containers and columns.

Inserting a translated global element, row, and section 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 + 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.

Updating/Editing the content of a global item

Editing global element texts in the default language requires updating the translation of the global item. To update the default language global element and update the translation follow the steps below:

  1. Navigate to Fusion Builder -> Library. Click the Edit link of the global element that you want to update. Alternatively, you can update the default language global element content from within a page. In this case, jump to step (3).
  2. Navigate to the Fusion library page and click the edit button to update the global element default language text
    Click on the element settings icon
  3. Update the element to your liking and Save the element then Update.
  4. Update the global module text in the default language page
  5. In the language meta box, you click on the spinning arrows icon to update the translation. This takes you to the Translation Editor page.
  6. Click on the spinning arrows icon to update the translation
  7. Notice that the older translated text is preserved. Translate the added text, tick the Translation is complete for each field, then Save & Close.
  8. Translate the updated text then Save & Close

This updates the translated version of the global element across your website.

Translating Porfolio and taxonomies

You can translate custom post types using the Translation Editor.

Translating custom post types and post (Portfolio)

Here is an example of how you can translate a Portfolio item:

1. From your WordPress dashboard, navigate to the Portfolio page and click on the plus icon to translate a Portfolio item.

Click on the plus icon to translate the Portfolio item

2. The Translation Editor opens again. Note that the Translation Editor screen displays the Portfolio categories for translation. Also, note that translating the categories affects all terms and not only the ones assigned to this portfolio item.

Add your translated text to the portfolio item and click Save & Close

You can follow the same steps to translate the regular posts.

Translating post categories

In this example, we translate the post categories. Note that you can translate any post type category using the same method.

1. Go to the Posts -> Categories page and click on the category you want to translate.

Click on the category you want to translate

2. Click on the add link to add the translation

Click on the add link to add the translated text to your catagory

3. Add your translation to the Name, Slug and Description fields and click on Add New Catagory.

Add your translated text and clik on Add New Catagory

Translating custom taxonomies

In this example, we translate the Portfolio Categories. You can translate all the custom taxonomies using the same method.

1. From your WordPress dashboard, go to the WPML -> Taxonomy Translation page.

2. Select Portfolio Categories from the Select the taxonomy to translate drop-down menu.

Go to WPML – >Taxonomy Translation and choose the taxonomy you want to translate

3. Click on the plus button to add the custom taxonomy translation by filling the required fields and then click on the Save button.

Add your translated content and click Save

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, use the following steps:

    1. From the WordPress Dashboard navigate to Fusion Slider -> Add or Edit Slides. Choose the slide (slides that belong to the same slider) that you wish to translate. In this example, we will translate the Home page slide. Click on the plus icon next to the home page.
Click on the + Icon to translate the slide(s)
    1. Add the translated text and tick the “Translation is complete” option for each field. Click on Save & Close.
Add your translated text and choose the “Translation is complete” option for each filed then click on “Save & Close” button.
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 + icon to translate the page that includes the slider
    1. Add the translated text and tick the “Translation is complete” option for each field. Click on Save & Close. My Home page only includes the slider, this explains why, on the image below, you cannot see any textual elements available on the Translation Editor screen except for the Title.
Add the translated text to the fields and tick the “Translation is complete” option then click on the “Save & Close” button

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 example 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

If you need help using WPML with Avada theme, please visit our technical forum.

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.

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.

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