Hero banner block
This block allows you to display a high-impact visual header inside the Header section with optional animated text.
It is designed to provide a visually dominant, brand-defining entry point at the top of the page.
Block settings
Devices: Determines where the Hero banner block is rendered: desktop only, mobile only, or all devices.
Layout: Determines the visual layout of the Hero banner based on the selected option:
Used to display dynamic, continuously moving text across the banner.
First / Second / Third heading: Enter text phrases that will loop continuously in sequence.
Heading size: Adjust the font size of the scrolling text.
Space between headings: Controls the spacing between each text phrase.
Separator style (None, Vertical line, Dot, Diamond, Diamond outline): Adds a visual separator between headings.
Direction (Left / Right): Defines the scrolling direction of the text.
Speed (5s → 100s): Controls how fast the text scrolls. Lower values = faster movement.
Ideal for branding-focused banners.
Image: Upload the main logo image displayed on desktop and general devices.
Mobile image: Upload a separate logo optimized for mobile devices.
Best for promotional content or key messaging.
Heading: Main title text displayed on the banner.
Heading size: Adjust the size of the heading.
Description: Add supporting text below the heading.
Content width (200 → 800px): Controls the maximum width of the text block.
Desktop content position: Set the position of content on desktop (e.g., Top left, Middle center, Bottom right).
Mobile content position: Adjust content placement specifically for mobile layouts.
Button:
Label: Enter button text
Style: Choose between Solid, Outline, Text
Link: Assign a destination URL
Image & Video: Select the media banner. Video will override image if both are set.
Image overlay opacity: Applies a semi-transparent overlay to increase text legibility.
Desktop banner height: Sets banner height as a percentage of viewport height.
Additional text: Allows you to display a subtle text overlay on bottom of Hero banner, often used to guide user interaction. This text is clickable and, when clicked, will automatically scroll users down to the header section of the page.
Mobile banner height: Controls viewport-relative banner height on tablet/mobile.
Last updated
Was this helpful?