Adding a Multilingual Page Link

The Multilingual Component is a handy link tool if you have website content in more than one language. The tool provides an easy-to-find menu link that connects, for instance, your Chinese pages to content in other languages. Link to pages on the same site or different websites.

For maximum visibility, place the Multilingual Component in the header.

1  Inserting the Multilingual Component

Click PUBLISH on the top menu bar. A popup window displays. Click Website Content > Manage.

The Website Content page displays.

1. Hover your mouse pointer on the Homepage.
2. Click the Edit button. The Edit Content area opens.

Hover the mouse pointer on the header.

1. Click the Edit Header pencil button. The edit panel opens.
2. Drag the Multilingual Component into an empty space inside the header.

Hover the mouse pointer on the Multilingual Component. Click the Settings icon in the left corner of the toolbar. The Multilingual settings panel opens.

2  Adding a language and link

Click the Languages tab. English is the preset language.

To change the preset:

1. Highlight English with the mouse pointer and click the pencil button. The Language Settings panel displays.

To add a language option to the list:

1. Click the plus (+) icon.
2. Highlight the New Language row and click the pencil icon. The Language Settings panel displays.

In the Language Settings panel:

1. Go to the Language field and type the name of a new language.
2. In the Page URL field, click the pencil button. Check the link of an existing webpage on the Sinorbis site or select Custom URL and add the URL of another page. Include the http:// or https:// prefix.
3. Check the Default Language box if preferred.
4. Click OK.
5. Click the green + sign to add a new language.
6. Repeat the process to add a new link.

3  Customising link appearance

Modify the design and appearance of the multilingual link.

1. Hover the mouse pointer on the Multilingual Component.
2. Click the Settings panel on the toolbar.
3. Click the Appearance tab. The Appearance Settings panel displays.

• Alignment - Choose the way content displays in the component: to the left, in the centre, or to the right. This feature works when Width is set to a figure of less than 100%.
• Height - Click the plus (+) or minus (-) boxes to increase or decrease the height of the component.
• Width - Click the plus (+) or minus (-) boxes to increase or decrease the width of the component.
• Font Size - Click the plus (+) or minus (-) boxes to increase or decrease the font size. The maximum size is 40 px.
• Font - Change the Simplified Chinese and English font families.
• Font Color -  Choose the text colour. Click the square button to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette. Click the box with a red line to select a transparent background. For information about branding colours, see Customising Brand Colours
• Background Color - Open the Colour Picker and set the colour behind the text. Choose one of your branding colours (if selected) or a colour from the palette.
• Background Hover Color - Change the background colour when the mouse pointer hovers the multilingual component. Choose one of your branding colours (if selected) or a colour from the palette.
• Background Hover Font Color - Change the text colour when the mouse pointer hovers the multilingual component. Choose one of your branding colours (if selected) or a colour from the palette. 
• List Background Hover Color - Change the colour of the text background when the mouse pointer hovers a language item in a list. Choose one of your branding colours (if selected) or a colour from the palette.
• List Font Hover Color - Change the text colour when the mouse pointer hovers a language item in a list. Choose one of your branding colours (if selected) or a colour from the palette.

4  Customising Spacing

Click the plus (+) or minus (-) boxes to increase or decrease the padding and margins.

5  Font Scaling 

Visible – Tick the Enable Scaling box to activate font scaling. Untick the box to keep font sizes fixed.

Font Size (Mobile) – Enter a percentage (up to 100%) to set the font size for mobile devices.

Font Size (Tablet Vertical) – Enter a percentage (up to 100%) to set the font size for tablets in vertical orientation.

Font Size (Tablet Horizontal) – Enter a percentage (up to 100%) to set the font size for tablets in horizontal orientation.

6  Customising Advanced features

ID or Class Name

To learn about custom styling with ID and Class Name selectors, see Adding CSS.

• Component Visibility controls which devices display the content. The default is all devices. To learn about visibility settings, see Customising Visibility.