Headings

Audience: All editor roles

Please note, this product is in development and you may find videos and documentation don't reflect current functionality. 

Topic covers how to add and edit headings on a page.

Headings are used to structure content and improve readability for both users and search engines. They act as visual cues, breaking up large blocks of text and guiding users through the page's information hierarchy. 

There are six different levels of headings: H1, H2, H3, H4, H5, H6. A Heading 1 (or H1) is the largest and most important heading, whereas an H6 is the smallest and least important heading. Headings must follow a logical order to be compliant with web accessibility requirements. 

Timed transcript

• After opening a page, click the blue plus icon where you want the new heading. Select ‘Heading’ from the pop-up window.
• In the heading window:
  • Enter your heading text.
  • Choose an appropriate heading tag (see the accessibility guidelines below).
  • On the 'Styles' tab, set the banner width, text alignment, optional anchor link, and column span.
• Click 'Apply' to add the heading to the page.

• After adding a heading, you can amend it in the edit pane which automatically opens on the right-hand side of the screen.
• Any changes you make are immediately updated in the preview page to the left.

Use the toolbar to: 

Image

• Move the component up or down the page
• Edit the component settings, e.g. heading tag
• Copy the component
• Delete the component from the page.

Use the built-in accessibility checker, Sa11y, to check heading levels are correct. 

Image

Headings are essential for users who rely on screen readers and other assistive technologies. To keep your headings accessible:

• Break up your content into logical chunks.
• Use built-in heading styles (H1 to H6) in correct sequential order.
• Don’t skip heading levels.
• Don’t use bold text as a substitute for headings.
• Keep headings short but descriptive so users can quickly grasp what each section is about.

0:02
In this video, you'll learn how to add and edit a heading in Fresco.

0:07
Headings are important for both usability and accessibility.

0:10
They give your content a clear, logical structure and make it easier for users to scan and navigate a page. So let's get started.

0:19
After signing into Fresco, go to the 'Content' section. Find the page you want to edit and click the 'Edit' button.

0:32
Locate the section you wish to edit and click the blue '+' icon where you want the heading to appear.

0:41
In the pop-up window, select 'Heading'.

0:45
Please note, not all of these components will be available to you immediately.

0:51
In the 'Create New Heading' window, you can add your heading text and choose the appropriate heading tag.

1:02
You can choose between Heading 1 and Heading 6.

1:08
On the 'Styles' tab, you can adjust the accordion width, choose the text alignment, add an optional anchor link, and choose how many columns the accordion spans.

1:24
Click 'Apply' to insert the heading on the page.

1:29
To edit a heading on the page, click on the heading and you'll see the edit pane appear on the right.

1:39
Any changes you make in the edit pane will immediately appear on the left. On the heading toolbar,

1:47
you are also able to copy the heading to use elsewhere on the page, or delete the heading using the bin icon.

1:57
This toolbar functionality is covered elsewhere in our Fresco Help site.

2:03
When you have finished, click 'Save' and then click 'Exit Editing' to preview your changes.

2:15
Headings are essential for users who rely on screen readers and other assistive technologies.

2:25
To keep your headings accessible, follow these tips.

2:32
Break up content into logical chunks.

2:36
Use built-in heading styles in correct sequential order.

2:40
Start with Heading 1 for the page title, Heading 2 for main sections, Heading 3 for sub-sections, and so on.

2:48
Don't skip heading levels. For example, don't jump from Heading 2 to Heading 4.

2:54
Don't use bold text as a substitute for headings, and keep heading short but descriptive so users can quickly grasp what each section is about.

3:06
If you follow these simple tips, your content will be more accessible and easier for everyone to use.

3:14
And that's it! You've successfully added and edited a heading in Fresco.

3:19
You can find more detailed information about headings on the Fresco Help site.

Back to top