Avada and WPML

Introduction

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 much 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.

Essential resources

Contents

Getting started

  • Install the Avada theme and activate it.
  • 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.
  • Set up WPML on the WPML -> Languages page. See our WPML Getting Started Guide for reference. The initial, simple three-step setup is self-explanatory. You can install the demo content by navigating to Avada -> Install Demos and clicking on Install (we are installing Avada Classic as an example for this tutorial).

For this tutorial, we use some of the demo content provided with Avada. You can install the demo content by navigating to Avada -> Install Demos and then clicking on Install (we are installing Avada Classic as an example for this tutorial).

Installing Avada’s demo content

Translating pages built using the Fusion Builder

You need to activate the WPML Translation Editor in order to translate the pages created using Fusion Builder. Go to WPML -> Translation Management page and click the Multilingual Content Setup tab. Then, go to the How to translate posts and pages section and select the Use the translation editor option.

Activate the Translation Editor option

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.

Watch a short video of translating pages built with the Fusion builder:

Scenario 1: Translate the content yourself.

Publish the page you just created with Fusion builder. Once you publish, the Language box will be displayed. Click the plus button to choose the language to translate your page.

You can find theplus buttons in the Language box when editing your page or on the listing page:


The plus button located in the Language box when editing the page.

The plus located under the flag in Pages -> All pages

By clicking on one of the plus buttons, you open WPML’s Translation Editor. Use it to translate the contents of your page and tick the box when the Translation is complete. Note that you need to choose the Translation is complete option for all the fields in order to save the translation. Once this is done, click on the Save & Close button to publish the translated page. In this example, we will translate the About me page that is imported by the Avada demo content.

WPML Translation Editor – Add your translated content

If you have already translated the page, the plus button changes to a pencil icon. Click on the pencil icon in case you need to modify the translation.

The pencil icon replacing the plus if the translation is already made

Scenario 2: You want to send the pages to a translator.

WPML allows you to send your content to translators directly from your WordPress dashboard. However, first, you need to add translators to your site or choose a translation service.

For this, go to the WPML -> Translation Management page and select the content to translate (pages or posts).

Then, click to add the selected items to Translation basket.

Finally, from the Translation basket tab, you need to select translators.

The translators will be notified and they will translate the content on the WPML -> Translations page. The translated content will then appear in WordPress.

This is how the default and the translated About Me page looks like on the front-end.

English – About Me page Spanish – About Me page

Translating Avada Demo Pages

Avada comes with demo pages that you can import to a new page you are creating. These pages are built using Fusion builder. In order to translate these pages, follow the same steps that we followed to translate the pages built using Fusion builder.

To import a demo page from the library, go to Pages -> Add New and click on the Use Fusion Builder button.

Add a new page to import a demo page from the Avada library

When you click the Library tab, a pop-up dialog box appears, click on the Demos tab, and then click the Load button.

To translate the page, follow the same steps that we followed to translate pages built using the Fusion builder.

Updating a page and its translation

In this part, we show you how to update your translation if you need to modify the content of your default language page.

Scenario: I have added a new Module to my page and I need to translate it.

    1. Add a new Fusion Module to your page. For this example, Add the Title module. Add this module to the top of the “About me” page. Remember to Update the page after adding the module. This is important to load the textual elements of the module to the Translation Editor screen.

Adding a new module to the page

    1. In the Language box, you will see an arrow instead of a plus button. This indicates that the translation needs to be updated since you recently added some new content to your default language page. Click on the arrow to update the translation in your secondary language page.

Click on the arrow to translate the new added module

    1. You will see the WPML Translation Editor with new fields that need to be filled in. Also, note that the translation completion percentage is back to 96%

The new module that we added showing on the Translation Editor screen

    1. Translate and mark the translations as complete ,and then Save and Close.

Add your translated text and click on Save & Close

Translating other pages, posts, custom post types and taxonomies

You can translate all your pages, posts, and 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 Portfolio -> Portfolio page and click on the plus icon to translate a Portfolio item.

Click on the plus icon to translate the Portfolio item

  1. The Translation Editor opens again. Note that the Translation Editor screen displays the Portfolio categories for translation. Translating the catagories affects all terms now only the terms 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

    1. Click on the add link to add the translation

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

    1. 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 toxonomies

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

  1. 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 traslated content and click Save

Translating Fusion Sliders

In this example, we will translate the Home slider imported by the Avada demo content.

Before translating the slides we need to set the custom fileds that hold the slides textual elements to Translate:

    1. From your WordPress dashbord, navigate to WPML -> Translation Managment and click on the Multilingual Content Setup tab.
    2. Click on the Custom fields translation link to jump to that section.

Set the slider custom fields to translate

    1. Set the pyre_heading and pyre_caption custom fields to Translate and Save.

Set pyre_heading and pyre_caption to Translate

To translate the slides follow the steps below:

    1. From your WordPress dashboard navigate to Fusion Slider -> Add or Edit Slides.
    2. Click on the plus icon of the desired language you want to translate the slider into. This will take you to the Translation Editor page.

Click on the plus icon to add the translated text to your slide

    1. Add your translated text to the feilds and mark the translated feilds as Translation is complete.
    2. Click Save & Close.

Translating Fusion Slides

Translating Avada theme text and other strings

To translate the theme strings, you need to scan it for strings. This registers the strings for translation on the String Translation screen. (Read more about Theme and Plugin Localization.)

This can be done by following the steps below:

    1. From your WordPress dashboard, go to  the WPML -> Theme and plugin localization page.
    2. Choose the Translate the theme and plugins using WPML’s String Translation option and click the Save button.

Choose the Translate the theme and plugins using WPML’s String Translation option

    1. Click on the Scan the theme for strings button. This registers the theme texts for translation on the string translation screen. Check the illustration below.

Scan the theme for strings

  1. Now you can go to the WPML -> String translation page to translate the theme strings

Strings can be filtered by:

  1. Select which strings to display (Translation complete, Translation needed, Waiting for translator).
  2. Select a specific text domain.
  3. Search for a specific string by typing it in the search for: field and click the search button.
  4. Click on translations and add your translated text. Then choose the Translation is complete option and click Save.

Translate the Avada theme texts

Note that translating the theme options admin text can be achieved by choosing the admin_texts_avada_theme_options string domain on the string translation screen.

Translating Avada’s theme options

Theme options can be translated using the string translation page. For example, if we want to translate the Copyright Text available in Avada’s Footer content theme option.

Coryright text in Avada’s theme options

Navigate to the String Translation page and search for the copyright text. As you can see it is under the string domain admin_texts_avada_theme_options. Click on the translations link, add your translated text, mark the Translation is complete option and click Save.

Add your translation to the Copyright text and Save

Translating Avada’s menus

With WPML, you can easily synchronize your language menus. For more information, please check our complete menus translation tutorial.

Getting help – WPML Forum

If you need help using WPML with Avada theme, please visit our technical forum. Before posting about issues, we recommend that you review this quick checklist:

  1. Ensure that you have the latest versions of the theme and of the WPML plugins, and that they are all activated. These include WPML Multilingual CMS, WPML String Translation and WPML Translation Management.
  2. Check whether the problem does not exist when the WPML plugins are deactivated, and that it appears only when the core WPML plugins are activated. In other words, try to ensure that it is an issue of compatibility of Bridge with WPML so that Avada support is able to assist you better.

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