How to translate an Elementor site, switcher included

Elementor builds pages and does not translate them. Its own guide to translating a website names translation plugins, WPML, TranslatePress and Polylang among them, as the tools that do the translating. Which one suits an Elementor site depends mostly on one question: does the plugin translate what Elementor stores, or what Elementor renders?

This guide covers both, then shows what LangRelay does with an Elementor page and how to place its language switcher with the LangRelay Switcher widget.

Where Elementor keeps a page#

When you press Update in the editor, Elementor saves the page's layout and content as JSON in WordPress post metadata, a custom field in the wp_postmeta table, as its developer documentation describes. Every heading, text block and button is an element in that JSON with its settings beside it. The documentation's example of a widget element starts like this:

{
  "id": "12345678",
  "elType": "widget",
  "widgetType": "heading",
  "settings": []
}

A translation plugin that works on stored content has to translate inside that structure. The common way is a copy of the page per language, each with its own Elementor data, linked to the original. WPML's purchase page lists translating page builder designs such as Elementor among its features; its €39 a year Multilingual Blog licence leaves page builder support out, and the €99 Multilingual CMS licence includes it (prices checked 2026-10-07). Polylang manages a copy per language as well; its features page says its Pro DeepL integration is not compatible with Elementor and some other builders, and its DeepL guide names Elementor and Divi content as unsupported, so those pages are translated by hand in the copy.

Working on stored copies gives you a real WordPress page per language, which you can open and change in Elementor like any other. The cost is that every language holds its own copy of the design: a section added to the English page has to be added, or synchronized, in each translation.

What LangRelay translates on an Elementor page#

LangRelay works on what Elementor renders. Its WordPress plugin applies approved translations to the HTML WordPress sends for a page, under the language's prefix, such as /it/, so it never reads or writes Elementor's JSON. There is one copy of the design, the one you edit, and every language follows it.

Everything in that HTML is in scope: the text of headings, text editor and button widgets, image alt text, the page title and meta description, and the headers and footers your theme or Elementor templates add to the page. Text that repeats across pages, such as a footer line or a call to action in a global template, is translated and reviewed once, then shown wherever it appears. Text inside an element marked translate="no" is left as it is.

Some widgets show text only after the page has loaded, through JavaScript. LangRelay's script in the visitor's browser translates such text when the same text has an approved translation elsewhere on the Site. Text a widget builds that has no approved translation anywhere yet appears in the original language, so open a translated page with its tabs, sliders and popups and read them; to check before pages go live, choose Ask me first.

Elementor's save also writes a plain-text copy of the page into the post through WordPress's own wp_update_post, as Elementor's code on GitHub shows. The LangRelay plugin reports saved posts to LangRelay about a minute later. Only the changed text is machine-translated, and it goes live like any other translation: right away by default, unless the free checks hold it. Saving a header or footer template reports the template's own address, not the pages that show it, so after editing one, or if an edit does not show up in the Dashboard, ask Relay to fetch the affected pages again.

Adding the LangRelay Switcher widget#

The plugin registers an Elementor widget called LangRelay Switcher in the General category of the widget panel. To put the switcher in your header:

1. Open your header template, or the page, in the Elementor editor.
2. Search the widget panel for LangRelay and drag LangRelay Switcher into place.
3. In the widget's Display section, choose Show Flags, Show Language Names and Use Native Names. Each offers Default, Yes or No, and Default means yes.
4. Update the template.

The editor shows the widget as a dashed placeholder labelled Language Switcher; the real list is drawn when the page is served, from your Site's live languages. If both flags and names are set to No, the widget shows names anyway, so a visitor always has something to read. Until the Site has a language to switch to, the widget prints nothing.

The plugin also adds a floating switcher in the bottom right corner of every page that has no switcher of its own, once your first language is live; it is on by default and can be turned off in the plugin's settings. Once the widget renders on a page, the floating one stays away from that page, so a header widget replaces it across the site. A switcher from another plugin does not count, and a theme that renders its own language menu would show two.

What the widget prints#

This is a worked example. A Site translated from English into Dutch and Italian, with names shown and flags off, gets a list like this on its English contact page (classes and data attributes left out):

<nav translate="no" aria-label="Language">
  <ul>
    <li><a href="https://example.com/contact/" hreflang="en" lang="en" aria-current="true">English</a></li>
    <li><a href="https://example.com/nl/contact/" hreflang="nl" lang="nl">Nederlands</a></li>
    <li><a href="https://example.com/it/contact/" hreflang="it" lang="it">Italiano</a></li>
  </ul>
</nav>

Each language links to the same page in that language: the page's translated address if you set one in the Dashboard, otherwise the language's prefix on the same path. Each link carries its own lang, which is the pattern WCAG's Language of Parts guidance shows for a list of language names, so a screen reader pronounces Nederlands in Dutch. The list is part of the HTML, so it works without JavaScript and search engines can follow it, and translate="no" keeps the names from being translated.

What works today, and what is coming#

On an Elementor site today, LangRelay translates every page and template from what Elementor renders, so all languages share the one design you edit. The LangRelay Switcher widget, the block and the shortcode print the same list with the same three display options, so you can put the widget in an Elementor header and use the block or the shortcode elsewhere. The floating switcher covers any page that has none of them. Open your first translated Elementor page in the language, on a phone and on a desktop, and click through its interactive widgets; to do that before pages go live, choose Ask me first.

Coming next, inside the widget, LangRelay's browser script will draw the designed switcher that sites using LangRelay's script tag already have, while the plain list stays in the page's HTML for search engines and visitors without JavaScript. It has no release date yet.

The WordPress translation guide covers connecting the plugin and choosing languages, and language switcher best practices covers placement and labels. A shop built with Elementor and WooCommerce should also read how to translate a WooCommerce store. To see an Elementor page of yours translated, book a demo.