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.
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.
Search for "Premium Full Screen Banner" and drag and drop the module into the desired location on your page.
Layout ID :
Easily enhance navigation by adding an ID to the target section and using the same ID in an anchor link. This enables a smooth scrolling effect when users click a Call-to-Action (CTA) button, improving the overall user experience.
Layout Options :
Effortlessly capture attention and showcase your brand with the “Premium Full Screen Banner” module — perfect for homepages, landing pages, or campaign launches. Designed to make a powerful first impression, this hero section combines bold layouts, customizable content, and engaging calls-to-action that inspire visitors to take the next step. With responsive design and flexible styling, it ensures your hero banner looks sleek, professional, and high-converting across all devices.
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.
Company and Slider Content :
jQuery Add/Remove :
Users can add or remove jQuery JavaScript as needed, providing flexibility to enhance functionality or optimize performance based on their requirements.
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.
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) :
Slider Arrows Setting :
Bottom Content Setting (Layout 2) :
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.