Heading widget

The Heading widget is used to create titles and headings on your pages – from large page headlines to smaller section headers. When used correctly, headings create structure, improve readability, strengthen visual hierarchy, and support SEO.

This article explains every setting and control available in the Heading widget, along with important best practices you should always follow when working with headings in Recrevio.

Before diving into the settings, this is the single most important rule when using the Heading widget:

Always use predefined heading styles (Header 1–6)

Manage the design of the heading styles via Web Studio > Website Settings > Global Styling > Text Styling

Why this matters

If you manually change a heading by:

• adjusting font size
• changing color
• applying bold, italic, or background color
• overriding spacing or typography
• or any other change...

…you are overriding the global heading style.

This means:

• future global style changes will not apply
• your design becomes inconsistent
• maintaining or redesigning the site becomes harder over time

Heading level (Header 1–6)

This dropdown lets you choose the semantic level of the heading.

Available options

• Header 1 (H1)

  Main page title

  Usually used once per page

• Header 2 (H2)

  Major sections on the page

• Header 3–4 (H3–H4)

  Subsections and supporting structure

• Header 5–6 (H5–H6)

  Minor headings, labels, or secondary content

Example structure

• H1 – Page title
  • H2 – Section
    • H3 – Subsection
    • H3 – Subsection
  • H2 – Section

Font family

Allows you to select the font used for the heading.

Recommendation

• Do not change fonts per heading
• Set heading fonts in Web Studio > Website Settings > Global Styling > Text Styling

Use this control only in rare edge cases.

Font size

Controls the size of the heading text in pixels.

When you set a manual font size:

• The change overrides the global heading style
• The same size is applied on all devices, including mobile
• Global typography updates will no longer affect this heading

This can easily lead to layout and readability issues, such as:

• A heading appearing smaller than body text on mobile
• Inconsistent heading sizes across the page
• Broken visual hierarchy on smaller screens
• Headings that don’t scale properly with responsive layouts

Font size overrides are more risky than other local styling changes such as:

• Font family
• Text formatting
• Text color
• Background color
• Text alignment

Those styles mainly affect appearance, while font size directly affects structure and hierarchy.

Best practice

• Never adjust font size per heading unless absolutely necessary
• Define all heading sizes in Global Styling → Text Styles
• Use Header levels (H1–H6) to control size and hierarchy
• Let responsive behavior be handled by the global design system

If a heading looks wrong:

• First check the selected heading level
• Then adjust the global heading style
• Use Remove Font Style to reset accidental overrides

Following this approach ensures:

• Consistent typography
• Better mobile readability
• Easier global design changes in the future

Text formatting

You can apply text formatting using the toolbar:

• Bold
• Italic
• Underline
• Strikethrough
• Uppercase / lowercase / small caps

When to use

• Emphasis inside a heading
• Short stylistic adjustments

⚠️ Avoid using these if they conflict with global styles.

Text color

Text Color picker

Allows you to:

• Choose a custom color
• Use Global Colors
• Adjust opacity
• Enter HEX or RGB values

Best practice

• Use Global Colors for consistency
• Avoid custom colors per heading unless intentional

Background color

Adds a background color behind the heading text.

Use cases

• Highlight sections
• Callout headers
• Promotional blocks

Tips

• Use sparingly
• Maintain contrast for readability
• Prefer global styling where possible

Text alignment

Controls horizontal alignment:

• Left
• Center
• Right

Common examples

• Centered headings for hero sections
• Left-aligned headings for content-heavy pages

Links

You can turn the entire heading into a clickable link using the link selector.

The Heading widget supports a wide range of link types, making it easy to connect content, navigation, and actions.

Supported link types

• Page

  Link to any internal page on your website.

• Store

  Link directly to store pages, products, or categories.

  Funnel

  Link to specific steps inside a funnel.

  You can also link to anchor points within a funnel step, making it possible to navigate to specific sections inside a funnel page.

  Anchor points can be added in the Block settings for each block in the Funnel

  External link

  Link to any external URL (for example another website or tool).

  If you use an external link to link to pages on your own website (for example Circles or Circle pages), do not include the full domain name. Always use a relative path instead.

  Example:

  Use /circles    or /circles/community-name   

  Not https://yourdomain.com/circles   

  Using relative paths:

  • Ensures correct navigation if the system structure changes
  • Ensures correct navigation when switching or updating a custom domain
  • Improves compatibility across environments (preview, staging, live)
  • Keeps links cleaner and easier to maintain

• Anchor point

  Link to a specific section on the same page or another page using anchor points.

  For funnel pages, anchor links are handled via Funnel links, not regular page anchors.

  Anchor points can be added in the Block settings for each block

• File

  Link to uploaded files such as PDFs, documents, or downloads.

• Popup

  Open a popup instead of navigating away from the page.

• Video popup

  Open a video in a popup/modal view.

• Email

  Create a mailto link that opens the visitor’s email client.

• Phone

  Create a click-to-call link, especially useful on mobile devices.

Link options

When creating a link, you can also control:

• Open in
  • Same tab
  • New tab

• Make “nofollow” link

  Useful for SEO when linking to external or sponsored content.

Common use cases

• Call-to-action links
• Navigation within long pages
• Linking to downloads or resources
• Opening popups or videos without leaving the page
• Email and phone contact links

Remove Font Style

This option resets the heading back to its global style.

Use this when

• A heading looks inconsistent
• Global style updates aren’t applying
• You want to remove accidental overrides

This is often the fastest fix for styling issues.

AI Writing Assistant (overview)

The Heading widget includes access to the AI assistant.

You can:

• Improve – refine wording
• Expand – add context or clarity
• Shorten – make headings more concise
• Generate text – create new headings

📌 For full details, see the separate article: AI Writing Assistant

Use AI as a helper, not a replacement for clear structure.

Common mistakes to avoid

• Manually resizing headings instead of using H1–H6
• Applying colors per heading instead of globally
• Using multiple H1 headings on one page
• Breaking heading hierarchy (jumping from H1 to H4)
• Overusing background colors or inline formatting

Summary

• The Heading widget defines structure, hierarchy, and clarity
• Always use Header 1–6
• Style headings globally for long-term flexibility
• Avoid local overrides unless absolutely necessary
• Reset styles when something looks off
• Use AI for inspiration, not structure

Used correctly, headings make your website easier to read, easier to maintain, and easier to scale as your content grows.