Articles on: Site editing
This article is also available in:

Adding a language menu

A language menu is a specific component in the header and footer that allows your visitors to switch between languages on your multilingual site. When a user clicks on the language menu, it redirects them to the chosen language version of your site.

Tip: Learn how to create a multilingual site on our platform in the Creating a multilingual site article.

Currently, there are two versions of this element available on the platform: the Language Menu and the Language Links. Further in the article, we will consider their difference and situations where it is better to use one or the other element.

Language menu element for links within the same site
Language links element for links to external sites

Adding a language menu



To set a language menu on your site, hover over the empty box and click on the "plus", then select one of the available elements in the pop-up window:



Important: the Language links element can be only added to the header or to the horizontal flow row in the footer of your site. The Language menu element is currently available only for the header.


Language menu element for links within the same site



The Language menu element allows you to avoid setting up transitions between different versions of a page manually, because it synchronizes with the hreflang settings of your site pages, which are also set automatically when you add a new language version or copy a page from one language version to another.

Hover over an element and click on the gear to open its Settings:



In the Items section, you can see the active languages and, if necessary, rename them for the language menu:



Note: There is currently no way to set a custom icon for languages.

Tip: for the link to the required language to be displayed in the language menu, this language version of the site must be visible - to do this, open the site settings and in the Multilingualism section, activate the switch next to the required language so that it reads "Visible". You can find more details [in step 8 of this section of the instructions] (https://help.weblium.com/en-us/article/creating-a-multilingual-site-1s2xur5/#1-multilingual-site-within-one-site).

In the Layout section, you can choose the structure of your language menu - whether it will be horizontal or in the form of a drop-down list - and select the items that appear in it:



Depending on the options you have selected in the previous section, you will have different Styles of these options available, for example:



Tip: by clicking on the gear next to the color settings, you will open additional parameters.

Note: You can learn more about working with shadows in our article.

In the Advanced section, you can add your own CSS classes to this element to refer to them in your custom code if necessary. Learn more about adding classes.





Important: We recommend adding new pages for language versions of your site by first creating a page in one language, then copying it to the required language versions after completing the page, and then translating them into other languages (see step 7 of this article). Not only will this method speed up your work, but it will also automatically link the pages together in the language menu.

If you have created new pages in a language version other than by copying pages from another language version of your site, you will need to link them manually. To do this, go to the page settings, open the SEO tab and click the Edit button below in the hreflang section and specify other language versions of this page.

Note: If hreflang (links to other language versions of this page) is not specified in the page settings, then such a page will have links in the language menu not to the same page in another language, but to the main page of another language version of the site.

Tip: you can learn more about hreflang in this manual.


Element Language links to external sites



This element is not synchronized with the settings of your site and pages - you need to configure it completely manually, from the list of languages to the redirects to other versions of the pages.

Important: This element is less recommended because it is an older version of the language menu and is currently only intended for creating a multilingual site within different sites (on subdomains). It may be appropriate only if you need to create a multilingual online store or blog, which is currently not possible within a single site.


Hover over the component and click on a "gear" to open its Settings:



In the pop-up window you can choose the Language menu type — the way it will be displayed on a site. By default, the language menu comes as a Dropdown. Switch the tab to the Horizontal in order to change the display:



In the settings below, you can also change the number of the languages in the menu:



Important: The maximum number of languages in the language menu is 8.

There you can also switch the menu style — whether the component will display only the language icon, its name, or both. Besides that, you can adjust the text hover color:



Note: In the Dropdown type of the menu you can also set up its background color:



You can edit the icon of the particular language by clicking on the image itself. Check the article Icons settings for more detailed information.



To edit the text in the menu, select the text and adjust its display in the pop-up. Press on the "chain" icon to add the link to the relevant site address:



Important: When adding links to text in this element, you need to highlight it first, just like with regular text.

After all the changes are done, don't forget to publish your site to display them.

Important: If you don't have the option of adding a language menu in your header or footer, you are using the previous version of the block. To access new features and prevent the unexpected issues with the display, add a new header from our gallery of blocks.

Updated on: 02/24/2024

Was this article helpful?

Share your feedback

Cancel

Thank you!