If you're looking to add new languages and create a multilingual website, then our Languages App is just for you! You can add as many languages as you want and start the translation on the go. Simply follow the step by step guide below.
To get started, navigate to your Dashboard → Languages App. → click on Add New Language and you'll see the full list of all the languages that are currently supported on the website.
- Please note that when you generate a new website on Ucraft, it supports only the English Language by default. However, once you add new languages, you can change the default language by clicking on the star next to the new language. You can also delete a non-default language by hitting the trash icon.
In this tutorial, we'll add Spanish as the second language, but you can add any language you wish.
Once you've selected the language from the drop down menu, the other required fields will be automatically filled.
Language Name: This is the name of the language that is shown on your website's public view for your visitors to choose from. You can leave it as is or edit it to your liking, for instance Español.
Region Name: Similar to the 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 the be able to choose the region they are from, for instance Spain.
Language Code: This field is automatically filled out based on the language you've chosen and cannot be changed. Search engines, like Google, will use this language code to better understand your website language and generate a preview of the website's Spanish content for your users.
Additional Language Code: This field comes in handy when one of your site visitors has a default browser language, for example Mexican Spanish, but your website only has regular Spanish. In this case, you'll need to add Mexican Spanish Additional Language Code (es-mx), which will allow your visitors to see the Spanish version by default and not other languages.
URL Shortcode: This field is pre-filled as well but can be changed later on. This code is used in the URL of your website (http://www.mysite.com/es) for the Spanish version of your site.
Custom Flag: You can upload a custom flag either from your own device or choose one from our free stock. Please keep in mind that this will stand for all the flags under that language, which in this case is Spanish.
Enforce Unicode Aliases: This setting controls how non-latin characters are handled in your aliases, whether they are saved or converted to a date and time. If your URL contains non English letters, such as Alpha, Beta, Gama, etc., you can enable this settings to that those letters are converted to English. If your content is in English, you don't need to enable the Enforce Unicode Aliases.
Once you're done, simply click on the Save button and the system will add the Spanish language to the list of available languages!
- Keep in mind that at this point, Spanish is on the list of your available languages but it's not visible to your visitors yet since the content has not been translated.
In addition, you can Unpublish/Publish the languages by clicking the green dot on the left side of the language. The red dot will indicate that the language is unpublished. You can publish it again once your content is fully translated and ready to be shared with your site visitors.
Let's get started with the translation!
After you add the second language to your website, you'll notice a small language switcher on your Left Panel, at the top of your Pages App and in your Articles App. This will allow you to easily switch between the active languages to translate them instantly.
- Please note that you'll only see the Left Panel language switcher once a minimum of one language has been added to your website
After you add your second language, the system will automatically duplicate all your existing pages and the content within each one. When you create new pages in your Default Language (English), the system will bring that page to your other languages as active.
- Note that when you create and publish new articles in your default language, it will appear in your drafts for your other second language.
- Moreover, edits that you make in your default language version of your site will be applied to your other language versions as well.
Moving forward, go to your Pages App → choose your other language from the Language Switcher → hover over the page you want to start the translation with → hit go and begin your translation. Once on that page, you'll notice that all the content, including Titles, Paragraphs, Images, Sliders, etc., have been cloned from the original English page.
Please make sure to go through all the pages in the Spanish version of your website and make sure that all the pages, including System Pages, are thoroughly translated.
- You can also set your pages offline until you're ready to publish your multilingual site. Simply go to your Pages App and click on the green dot on the top right corner of the pages to set them offline.
Once everything is published, go to your Elements section on your Left Panel then drag and drop the Language Switcher element onto 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 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 square, depending on what you prefer.
In the colors section, you can simply change the color of each component, such as background, border, text, etc.
In order to translate the message content of you site, simply go to your Dashboard > Languages App > Translations sections and add the missing translations to the required fields.