Website translation

Webflow Tutorial: How to Go Multilingual

Webflow Tutorial: How to Go Multilingual
Elizabeth Pokorny
Written by
Elizabeth Pokorny
Elizabeth Pokorny
Written by
Elizabeth Pokorny
Reviewed
Elizabeth Pokorny
Reviewed by
Updated on
June 13, 2024

When it comes to creating a website on Webflow the possibilities and freedom are endless.

And, we’re big lovers of the no-code tool Webflow because of the flexibility it’s brought to many of our users. We’ve even built our own multilingual Webflow website with the help of a web agency – Finsweet – which you’re free to clone.

Apart from being super flexible and user-friendly, Webflow recently launched Webflow Localization, their native localization solution that allows you to create a multi-language site for your new markets.

This option is great for those with a small website and no plans to scale, but if you’re looking for a Webflow localization solution that can grow with your website, Weglot might better suit your needs.

So, if you’re ready to turn your Webflow website into a multi-language site, we’ll show you step-by-step how to do that with either Webflow Localization or Weglot. No matter which solution you end up using, check out our library of custom language switchers at the end of the article, which you can clone right now on your site!

Using Webflow Localization For a Multilingual Website

Webflow has recently launched Webflow Localization, which makes it possible to make your website multilingual. With it, you can design, build, and customize localized sites directly in the Webflow Designer. Here's what you can do:

  • Build localized sites visually.
  • Customize your locales.
  • Automatically translate content natively.
  • Allow visitors to choose their preferred language.

With these features, Webflow makes it feasible to adapt your website for various linguistic groups and ensures that it’s optimized for search engines with a number of multilingual SEO features included.  

To add Webflow Localization simply follow these steps:

Head to your Settings panel and click Localization.

  1. Choose your primary locale from the respective dropdown—this will be the locale or language you will add to your site.
  2. Configure the locale’s display name, subdirectory, and publishing status.
  3. Save your changes.
  4. If you’d like to add more locales, click Add new locale and repeat steps 2-4.

For many Webflow users, Webflow Localization doesn’t yet have all the functionality required to create a multilingual site that can also scale and streamline the workflow of your translation project.

Try Weglot for free

Certain key localization features, such as language redirection, media translation, and simple translation management tools, are only available on higher plans, and the latter is only available if you purchase a translation management system plugin at an additional cost (starting at €125 a month).

Note, for a like-for-like comparison, you can check out our Webflow Localization vs Weglot page.

Using Weglot to Go Multilingual on Webflow

Webflow’s localization’s solution naturally has a design centric approach to website translation which is great for those wanting to create a multilingual website directly in the web design phase.

However, as we mentioned, it’s still missing a few features that make going multilingual even more convenient.

That’s where Weglot steps in. It was built to translate your Webflow website instantly, allowing you to turn your create a Webflow Project multilingual in just a couple of steps.

Weglot removes the complexity of website translation by offering an end-to-end website translation solution that includes automatic content detection and translation, full translation editing control handled through a separate interface, multilingual SEO setup, and more.

With a clear pricing structure, what you see is what you get with Weglot’s paid plans.  

Weglot vs Webflow Localization plan pricing comparison

Weglot also offers significant multilingual SEO benefits as well, so you can reach your global audience. Choose between subdirectories or subdomains, automatically added hreflang tags, and get your site visible on international search engines—these features are available in all plans, even free.

Tutorial: How to Add Multiple Languages to Webflow

Although not a native solution, creating a multi-language Webflow website with Weglot is simple and code free. Here are the steps you’ll need to follow to get set up:

1. Create a Weglot account: This is where you’ll manage all your translations in a separate dashboard. This means you don’t need to invite people to the design editor in your Webflow project.

2. Add your domain name: The native language of your site and the languages you want to add (Note, if you’re using a temporary Webflow domain name, use this integration or wait until you’ve purchased a custom domain to continue).

Setting up Weglot for your multi language Webflow website

3. Configure your DNS records: Do this to create your subdirectories or subdomains (you can choose between both options with Weglot). Go to your domain name provider account and the DNS records tab. Create a new entry – select CNAME. Add the language code of the language you’re adding in ‘name’ and in ‘data’ add the value provided in your Weglot Dashboard. Then click ‘check DNS’.

4. Configure settings: The final step requires you to go to your Webflow admin area ‘Settings’ – ‘Custom Code’. Go to ‘Head Code’ and ‘Add code at the end of the head tag’. Copy and paste the JavaScript HTML snippet from your Weglot account

How to configure settings for your Webflow multi language site

5. Wrapping up: Save changes and publish your site.

And that’s it—you now officially have a multi-language website Webflow site, enhancing the user experience for your international customers!

Weglot works by detecting, translating, and displaying your Webflow site instantly. We give you a first layer of automatic translation using leading providers DeepL, Google Translate and Microsoft (included in your monthly plan), together with full editing control to edit your site translations how you want. Whether you leave them as is, add a translation team to the project, or order pro translation directly in your Weglot project, we give you the choice.

This is a stand out feature as it means you don’t need to manually activate translations on each page for every language like you do with Webflow Loalization - and factor in that you’ll need to repeat this step when you add new pages or make updates.

An important point to also add here is that by handling your translations outside of your Webflow project, you won’t need to give your team or translators access (and therefore purchase more seats at $19 a month) to the design editor.

Weglot's product tour

Webflow Language Switcher

Let’s also talk language switchers. Both Webflow Localization and Weglot come with a default one that you can customize. This allows your website visitors to switch between the different language versions of your site.

The Weglot language switcher is neutral in its appearance. However, you can make a number of no-code changes to its appearance within your Weglot Dashboard, including adding custom CSS.

No matter which translation solution you’re using, you can clone one of the many custom language switchers we created with Finsweet, which you can find in our Webflow multilingual UI Kit. We've also recently released a second set of language switchers with Digidop.

Here's a look at the language switchers we made with Finsweet:

webflow-tutorial-language-switcher

Check out the tutorial video to see how to add one:

And here's a look into the language switchers we made with Digidop:

Webflow Language Switcher Inspiration

We can put theory aside for a moment and take a look at the success stories of companies that used Weglot for adding multiple languages to their website and customizing their language switchers.

1. Weglot

Weglot homepage

Firstly, it would be wrong of us not to mention our very own Webflow site, Weglot 😉. We weren’t lying when we said we were fans of Webflow, and that’s reflected in our own choice of using it to display our global presence.

We went custom with our language switcher to fit our new branding. And as champions of website localization, we chose the native language name in ours to ensure the user experience is clear for our English, French, German, Italian, Spanish, Japanese, and Dutch website visitors.  

2. i-Mesh

imesh homepage

The next example comes from textile creator i-Mesh who takes things a little more custom (which is only right if you use Webflow). 

They’ve added their language switcher in their left-hand sticky sidebar, so it’s visible to all website visitors scrolling on their site. And rather than going for language code or name, they’ve simply used half of the word, complementing the modern and simple style of their site. 

Language switchers don’t need to be complicated, and i-Mesh is a clear example of that.  

3. Dropcontact

Just like Weglot, Dropcontact also hails from Paris and showcases its prowess through a Webflow-based website. Their site is not just about aesthetics; it features engaging scroll animations and a soothing, two-tone color palette that exudes a sense of calm and cohesion.

What truly sets Dropcontact apart is its seamlessly integrated language switcher, strategically positioned within the main navigation bar. This feature not only enhances the aesthetic appeal of the site but also underscores Dropcontact’s commitment to accessibility and inclusivity.

Dropcontact homepage - Webflow mutli language website

4. Big Blue

bigblue homepage

This logistics provider has gone for something slightly different both in terms of the position and design of their language switcher. It's located in the footer, with each language accompanied by a flag in the dropdown menu.

Whilst flags might not be everyone’s cup of tea, they do have their place – especially if you’re specifically doing business in the countries of the flags you’re using. 

(FYI where it’s not a good idea: e.g. if you’re hoping to do business with Spanish-speaking countries and use the flag for Spain, you’ll end up alienating Latin American countries). 

They initially used the subtleness of a language code. But then, they included the full language name, plus a flag in a dropdown, which makes the language switcher subtle yet eye-catching at the same time.

A Multi-Language Webflow Website, Instantly

We’ve talked you through how to create a multilingual Webflow website, looking at both Webflow Localization and Weglot, and hopefully you’ve now found the perfect solution for making your Webflow website multilingual.

And, for those wanting to customize, we’ve taken a little bit of the work away from you by joining forces with Finsweet to create 14 different language switchers you can add to your site right now!

Weglot pricing starts from €15 a month, and you can start your free 10-day free trial to get testing right away. We have free plans available, right up to enterprise level, so you can find a plan that best fits your needs.

Discover weglot

Ready to display your website in multiple languages?

Try Weglot on your website for free (no credit card required).

Icon blog

In this article, we're going to look into:
Try for free