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

See Also

To learn how to place a Heading Component on a page, add words, and insert special characters, see:

• Adding Headings

 

---

 

1  Open Heading Component Settings panel

To access the Settings panel:

1. Click WEBSITE on the top menu bar. 
2. On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays. 
3. Hover the mouse pointer on a page.
4. Click the Edit button. The Edit Content area opens.
5. Hover the mouse pointer on the Heading Component. The toolbar displays.
6. Click the Settings button in the top left corner of the toolbar.

 

 

2  Change Heading Component settings

There are 3 tabs in the Settings panel:

• Appearance
• Spacing
• 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.     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 Spacing

Click the plus (+) or minus (-) boxes to increase or decrease the height of the Heading Component.

 

ii.     Spacing

Padding

Click the plus (+) or minus (-) boxes to increase or decrease the space between the image and the inside walls of the Heading Component.

Margins

Click the plus (+) or minus (-) boxes to increase or decrease the space between the Heading Component and the walls of the adjacent components.

 

iii.    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 Heading Component.

1. Double-click a word inside the Text 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

• add or remove bold

 

• add or remove italics 

 

• add or remove underline

 

• add or remove strikethrough

 

• change English and Simplified Chinese font families

 

• select font size

 

• increase font size

 

• decrease font size

 

• change the colour of words

Translate English text into Simplified Chinese.

1. Highlight a word or phrase with the mouse pointer.
2. Click the Translate button.

This button adds a link to text. For information, see:

• Adding a Link to Text

• align text left

 

• centre text

 

• align text right

 

• remove formatting