How to Create Different Designs per Language

Creating different designs and translations for each language helps you personalize content for different audiences. For example, here’s a page in English and French with different designs:

Creating Different Designs per Language for Individual Posts and Pages

When you create a different design for a language, you must translate the content manually in the native WordPress editor. If you use the Translation Editor or automatic translation, your custom design will be overwritten with the original page’s layout.

WPML offers two ways to create a different design in each language:

• Start with a blank page – Create a new design from a blank draft and manually add your translations
• Duplicate the original page – Start with a copy of the original, then customize the design and manually replace the default text with translations

Designing from a Blank Page

To start designing from a blank page:

1. Edit the page or post in your default language.
2. In the Language section on the right, click the WordPress Editor tab under Translate this Document.

3. In the pop-up that appears, select Only this page and click Apply.
4. In the new table that appears under Translate this Document, click the Plus icon next to the language you want to create a different design for. A blank draft will appear.

5. Design your page and manually add the translations. Then, click Publish.

Designing from a Duplicate of the Original Page

To create a different design in another language, starting with a copy of your original content: 

1. Edit your page or post in the default language.
2. In the Language section on the right, click the WordPress Editor tab under Translate this Document.
3. In the pop-up that appears, select Only this page and click Apply.
4. Select the Duplicate checkbox next to your target language and click the Duplicate button that appears

5. A new container will appear under Translations with the language you just duplicated content for. Click the pencil icon to open your duplicate draft with the original content.

6. Customize the design and manually replace the original content with translations. Then, click Save.

Creating Different Designs per Language for Templates and Template Parts

On a block theme, you can give a template or template part (for example the header or footer) its own design in each language.

1. Go to Appearance → Editor and open the template or template part.
2. In the sidebar, open the Language panel. It shows the item's language and its translations.
3. Under Translations, click the WordPress Editor icon. In the dialog, keep Only this template (or Only this template part) selected, check I understand, switch to the WordPress Editor and click Apply.
4. Click + next to the language. WPML makes a copy of the original in that language and opens it in the Site Editor.
5. Change the design and replace the texts with your translations. Then click Save.

Careful: if you reset or delete the original template or template part in the Site Editor, WPML deletes its translations too.

If a template still comes from your theme or a plugin, the panel shows no +. Save a change to the template in the Site Editor first. After that, WordPress uses your saved copy, and updates of the theme or plugin no longer change the template.

A language that has no version of its own shows the default language's version. If that doesn't exist either, it shows the original's version, and then the theme's design.

Translating Content Manually

Some plugins keep their content outside the page. WPML cannot read that content, so the Translation Editor does not show it. The page of such a plugin in our plugin compatibility directory says that the plugin needs to be translated manually.

Forms, sliders, and tables often work this way. The page itself holds only a shortcode or a block that points to the item.

To translate this content, you always follow the same rule:

• In the plugin's own admin page, create a separate copy of the content for each language.
• Translate the texts in each copy.
• Translate the page in the WordPress Editor and insert the copy for that language.

In this example, we translate a contact form from English to Spanish. The steps are the same for a slider, a table, or any other item from a plugin that is not compatible with WPML.

1. Go to your form plugin's list of forms and duplicate the form.
2. Open the copy and change its name, so you recognize it later. For example, Contact Us Form in Spanish.
3. Replace the field labels and the button text with the Spanish texts.
4. Translate the form messages too. Most form plugins keep them in the form settings, for example the success message and the validation errors.
5. Save the form.
6. Edit the page that contains the form, in your default language.
7. Create the Spanish translation in the WordPress Editor, with one of the two ways above. A duplicate keeps the original layout, so you only replace the form.
8. Open the Spanish page for editing.
9. Remove the original form and insert the Spanish form. If you insert the item with a shortcode, use the shortcode of the Spanish copy.
10. Click Update.

Repeat these steps for every other language.