The Animated Headline block allows you to display captivating animated headlines on your SeedProd pages. This block helps you create eye-catching text that changes, highlights, or rotates to grab visitors’ attention and emphasize key messages.
Animated headlines are perfect for hero sections, landing pages, promotional banners, or anywhere you want to showcase multiple value propositions or key messages in a dynamic, engaging way. With a variety of animation styles and visual effects, you can create headlines that stand out and keep visitors engaged.
Adding the Animated Headline Block to Your Pages
Follow these steps to add an Animated Headline block to your SeedProd page:
Step 1: Add the Block
Under Design > Blocks, drag and drop the Animated Headline block into the desired section of your page.
The Animated Headline block appears in the Blocks panel and can be dragged into any section of your page.
Step 2: Configure Content Settings
Once added, click on the Animated Headline block to open its settings. In the Content tab, you can customize the animation style, text content, and timing.
Headline:
- Style: Choose between two animation styles – Highlighted (emphasizes text with visual shapes or underlines) or Rotating (cycles through multiple text variations)
- Shape: When using Highlighted style, select the shape that appears around your text. Options include Circle, Curly, Underline, Double, Double Underline, Underline Zigzag, Diagonal, Strikethrough, and X. Each creates a unique visual emphasis
- Before Headline Text: Enter the static text that appears before your animated portion. This text remains constant and sets up the animated part (e.g., “We are”)
- After Headline: Enter the text that will be animated or highlighted. For Rotating style, you can add multiple words or phrases separated by commas that will cycle through (e.g., “experts, professionals, innovators”)
- Infinite Loop: Toggle to enable or disable continuous animation. When enabled, the animation repeats indefinitely. When disabled, it plays once and stops
- Duration (ms): Set how long each word or animation effect displays, measured in milliseconds. Higher values slow down the animation, while lower values speed it up (e.g., 2000ms = 2 seconds)
- Delay (ms): Control the pause between animation cycles, measured in milliseconds. This creates breathing room between text changes
- Align: Set the horizontal alignment for your entire headline (left, center, or right)
- Font Size: Adjust the size of your headline text to ensure it’s prominent and readable
- Level: Choose the HTML heading tag for your animated headline (h1, h2, h3, or h4). This affects both SEO and visual hierarchy on your page
The Content tab provides options to choose animation styles, customize text, and control animation timing and behavior.
Step 3: Customize the Design
In the Advanced tab, you can customize the visual appearance of your Animated Headline block:
Styles:
- Typography: Control the font family, weight, style, and other text properties for your headline
- Stroke Color: Set the color for the animated shape or highlight that appears around or behind your text (when using Highlighted style)
- Color: Choose the text color for your headline to ensure good contrast and readability
- Text Shadow: Add shadow effects to your headline text for depth and emphasis. Choose from None, Hairline, Small, Medium, Large, X Large, 2X Large, or Custom
Spacing:
- Margin: Control the outer spacing around your headline block (Top, Right, Bottom, Left). This determines how much space appears between the headline and surrounding elements
- Padding: Adjust the inner spacing within your headline block (Top, Right, Bottom, Left). This creates breathing room between the text and the block edges
Attributes:
- CSS ID: Displays the auto-generated unique identifier for your headline block. This ID is created automatically by SeedProd for custom styling or JavaScript targeting
- Custom Class: Add custom CSS classes to apply specific styles from your theme or custom CSS
- Custom Attributes: Add any HTML attributes to the headline wrapper element. Enter each attribute on a new line using the format: attribute-name|value (e.g., data-animation|headline)
Device Visibility:
- Hide on Desktop: Hide the headline block on desktop screens
- Hide on Tablet: Hide the headline block on tablet devices
- Hide on Mobile: Hide the headline block on mobile devices
Animation Effects:
- Entrance Animation: Choose from various animation effects that play when the headline scrolls into view. Options include Bounce, Fade In, Zoom In, Rotate In, and many more. This creates a layered animation effect where the block entrance animation plays first, followed by the headline’s own text animation
The Advanced tab offers styling options including typography, colors, text shadows, spacing, and entrance animations.
Step 4: Save Your Changes
Once you have finished configuring the Animated Headline block and customizing its appearance, make sure to save your work.
You’ve successfully added an Animated Headline block to your page! This dynamic block helps you create attention-grabbing headlines that showcase multiple messages or emphasize key points with engaging animations. Experiment with different animation styles, shapes, and timing to create headlines that captivate your audience and communicate your message effectively.