The Language Element allows website creators to translate web content into other languages. It also allows switching languages on live websites. You can add the Language Element to the HTML, WordPress, and Joomla sites and sites published from the Desktop Applications to Nicepage Hosting.
IMPORTANT! You cannot use the Language Element in the Nicepage Online Editor. We are working on that.
Add the Language element to the Add Panel's selected Header or Footer Block.
Add Site Language
After adding the Language Element, you see the Tooltip informing you to add another language for translating a website.
You can add a new Site Language.
Select the Language element.
Go to the Property Panel to the right.
Click the Add button.
Select the Language from the list in the Add Language dialog.
Click the OK button.
See the new Language added to the Language Element.
Quick Navigation In Language List
In the Add Language dialog, quickly navigate to the Language group by pressing the first letter of the Language Name.
Language Layouts
Choose one of the six layouts of the Language Element for the website.
You can switch the Language Layout in the Property Panel for the selected Language element in the Header or Footer.
Language Options
Open the Language Option Menu in the Property Panel by clicking on the Icon to move the Language up and down, edit the Language Name, change its Icon, and delete it.
Edit Language Name
You can now edit the Language Name by choosing the Rename variant from the Options Menu, clicking on it in the Property Panel, and editing it in the dialog.
Move Languages
You can rearrange Languages by clicking the Move from the Options Menu or dragging the three-dot Icon to the left of the Language in the Property Panel.
Delete Languages
Delete a Language from the Language Element by selecting from the Options or clicking the Bucket icon. All translations remain on the Project, and you can restore them anytime by adding the same Language back.
Language Element Properties
Language Icon Spacing
You can modify Spacing between the Flag icons in the Language Element by dragging or adding a value in the Spacing property of the Property Panel.
Language Text Styling
Change the Text and Spacing Properties in the Property Panel for the Horizontal Language layouts.
Switch the Language Layout in the Property Panel for the selected Language element in the Header or Footer.
Language Dropdown Styling
You can also modify the Item and Dropdown Properties in the Property Panel for the Dropdown List layouts of the Language Element.
Best Practice
After you add the second Language, you will see the Best Practice dialog with hints about translating texts.
After you click ok, you will see the Arrow and the Tooltip similar to those in the Getting Started Tutorial pointing to the Language Switcher.
Language Delete Warning
You will see the warning when you delete the Language Element since your site visitors cannot switch the site language.
## Summary
- Overview
- Video Lesson
- Add Language Element
- Add Site Language
- Quick Navigation In Language List
- Language Layout
- Language Options
- Language Element Properties
- Best Practice
- Delete Warning
## Overview
The Language Element allows website creators to translate web content into other languages. It also allows switching languages on live websites. You can add the Language Element to the HTML, WordPress, and Joomla sites and sites published from the Desktop Applications to Nicepage Hosting.
**IMPORTANT! You cannot use the Language Element in the Nicepage Online Editor. We are working on that.**
## Video Lesson
##
<iframe width="600" height="330" src="https://www.youtube.com/embed/Bmwbj5p3bK4"" title="Nicepage Lesson: Language Element. Site Translations" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
### See Also
[More video lessons](page:1318)
## Add Language Element
Add the Language element to the Add Panel's selected Header or Footer Block.
!add-language-element.png!
## Add Site Language
After adding the Language Element, you see the Tooltip informing you to add another language for translating a website.
!language-element-tooltip-arrow.png!
You can add a new Site Language.
1. Select the Language element.
2. Go to the Property Panel to the right.
3. Click the Add button.
4. Select the Language from the list in the Add Language dialog.
5. Click the OK button.
See the new Language added to the Language Element.
!add-site-language.gif!
## Quick Navigation In Language List
In the Add Language dialog, quickly navigate to the Language group by pressing the first letter of the Language Name.
!quick-navigation-add-language.gif!
## Language Layouts
Choose one of the six layouts of the Language Element for the website.
!language-layouts.png!
You can switch the Language Layout in the Property Panel for the selected Language element in the Header or Footer.
!language-layout-property-panel.gif!
## Language Options
Open the Language Option Menu in the Property Panel by clicking on the Icon to move the Language up and down, edit the Language Name, change its Icon, and delete it.
!language-option-menu.png!
### Edit Language Name
You can now edit the Language Name by choosing the Rename variant from the Options Menu, clicking on it in the Property Panel, and editing it in the dialog.
!edit-language-name.gif!
### Move Languages
You can rearrange Languages by clicking the Move from the Options Menu or dragging the three-dot Icon to the left of the Language in the Property Panel.
!rearrange-languages.gif!
!language-spacing.gif!
### Delete Languages
Delete a Language from the Language Element by selecting from the Options or clicking the Bucket icon. All translations remain on the Project, and you can restore them anytime by adding the same Language back.
!delete-language.png!
## Language Element Properties
### Language Icon Spacing
You can modify Spacing between the Flag icons in the Language Element by dragging or adding a value in the Spacing property of the Property Panel.
### Language Text Styling
Change the Text and Spacing Properties in the Property Panel for the Horizontal Language layouts.
!language-text-property.png!
Switch the Language Layout in the Property Panel for the selected Language element in the Header or Footer.
!language-text-spacing-property.png!
### Language Dropdown Styling
You can also modify the Item and Dropdown Properties in the Property Panel for the Dropdown List layouts of the Language Element.
!language-item-property.png!
## Best Practice
After you add the second Language, you will see the Best Practice dialog with hints about translating texts.
!best-practice-add-language.png!
After you click ok, you will see the Arrow and the Tooltip similar to those in the Getting Started Tutorial pointing to the Language Switcher.
!language-switcher-arrow.png!
## Language Delete Warning
You will see the warning when you delete the Language Element since your site visitors cannot switch the site language.
!delete-language.png!
##