Hero Banner Module Documentation

Overview

The term "Hero Banner" module typically refers to a prominent and visually appealing section on a website's homepage or landing page. It's a large banner or image that is strategically placed to capture the attention of visitors and convey important information or messages about the website, product, service, or promotion.

 

Features Included

The Hero Banner Module in HubSpot offers beneficial features for your web page to help drive more traffic and offer transparency.

These features include:

  • Large Image or Visual: The most noticeable element is the large image or visual that occupies a significant portion of the screen. This image often features high-quality graphics, photographs, or illustrations that represent the core message or theme of the website.
  • Headline: The headline is a short and attention-grabbing line of text that communicates the main message or value proposition. It's meant to give visitors a quick understanding of what the website or product is about.
  • Subhead line: This is a secondary line of text that provides more context to the headline. It can expand on the message and provide additional information.
  • Call to Action (CTA): A Hero Banner usually includes a clear and prominent call-to-action button. This button encourages visitors to take a specific action, such as signing up, exploring a product, starting a trial, or making a purchase.
  • Background Overlay: Sometimes, to improve readability and visual appeal, a semi-transparent color overlay is applied to the background image. This helps make the text on the banner stand out.
  • Responsive Design: Since websites are accessed on various devices with different screen sizes, it's important for the Hero Banner to be responsive. This means that the banner should adjust its size, layout, and content to fit well on screens of different sizes, from desktops to mobile phones.
  • Customization: Hero banner can be customized in terms of styling, animations, and behavior. 

Module Set up

Setting up the Hero Banner Module is easy and straightforward. All you have to do is perform a simple drag and drop. 

Now let’s go through the setup steps:

  • First, log in to your HubSpot account and navigate to the “Marketing” tab.
Marketing

 

  • Click on “Website” in the dropdown menu and select “Website Pages” from the extended menu.
Website

 

  • Select the template and create your web page as usual. Under the module selection menu, search for “Hero banner” and select the module.
Banner-Hero-Module

 

Module content

hb-content-module

 

Under “Content”, you can edit the content you want to be displayed on your Hero banner section. Easily adjust and update the “Animation”, “Heading”, "Subtitle", “Description”, "CTA", "Form", "Images slider", and "Background overlay" as you please.

 

Module styles

hb-module-style

 

Module can be custom-styled to spacing, heading font style, description style, background all options(Like: Solid color, Images, Gradient color), Overlay options(Like: Solid color, Gradient color), Button style and Form style easily managed.

 

Support

Revival Pixel Support

For support, please reach out via email to
We aim to reply within 1 business day.