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.

⚠️ Very Important

Always use global heading styles

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

💡 Best practice

  • Choose Header 1–6 only
  • Style headings globally, not per block
  • Avoid local overrides unless absolutely necessary

Think of global styles as your design system. Local overrides break that system.

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

💡 SEO tip

Search engines use heading structure to understand your content. A logical hierarchy improves both accessibility and SEO.

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.

⚠️ Very important note

Changing the font size directly in a Heading widget is especially sensitive.

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

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.

  • 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.

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

💡 Tip

Use internal page and anchor links whenever possible to keep users engaged and improve navigation flow.


Text Effects

The Heading widget includes Text Effects, allowing you to add animated rotating text or visually highlight selected words or phrases inside a heading.

There are two available effects:

  • Rotate Text
  • Highlight

Text Effects are useful for drawing attention to important parts of a heading without having to create separate text elements.

Rotate Text

Rotate Text lets you automatically switch between several words or phrases in the same position inside a heading.

This can be useful for headings such as:

Everything you need to sell your courses / memberships / coaching / communities / digital products

Rotating Text

Enter the words or phrases you want to rotate between, with one option per line.

For example:

  • courses
  • memberships
  • coaching
  • communities
  • digital products

The effect will cycle through the entries automatically.

Color

Controls the color of the rotating text.

Use a color that clearly distinguishes the rotating words while still maintaining good contrast and readability.

Animation

Choose how each new word or phrase appears.

Available animations include:

  • Fade
  • Slide Up
  • Flip
  • Zoom In
  • Bounce Up
  • Blur In
  • Typewriter

Different animations create very different visual effects. For most websites, subtle animations such as Fade, Slide Up, or Typewriter usually provide the cleanest result.

Speed (ms)

Controls how quickly the rotating text changes from one entry to the next.

The value is measured in milliseconds (ms).

  • Lower value = faster rotation
  • Higher value = slower rotation

Animation Speed (ms)

Controls how quickly the animation itself is performed when the text changes.

This is separate from the overall rotation speed.

  • Lower value = faster animation
  • Higher value = slower animation

💡 Tip

Give visitors enough time to comfortably read each word or phrase before it changes. Very fast rotations can make headings distracting or difficult to understand.

Highlight

Highlight adds a visual effect to selected text inside the heading.

This is useful when you want to emphasize an important word or phrase without changing the structure of the heading.


Color

Controls the color of the highlight effect.

For consistency, use colors from your website's Global Colors whenever possible.

Highlight Style

Choose the visual style used to highlight the text.

Available options include:

  • Underline
  • Brush
  • Wave
  • Double Underline
  • Glow Underline

Some styles are more subtle, while others create a stronger decorative effect.

Placement

Controls how the highlight is positioned in relation to the text.

Available options:

  • Under text – displays the effect underneath the text
  • Behind text – places the effect behind the text itself

The best option depends on the selected highlight style and the visual result you want to achieve.

💡 Best practice

Use Text Effects selectively. They work best when highlighting one important part of a heading. Applying too many animated or decorative effects can make a page feel busy and reduce readability.

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.