Customising Heading Settings

You can change the appearance of a Heading Component (e.g. margins and background colour) as well as the words in the component. Text customisation includes:

font family, size, and colour
background colours
links

1 Open Heading 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.

Untitled design.png

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

2 Change Heading Component settings

There are three tabs in the Settings panel: Appearance, Spacing, and Advanced. 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 to the heading.

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. 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. 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.

iv. 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%)

v. 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 display 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 makes an immediate change to the text. For example, Bold, Italics, and Increase Font.

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

Heading Style
Font Family
Font Size
Text Colour
Link

Apply default H1 to H6 heading styles. There are 6 heading styles, from H1 to H6. The preset styles for each heading type can be modified. For more information, see Customising Heading Styles.