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

• Image: Select the banner image.

• Image overlay opacity: Applies a semi-transparent overlay to increase text legibility.

• Desktop banner height: Sets banner height as a percentage of viewport height.

• Heading: Adds a text label (default: “Welcome to our store”).

• Heading size: Select from Small → Extra Extra Large.

• Direction: Defines the direction of the scrolling text animation (Left or Right).

• Speed: Controls the duration of the scrolling loop.

• Devices: Determines where the Hero banner block is rendered: desktop only, mobile only, or all devices.

• Mobile banner height: Controls viewport-relative banner height on tablet/mobile.