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.
- 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.
- Getting started
- Translating your pages
- Translating Fusion Builder global elements, columns, and containers
- Updating a page and its translation
- Translating Porfolio and taxonomies
- Translating Avada sliders
- Translating texts from Avada theme, plugins and other places
- Translating Avada’s menus
- Getting help – WPML Forum
- Maintaining the Fusion Builder Compatibility with WPML
- Get help with building and maintaining your site
- Get WPML
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.
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.
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.
The following textual elements found in Fusion Builderare currently supported by WPML:
- Content Boxes
- Counter Boxes
- Flip Boxes
- Fusion Slider
- Google Map
- Image Before & After
- Image Carousel
- Layer Slider
- Menu Anchor
- Modal Text Link
- One Page Text Link
- Pricing Table
- Progress Bar
- Revolution Slider
- Section Separator
- Sharing Box
- Social Links
- Tagline Box
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.
<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:
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.
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.
To translate the global element follow the steps below:
- Navigate to Fusion Builder -> Library. Click the Edit link.
- Click the + icon to translate the global element in the desired language. This will take you to the Translation Editor page.
- Enter the translated texts and select the Translation is complete check box. Once you complete translating the texts, click the Save & Close button.
- 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.
- 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.
All the textual elements load into the front-end including the global element text. Let’s see how it renders on the front-end:
You can follow the exact same steps above to translate global containers and columns.
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.
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:
- 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).
- Update the element to your liking and Save the element then Update.
- In the language meta box, you click on the spinning arrows icon to update the translation. This takes you to the Translation Editor page.
- Notice that the older translated text is preserved. Translate the added text, tick the Translation is complete for each field, then Save & Close.
This updates the translated version of the global element across your website.
You can translate custom post types using the Translation Editor.
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.
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.
You can follow the same steps to translate the regular posts.
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.
2. Click on the add link to add the translation
3. Add your translation to the Name, Slug and Description fields and click on Add New Catagory.
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.
3. Click on the plus button to add the custom taxonomy translation by filling the required fields and then click on the Save button.
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:
- 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.
- Add the translated text and tick the “Translation is complete” option for each field. Click on Save & Close.
- 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
- 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.
This is how the translated slider looks like on the front-end:
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.
With WPML, you can easily synchronize your language menus. For more information, please check our page about translating menus.
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.
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.
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.
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.