Hi, my name is Vladimir and in this tutorial
I will show you How to Add Multiple Languages to your Weebly website. The end result is having two languages on
your Weebly website, each having their own separate menu, where you can easily switch
between the languages and maintain them without the need to use two different websites. To begin, login to your Weebly editor and
click on “Theme” from the Top Menu Then, click on “Edit HTML/CSS” from the
bottom left part of the screen. Here you will see the styling of your website,
what makes it work behind the scenes. What we need to find is the location of the
menu Click on the “header.html” template from the
left side menu and look for the {menu} string Once we locate it, we need to copy the class name of the string on its left, which in this case is “desktop-nav” Copy the name, and click on “Cancel” from
the top right menu. Then, click on “Publish” to publish your
current website. Now we need to look at the code of the live
website. Please note that if you’re using Safari,
you will need to have the Developer menu enabled in order for the “Show Page Source” option
to be available. To do this, click on Safari from the top menu
and choose “Preferences…” From the new window, select “Advanced”
and then click on “Show Develop menu in the menu bar” to enable it. Back on the live website, right-click (or
control click) on it and choose “Show Page Source” if you’re using Safari or “View Page Source” if you’re using Chrome. This will show the source code of your website. Press Command + F (or CTRL + F ) to open search and enter “desktop-nav” to find the menu code. Depending on the theme you’re using, this
name might vary. That’s why we were looking for it in the
previous steps. Copy everything on the right of “desktop-nav”
starting with

    and ending with

. This is the HTML menu code or your website’s
menu. Paste the code in a text editor or notepad. In this example, we’re using the amazing
Sublime Text app, but you can use any text document app as long as it won’t alter the
HTML menu code or auto-correct any of the text. Make sure to create a full backup of your
website and your template before making any changes. It’s always good to have a copy to revert
to if you make any mistakes. Please also note that you’re doing this
procedure on your own risk. To continue, go back to the Weebly editor
and click on “Pages”. Click on your Home page and then on “Copy”. This will make another copy of the home page. Now copy each of the existing pages on your
website, same as we did with the Home page. We’ll need these so that we can add the
second language. Next, you will need to rename the pages as you would like them to show in the second language menu. You can use any name that you like. After that, click on “SEO Settings” and enter the link you would like to use in the “Page’s URL”. You can name the link how you like, but remember it so that you can add it to the HTML menu code. Go back to your text editor and enter the
title of the page and the URL link that you’ve chosen, overwriting the previous links. You will need to repeat this process for each and every page that you have for the second language. After you finish adding the links and the
names, you might also want to delete the id=”active” from the link, so that your menu indicator
won’t be stuck on the home page Next, after we created a copy of each of the pages and wrote the links, click on “Theme” from the top menu and then on “Edit HTML/CSS” from the bottom left corner. We will need to create a new Header Type for
the second language. Click on the “+” symbol next to the “Header
Type” and choose “New Header Type”. Name it as the language you would like to
add for easier reference. Now we have a blank new header type that we
need to fill in. Click on the existing “Header.html” and
select and copy all the contents. After that, chose the header type that you’ve created and paste the contents that you’ve copied from the Header.html. Now, we need to add the custom HTML menu code
that we created earlier. Go back to your text editor and copy the code. Back again to the Weebly editor, select the string that says {menu} and paste the custom HTML menu code over it If there are two {menu} strings in your template,
make sure to replace both. Finally, click on “Save” on the top right
corner of the screen and name your new custom template. We use Multiple Languages for this example,
but you can name it anything you like. Click on “Save” to continue. You will notice that all the items from both
languages now show in the menu. To correct this, click on “Pages” and
click on the Home page from the second language Then, click on “Header”, choose the new
header type you’ve created, check “Hide in Navigation” and click on the “