The Premium Full Screen Banner Module helps you create bold, immersive hero sections that instantly capture attention and elevate your brand experience. Designed for visual impact, it features full-screen layouts, smooth slider transitions, and engaging hover effects—giving you complete control over how your key messages are presented.

Easily manage banner headlines, supporting content, background media, and CTA buttons directly within HubSpot—no coding required. With mobile-first responsiveness, flexible content positioning, adjustable spacing, and advanced style controls, this module ensures your full-screen banners look stunning and perform flawlessly across all devices.

Whether you’re launching a campaign, highlighting a core service, or creating a powerful first impression, the Premium Full Screen Banner delivers a polished, high-impact experience that boosts engagement and drives meaningful user action.

Key Features of a Premium Full Screen Banner Module :

• Multiple Layouts – Choose from 3 distinct hero banner styles.

• Responsive Design – Optimized for all screen sizes, ensuring a flawless experience on desktop, tablet, and mobile.

• Flexible Content Options – Easily update headings, descriptions, and CTAs directly within HubSpot.

• Customizable Visuals – Add images, graphics, or mockups to match your brand identity and campaign goals.

• Engaging Call-to-Actions – Drive conversions with customizable CTA buttons tailored to your business objectives.

• Design Flexibility – Adjust spacing, alignment, and background colors for a unique, on-brand look.

• User-Friendly Editing – No coding required—built for marketers to launch modern hero sections quickly.

• Optimized Performance – Lightweight and SEO-friendly to ensure speed and visibility.

• Versatile Use Cases – Perfect for homepages, landing pages, service showcases, or campaign launches.

How to Set Up the Use Premium Full Screen Banner in HubSpot :

In the main dashboard, go to the ‘Content’ tab and select either ‘Website’ or ‘Landing Pages,’ depending on where you want to add the section. This lets you choose the right location for managing or updating your content.

Select the page where you want to apply the module.

Search for "Premium Full Screen Banner" and drag and drop the module into the desired location on your page.

Module Defaults Options: 

Layout ID :

Layout Options :  

Options:

• Layout 1 – A design featuring strong subtext, headlines, CTA and images .

• Layout 2 – A layout that subtext, highlights customer stories, slider card and logo slider.

• Layout 3 – A layout that subtext, highlights, image and modern CTA's.

• Subtext Enable
  Toggle the main subtext on or off. Perfect when you want a clean hero layout without a large title.

• Subtext Heading
  Add and customize the main subtext  text. Use this space to deliver a strong, eye-catching message.

• Heading Enable
  Toggle the main heading on or off. Perfect when you want a clean hero layout without a large title.

• Enter Heading
  Add and customize the main heading text. Use this space to deliver a strong, eye-catching message.

• Description Enable
  Show or hide the supporting description under your heading. Ideal if you prefer a minimalist design.

• Enter Description
  Add descriptive text below the heading. Great for explaining your value or offering in 1–2 concise lines.

• CTA Show/Hide
  Easily enable or disable the call-to-action button. Useful if you want a hero section that’s informational only.

• CTA
  Customize the CTA text, link, and style. A powerful way to drive visitors toward conversions.

Users can add or remove jQuery JavaScript as needed, providing flexibility to enhance functionality or optimize performance based on their requirements.

Module Style Options: 

Module Setting :

Adjust the margin, padding, container width and background colors to achieve your desired look and feel for the module. This flexibility lets you fine-tune the layout and aesthetics, ensuring your design is both visually appealing and user-friendly.

Subtext, Heading, Description and CTA Setting :

The Subtext, Heading & Description Settings in Premium Full Screen Banner allow you to fully customize the look and feel of your text by adjusting desktop and mobile typography (font family, size, weight, line height, and color), managing spacing (margins and padding for precise layout control), and applying text transform options such as uppercase, lowercase, or capitalize, ensuring your headings and descriptions remain visually consistent, responsive, and aligned with your brand style across all devices.

• Desktop Typography
  Customize font style, size, weight, and color for the CTA on desktop. Ensures your button text is bold, readable, and aligned with your brand style.
• Mobile Typography
  Individually set typography for mobile devices. Keeps the CTA optimized and user-friendly across all screen sizes.
• Spacing
  Adjust padding and margin around the CTA button. Helps maintain balanced layout and proper visual hierarchy.
• Background
  Choose and style the background color or gradient of the CTA. Makes the button stand out and match your brand’s look.
• Border
  Add or customize borders for the CTA button. Ideal for minimal designs or creating outlined button styles.
• Border Radius
  Control the corner roundness of the CTA. Switch between sharp edges, soft curves, or pill-shaped buttons.
• Text Transform
  Format your CTA text as uppercase, lowercase, or capitalized. Great for enforcing consistent design language.
• Box Shadow Enable
  Add or remove shadows around the CTA. Enhances depth and draws more attention to the button.
• Alignment
  Position the CTA left, center, or right within the hero section. Provides flexibility depending on layout style.
  
  

Image Setting (Layout 1-3) : 

Image Styling Settings allow you to easily control image corner and background to match your layout needs. And visual appearance to ensure images blend seamlessly with your brand design.

Company Details and Slider Content Setting (Layout 2) :

• Desktop Typography
  Customize font style, size, weight, and color for the CTA on desktop. Ensures your button text is bold, readable, and aligned with your brand style.
• Mobile Typography
  Individually set typography for mobile devices. Keeps the CTA optimized and user-friendly across all screen sizes.
• Spacing
  Adjust padding and margin around the CTA button. Helps maintain balanced layout and proper visual hierarchy.
• Background
  Choose and style the background color or gradient of the CTA. Makes the button stand out and match your brand’s look.
• Border
  Add or customize borders for the CTA button. Ideal for minimal designs or creating outlined button styles.
• Border Radius
  Control the corner roundness of the CTA. Switch between sharp edges, soft curves, or pill-shaped buttons.
• Text Transform
  Format your CTA text as uppercase, lowercase, or capitalized. Great for enforcing consistent design language.
• Box Shadow Enable
  Add or remove shadows around the CTA. Enhances depth and draws more attention to the button.
• Alignment
  Position the CTA left, center, or right within the hero section. Provides flexibility depending on layout style.

Slider Arrows Setting :

Bottom Content Setting (Layout 2) :

• Desktop Typography
  Customize font style, size, weight, and color on desktop. Ensures your button text is bold, readable, and aligned with your brand style.
• Mobile Typography
  Individually set typography for mobile devices. Keeps optimized and user-friendly across all screen sizes.
• Spacing
  Adjust padding and margin around the CTA button. Helps maintain balanced layout and proper visual hierarchy.
• Background
  Choose and style the background color or gradient of the CTA. Makes the button stand out and match your brand’s look.
• Border
  Add or customize borders for the CTA button. Ideal for minimal designs or creating outlined button styles.
• Border Radius
  Control the corner roundness of the CTA. Switch between sharp edges, soft curves, or pill-shaped buttons.
• Text Transform
  Format your CTA text as uppercase, lowercase, or capitalized. Great for enforcing consistent design language.
• Alignment
  Position the CTA left, center, or right within the hero section. Provides flexibility depending on layout style.

We hope you enjoy using our premium full screen banner to create a seamless experience for both your users and your marketing team. At Code Accelerator, we're committed to ensuring your HubSpot experience is exceptional. If you need a custom HubSpot module or require a tailored HubSpot CMS or CRM setup, please don’t hesitate to Contact Us.