# Multiple language website with Elements

**URL:** <https://forums.realmacsoftware.com/t/multiple-language-website-with-elements/47878>\
**Category:** Elements\
**Created:** [June 2, 2025, 9:37am UTC](https://forums.realmacsoftware.com/t/multiple-language-website-with-elements/47878 "2025-06-02T09:37:51Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michel66](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michel66/32/29446_2.png) [@Michel66](https://forums.realmacsoftware.com/u/Michel66)\
**Post date:** [June 2, 2025, 9:37am UTC](https://forums.realmacsoftware.com/t/multiple-language-website-with-elements/47878/1 "2025-06-02T09:37:51Z")

</div>

Hi,  
what would be the best way to build a 3 language website with [Elements](https://elementsapp.io/) ?  
Thank you

---

<div class="post-metadata">

**Author:** ![engrafiker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/engrafiker/32/3745_2.png) [@engrafiker](https://forums.realmacsoftware.com/u/engrafiker)\
**Post date:** [June 3, 2025, 7:15am UTC](https://forums.realmacsoftware.com/t/multiple-language-website-with-elements/47878/2 "2025-06-03T07:15:42Z")

</div>

@dan mentioned in a video some time ago he had some ideas of how this could be implemented in [Elements](https://elementsapp.io/). When is this on the table? it would be a killer feature that sets [Elements](https://elementsapp.io/) apart from other builders for Mac:)

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [June 3, 2025, 7:39am UTC](https://forums.realmacsoftware.com/t/multiple-language-website-with-elements/47878/3 "2025-06-03T07:39:12Z")

</div>

i think this can be implemented quite well in the future with [elements](https://elementsapp.io/)-cms … if you watch the videos, you can already get an idea of how it might work.

---

<div class="post-metadata">

**Author:** ![mrniceguy](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@mrniceguy](https://forums.realmacsoftware.com/u/mrniceguy)\
**Post date:** [July 7, 2025, 1:56pm UTC](https://forums.realmacsoftware.com/t/multiple-language-website-with-elements/47878/4 "2025-07-07T13:56:56Z")

</div>

@dan Hi Dan, can you indicate if Elements will support this in the short term?

---

<div class="post-metadata">

**Author:** ![engrafiker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/engrafiker/32/3745_2.png) [@engrafiker](https://forums.realmacsoftware.com/u/engrafiker)\
**Post date:** [July 7, 2025, 4:21pm UTC](https://forums.realmacsoftware.com/t/multiple-language-website-with-elements/47878/5 "2025-07-07T16:21:15Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![elementsbot](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/elementsbot/32/33134_2.png) [@elementsbot](https://forums.realmacsoftware.com/u/elementsbot)\
**Post date:** [July 7, 2025, 4:22pm UTC](https://forums.realmacsoftware.com/t/multiple-language-website-with-elements/47878/6 "2025-07-07T16:22:36Z")

</div>

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:

```html
<!-- 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:

```html
<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 `href` to 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 `hreflang` tags 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! 🚀

---

<div class="post-metadata">

**Author:** ![engrafiker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/engrafiker/32/3745_2.png) [@engrafiker](https://forums.realmacsoftware.com/u/engrafiker)\
**Post date:** [July 8, 2025, 9:34am UTC](https://forums.realmacsoftware.com/t/multiple-language-website-with-elements/47878/7 "2025-07-08T09:34:51Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 8, 2025, 9:55am UTC](https://forums.realmacsoftware.com/t/multiple-language-website-with-elements/47878/8 "2025-07-08T09:55:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![engrafiker](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/engrafiker/32/3745_2.png) [@engrafiker](https://forums.realmacsoftware.com/u/engrafiker)\
**Post date:** [July 8, 2025, 10:12am UTC](https://forums.realmacsoftware.com/t/multiple-language-website-with-elements/47878/9 "2025-07-08T10:12:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Pegasus](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/pegasus/32/25035_2.png) [@Pegasus](https://forums.realmacsoftware.com/u/Pegasus)\
**Post date:** [July 8, 2025, 10:17am UTC](https://forums.realmacsoftware.com/t/multiple-language-website-with-elements/47878/10 "2025-07-08T10:17:55Z")

</div>

you can do the same with elements without any problems.

you only have to insert the hreflang-code in the inspector under “edit extra code” in the header section.

 ![Bildschirmfoto 2025-07-08 um 12.14.12](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/1/d/1dcd66bf32c68cbdf649c89f8bbd164faf3de700.jpeg)