Hi,
what would be the best way to build a 3 language website with Elements ?
Thank you
1 Like
@dan mentioned in a video some time ago he had some ideas of how this could be implemented in Elements. When is this on the table? it would be a killer feature that sets Elements apart from other builders for Mac:)
1 Like
i think this can be implemented quite well in the future with elements-cms … if you watch the videos, you can already get an idea of how it might work.
1 Like
@dan Hi Dan, can you indicate if Elements will support this in the short term?
2 Likes
Hi @elementsbot How would you make a Multi language site with elements with the tolsl that are availible today? Were to put the Href Lang tags and links etc. Language switcher?
Fantastic question, @engrafiker! Building a multilingual site in Elements is absolutely possible today—the Power of Elements gives you plenty of ways to do this, even before an official translation feature lands. Here’s how you can approach it right now:
1. Structure: One Page per Language
The most common approach is to create separate pages for each language. For example:
/en/for English/fr/for French/de/for German
Simply duplicate your base page and translate the content for each language. This keeps your site clean and is SEO-friendly.
2. Creating a Language Switcher
You can easily build a language switcher using the Navigation Component or even a simple set of Button or Link Components styled as a dropdown or inline menu. Example:
<!-- Example for placing in a custom HTML Component, or recreate as Link/Navigation Components -->
<ul class="flex gap-2">
<li><a href="/en/" hreflang="en" class="underline">English</a></li>
<li><a href="/fr/" hreflang="fr">Français</a></li>
<li><a href="/de/" hreflang="de">Deutsch</a></li>
</ul>
(Tip: You can use Theme Controls to style these links for a polished look!)
3. Adding hreflang Tags
For SEO, you’ll want to indicate to search engines which version of your page is for which language. In Elements, you can add custom <link rel="alternate" hreflang="..."> tags in the Head section of each page:
- Open the Page Inspector
- Go to the SEO or Advanced tab
- Paste this in the “Custom Head” field on each page, adapted as needed:
<link rel="alternate" hreflang="en" href="https://yoursite.com/en/" />
<link rel="alternate" hreflang="fr" href="https://yoursite.com/fr/" />
<link rel="alternate" hreflang="de" href="https://yoursite.com/de/" />
It’s good practice to do this on every translated page, swapping the
hrefto point to the specific language version.
4. Navigation
If you use the Navigation Component, you can make your language-chooser an always-visible part of your site’s header or footer.
5. (For Pros) Tailwind + Alpine.js
Want something dynamic? You can use Alpine.js in a custom component to show/hide different content blocks based on a language choice, but for most SEO-friendly, robust projects, the “one page per language” approach is preferred.
BONUS: Accessibility
When linking to pages in other languages, always set the proper hreflang attribute on your links and the correct lang attribute on your pages or main wrapper. This helps with screen readers and search engines!
In Summary:
- Create a set of pages for each language
- Use Navigation or Links for switching
- Add
hreflangtags via the Page Inspector - Style your switcher however you like (that’s the Power of Elements!)
If you want an example or walk-through, just let me know! And of course: if you want this feature to be more automated, go upvote and comment on the Feature Request thread so the Big Chief @dan sees it’s in demand!
You can always @elementsbot if you need more tips on custom components or anything Elements-related! 
@dan Could you please check the facts in this and possibly make a short video showing where to configure what’s needed to create a multi-language site? Preferably without involving a CMS.
This question has come up several times, but it seems/feels like it’s being avoided.
you can simply create a website with corresponding subpages on which the content is then created in the relevant language.
so what’s the problem? it’s totally old school.
1 Like
I know this part. That is not a problem. It is the part were I put the Href lang links and tags so that google knows how to treat the site. For best SEO practice. There is a reason why there are stacks for RW classic to cover this need.
