Are you looking to add new languages to your website to better present your content to your website visitors? This app is just for you! You can add as many languages as you want and start the translation on the go. Let us take you to a step by step guide on how to use this feature! Please note, that if this article still doesn't answer your questions, we are always a step away! Simply click the chat button in the bottom right corner and ask your question right away!
To get started with a new language, go to your Dashboard > Languages app. Here you will find all the languages currently supported on the website.
Please note, that when you generate a new website on SpringBuilder, it supports only English language by default!
To add a new language, click "Add New Language".
A dialogue window will appear for you to choose a language you want to add.
In this tutorial, we will add Spanish as the second language, but you may add any language you prefer!
Once you've selected the language from the dropdown menu, the rest of the required fields will be filled automatically! So let us introduce the fields one by one.
Language Name: This is the name of the language, which will be shown on your website's public view for your visitors to choose. You can leave it as it is, or you may change it to any other name. For instance, Español.
Region Name: Similar to Language name, this is the name of the region that will be shown on your website after adding the Region Switcher element. Your visitors will then be able to choose the region they are from. For instance, Spain.
Language Code: This field is pre-filled and can not be changed! Search Engines, like Google, will use this language code to better understand your website language and to preview your website's Spanish content to users who search for it.
Additional Language Code: This field is useful in situations where one of your visitors has a default browser language, for example Mexican Spanish, but your website only has regular Spanish language. In this case you need to add Mexican Spanish Additional Language Code (es-mx), which will make your visitor to see the Spanish version by default and not any other language of your website.
URL Shortcode: This field is pre-filled as well but can be changed later on. We will use this code in the URL of your website (http://www.mysite.com/es) to serve your Spanishcontent to your visitors.
Custom Flag: You can upload your Desired Custom Flag and it will stand for all the flags within this Language.
After clicking the Save button, the system will add the Spanish language to the list of available languages!
At this point Spanish is on the list of your available languages, but is not visible to your visitor yet!
That's only because you don't want to show the new language to your visitors, as you haven't translated the content of your pages yet.
Let's get started with the translation!
After adding the second language to your website, you will notice a small language switcher at the upper left corner of your Dashboard > Pages app.
It will allow you to switch between the active languages to translate them instantly!
!Note: When you add your second language, the system automatically duplicates all your existing pages, including your headings/anchors/external pages in your Pages app to make it super easy for you to translate their names as well as the content on those pages.
When you create new pages in your Default language (English) in future, the system will bring that page to your other languages as inactive!
To translate those pages, please select your desired language from the dropdown first, Spanish in our case , hover over the duplicated/inactive page and click the Clone button.
This will clone the original page from your English version to Spanish with all the page content, including the Titles, Paragraphs, Images, Sliders, etc..
Now when your pages are cloned to Spanish, you may go to that pages directly and start translating the content. Use all the tools that you were previously using in your English version to edit/add/remove the elements.
Please go through all the pages in the Spanish version of your website and make sure that all the pages, including the System Pages, like 404 page, Offline Page, Password Protected page, are thoroughly translated.
When you are done with all the pages, you may now publish your multilingual website!
From the SpringBuilder's left panel drag and drop the Language Switcher element into the Header section of your website.
You are free to edit the Style of the Element, such as Fonts, Borders, Height and Colors.
In the Fonts section you can edit the Font Family, Size, Weight and Letter Spacing.
In the Borders as well as as the Height section you can customize the looks of the button itself. You can change height, width, padding size as well as the shape of your button to make it more curvy or more squarish depending on your preferences.
Finally, in the Colors section you can simply change the color of each component, such as background, border, text, etc.
Adding a Language Switcher will add a dropdown menu with all the available languages on the Language app for your users to choose from, once they land on your website.
In the end we would love to tell you, that your default language can be changed from En to your desired language from Dashboard → Languages app using the Star Icon.
The system will now serve the new Default language to your visitors when they land on your website for the first time!
To remove a certain language from the list, simply click the Trash icon and the pages in the selected language along with the language extension will be removed from your site.
While if you want to delete certain pages in a different language, make use of the Pages App on your Dashboard.
Please note that in order to remove the Default Language, you'll need to choose a new one and delete the one that needs to be removed!
Let's move to the next section, shall we? Here you can find all the messages that can appear in the public view of your website in different cases and translate them to the second language easily.
Simply click on the desired Variable to change the message content or use the switcher to alternate between the languages.
All you need to do is add the missing translations to the fields required.
We are going to bring in other great multi-language features to SpringBuilder soon!