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.
Multiple H1s on a page
It's a good idea to have one H1 heading on a page. H1 headings are an important part of any SEO strategy. They help search engines identify your keywords.
It's a bad idea to have two or more H1s on the same page. A page with multiple H1s generates crawl errors.
To avoid this problem, we have optimised the default settings of the Heading component.
- The first time you place a Heading component on a page, the text is set to H1.
- Every other Heading component on the same page is automatically set to H2.
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: