One design and one set of display rules serve every language. For the full Elementor setup, read how to translate an Elementor website with WPML.
What You Need to Do
A header or footer from the Theme Builder is a template: a part Elementor shows around your other pages. WPML translates its texts in one job and shows each visitor the copy in their language, on every page.
With Translate Everything On: Nothing
If you use PTC and your site is on Translate Everything, WPML translates the whole site, your headers and footers included. You do not need to do or review anything. When you edit a header or footer later, WPML translates the change too.
You set it up in the Translate Everything Automatically box at the top of WPMLTranslations. Read how to translate everything automatically.
With Translate Everything Off: Send the Header and Footer from the Translation Dashboard
You choose what to translate and when. You can send the header and the footer at once.
- Open the Translation Dashboard. Go to WPMLTranslations. Headers and footers are in the Elementor Templates section.
- Select the header and the footer. Check the box next to each.
- Choose automatic translation. Under Translate your content, choose Translate automatically for each language.
- Choose Publish without review. Under What would you like to do when WPML finishes translating your content automatically?, choose Publish without review (Recommended). Translations from PTC are ready to publish, so they go live as soon as they are done.
- Send them. Click Translate content. A popup confirms Sent for translation.
The translations complete in minutes and are live. In Translation Jobs, each job shows Completed. There is nothing more you need to do. When you edit the header or footer later, send it again from WPMLTranslations.
Read more about the Translation Dashboard.
What WPML Translates in an Elementor Pro Header or Footer
- The texts: headings, text, buttons and their links, and the footer's link lists.
- The menu's name for screen readers. The Nav Menu widget's Menu Name is what a screen reader announces for the menu, so visitors who use one hear it in their language.
- The search button text of the Search widget.
- The values of custom attributes. For a line such as
aria-label|Open the menuin an element's Attributes, the value is translated and the attribute name stays as it is.
The search button and custom attributes translate the same way on any Elementor page.
A site title you typed into the Site Title widget shows in the visitor's language too. Read how to translate Elementor Site Settings.
See the Translated Header and Footer
You can look at the translations to see for yourself. Visit any page in any of your other languages.
- The header and footer texts and the buttons read in that language.
- The menu and the search button read in that language too.
If You Want to Change a Translation or Translate Headers and Footers Yourself
You do not need to check anything. If you want to change a text, do it this way:
- Open Translation Jobs. Go to WPMLTranslationsTranslation Jobs.
- Click the pencil on the job's row. The header and the footer each have their own job. Use the row of the job and the language you want. The pencil's title is Edit Translation. The Advanced Translation Editor (ATE) opens with every text of that template.
- Edit what you want. Change any text in the editor.
- Click Save and Complete. Always finish this way, even with no change. Otherwise the job stays In progress.
When you use PTC, it learns from your edits, so you do not need to keep making the same corrections.
Translate the Header and Footer Yourself
To translate them yourself from the start, choose it when you send them:
- Send the header and the footer from WPMLTranslations as above. In the Dashboard's step 2, choose Translate myself instead of Translate automatically.
- The jobs then wait in the Translation Tasks tab. Click Translate on each.
- Translate the rows in the Advanced Translation Editor and click Save and Complete.
What You See in the Translation Editor
In our example, French, automatic translation gave these texts:
| Original | Label in the editor | Translation (our example) |
|---|---|---|
| Open every day | Title (H2) | Ouvert tous les jours |
| Order now | Text | Commander maintenant |
| Harbor Coffee shop | Title | Café Harbor |
| Main menu | Menu Name | Menu principal |
| Visit us | Title (H2) | Venez nous voir |
| 12 Harbor Street, open 8 to 18 | Text | 12 Harbor Street, ouvert de 8h à 18h |
| Our coffee, Contact | Text | Notre café, Contact |
| Search | Button Text | Rechercher |
| Order coffee online | Aria Label | Commander du café en ligne |
One Design for Every Language
- Icons of menus, buttons and lists are drawings without text. They are the same in every language.
- The logo is the same image in every language.
- The display rules that choose where a header or footer shows are set once, on the original template. They apply to every language: each translated page gets the translated copy of the header the rules pick.
Related pages:
- Add the language switcher widget to Elementor templates
- Translate menus
- Create different Elementor templates per language
Building a site for a software company whose app shares the site's navigation labels? The same translation system also translates the product's documentation and user interface with Private Translation Cloud (PTC) for software.
