Translating a Webflow website and making it multilingual has proven complicated for many users. The platform doesn’t offer a native solution for full-site translation, so users generally re-create their pages manually or duplicate existing ones in a translated language.
Here’s the problem: these methods are not good for SEO (self-translated pages will either be poorly indexed or not indexed at all on search engines); plus, it takes a lot of time and effort to maintain everything.
At Weglot, we wanted to create an easy solution to help Webflow users to translate their websites and make them multilingual.
Fast and easy: you don’t need to do any coding, and the solution is integrated in minutes
All-inclusive: all of the content on your website is automatically detected and translated
SEO-optimized for translated pages: your Webflow website will be indexed by search engines in all your languages, via individualized subdomains
Translation tools: Weglot gives you access to a first ultra-fast round of automatic translations, which you can supplement with professional translations – ready-to-order right on your Weglot dashboard
Bonus: top-notch, expert support team to help you out whenever you need
Before trying it out yourself, you can check out an example of a translated Webflow website here.
In the example, we integrated the language-switch button into the main menu bar, as a dropdown. You can click on it to change the language from English to French.
Let’s start translating your Webflow website.
This account will be the place where you have all your translations and where you will manage them. Simply create a Weglot account here.
In this step, you need to enter your domain name and the languages you want.
DO NOT add your temporary domain name ending with .webflow.io.
In our example:
Click on the “Next” button to go to the following step.
This is the step where you configure your DNS to create and connect the subdomains.
The subdomains will display the translations of your Webflow website once configured. In this example, we’ve used Google Domains as our domain name provider; however, there are lots of other providers out there, and the DNS entry process will look fairly similar no matter which you’ve chosen to use.
On your Weglot account setup, you’ll see the following DNS entries to add:
Now, go to your domain name provider account (again, in this example, it’s Google Domains); then, go to the section or page where you can manage the DNS (for instance, in Google Domains, it’s located under a tab on the left-side menu bar called DNS).
At this stage, you should be able to create new entries in the DNS table on your screen (in our example it’s in the section “Custom resource records”). Select CNAME as the type of entry.
In our Google Domain example (it should be very similar if you’re using another provider), enter the first part of the certificate under the Name section and the last part under the Data section.
(Note: if you’re using Google Domains, add a “.” at the end of the certificate ending with “.acm-validations.aws”, so that it reads ”xxxx.acm-validations.aws.”)
If you have any issues figuring out where to find or how to update your DNS records, we can help you. Just email us at firstname.lastname@example.org.
Once you have added and saved the entries, go back to the Weglot page. You can click on “Check DNS” and a green check-mark icon should appear: this means everything has been successfully set up. Now, just click on “Next”.
This is the final step, where you will add the language-switch button onto your Webflow website, and customize some of the app settings.
It’s quick and easy—you just need to follow the steps below (also shown in the gif).
Finished! Go to your website, and you’ll see the language-switch button appear at the very bottom right. Give it a few minutes to make sure your subdomains are properly set up, then you can try changing the language, and you’ll see your translated pages.
Bonus: if you want to add a native language switcher in your menu, you can simply create a dropdown and add links with the following format:
#Weglot-fr for French
#Weglot-en for English