Translating Sites Created with Drag-and-Drop Layouts

Since version 3.2, WPML can translate entities created by other plugins and themes. In this post, we show how to translate layouts. The idea is to use only one layout for all languages and only translate the texts inside it.

Introduction to Layouts

Layouts plugin is a drag-and-drop editor for page layouts. Layouts works with Bootstrap-based themes and produces a responsive designs. It’s part of the Toolset package of WordPress development plugins.

Layouts designs entire pages, from the first pixel to the last. By itself, Layouts is pretty plain, as it doesn’t include any fancy content elements. Layouts doesn’t need to have a huge (and sometimes bloated) library of page elements, because it works together with the rest of the Toolset plugins. Layout cells can display dynamic content from your site and forms. Instead of choosing a cell from a library and customizing it, Toolset plugins let you easily create your own cells without any programming.

Translating Layouts-Based Sites

Layouts that you create will typically include some ‘static’ text and some dynamic content. For example, look at our ‘company site’ example.

The dynamic elements include the list of services and featured articles. They are created using Views. A View is like a WP_Query with a display template. Since WPML hooks to queries and makes them load content in the right language, you don’t need to do anything to translate Views. The exact same View will load the correct content in the displayed language.

The static elements on this page are the headings. The texts ‘Our Services’ and ‘Features Articles’ are part of the layout. They don’t come from any dynamic content. When you use the same layout for the homepage in another language, you want these texts to appear translated. This is where WPML’s Packages Translation comes into play. It’s a new API that we’ve added to WPML 3.2 and is open for all other authors to use.

Layouts plugin creates packages for WPML. A package for a layout will include all the static texts that are in the layout and will require translation. These packages look very similar to normal WordPress content that you translate using WPML’s Translation Editor. You will see all the fields that require translation.

This way, you create one layout and use it for all your site’s languages. You translate only the static texts and all dynamic content displays in the correct language.

Want to Try?

We’ve created a test site where you can experiment with Toolset plugins and WPML. To use it, launch your private and free training site.

We’ve already created the test content for you, so you can experiment with Layouts and the translation process.

The site’s default language is English and it’s fully translated to Spanish. We’ve added content in French, but haven’t translated the layouts to French.

Follow the video with these steps:

1. Create the training site in discover-wp.com
2. Visit your site’s homepage and switch to French. You will notice that all dynamic elements are indeed in French, but the static texts are still in English.
3. Start by playing with Layouts and seeing how it works.
4. Go to WPML->Translation Management. In the “Translation Dashboard” tab in the Filters section select “Layouts” from the Type dropdown.
5. Select the Home Layout and send it to translation to French (it’s already translated to Spanish).
6. Go to WPML->Translations and locate the Layout-Home job and click on ‘take and edit’.
7. Translate the texts. Need help? Use this translation cheat sheet for the main texts on the page:

   English	French
   Our Services	Nos services
   Featured articles	Articles Vedettes
   Testimonials	Témoignages
   Company Overview	Présentation de l’entreprise
   Recent News	Nouvelles récentes

   
   Remember to click on ‘Translation finished’ next to each field and on the ‘Translation complete’ checkbox at the very bottom of the page, just above the ‘Save’ button.
8. Visit your French homepage again. Now you should see everything, including static texts, translated.
9. Experiment again by editing the layout. You will see your changes apply to all the site’s languages. If you edit or add texts, you will need to update the translation, starting with the Translation Dashboard.

The steps above apply for translating the Layouts using our reference site. The site comes with all necessary plugins pre-installed.

If you would like to follow the steps on your own site, refer to the ‘How to translate Layouts’ documentation at wp-types.com. There you will find the list of all required plugins and more examples.

What’s Next?

Obviously, if you liked editing with Layouts, you are more than welcome to buy Toolset and use it for your real projects.

We want to see many more plugins and themes offer easy translation for complex structures. If you are using page builders, forms, and other ‘non WordPress’ elements, we encourage you to contact the authors of these plugins and themes. Tell them about this possibility in WPML. We are very interested in working with other authors and integrating the Packages Translation API.

Leave your comments here and we’ll get back to you.