Seventh > Sections > Animated heading

Animated Heading

The Animated Heading section creates a large, animated text display with optional text reveal effects on scroll. Perfect for hero sections, landing pages, or dramatic text displays.

Seventh - Animated heading

What It Does

This section displays animated text content with:

  • Large, prominent text display
  • Optional text reveal animation on scroll
  • Support for text, images, and buttons within the heading
  • Full-height or natural height options
  • Background images or videos

Section Settings Explained

Text Reveal Animation

Reveal Text When Scrolling

  • When enabled: Text reveals gradually as you scroll
  • When disabled: Text displays immediately
  • Creates dramatic reveal effect

Revealing Mode (Only appears when "Reveal Text When Scrolling" is enabled)

  • Natural - Text reveals as section enters viewport
  • Fixed - Text reveals based on scroll position (default)
  • Controls how the reveal animation triggers

💡 Note: This section is always full width. The section width cannot be changed.

💡 Note: If the inner content is taller than the viewport, the section will expand to fit the content.

Typography

Text Size Controls the size of the animated heading text:

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

Line Height Controls the spacing between lines of text:

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

Section Design

Color Scheme

  • Choose from your theme's color schemes
  • Applies to the entire section
  • Default: Scheme 2

Top Padding (Only appears when reveal mode is "Natural" or reveal is disabled)

  • Controls space above the section
  • Options: None, Smaller, Default, Larger, Largest

Bottom Padding (Only appears when reveal mode is "Natural" or reveal is disabled)

  • Controls space below the section
  • Options: None, Smaller, Default, Larger, Largest

Show Media Background

  • When enabled: You can add a background image or video
  • When disabled: Uses solid color background

Background Image/Video (Only appears when "Show Media Background" is enabled)

  • Upload an image or video for the section background

Background Overlay (Only appears when background is set)

  • Add a color overlay on top of the background
  • Adjust transparency for subtle effects

Parallax Effect (Only appears when background is set)

  • Adds a scrolling parallax effect to the background
  • Options: None, Subtle, Medium, Strong

Make Section Full Height (Only appears when reveal mode is "Natural" or reveal is disabled)

  • Makes the section fill the entire viewport height

Animated Heading Block Options

The section contains an Animated Heading block with these options:

Text Layout

Text Alignment

  • Align text to left, center, or right

Content Width Controls how wide the text content area is:

  • Small (50%) - Narrow content area
  • Medium (70%) - Standard content area
  • Full (100%) - Full width content area (default)

Text Reveal Colors

(Only appears when "Reveal Text When Scrolling" is enabled)

Text Color Type

  • Color - Use solid color for reveal
  • Gradient - Use gradient for reveal

Initial Color

  • Color of text before reveal
  • Default: Gray (#999999)
  • Text appears in this color initially

Final Color (Only appears when "Text Color Type" is "Color")

  • Color of text after reveal
  • Default: Black (#000000)

Final Gradient (Only appears when "Text Color Type" is "Gradient")

  • Gradient applied to text after reveal
  • Default: Linear gradient from pink to black

Available Blocks in Animated Heading

The Animated Heading block can contain:

Simple Text Blocks:

  • Simple Text - Plain text content
  • Simple Image - Images within the text flow
  • Simple Countdown - Countdown timers

Content Blocks:

  • Text blocks for paragraphs
  • Heading blocks for titles
  • Button blocks for actions
  • Icon blocks for visual elements

Section Structure

The Animated Heading section has three main areas:

Header Block

  • Appears above the animated heading
  • Can contain headings, text, buttons, etc.
  • Optional section header

Animated Heading Block

  • Main animated text content
  • Contains the animated heading text
  • Supports text, images, and other content

Footer Block

  • Appears below the animated heading
  • Can contain buttons, text, etc.
  • Optional section footer

Common Use Cases

Hero Text Display

  • Create dramatic hero sections
  • Use large text for impact
  • Enable text reveal for animation
  • Perfect for landing pages

Brand Statements

  • Display brand taglines or messages
  • Use full-height for prominence
  • Combine with background images
  • Great for homepage sections

Announcement Sections

  • Highlight important announcements
  • Use animated reveal for attention
  • Combine text with images
  • Perfect for special promotions

Storytelling

  • Create narrative text displays
  • Use images within text flow
  • Enable reveal animation for drama
  • Great for brand stories

Tips for Success

Text Reveal

  • Fixed Mode - Use for precise scroll-based reveals
  • Natural Mode - Use for simpler entry animations
  • Color Contrast - Ensure final color is visible

Typography

  • Large Sizes - Use H1-H3 for maximum impact
  • Line Height - Larger line height improves readability
  • Text Width - 70-100% works well for most content

Backgrounds

  • High Quality - Use high-resolution images
  • Overlay - Add overlay for better text contrast
  • Parallax - Use subtle parallax for depth

Content

  • Keep It Short - Large text works best with concise messages
  • Visual Balance - Balance text with images
  • Readability - Ensure text is readable over backgrounds

Troubleshooting

Text Not Revealing

Problem: Text reveal animation doesn't work.

Solutions:

  1. Check Setting - Verify "Reveal Text When Scrolling" is enabled
  2. JavaScript - Verify theme JavaScript is loading
  3. Scroll Position - Scroll to trigger the animation
  4. Browser Support - Check browser compatibility

Text Too Small or Large

Problem: Text size doesn't look right.

Solutions:

  1. Text Size - Adjust "Text Size" setting
  2. Line Height - Adjust "Line Height" for spacing
  3. Content Width - Adjust content width setting

Background Not Showing

Problem: Background image or video doesn't appear.

Solutions:

  1. Check Setting - Verify "Show Media Background" is enabled
  2. Upload Media - Ensure background image/video is uploaded
  3. Overlay - Check if overlay is too opaque

Section Height Issues

Problem: Section height doesn't look right.

Solutions:

  1. Full Height - Enable "Make Section Full Height" if needed
  2. Content Height - Section expands to fit content
  3. Padding - Adjust top/bottom padding
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.