facebook twitter instagram youtube linkedin thumbs-up thumbs-down arrow-right progress locked success play pause

Creating a multilingual website

If you need to create a bilingual or multilingual website, Twenty Over Ten has unique, easy-to-use features to make your website content accessible in multiple languages.

In this guide, we’ll go over these features and go through the build process of creating a bilingual website.

Before we begin, you can preview the bilingual website we’ll be building here:

View Demo


Before you begin

When building a multilingual website, please note the following:

  • You’ll be creating duplicate pages for each language and will manage the content for those pages separately.
  • Certain frameworks functionality may not work as expected. While all frameworks are compatible, we recommend using the popular Fresnel or Pupil frameworks when building a multilingual website.
  • On your website, built-in text like dates, form field labels, search results text, and other auto-generated helper text will still be in English.
  • The Twenty Over Ten dashboard, where you manage your website and it’s content, will always be in English.

Basic Structure

Twenty Over Ten websites are generally structured using pages, either featured as part of what we call the “Main Navigation”, which are pages linked from the persistent header navigation throughout your website, or as “Other Pages”, which are often used for Landing pages, which can be linked to from other places on your website, or directly in other marketing materials.

When building a multilingual website, the page layout of your website will follow a different structure entirely:

  • All content pages, for all languages, outside of your default language’s homepage, will exist in the “Other Pages” section.
  • Each language will also have a dedicated set of links, referencing your content pages, setup in the “Main Navigation” section.
  • All content pages will use an “Alternative Navigation” to show their language’s corresponding set of links for the header navigation.

Step 1: Setup default language pages

To begin building your bilingual or multilingual website, we’ll start by creating your default language pages. In this example we’ll be using English as our default language. The homepage of your website will always exist at the root of your domain, meaning it’s what visitors will see when they enter just your domain name. This page will always exist at the top of your “Main Navigation” area as indicated by the () icon, and is not movable. All other pages should be moved to, or created in, the “Other Pages” section:

Just drag & drop!

👍 Tip: Setup your pages in the same order you’d like them to appear in your website navigation. This will make navigating your pages easier in the future.

Once you’ve finished setting up your default language pages, you shouldn’t see any links in the header of your website preview, and your “Main Navigation” and “Other Pages” structure should look similar to the following:

Remember: Your homepage is inmovable, so be sure to plan your primary language properly.

Step 2: Create secondary language pages

Next, we will create the pages for the other language. In this example, we will be building pages in French. Just like the pages for our primary language, we’ll want to create these in the “Other Pages” section.

The first page that you we will want to setup will be the homepage. To mimic the style of your primary homepage, you can create what are known as “Index” pages. These are pages that have the same features and style of your homepage, perfect for creating multiple homepages in different languages.

For the rest of your pages you can use the “Duplicate” option to create a copy of that page, and then simply translate the page title, slug, and content to your desired language.

Example of where the Duplicate option is

👍 Tip: Group your pages by language, in the same order you’d expect them to show up in your website navigation. This will make navigating your pages easier in the future.


Step 3: Build language navigations

At this point, you should start to notice that when viewing any of your pages you won’t have any navigation items in the header. This is because we setup all of the pages within the “Other Pages” section. Don’t be alarmed! This is important, because we want to setup different navigations to use for each language. By default, any page that is within the “Main Navigation” area will be displayed in the header of every page on your website. Since we are building a bilingual website, we’ll want to show different links depending on which language is being viewed.

To do this, we’ll first want to create “placeholder” pages for each language within the “Main Navigation” area. While these will appear as “pages” in the dashboard, we’ll be using them more like folders for the links we want to show in the header for each language. In this example, we’ll create two pages, one titled “English” and one titled “French”:

If done properly, your page structure and website header should look like this.

Once we have our two placeholders added, you’ll see them showing in your header navigation on every page. You can ignore this for now, as we’ll be fixing this in the next step. For now, let’s continue by recreating the navigation we’d like for each language by creating links as subpages within these placeholder pages.

First, we’ll grab the link for each page we want listed in our English navigation by accessing the page settings and clicking the “Copy URL” button in the Page URL Slug field:

Easily grab the URL to any page

Then, we’ll add a “Link” to the “Main Navigation” area. Paste in the copied URL into the “Link URL” field, and fill out the title to match the page name from where we copied the URL from. Set the “Open in new window?” option to “no” and the “Link Style” option to “normal”:

Here’s how easy it is to set your link styles

Finally, click “Save” and then drag this page so it appears as a subpage under the language placeholder it is part of. Repeat this step for the rest of your pages you want to appear in your website’s header navigation for each language. In the end, it should look something like this:

Make sure they are subpages of the language placeholders!

Step 4: Change navigation for pages

As we’ve pointed out, the navigation showing in your website header doesn’t look great as-is. It’s simply showing the two language pages we created for housing the links we’d like to show for each language. Luckily, the Twenty Over Ten platform has some unique features that allow you to manipulate the navigation that shows for your pages.

All we have to do is edit the Page Settings for each of our content pages (located in the “Other Pages” area). From here, scroll to the section titled: “Advanced Display”:

Don’t foget, you’ll need to do this for every page (including subpages)

You’ll see a few options that give you more control over the header of your website for this page. The option we’re looking for is “Show Alternate Navigation?” By default, all pages show whatever links you have in your “Main Navigation” area, this is why we are seeing “English” and “French” listed on the website header. Using the dropdown, if we select “English” from the list of available pages, it will instead show the subpages of the “English” page for the header navigation, specifically when viewing this page.

Once all set, hit “Save” and repeate this for every page listed in your “Other Pages” area. In our case, we will want to select “French” for our respective french pages.

👍 Tip: For your secondary language pages, in our case the French pages, you will also want to set the “Use Alternate Link for Logo” option, simply paste the URL of the Index page we created for the french homepage.

Once completed, you’ll see the magic of this feature as your website header navigation comes to life:

That’s right, even subpages show up properly for properly referenced links!

Step 5: Add Language links

Now that we’ve setup our header navigations for both languages, you might want to add a link to switch between the two languages. This is important if someone navigates to your domain name, which will show your default language’s homepage, and wants to view your website in another language.

There are a number of ways you could do this, including adding links in the footer of your website, but in our case, since there are only two languages, we’re going to add “button” style links to the header navigation giving the visitor the option to toggle to the other language.

To do this, simply add another “Link” style page to the “Main Navigation” area. We’ll start by adding the link to the French homepage, giving it the title FR and making it a subpage of the “English” placeholder page. We’ll leave the “Link Style” set as “button” but we’ll change the “Open in new window?” option to “no”. Next, we’ll repeat this step to create a link to the English homepage, using the title EN, and adding it as a subpage to the “French” placeholder page.

In the end, you should have something like this, which creates a clear, and obvious way for our visitors to toggle between the available languages:

Simple and unobtrusive!

And that’s it! You can see what we created here:

View Demo


🌟 Bonus: Add redirects for placeholders

We here at Twenty Over Ten like to cover our bases, so we wanted to provide an extra layer of awesome to your bilingual, or multilingual websites. If you recall, we setup a few pages as “placeholder” pages for creating our navigations for each language.

If you were to navigate to these pages, you’d end up seeing a dummy page, which isn’t very attractive. Now, since this page isn’t being linked to anywhere within your website, no one should realistically find it. But it is there, so let’s do something about it!

Since these pages don’t serve any purpose on their own, the best course of action would be to treat these as redirects to actual pages. Luckily, the Twenty Over Ten platform makes this super easy! Let’s start by copying the URL to these pages (the same as we outlined in Step 3), then navigate to your “Site Settings” panel, and open up the “Advanced” section. You’ll see a big button titled 301 redirects. Simply click this, and add a redirect rule, using the copied URL as the “from” address, and then set the homepage of that language as the “to” address.

In our example, it would look like the following:

Super easy, and super helpful!

 


Bonne chance!

(Good luck!)

And as always, if you have any questions, you can always submit a ticket and our support team will be happy to help!

Was this article helpful?
Be the first to tell us!
You already voted on this article!