Multi-Language

Multi-Language

HubSpot has multi-language support built-in and the POWER theme includes a Language Switcher automatically.

doc_img_13

Creating translated pages will automatically show the language switcher in the header bar (this will only visible on pages with multiple languages).

Non-English or Multiple Languages

Setting up non-English pages for a single language follows the same initial process as setting up pages for multiple languages.

There are many languages that have variations, be careful when selecting your language to always choose the same version and to note the proper language code (ex: DE, EN, FI)

Example:
For Finnish, if you choose "Finnish" the abbreviation is "FI" but if you choose "Finnish - Finland" the abbreviation is "FI-FI"

language-choices

There are a few aspects of the native multi-language support which are not currently included, but our theme offers solutions for including translation for system pages and ability to set the text for hard-coded copy per language from the modules.

Here are the steps you'll need to take to setup your website in a language other than English or in multiple languages using POWER theme.

System Page Translation

Create translation to chosen language for System Pages (404, 500, search, blog, etc.)

 

The POWER theme already includes translations for: 

  • German
  • French
  • Italian
  • Dutch
  • Spanish
  • Portuguese

If you are using one of these languages, you will not have to complete this step.

You will need to access the theme files for the template here (you won't need to know how to code, just how to copy & paste):

“Marketing” → “Files and Templates” → “Design Tools” and here “@marketplace” → “maka_Agency” → “Power Theme” → “Templates” → “Translations”

From the marketplace template files for the theme, you'll need to clone the translations folder with the  _translations.html file to your child theme.
 
translations-file
 
Right-click on the folder (translations) and choose "Clone to child theme" - once you have done this, you will see the same folder and HTML file in your child theme folder.
 
This new file is where you will make the edits in the next step (you can't edit the file contained in the marketplace theme directly).
 
Open the _translations.html file from your child theme and highlight rows 12-57 to select the English base language settings.

language-english-base-code
 
If you prefer, you may copy one of the other existing languages to translate to a new language from one of the existing translations instead of from English.
 
Scroll to the end of the file and paste the copied code above the line that says:
endif 
it's okay to add an extra line break.
 
On the code, you just pasted, change the following:
  • change Base - English to Norwegian (inserting your language name here in place of "Norwegian")
    base-english-code
  •  Leave the rest of the characters on this line as-is, this is just a comment to help identify the language being translated for reference

Now you'll need to insert a line of code here:

  • Scroll up to the translation for an existing non-English language and copy this line of code
    (make sure you copy the full line, not just what is visible here)
    code-translation-setup-1
  • You'll use the abbreviation for your language in place of de which will indicate to the browser which translation to show for the language, make sure you change out each instance in this line of code (4 times).
  • Change the English text to your language for each item, making sure not to delete the quote marks
    change-text-for-translation
Example:
For Norwegian, you would change this line: 
english-blog-next-example
to:
norwegian-blog-next-example
 
When you have this file updated, we would appreciate it if you would send it back to us via the support form so we can include it in the base file for the next update!
 

As a final step, you would have to make sure that the configured system page templates are referring to your child theme. You can do that via “Settings” → “Website” → “Pages” → “System Pages”

 

Standard Text / Translation

Translate copy contained in the theme modules.

If your entire site will be one non-English language only, you will just change the text in the settings once, but if you are using more than one language, you will need to change the language at the top of the screen here to adjust for each language:
 
toggle-language-page-settings
 
On the left side bar in the template settings, you will see a section called Standard Text / Translation for any page copy written in the code.

This is especially important for the global header and footer elements when you setup the theme.
 
global-header-translation
 
Any module that includes hard coded copy will have a section where you can edit the defaults.

Example:
On the Teams module, there are two items in the code for the theme: one for the link text and one that only shows on mobile to indicate to the user to tap/touch the image.
 
standard-text-translation
 
You would just need to replace the text in each box with the translation to the language selected (you can change these defaults for English as well).
 

Menu / Navigation Translation

Setup Menu for each language (multi-language only).


If you are using more than one language, you'll need to setup navigation for each language.
 
Menus can be created and edited under “Settings” → “Website” → “Navigation”.

Once you have the navigation setup, you will configure it as part of the setup for the header/footer to display the correct language here:
 
language-header-footer
 
You'll select the corresponding navigation for each header, for each language.
 
To switch between languages, you'll toggle the language at the top of the page (#1 on the image above).
 
On the left, you'll have to setup the menu for each of the page types (PAGE, LANDING and BLOG) for the header and footer (#2 on the image above).
 

Form Translations

Setup Forms for each language (multi-language only)