Hero Banner with Image and Video

Introduction

The “Hero Banner with Image and Video” module provides you with the functionality to easily add images, videos, horizontal slider, vertical slider, CTAs, solid colour backgroud, gradient background, pop-up video and much more. And with many customisation options available, you can easily add this beautifully crafted module to seamlessly integrate with your website style, structure, and design.

 

SUPPORT:

If you need assistance at any step of the way; get in touch with us at ProductSupport@transfunnel.com
And get Premium Support from Transfunnel - HubSpot's Elite Solutions Partner

Table of Contents

  1. Possible Layouts
  2. Content features
  3. Style Features
Hero Banner with Image and Video

Table of Contents

  1. Possible Layouts
  2. Content features
  3. Style Features

Possible Layouts

Layout Options: Welcome to the “Hero Banner with Image and Video” module. The module has:

  • Background Image:The module gives the option to add multiple images in the background and content over the images.
  • Background Video:The module gives the option to add video in the background and content over the it.
  • Pop-up video: In the video variant, the module lets you add a watch video button, that makes the video pop-out and play on your website.
  • Sliders:The module has horizontal and vertical sliders to slide between multiple images or coloured backgrounds.
  • CTAs: You can add eye-catching CTAs over the selected backgrounds, be it image or colours.
  • Responsive and mobile-friendly:The “Hero Banner with Image and Video” module is designed to provide optimal viewing experiences on various devices, including desktops, tablets, and mobile phones. With its responsiveness, your page will adapt seamlessly, ensuring a consistent and engaging experience across all platforms.
  • Customisation: The “Hero Banner with Image and Video” module comes with a bunch of customisations, all of which you can control to give the user a seamless experience in tandem with your website’s colours, style, and design.

Content features: 

 

Customise the title, description and buttons content from content settings. 

In title settings, customise the heading text and set heading level. 

Write the description content in the description setting content options. 

Add/remove custom buttons with further customisation options in content settings. 

 

Style features: 

The style settings give options to customise the designs, backgrounds, maximum content width & height, content width, title, description, and buttons. 

DESIGNS- 

This setting provides the option to set module design type. When selected, each module design has some specific options shown below-> 

Design –1 

When the Hero banner slider (split) is selected, the module setting shown as follows: 

 



 

When design type Hero banner slider (single) is selected:  

These are specific settings shown above, rest common settings are shown below: 

Customise the module background type and spacings from background setting. 

Set the maximum width and height of the content container and its layout. 

Set the content box width, alignment and text alignment in it from content width setting. 

Customise the title font type, style, colour, size, spacings and line height from title setting. 

Customise the description content font type, style, and colours from description setting. 

In button setting, you get options to customise: 

Text-  

Background-  

Border-  

Spacing-  

Corner-  

 

Conclusion:

The “Hero Banner with Image and Video” module provides you with the functionality to easily add images, videos, horizontal slider, vertical slider, CTAs, solid colour backgroud, gradient background, pop-up video and much more. And with many customisation options available, you can easily add this beautifully crafted module to seamlessly integrate with your website style, structure, and design. Start leveraging “Hero Banner with Image and Video” module today.