20 December 2013

How to add multiple languages in a Weebly website

If you are using the amazing Weebly service and love the simplicity of it all, you will be reluctant to move away from it even when you start to need more advanced functionality. One such hurdle is how to add another language to your Weebly website. Of course, you can just copy your entire site and cross link it to the original, but in that case you will need to maintain two separate sites. And things get even more complicated if you want to add more languages.

Working with the design of www.GetVladimir.com and checking out the functionality of the Weebly page builder, I have found a solution how to implement any number of languages in your existing Weebly website and all having their own menu and structure. Here is the step-by-step procedure (in less than 5 minutes):

Always make a backup copy of your website and templates before making any changes!
I don't take any responsibility for any damages whatsoever from this procedure, you do it at your own risk.

(This procedure works with all versions of Weebly, including the latest update. Only the interface might be different)

1. Go to your Weebly website build menu and choose Pages
2. Make a copy of each page that you would like to have in another language by using the Copy Page button
3. Check the box Hide page in navigation menu on all the new pages that you copied
4. Now go to Settings and click on Archive/Un-publish
5. Click on Create Archive and download it to your computer
6. Extract the index.html file from the archive on your desktop

Now we need to create a new page layout for the new language:

7. Go to the Design menu and click on Edit HTML/CSS
8. Click on Add new layout and click on Other
9. Type the name of the language you want to add and click Continue
10. Click on the layout you are already using on your website and copy all of its contents
11. Click on the newly created language layout and paste all the contents inside, overwriting the existing.

To add a custom menu to the second language, we need to copy it from the index.html file

12. Open the index.html file from the archive with notepad or any other editor
13. Scroll down to find the default menu and copy it (it's usually below the logo string)
14. Now back to the Weebly newly created language template, look for the string <td>{menu}</td>
15. Paste the contents over the <td>{menu}</td> string to add the custom menu

Now you have a custom menu that is a copy of your default menu. You can change it any way you like.

16. Translate the menu items in the language you want to add
17. Point all the links to the translated pages that you copied before. You can use the full links including the domain name.

For your convenience, here is the menu with the updated links of the website from the video. Just change the links and the style to suit your needs.

<li><a href='http://www.getvladimir.com/prasaj-go-vladimir.html' style="font-size:13pt; font-family:'arial bold'">Прашај го Владимир</a></li>
<li><a href='http://www.getvladimir.com/popravi-kompjuter.html' style="font-size:13pt; font-family:'arial bold'">Поправи Компјутер</a></li>
<li><a href='http://www.getvladimir.com/useful-programs.html' style="font-size:13pt; font-family:'arial bold'">Корисни програми</a></li>
<li><a href='http://blog.getvladimir.com' target=_blank style="font-size:13pt; font-family:'arial bold'">Блог</a></li>
<li><a href='https://plus.google.com/101462993904689658695/about' target='_blank' style="font-size:13pt; font-family:'arial bold'">За Мене</a></li>

Now we need to apply the new page layout to all the translated pages we like to have.

18. Go to Pages and you will see there is a new page layout with the new language there
19. Apply the new page layout to all the pages you would like to have the translated menu

For any new page you add in the future, it will be easy to select which page template to use and which language menu to assign to it.

We would also like to have an easy language menu for the available languages. To create that:

20. Copy these two links:

<a href='http://www.getvladimir.com' style="color:#777777;font-family:'arial bold'">English</a><span style="color:#777777"> | </span>
<a href='http://www.getvladimir.com/pocetna.html' style="color:#777777;font-family:'arial bold'">Македонски</a>

21. Change the links and names to lead to your main language page and the second language main page
22. Go to Design and click on Edit HTML/CSS again
23. Find the string <td class="phone-number">{phone:text}</td> in the layout
24. Paste the links right below it.
25. You need to paste the exact same links in all the layouts, so they will show on all the pages.
26. Click Save

That's it! You will now have two languages on the same Weebly site. They will both have their own independent menus and all the pages will have a language selection menu. You can add any number of languages using the same procedure. And you only need to maintain one Weebly site, which makes everything easier, including copying of contents between pages, stats, links etc...

P.S. If you need any help setting up the language on your Weebly site, please feel free to contact me via email or leave a comment bellow.

If it looks too complicated, don't worry. You can also get me to add the languages for you. Visit www.GetVladimir.com/weebly for more info.