Section: Promotional banner

Everything you'll need to know on how to setup your Promotional banner section.

The Promotional banner section displays an animated image banner with optional crossfade between two images, separate desktop and mobile assets, optional video modals on click, and overlay content (heading, subheading, button). Perfect for sale announcements, campaign launches, or any time-sensitive offer.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on Add section in your left sidebar.

2) Search for Promotional banner, then click on it.

3) Done — your Promotional banner is added.

Select the color scheme for the section.

If disabled, will fit page width. Tick this box for an edge-to-edge banner that spans the full browser width. Untick to keep within the standard page width container.

Currently only Animated images banner is available. Sets up the banner for image (and optional crossfade) media.

Applies to all banner types. The main headline overlaid on the banner. For example: Holiday Sale — Up to 40% off. Leave empty to hide.

Smaller line below the heading. Use it for the offer details or a tagline.

Text on the CTA button. For example: Shop the sale, Get yours. Leave empty to hide the button.

Where the CTA button links to.

Visual style: Primary (filled), Secondary (outlined), or Ghost (text + arrow). Pick based on the contrast against your banner image.

Alignment of the overlay content (heading, subheading, button): Left, Center, or Right. Default: Center.

The primary banner image shown on desktop. Recommended: 2000 × 600 px.

Adding a 2nd image enables crossfade animation. Optional second image. When set, the banner alternates between Image 1 and Image 2 with a smooth crossfade. Useful for showing two product views or a before/after.

Recommended: 1000×300 px. Mobile-specific version of Image 1. If empty, the desktop image is used and cropped to fit.

Recommended: 1000×300 px. Mobile-specific version of Image 2.

Opens in a modal on click. Optional video that plays when visitors click the banner while Image 1 is visible. Use for product demos or campaign teasers.

Opens in a modal on click. Optional video for Image 2.

Used when no video is set (single image only). Makes the entire banner clickable, navigating to this URL. Ignored when videos are attached (clicking opens the video modal instead).

Time for one full crossfade cycle in seconds (2–20). Default: 6. Lower = faster crossfade. Only applies when Image 2 is set.

Visible when a video is attached. Tick this box to display a play icon on the banner that hints to visitors that clicking opens a video. Default: on.

Banner height on desktop in pixels (50–700). Default: 100. For hero-style banners use 400–600 px; for thin promotional strips use 80–120 px.

Banner height on mobile in pixels (50–400). Default: 80.

Visual size of the heading from H1 down to H6. Default: H1.

Subheading text size in rem (0.5–2.5, step 0.5). Default: 1.5.

Top and bottom padding inside the banner (0–200 px). Default: 40.

Left and right padding inside the banner (0–200 px). Default: 20.

Space above the section on desktop (0–200 px). Default: 0.

Space below the section on desktop (0–200 px). Default: 0.

Space above the section on mobile (0–200 px). Default: 0.

Space below the section on mobile (0–200 px). Default: 0.

Upload a second image in Image 2 (Desktop). The crossfade activates automatically when both Image 1 and Image 2 are set. Adjust the cycle duration with Image transition speed.

The video takes priority. Clicking the banner opens the video modal regardless of the Banner link URL. To use the Banner link, leave both Video fields empty.

Always upload a dedicated mobile image. The desktop image (typically wide) gets cropped to fit narrow mobile widths and can look distorted. Use the recommended 1000 × 300 px for mobile.

The Video for image 1 / Video for image 2 fields use the same video for both desktop and mobile. To serve different videos, you'd need a custom development. For most uses one video works fine — modal player adapts to screen size.

Lower the Heading style from H1 to H2 or H3. The default H1 is intentionally large for hero banners. For promotional strips, H3 or H4 fits better in the smaller height.