How to translate a Weebly website

In this article, we will see how to take full advantage of the potential of Weebly. In particular, we will explain in detail how to create a fully-fledged multilingual site using Weebly!

What is needed

Before proceeding with the rest of the guide, here is what you need:

• Familiarity with Weebly menus (especially the SEO section).
• Familiar with Weebly's "Edit HTML/CSS" menu.
• You must then download these two Javascript files (to do so, simply click on them... if this does not work, right-click and choose "Download/Save File"):
• languages-1.0
• jquery-1.10.2.min (a library required for correct operation).
• Go to Settings -> General -> Navigation and uncheck "Group excess pages under More...".

Setting the menu pages correctly

In this guide, I will show you an example of a multilingual website, then you simply have to reproduce it on your own website!

We start by creating these example pages (in order):

• Home, Information, Contact -> These are the pages in English.
• Home, Information, Contacts -> These are the pages in Spanish (or whatever language of your choice).

Note that the pages should be grouped according to language! In other words, all the pages in English should go first and then only after those in Spanish, or vice versa; the important thing is that there should be a start page at the top of the group of English pages (in this case "Home") and another at the top of the group of Spanish pages (in this case "Inicio").

In each of the pages you have just created, you must go to "Advanced -> ENTER CODE" and paste the following code:

<script> language='LANGUAGE_CHOICE'; </script>.

where LANGUAGE_CHOICE becomes 'es' in Spanish language pages and 'en' in English language pages so it will be something like:

<script> language='es'; </script>.

Uploading necessary files

By now you have already downloaded the two necessary files (Languages and jQuery)... so you have to upload them on your website! To upload a file to Weebly, go to Theme -> Edit HTML/CSS and click on the + next to "ASSETS", then click on "Upload File(s)" and upload the two downloaded files. (and upload the two downloaded files, languages-1.0.js and jquery-1.10.2.min_.js.

Installing Javascript code

Now pay attention to the following steps:

Go to Settings -> SEO and paste the following code into the field "Footer code":

<script> hideMenus(); </script>.

Also in Settings -> SEO, paste the following code into the 'Header code' field:

<script src="/files/theme/jquery-1.10.2.min_.js"></script> 
<script src="/files/theme/languages-1.0.js"></script>
<script> 
langs = {
"home": "en",
"start": "en" 
};
menuSelector = '#navvvv'; 
</script>.

Adapt the code to your website

Let us examine this last code together, as you will have to modify it to make it work on your site:

• You must write the start page that is at the top of the various language groups that you have added before... in this example, the "home" page will go first, followed by the language in which it is written ("en") and then the "start" page. I would also like to point out that the name of the pages must be written in lower case and must be identical to the name in the "Pages" menu.
• Then you have to put the ID with which your theme uniquely identifies the main menu container, and to do this, you have to go to Theme -> Edit HTML/CSS and open any of the files in the "INTESTION TYPE" section; you should now find that line in which the menu is confined (more precisely, look for the words "{menu}", or something like that.

Please note that not all themes necessarily have a div id (often there is only the class=...), but in that case you only have to add an id="NAME", where "NAME" is a word that you arbitrarily decide; clearly, this has to be done in each file in the 'TYPE OF INTESTION' section, i.e. in landing.html, no-header.html, etc...

Buttons/Links to change the language

Now you have to give the user the possibility to change the language of the site. There are two ways to do this:

1. Insert buttons on each page/article of your site, and this is feasible if you manage a static site, i.e. without a blog and with only html information pages; these buttons/links must lead respectively to the initial pages of the language in question, i.e. the "home" page if the user wants English, and the "inicio" page if the user wants Spanish.
2. Insert the buttons once, using HTML (recommended if you have a blog on your site). In case you choose the 2nd method, these are the codes to use:

<a href="/home.html"> English </a> -> takes you to the “home” page in English.
<a href="/inicio.html"> Italian </a> -> takes you to the “inicio” page in Italian.

At this point, however, you will be wondering where to put these two codes... That's easy to say: go to Theme -> Edit HTML/CSS, open any file in the "TYPE OF HEADING" section and paste the code where you want it to appear (for example next to the social buttons, or under the menu)! Obviously, you must do this for each file in the "TYPE OF HEADING" section.

Conclusion

Weebly is for sure one of the best solutions for those who want to revamp their business by putting it on the Internet. Sure, it’s not suited for those without a technical background, but apart from that, it’s an excellent alternative to other big names in the industry. It’s not difficult to translate it into as many languages as you want but to do it, you need the right partner at your side, and we at Hero Translate can be that partner you are searching for!

Please don’t make the mistake of thinking that using an automatic translation is a viable option because it’s only going to hurt your image in the long run. Use only professionals that have a proven record of delivering superb results. Someone like Hero Translate!

Get an Instant Quote or Contact Us and take advantage of a 10% Discount on your first order and become part of the 10.000+ companies and professionals that used Hero Translate to exploit international markets successfully!