Hero Banner Module Documentation Page

Introduction

The Hero Banner module is a versatile and impactful tool designed to create eye-catching banners that greet users with a captivating message or image when they land on your website. This introductory guide will walk you through the key features, benefits, and implementation of the “Hero Banner” module.

SUPPORT:

If you need assistance at any step of the way; get in touch with us at support@transfunnel.com

And get Premium Support from Transfunnel - HubSpot's Elite Solutions Partner

Table of Contents

  1. Possible Layouts
  2. Content Settings Overview:
  3. Style Settings Overview:
Hero Banner Module Documentation Page

Table of Contents

  1. Possible Layouts
  2. Content Settings Overview:
  3. Style Settings Overview:

Possible Layouts

Layout Options: Welcome to the “Hero Banner” module, which when used makes your website visually appealing.

  • Visual Appeal: The Hero Banner module offers a visually appealing way to make a strong first impression on your website visitors. 
  • Call to Action: Drive user engagement with customisable call-to-action buttons that lead users to relevant sections or actions. 
  • Responsive Design: The Hero Banner module is built with responsiveness in mind, ensuring a seamless experience on various devices. 
  • Background Magic: Dive into a world of possibilities with our diverse range of background options. Choose from a variety of sources, such as images, colours, captivating image-overlay combinations, and animation enabled gradients. Your hero banner will truly come to life as you mix and match these elements to perfectly complement your brand's personality. 
  • Enchanting Motion Effects: Elevate your hero banner to new heights by adding eye-catching motion effects. With options to add particle and wave animations, this module is what your website deserves to enhance it visually. 
  • Textual Symphony: Use the module’s innovative typing text feature. Customise fonts, sizes, colours, and animations to compose text that isn't just read – it's felt. 
  • Seamless Customisation: No coding, no hassle. Our intuitive interface allows you to effortlessly switch between various background variants. Experiment freely, witnessing your changes materialise in real time. This ensures that your hero banner resonates with your website’s overall design philosophy. 
Possible Layouts

Layout 1: Background Color with a image overlapped

Layout 2: parallax background image and a content container with blur effect

Layout 3: Hero banner with video background

Layout 4: Hero background image

Layout 5: Hero background gradient with particles

Content Section

Content settings refer to the customisable elements that allow you to control and tailor various aspects of user interaction on a digital platform. Here's a breakdown of the key components:

  1. Headline Text: The headline text serves as the main title or introduction for the content. It's usually the first thing users see and sets the tone for their interaction

  2. Description Text: The description text provides additional context or information about the content. It elaborates on the headline and offers users a deeper understanding of what to expect.

  3. Enable Typing Text: Enabling typing text allows users to input their own text. This feature is commonly used for interactive activities, such as displaying the typing words.

  4. Typing Text Loop: The typing text loop determines whether users can input text multiple times or if it's a one-time interaction. This is useful for scenarios where users might need to enter information repeatedly.

  5. Enable Button: Enabling a button provides users with a clickable element that triggers an action. Buttons are essential for guiding users to the next step or initiating a specific function. You can use this settings to display the button.

  6. Button Loop:: You can enable/disable a CTA button in this module. Enabling a CTA button provides users with a clickable element that triggers an action. CTA Buttons are essential for guiding users to the next step or initiating a specific function. You can use this setting to display the CTA button. You can add multiple CTA buttons in the Hero banner.

By effectively configuring these content settings, you can create interactive and user-centric digital experiences that cater to various scenarios, from collecting user input to guiding them through different processes. These settings contribute to a more personalized and engaging interaction, enhancing overall user satisfaction and achieving your platform's objectives.

Style Section

Style settings are a collection of customisations that allow you to shape the visual aspects of your Hero banner. These settings play a pivotal role in creating a cohesive and visually appealing user interface. Here's an overview of the key style components:

1) Background Type: Background type refers to the choice of background for your content. Options include:
  • Image:Set a specific image as the background, adding visual context to your content
  • Color:Apply a solid colour as the background, establishing a clean and vibrant base
  • Gradient:Use gradient colour as background with animations options.
  • Image with Overlay Color:Combine an image background with a semi-transparent colour overlay.
  • Image overlapping the background Color: Combine an image, color, gradient or video with a image overlapping it

2) Text/Typography: You can customise the banner with the font  of your choice, this will help in aligning the banner with the design and theme of your website.

3) Spacing: Spacing settings regulate the distances between various elements, ensuring a balanced layout. Proper spacing improves readability and aesthetic harmony.

4) CTA Button: CTA Button styling determines the appearance of interactive elements that prompt user actions. Customisation options include colour, hover effects, and corner radius.

5) Content Area: You can customize the content. Customization options include style. You can also customize the alignment of the content box in the hero banner.

If the content is in left or right then only you can get the extra effect section and will work in this two part only not in content box alignment center.

6) Particles: It adds subtle particle animation in the background of the hero banner. It add a dynamic and captivating dimension to your interface. Animated particles can float, fade, or move, creating an immersive experience.

7) Wave Effect: The wave effect at the bottom of your hero banner introduces a playful visual component that you can enable/disable and customise with colours and wave pattern which include zig-zag, sine wave, or autoplay.

8) Typewriter:The typewriter effect emulates a part of headline text being typed out gradually, evoking a sense of storytelling and engagement.

Conclusion:

Our Hero Banner is designed and has kept all the basic necessities. The module has multiple variants. Our Hero Banner stands as an embodiment of user-centric design. With the ability to tailor spacing, background type, text text and its colors, typing borders, particles, and font sizes. By thoughtfully configuring these style settings, you can create an interface that reflects your brand identity, enhances user engagement, and provides an exceptional overall user experience. Attention to consistent styling and detail contributes to a visually stunning and user-friendly platform that's bound to make a lasting impact.