Customise the way words appear in a Heading Component. This styling tool applies to headings. It does not change the way words appear in Text Components or Header Components.
Set default settings for six levels of headings (H1 to H6). Generally, the font size of heading styles moves from largest to smallest. So, H1 has the largest font size and H6 has the smallest.
1 Customising Heading styles
- Go to the Style Editor page.
- At the top of the screen, verify the Default Styles button is selected (it should be green).
- Scroll down to the Headings area.
- Hover the mouse pointer on the Headings section and then click the Pencil Edit button. The Heading Settings panel opens.
- Click any heading level to open the Settings panel. Each settings panel has 6 style features. Settings for each heading level need to be customised individually.
- To make the changes active across the website, click the Publish button at the top of the Style Editor page.
Choose the text colour. 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:
This tool changes the colour of words with a link. Choose one of your branding colours (if selected) or a colour from the palette.
Click the plus (+) or minus (-) boxes to increase or decrease the font size. The maximum size is 72 px.
Select an English and Simplified Chinese font.
Open the Colour Picker and set the background colour. Choose one of your branding colours (if selected) or a colour from the palette.
Click the plus (+) or minus (-) boxes to increase or decrease the line height. The maximum height is 100 px.
2 Customising spacing
Click the plus (+) or minus (-) boxes to increase or decrease the padding and margins.
3 Customising Advanced
For developers, add a Class Name to specify CSS rules. For more information, see: