Creating translated pages will automatically show the language switcher in the header bar (this will only be visible on pages with multiple languages).
Non-English Websites or Websites with Multiple Languages
Setting up non-English pages for a single language follows the same initial process as setting up pages for multiple languages.
Marketing → Website → Website Pages
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 the ability to set the text for hard-coded copy per language directly from the modules.
Here are the steps you'll need to take to set up your website in a language other than English or in multiple languages using the POWER theme.
Translate System Pages and Default Content
Create translation to chosen language for System Pages (404, 500, search, etc.) and also default content for Blog Listing and Blog Posts, including Post Previews.
POWER theme already includes translations for:
- German
- French
- Italian
- Dutch
- Spanish
- Portuguese
- Danish
- Swedish
- Finnish
- Norwegian
If you are using one of these languages, you will not have to complete this step.
Marketing → Files and Templates → Design Tools → @marketplace → maka_Agency → Power Theme → Templates → Translations
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).
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.
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).
Marketing → Files and Templates → Design Tools → POWER x YOURCOMPANY → Templates → Translations
Open the _translations.html file from your child theme.
Copy this code:
If you prefer, you may copy one of the other existing languages in the _translations.html to translate to your 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:
it's okay to add an extra line break.
On the code, you just pasted, change the following (we're using Norwegian as an example for the new language):
- Change German 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
- In the next line of code, you'll need to find "de" and change it to "no" four times (inserting your language abbreviation here in place of "no")
- You'll use the abbreviation for your language which will indicate to the browser the correct translation to show for the language, make sure you change out each instance in this line of code (4 times)
- Change the English placeholder text to your language for each item, making sure not to delete the quote marks
Example: For Norwegian, you would change this line:
to:
Review your System Page templates to make sure they are pointing to the templates in your child theme.
Standard Text / Translation for Theme Modules
With POWER theme, you are able to translate the default copy contained in the theme modules.
Marketing → Website → Website Pages
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 sidebar in the template settings, you will see a section called Standard Text / Translation for any page copy written in the code. If you don't see this section, the module does not have any default content.
This is especially important for the global header and global footer elements when you set up the theme.
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 in HubSpot
Settings → Website → Navigation
To fully translate your website to one or more languages, you'll need to set up an advanced navigation menu for each language.
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 set up the menu for each of the page types (PAGE, LANDING, BLOG, and SYSTEM) for the header and footer (#2 on the image above).
You can also choose to turn on an optional arrow as a UX indicator to change the language within the header settings:
Translate Forms for HubSpot Website Pages
The last step is creating your forms in multiple languages.