Features Breakdown: Countdown Hero Banner

This is a powerful, block-based "Hero" section designed for major sales events (Black Friday, Launches). It combines a background image with flexible height controls and precision content positioning.

1. Media & Art Direction

• Dual Image Support: Upload separate images for Desktop and Mobile to ensuring perfect cropping on all devices.

• Image Fit Modes: Control how the image behaves within the container (Cover, Contain, Fill, or None).

• Overlay Control: Add a color overlay with adjustable opacity (0-95%) to ensure text readability against busy backgrounds.

2. Layout & Dimensions (Advanced)

• Height Modes: Three distinct height calculation methods, adjustable separately for Mobile and Desktop:

  • Aspect Ratio: Lock the banner to specific formats (16:9, 21:9, 1:1, 9:16, etc.).

  • Custom Height: Set a fixed height in pixels.

  • Auto: The banner height adapts naturally to the content size.

• Positioning:

  • Horizontal: Align content Left, Center, or Right.

  • Vertical: Anchor content to Top, Center, or Bottom.

  • Precision Offset: Add positive or negative vertical offset (in pixels) to fine-tune the exact position of the content.

• Width: Choose between Theme Page Width, Theme Container, or a Custom Max-Width with adjustable padding.

3. The Countdown Timer

• Smart Alignment: Uses advanced negative margins to ensure the timer aligns perfectly flush with the text when left or right aligned, while keeping internal digit spacing consistent.

• Styling: Full control over colors for Digits, Labels, and Separator lines.

• Sizing: Independent font size controls for Digits and Labels on both Mobile and Desktop.

• Configuration: Set End Date/Time and toggle "Hide when expired." Custom text labels for Days, Hours, Minutes, and Seconds.

4. Content Blocks & Typography

• Title Block: Simple heading with bold toggle and responsive font sizing.

• Main Heading Block: Rich Text support with specific controls for font weight (Normal vs. Bold thickness) and responsive sizing.

• Font Source: Use the theme's global typography or force a specific custom font family for this section.

5. Call-to-Action (Button)

• Gradient Support: Create engaging buttons with dual-color gradients and adjustable angles.

• Styling: Control border radius (rounded corners), text size (Mobile/Desktop), and bold weight.

• Gap Control: Adjustable vertical spacing between the Heading, Timer, and Button blocks.