--- title: Advanced Hero Banner - Module Documentation description: Advanced Hero Banner --- [![mpcmstheme](https://www.testv2.infinityfree.me/hubfs/Gemini_Generated_Image_4iom6e4iom6e4iom.png)](https://www.testv2.infinityfree.me?hsLang=sr-me) - [Advanced Hero Banner](https://www.testv2.infinityfree.me/advanced-hero-banner?hsLang=sr-me) - [Dynamic Cards](https://www.testv2.infinityfree.me/dynamic-cards?hsLang=sr-me) - [Dynamic Tabs](https://www.testv2.infinityfree.me/dynamic-tabs?hsLang=sr-me) - [Dynamic Tabs Pro](https://www.testv2.infinityfree.me/dynamic-tabs-pro?hsLang=sr-me) - [Dynamic FAQs](https://www.testv2.infinityfree.me/faqs?hsLang=sr-me) [Contact](https://www.testv2.infinityfree.me/contact?hsLang=sr-me) # 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. ![Gemini_Generated_Image_4iom6e4iom6e4iom](https://www.testv2.infinityfree.me/hubfs/Gemini_Generated_Image_4iom6e4iom6e4iom.png) © 2026 MP CMS & Theme All rights reserved [Contact](https://www.testv2.infinityfree.me/contact?hsLang=sr-me) [Powered by Atlas - a B2B SaaS HubSpot theme](https://www.kalungi.com/atlas-hubspot-theme-for-b2b-saas-software)