This is a very simple way to have multilingual website in Weebly and assumes very little knowledge of html/css and good knowledge of the languages you want to use (or the use of a good translator!). I’m using two languages in this tutorial/example.
My site is now available in English and Spanish and looks like this http://evacanodesigns.weebly.com
I worked on it all day yesterday, first doing some research on how other people had done it or advised to do it. This didn’t help me at all, as the only way I found was creating a second website in the second language and connecting both but I didn’t want to have two different names, one for each website. And besides, doing it that way you would have to make sure that your first website is as completed as possible because after the copy, every single change to the original website would have to be replicated on the second website and that sounds like a lot of work, doesn’t it?, especially if you want to make lots of changes and additions. So, if that’s not the way you want to do it and you like how mine looks… keep reading!
The steps are as follows:
First you need to create website if you still don’t have one… It’s free! You can create it by clicking now on the link below or finish reading the whole post and do that after… 🙂
Second you create a few pages (or just one). Weebly gives you the possibility of using pages that are just links so they can connect to your blog, facebook, another website, etc.
When you have a few pages you can start adding the second language ones. I created the following pages on my site: Home, About Me, Online Store, Designs, Handmade Cards, Downloads, My Blog, Twitter and finally Contact.
After this you will notice that your site has a navigation bar (or menu) with links to all this pages. You need to get rid of the navigation bar by editing the html/css code from the menu called design (I deleted it but you can probably hide it). If you don’t know how to do this, look for the labels #nav on the code or ask somebody to give you a hand.
Once the navigation bar was gone I created my own navigation bar just below my logo graphic starting with the Home page. To do that, I used a multiple column element. On the first column I added a title element for my links and there I added Home (with no link on the home page, just text), About Me (with a link to the page ‘about me’) and so on. Then On the second column I used an icon of a Spanish flag that was connected later to the Spanish version of the page once I created it.
Then I started creating the ones in Spanish copying the English ones. Just do the Home one first (in my case Inicio), you’ll see why later. I created a copy of ‘Home’ and I named it ‘Inicio’. I went back to the page Home and added the link to my Spanish flag icon so it would connect to the Spanish home page Inicio. To finish sorting the English site, I copied the whole two column element from the page Home to the rest of the pages that are not links, in my case About Me, Designs, Handmade Cards and Contact. This is because I want the Spanish flag icon to take always to the ‘Inicio’ page. You can also connect each page with its translation if you rather have that. Make sure to select copy before selecting the page or it will be moved and you’ll have to move it back.
Once I had my navigation menu copied to all my English pages, I edited each one to remove the link of the current page and to add the link to the Home page i.e. no link for the page ‘About Me’ on the ‘About Me’ page but link to the ‘Home’ page.
With that my English site was sorted and I went to deal with my Spanish site.
I had only the home page called ‘Inicio’ so I went to edit it to add a British flag icon replacing the image of the Spanish flag and I connected it to the ‘Home’ page and also deleted all the English text of the pages I was going to create in Spanish. You can add the text now but I would advise to create the pages first in case you give different names in the end.
Then I started copying pages from the English versions and renaming the copies giving the Spanish names. Here I would recommend not to use special characters on the name of the pages or the address for your pages will look really awful (for example I used ‘diseno’ instead of ‘diseño’). My new pages became ‘Quién Soy’, ‘Tienda Virtual’, ‘Diseños’, ‘Hecho a Mano’, ‘Descargas’, ‘Mi Blog’, ‘Twitter’ and ‘Contactar’. At this stage all of them had the English navigation menu with the British flag, so I edit every page with the exception of the ‘Inicio’ page (the Spanish home page) to remove the whole two column element (note that you need to delete the flag image and the title element first to be able to do this).
I then went to the ‘Inicio’ page again to create the Spanish version of my navigation menu and added the links to the other Spanish pages and once this was sorted, I copied the whole two column element to the other Spanish pages. Again, make sure to select copy before selecting the page or it will be moved and you’ll have to move it back. Then I edited all the Spanish pages (not the ‘Inicio’ one as this was already done and not the linked ones as they don’t need navigation) removing the link to the current page and adding the link to the ‘Inicio’ page. After I edited all the Spanish pages including the ‘Inicio’ to translate them.
Finally you might want to add different search terms in the advanced settings of each page depending on the language of that page.
After all that I was able to publish my now multilingual website!!
Thanks for reading and please let me know if it helped you!
Eva Cano Designs 