HEY

Participate in the next Webflow Challenge!

Translate your Website : Complete tutorial to translate your Webflow Website with Weglot

Translate your Site. Having a multilingual website is even better! Isn't it time to add more languages to yours?

Updated on

14/12/2020

Translate your Website : Complete tutorial to translate your Webflow Website with Weglot
Translate your Website : Complete tutorial to translate your Webflow Website with Weglot

Translate his site: Having a website is good. But having a multilingual website is even better! Especially since the number of websites that are becoming multilingual is currently increasing. Isn't it time to add more languages to yours (or at least start seeing if it's feasible or not)?

And even if you can't imagine your site in several languages, your clients may still ask you to translate theirs at some point in the future. You will tell yourself that this is not your job, that you are a webdesigner, not a translator. But here's the thing: you're the one who takes care of the technical side of the website. So, how do you translate your website into several languages?

#translation #tuto #weglot

🌈 Survey

In your opinion, what is the easiest and most profitable way for a webdesigner?

Using a translation agency?
Recruit one or more freelance translators?
Trusting a machine translation tool?
Give me your opinion as a comment! 🌈❤️

Summary

Video

Translate your website: Why translate your website into several languages?

Let's say you target different customer profiles; some speak French, others Dutch and others English. It would not be a good idea to settle for a unilingual site. A lot of opportunities will come your way, and that's a shame! That's why it's important to translate your site into several languages.

Your site will also be better referenced. I don't know if you've noticed it, but in most cases, it's usually the bilingual or multilingual sites that appear at the top of Google. This is simply because these sites are visited by a large audience from different countries.

On the other hand, keywords on multilingual sites have equivalents in each of the translated languages. And who says more keywords says: more chances to get a better place on Google.

In the eyes of prospects, a multilingual site will make the person with a multilingual site look more serious, professional and competent. Otherwise, he will never have made the effort to create a site of this scale. It has a large audience, which means that more people trust it.

In your case, your clients will tell you that in addition to your skills in creating websites on Webflow, you are also bilingual! A quality like that is very much in demand these days.

Why not a manual translation, page by page?

If you were to ask me the question I asked you earlier (about the most cost-effective and easy way to translate a site), I would choose the last option. That of using an automatic translation tool like Weglot. You'll find the complete list of other interesting tools here: no-code tools make our lives so much easier !

I'll explain the disadvantages of manual translation:

  • Google will consider your content to be duplicated, as you will have duplicated pages before translating them. In terms of natural referencing, the site will not have any chance to win the best position on Google.
  • Your target customers will not necessarily know that your site is multilingual (because there is nothing to indicate this; no language switch). You should then try to specify it somewhere on the site. In any case, it's not practical at all!
  • Now imagine that you have a very large site (which is already more than a hundred pages long) and you want to translate it. With all these pages, will you ever get there? All this to tell you that with automated tools like Weglot(ready to be integrated on Webflow), you save a lot of time (as I say in my videos that you'll see a little later, you only need 3 minutes).
translate its website
Free training

The ultimate tutorial to translate your website with Weglot - Step by step

It's all very nice. But all that remains is to know how to do it, in concrete terms.

So here are the main steps:

1. Create a Weglot account

Once your account is created, you will need to add this information:

  • domain name of your site
  • his native language
  • the languages you wish to add (in case you were wondering, you can indeed add more than one language)

Additional configuration is still required. You must actually configure the DNS of your domain name to create the sub-domains. To do this, you need to go to your hosting account for your domain name (OVH, a-a-hosting, BlueHost, HostGator, etc. ).

In the DNS tab, you click on "create a new entry". Then click on CNAME. You just have to add the code of the language concerned, in the "name" part.

For the "data" part, it will be this address: websites.weglot.com.

Finally, the button: check DNS.

If you've done everything by these rules, everything should be fine!

PS: each language has a unique code.

2. Configure Weblow

Your webflow site also needs to be configured. Go to :

settings > custom code > head code tab > add code at the end of the <head>tag > paste the Javascript code of your Weglot account</head>.

All that's left is to record everything and publish it.

This series of videos will certainly enlighten you on the steps to follow:

And now, "how do you switch from one language to another?" There's the language switch for that.

Translate your Site: Tutorial to install a language switch - Weglot

In fact, the language switch automatically appears on your site's interface. Usually, it's at the bottom right of the screen. It has a neutral style by default, but you can customize it to take on a more stylish shape that fits better with the rest of the design.

Finsweet collaborated with Weglot for this. He has created some language switches that can be customized, available on the Weglot site.

The first thing to do is to click on the "clone" button in the top right corner. You are then redirected to the Webflow editing page. This is where you choose the button you want to use.

For each language selector you choose, you can choose from the drop-down menu between :

  • wg-element-wrapper
  • wg-code

They are to be copied and then pasted, on your site, obviously, for the switch of your choice. Proceed as follows:

  • Put your cursor on the place where you want this element to appear
  • Then copy the "wg-element-wrapper" to this very spot.
  • The switch is displayed immediately, as soon as this code is pasted in.
  • You must then go back to the UI kit (the link I gave you earlier) to click on the selector you have chosen.
  • Now click on "wg-code", then click on "open code editor"
  • You're given a script, and you're gonna have to copy it.
  • Finally, you go to the Webflow settings to paste it into the <body>
  • Record and publish!:)

Here is the process to follow to make this basic Weglot switch invisible:

  • On your dashboard, go to "project settings", then "web feed settings".
  • Écrit (ou copie pour être sûr de ne pas faire d’erreur) ce code “weglot-container{display:none;}”

Language Switch Basic Weglot

Customized Webflow language switch

Weglot translation: how does it work?

Weglot translates websites in 3 different ways:

  1. Machine translation
  2. Changing translations manually
  3. Connecting the site to a translation service

Which method to choose? It's up to you. In order to help you in your choices however, I prefer to explain one by one, these methods.

1. Machine translation:

This technique is the simplest. You don't need to do anything, because all content is automatically translated. And when I say "all", I really mean "all, without exception".

But here's the thing, some things don't need to be translated. In that case, you can simply change them on your Weglot dashboard.

2. Manual modification

The best way to get a reliable translation is this one! You have to go to your Weglot site (in the translation part ), then modify my translations . Then click on the "eye" icon (to the right of each sentence or block of sentences).

Here's an example:

  • If Weglot translated a sentence like this: "I am on the road"...
  • You can change it to "I am on my way".

The plus with this second option is that you have all the information you need, such as the number of words, the creation date and the URL associated with the content. If you have made some mistakes and want to go back, use the "history" option. Finally, there is the "suggestions" option which, as its name suggests, automatically offers you alternatives to the translation that is already there.

For a modification on the Visual Editor, it's even easier! Changes are made visually. To start, you still have to search for the page to be translated using the search bar at the top left (always via the dashboard). Once you've found the page you want to translate, click on the pencil in the blue circle for the elements you want to change.

3. Connecting the site to a translation service (Pro)

Please note that this offer is only available for paid plans. It allows you to collaborate with accredited professional translation agencies. You do not need to pay any additional fees; they are included in the premium rates.

The process is also simple:

  • You go to the Weglot's dashboard in the translation part.
  • Now that you have the list of translations in front of you, all you have to do is select the pages, articles or sentences you wish to entrust to a professional agency. Send them to the shopping cart, and finally, all you have to do is pay!
  • The translations will reach you within 48 to 72 hours, depending on the number of elements and words to be translated.
translate its website
Free training

Anyway, I told you earlier that you can choose one of these three methods. What I forgot to specify, is that you also have the right to combine them ;)

Translating your website: What makes Weglot "plus" at Weglot

Iparticularly like the fact that we can use Weglot as a team. For example, when site translations are included in my services for my clients, I work with a team of editors, translators, copywriters... It also happens that my webdesign team needs to visit Weglot. In that case, I invite them all to join me in the project concerned. This gives them access to the dashboard. Sometimes my clients themselves need to have a visualization of what's in the back office. In that case, I invite them too.

However, there are other equally interesting options (on the dashboard, in the menu):

  1. Auto Redirection: it is very practical for those who particularly target people who speak other languages besides French. Suppose your target is mainly focused on visitors who speak Dutch. In this case, you go to auto redirection, and change the default language.
  2. Translate Email: emails can also be translated with Weglot. Isn't that great? To activate it, just tick the translate emails box.
  3. Translate AMP: yes! You can choose whether or not to enable AMP translation. Only, it will be a bit more expensive.
  4. Private mode: it is also very interesting, because it allows not to display the translations on the front-end. Only you and your team will have access to the translations.

Here is the overview of the Weglot dashboard

My opinion on Weglot - its strong and weak points

1. Advantages of Weglot

As you've probably noticed, he's super easy! Once installed, it does the job itself, without any extra work required (like wordpress plug-ins; if you're interested by the way, I've written a complete guide on the big differences between Wordpress and Webflow). And if you want to modify a few sentences - for the human touch for example - because they don't sound like you want them to, the modifications are done in real time.

It is no longer rare to find software compatible with Webflow (especially since Weglot is a very complete tool). Weglot works wonderfully with it. That's why it is able to translate all the elements of your site (from the different pages to the various articles of your blog, through the menus, the products sold on the site's online shop, etc.).

Finally, dedicated pages are immediately created during the translation process (such as : www.fr.exemple.com), which avoids duplicate content , and therefore, it's a good point for the SEO of your site. For each new page, a href lang tag is created. Its purpose is to show Google that even if there are several versions of the same page, it is only a translation.

Here is my opinion on SEO and Weglot

2. Negative points

Let's face it, Weglot has a few imperfections. If I tell you about it, it's so that you can prepare yourself for it, and not so that you doubt its efficiency :)

Let's start with the price. It is still high at the price of 5 additional languages, especially for sites that have a lot of content to translate. The free version would be insufficient in this case.

Then, if you're expecting "high-end" translations, you're still going to have to change the machine translations to say 30% (of course, nothing beats manual translations). Machine translations have a few typos from time to time, so a proofreading is always necessary.

translate its website
Free Training

Conclusion

Are you looking for a simple translation solution? I recommend WEGLOT without hesitation! However, its simplicity is only a tiny part of its advantages; it is also complete, fast and powerful . I will finish by saying that it is a huge saving of time and money for companies.

How about you?

Are you ready to use Weglot? What do you think?

Share your experience in the comments ;)

Want to test Weglot for 10 days for free? Yes, I want to try

Comments

Coffee break

4 items you might like

FREE TRAINING

Register here to receive the free Discovery Training
.

Start by taking the Discovery Training, where you will learn the basics of Webflow and a taste of what to expect in the Start Weblow training.

Start the free training