Advanced Hero Banner - Module Documentation

Welcome to the Advanced Hero Banner module user guide! This premium HubSpot module allows content editors and marketers to build beautiful, responsive, and high-performance hero sections or multi-slide carousels directly within the HubSpot Page Editor.

1. Overview of Settings

The settings panel of the module in HubSpot is split into three main configuration areas:

A. Core Layout Control

  • Enable Slider (Multi-slide Carousel):
    • Unchecked (Default): Renders a single, static hero banner (uses the settings of the first slide).
    • Checked: Converts the banner into a multi-slide carousel using Swiper.js.
  • Slider Settings (visible when slider is enabled):
    • Autoplay: Turn carousel autoplay on/off.
    • Autoplay Delay: Speed of auto-slide transition in milliseconds (default: 5000ms).
    • Transition Effect: Choose between a standard Slide animation or a premium Fade transition.
    • Show Navigation Arrows / Pagination Dots: Toggle swiper controls on/off.
    • Arrow Icon & Background Colors: Custom color and hover state configurations for swiper control buttons.
    • Infinite Loop: Loop slides infinitely.

B. Section Settings

  • Paddings: Add separate padding values for Desktop (default: 120px 0) and Mobile (default: 80px 0) screens.
  • Slide Padding: Adjust padding inside individual slides for Desktop and Mobile.
  • Section Border Radius: Set a rounding value in pixels for the entire outer container (perfect for card layouts).
  • Slide Border Radius: Set a rounding value in pixels for individual slide contents.

C. Slide Content & Stylings

You can add multiple slides using the repeater group. Each slide contains:

  • Badge Settings: Highlight key news or feature announcements (e.g., "NEW RELEASE") above the main title. Customize colors, text size, and rounding.
  • Hero Content: Rich text fields for Hero Title (H1/H2) and Hero Description.
  • Content Alignment: Align slide content (Left, Center, Right).
  • Container Max Width: Set a maximum width in pixels (default: 800px) to prevent text from stretching too wide on large screens.
  • Background Settings:
    • Image: Dynamic desktop (1920px) and mobile (800px) optimized background image loading.
    • Video: Self-hosted .mp4 video background with lazy loading for off-screen slides.
    • Solid Color: Set background color with custom opacity.
    • Gradient: Linear (degrees angled) or radial gradient backgrounds with dual-color selectors.
  • Background Overlay Mask: Enable a background overlay layer (Solid/Gradient) to improve title text readability against bright background images.
  • CTA Buttons: Add up to 4 CTA buttons per slide. Choose preset styles (Solid Primary, Solid Secondary, Outline, Text Link) and apply style overrides (font size, radius, custom colors, hover changes) and mouse-move 3D shadow animations.

2. Step-by-Step Configuration Guide

Scenario 1: Setting up a Static Premium Hero Banner

  1. Open your page editor and drag the Advanced Hero Banner module to the desired location.
  2. In the module sidebar, ensure Enable Slider is unchecked.
  3. Under the Slides section, click on the first slide entry to open its settings.
  4. Set the Background Type to Video and paste an MP4 URL, or choose Gradient to set a modern color blend.
  5. In Hero Content, type your H1 headline and description text. Set Content Alignment to Left or Center.
  6. Under CTA Buttons, add a button. Set the text to "Get Started", link it to a URL, and toggle on a preset styling option.
  7. Go to Section Settings and adjust the padding (e.g., 140px 0 for desktop) to adjust the height of your banner.

Scenario 2: Creating a Multi-Slide Video/Image Carousel

  1. Drag the module to your page and check Enable Slider.
  2. In Slider Settings, select Fade as your transition effect, enable Autoplay, and set the delay to 6000 (6 seconds).
  3. Under Slides, click + Add to add multiple slides.
  4. For Slide 1: Set an image background. Make sure to check Enable Background Overlay with a black overlay color at 40% opacity to keep the text readable.
  5. For Slide 2: Set a background video. Paste your MP4 video link. The video on Slide 2 will automatically wait to preload metadata, saving bandwidth until the user slides to it.
  6. Customize headings, badge text, and action buttons differently on each slide.
  7. Set Slide Border Radius in Section Settings to 12px to give your slider cards rounded corners.

3. SEO & Page Speed Best Practices Built-in

This module handles technical SEO and page speed optimizations behind the scenes:

  • No Heavy Background Images: On mobile phones, HubSpot dynamically serves a resized 800px width image instead of the huge desktop image, improving mobile PageSpeed scores.
  • Core Web Vitals Friendly: Secondary slides with video backgrounds do not download until slide transitions begin. This prevents site blocking and improves your First Contentful Paint (FCP).
  • SEO Accessibility: Screen readers automatically receive descriptive titles from your background videos.
  • Responsive Layout: CTA buttons stack vertically on mobile screens under 479px automatically to offer touch-friendly click targets.
  • Semantic Structure: The module is designed to accept H1 elements inside slide title fields for a clean HTML outline.