Add Multiple Languages to your Weebly website in 2019

Add Multiple Languages to your Weebly website in 2019


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 “

Comments

  1. Post
    Author
    Quattropole Swing Team

    Thank you so much! I actually have two questions, both about the language switcher (the very elegant version): 1) how is it possible to move the switcher up and in down? 2) you know a way, of having the switcher for the mobile view as well?

  2. Post
    Author
    Murcielago3nfr

    thank you! Your video is a great tool for users who are new to this. I'm just getting started on my website and had a question, is this available for free users or just Pro users? I don't want to put in the effort and find out I can't do it without paying.

  3. Post
    Author
  4. Post
    Author
  5. Post
    Author
    K K Au

    Hi there, thank you so much for the tutorial, the switcher just looks fantastic.
    I have a question here is the switcher looks perfectly on my website, however, when I switched to mobile view, the switcher doesn't show-up. Any ticks I can have it on my mobile view as well?
    Again, thank you so much for the tutorial and hope to hear from you.

  6. Post
    Author
    Dragana Stamatovic

    Hi Vladimir, excellent tutorial. I‘m so happy that I succeeded most. I did everything as you suggested, all of the changes I made on the trial, old version of site, and everything was working except only one: some pages under the page which is ‘’non-clickable-menu’’ type didn’t appear as was expected in drop-down menu. There weren’t instructions what to do with ‘’non-clickable-menu’’ type of page in HTML. Drop-down menu under the ‘’non-clickable-menu’’ doesn’t work. Actually, there were not possibilities to reach HTML or SEO settings for such type of page, or change old header to new language header, because there was no any header
    Zdravo Vladimire, i hvala, odlično uputstvo, oduševljena sam! Valjda zato što zapravo, nemam pojma o HTML kodu, a uspelo mi je.
    Sve sam uradila kako je rečeno, na probnoj verziji sajta i sve radi, osim jednog, a to je da se neke stranice pod jednom koja je ''Non- clicable- menu'' upošte ne pojavljuju kako je trebalo- u padajućem meniju. Kod nje nisam imala uputstvo šta da radim u HTML kodu i sada taj padajući meni ne radi. Zapravo, nije ni moguće pristupitu SEO podešavanju takve stranice ili zameniti stari heder za novi na drugom jeziku, jer uopšte nema hedera. Šta sa takvom stranicom? Sve pod njom je nevidljivo.

  7. Post
    Author
    Cesare Marchetti

    Very good tutorial basically. Thanks a lot. The only drawback is that the SUBMENUS won't work. You need the paid service to do that. Btw: the code for the 2 translations links is not on the videos description.

  8. Post
    Author
    Chris Devoize

    Very nice Video Vladimir. Is there a way to add a flag from the BUTTON tool ? I personally find the BUTTON tool not really nice

  9. Post
    Author
  10. Post
    Author
    Berlin Circus Festival

    Thank you very much for this helpful tutorial. Everything worked perfectly, though I have one question. How can I avoid that both menus are displayed in the mobile version?

  11. Post
    Author
    Emilie Baird

    Thank you! I couldn't get the code to work for me for the "switcher", but the rest of the instructions worked and I figured out how to incorporate a link for the Spanish site on the English menu bar, and for the English site on the Spanish menu bar, meaning I now have a fully-functional bilingual website.

    To clarify, I got the code to make the "switcher" appear, but even when I added css language to pad it on the top and bottom in order to distance it from the main menu, it was never far enough from the main menu options to allow someone to select the language item – the cursor would always select the main menu item below it, instead.

    You can take a look at the solution I came up with by visiting www.synergetico.co. Basically, I added an extra page corresponding to the English home page under the Spanish header type, and vice versa, in the corresponding order when setting up pages and their menus.

  12. Post
    Author
    Devon

    Hi Vladimir, the menu has no classname in my case. It just says:

    <body class='tall-header-page wsite-theme-light'>

    <div id="header-wrap" class="wsite-background">

    <div id="nav-wrap">

    <div class="container">

    <table id="header">

    <tr>

    <td id ="logo">{logo}</td>

    <td>{menu}</td>

    With nothing left of the menu that classifies it's name. What do I do?

  13. Post
    Author

Leave a Reply

Your email address will not be published. Required fields are marked *