Heading Options
Last updated: December 13, 2022
Overview
The new heading options features will let admin users set predefined font sizes to heading tags globally. Additionally, users will be able to override the font size and/or heading tag for all heading fields on the local level.
Each heading tag, H1-H6 can be any of our predefined font sizes. These are, by default:
- H1 – 64px (4rem) – Extra Large
- H2 – 40px (2.5rem) – Large
- H3 – 32px (2rem) – Medium
- H4 – 24px (1.5rem) – Small
- H5 – 18px (1.125rem) – Extra Small
For more information on rem, click here.
Additionally, it is possible to have all heading presets to be the same size. There is no logic in place to prevent, as an example, a H4 from being larger than an H2.
Implementation
These two sections are where the user will be able to set what font size each heading type should be globally.
- Appearance > Look & Feel > Heading Options
- Appearance > Look & Feel > Global Jumbotron Options.
For local implementation ( Content Row > Heading Options ), there are dropdowns to edit the Heading/Subheading size and color for just this block. Additionally, there is an option to NOT inherit global settings, which will override all other local Heading settings.
Use the preview boxes, in Appearance > Look & Feel > Heading Options, to check how the different sizes and fonts will work.You can also try updating the heading font in the Fonts tab, and the previews should update with the new font.
Benefits
This allows for web designers to use custom heading sizes for design purposes without negatively impacting the SEO rankings by incorrectly ordering headings.
For more information on how Headings impact SEO, click here.
Limitations
At the moment, not all content blocks will allow for overriding the global settings. Below is the functionality that does not work with this feature, and what header they are given by default.
Blocks/Rows:
- Cards – The title and subtitle do not read as headers
- Activity Cards – Hard coded H4
- Featured Activity – Hard coded H2
- Slideshow row – multiple activities – Hard coded H2
Activity Pages:
- Related Tours – Hard coded H4
- Activity Title – Hard coded H1
Blogs:
- Sidebar, Categories or Tags, they get an H5
- Blog Titles – Hard coded H1
- Blog cards – The title does not read as a header
For any suggestions or improvements, please submit to the FH.me Idea Box.