Seventh > Blocks > Heading

Heading

The Heading block displays text headings with extensive typography customization options. Perfect for section titles, page headings, or any prominent text display.

What it does

This block displays a heading with:

• Rich text support with formatting options (bold, italic, underline)
• Multiple font choices (headings, body, accent)
• Flexible size options
• Line height and weight controls
• Text transformation options
• Custom color support
• SEO-friendly HTML tag selection

Block Settings Explained

Content

Content

• Enter the heading text
• Supports rich text formatting
• Use [br]     or line breaks to create new lines
• Default: "Heading"

Typography

Font: Controls which font family to use:

• Headings - Theme heading font (default)
• Body - Theme body font
• Accent - Theme accent font

Text size: (Appears differently based on Font selection)

When Font is "Headings" or "Accent":

• Heading 1 - Largest heading size
• Heading 2 - Very large heading
• Heading 3 - Large heading (default)
• Heading 4 - Medium-large heading
• Heading 5 - Medium heading
• Heading 6 - Smaller heading

When Font is "Body":

• XXSmall - Very small text
• XSmall - Extra small text
• Small - Small text
• Medium - Medium text (default)
• Large - Large text
• XLarge - Extra large text
• XXLarge - Very large text

Line height: Controls spacing between lines:

• Default - Standard line spacing (default)
• Smallest - Tightest line spacing
• Smaller - Reduced line spacing
• Larger - Increased line spacing
• Largest - Maximum line spacing

Apply accent font to italic text: (Only appears when Font is "Headings")

• When enabled: Text wrapped in <em>     tags uses accent font
• When disabled: Italic text uses standard italic styling
• Allows for styled emphasis within headings

Case: Controls text capitalization:

• Default - Text appears as typed (default)
• Uppercase - All text in uppercase

Text weight: Controls font weight:

• Normal - Standard font weight (default)
• Bold - Bold font weight

Reduced text opacity

• When enabled: Text appears with reduced opacity
• When disabled: Text uses full opacity
• Creates subtle, muted text appearance

Custom text color

• Choose a custom color for the heading text
• Default: Uses theme text color
• When set to transparent (rgba(0,0,0,0)), uses theme color

SEO

HTML tag: Controls the HTML tag used for the heading:

• Heading 1 (h1) - Main page heading
• Heading 2 (h2) - Section heading
• Heading 3 (h3) - Subsection heading (default)
• Heading 4 (h4) - Minor heading
• Paragraph (p) - Regular paragraph tag

Common use cases

Section titles

• Use Heading 2 through Heading 4 sizes
• Apply bold weight for emphasis
• Use theme heading font
• Perfect for section headers
• Set HTML tags to h2 or h3 for SEO

Page Headings

• Use Heading 1 or 2 size
• Set HTML tag to h1 for SEO
• Use large text size
• Great for page titles

Subheadings

• Use Heading 4 or Heading 5 size
• Smaller text for supporting content
• Use reduced opacity for subtle appearance
• Perfect for secondary headings

Styled Headings

• Use accent font with italic text
• Apply custom colors
• Use uppercase for emphasis
• Create unique heading styles

Tips for success

Typography hierarchy

• Use size appropriately - Larger sizes for more important headings
• Consistent styling - Use similar styles for headings at the same level
• Font choice - Headings font for titles, body font for subtitles

SEO best practices

• HTML tags - Match HTML tag to heading importance (h1 for main, h2 for sections)
• One H1 - Use only one h1 tag per page
• Hierarchy - Maintain proper heading hierarchy (h1 → h2 → h3)

Visual design

• Line height - Adjust for readability, especially with larger text
• Weight - Use bold for emphasis, normal for standard headings
• Color - Custom colors can help headings stand out

Text formatting

• Line breaks - Use [br]   for multi-line headings
• Rich text - Format text with bold, italic, or links
• Accent font - Use italic tags with accent font for styled emphasis

Troubleshooting

Heading Too Large or Small

Problem: Heading size doesn't look right.

Solutions:

1. Check text size - Adjust the text size setting
2. Font selection - Different fonts may appear different sizes
3. Line height - Adjust line height for better appearance

Custom Color Not Showing

Problem: Custom text color doesn't apply.

Solutions:

1. Check color setting - Verify custom color is set (not transparent)
2. Color format - Ensure color is in correct format
3. Theme override - Check if theme styles are overriding color

Italic Text Not Styled

Problem: Italic text doesn't use accent font.

Solutions:

1. Check setting - Verify "Apply Accent Font to Italic Text" is enabled
2. Font selection - Setting only works when Font is "Headings"
3. HTML Tags - Ensure text is wrapped in <em>     tags

SEO Issues

Problem: Heading structure affects SEO.

Solutions:

1. HTML tags - Use appropriate HTML tag for heading importance
2. Hierarchy - Maintain proper heading hierarchy
3. One H1 - Use only one h1 per page