Multi-Language

Multi-Language

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

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.

HubSpot Knowledge-Base:

→ Create Pages in 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"

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”

 

• change Base - English to Norwegian (inserting your language name here in place of "Norwegian")
  
•  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)
  
• 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
  

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:

 

 

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.

 

 

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.

 

 

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:

 

 

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)

HubSpot Knowledge-Base:

→ Create Forms in Multiple Languages