Customising Text Settings

You can change the way text in a Text Component appears and behaves. These customisations include:

font family, size, and colour
background colours
links

1 Open Text Component Settings panel

To access the Settings panel, click PUBLISH on the top menu bar. A popup window displays. Click Website Content > Manage.

The Website Content page displays.

Hover your mouse pointer on a page.
Click the Edit button. The Edit Content area opens.

Hover the mouse pointer on the Text Component. The toolbar displays. Click the Settings button in the top left corner of the toolbar.

2 Changing Text Component settings

There are five tabs in the Settings panel. Click a tab and a new panel displays options to change the appearance of the component but not the text. Step 3 below describes how to customise text appearance and behaviour.

i. Link

Open this tab to add a link.

Click the pencil button beside to open the Link Picker.
Choose a page section, Sinorbis Website Page, or a custom URL. If you link to a Sinorbis Website Page, scroll down the list and check the box beside the page you want. If you select Custom URL, type or paste the URL with the http:// or https:// prefix.
Click OK.
To open a link in a page link in a new tab, check the box.
Click OK.

ii. Text Appearance

Background Colour - Change the colour behind the words. 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.
Line Space - Click the plus (+) or minus (-) boxes to increase or decrease the height of the component.
Hover options - Configure these settings to control the hover link colour as well as the bold and underline options.

iii. List Appearance

Customise the way a list appears on the page. Change list padding and configure bullet colour, size, and style.

iv. Spacing

Padding - Click the plus (+) or minus (-) boxes to increase or decrease the space between the image and the inside walls of the component.
Margins - Click the plus (+) or minus (-) boxes to increase or decrease the space between the component and the walls of the adjacent components.

v. Font Scaling

Use this option to adjust how text (such as titles and descriptions) resizes automatically across different devices.

Enable Scaling – Tick this box to activate responsive font scaling.
Font Size – Set the text size as a percentage for each device type:
- Mobile: (Up to 100%)
- Tablet (Vertical): (Up to 100%)
- Tablet (Horizontal): (Up to 100%)

When scaling is enabled, the text will automatically resize based on the selected percentage, ensuring readability and consistent appearance across devices.

vi. Advanced

ID or Class Name

To learn about custom styling with ID and Class Name selectors, see Adding CSS. Component Visibility. Control which devices display the content. The default is all devices. To learn about visibility settings, see Customising Visibility.

3 Customizing text appearance and behaviour

You can change the way words look and behave in a component. Double-click a word inside the component. A black toolbar opens. For some tools, clicking a button on the toolbar changes the text immediately. For example, Bold, Italics, and Increase Font.

For other tools, clicking a toolbar button opens a Settings panel. These tools are: