Paid

Wave Goodbye to Low Engagement and Start Grabbing Attention with A Parallax Scroll Hero Banner

Adding a page hero banner is made easy with this free custom module for HubSpot CMS.

 

Module Demo

Jake Hero Banner

Parallax Image or Video. Free & Easy to Use.

jake-hero-banner-tall

Also Works With Images

Parallax Image or Video. Free & Easy to Use.

 

Frequently Asked Questions

Steps How to add a Jake Addons custom module to a page.

  1. In your HubSpot account, navigate to the page you would like to edit.
  2. Hover over a page and click Edit.
  3. In the content editor sidebar on the left of the window, locate the search box and type "jake"
  4. Next, select a module that appears in the All Modules section
  5. Click a module and drag it into position on the page.
  6. After you add the module, you will then need to adjust the section settings to remove any default padding. You can also choose if you want to be full width or have a maximum width.

 

My recommendations for the video can be adjusted based on your preference on quality/file size. You want the "best" quality video at the smallest file size you can. Best is subjective based on your needs for page load vs branding and design precision. Usually, you need to find a compromise between the two.

Make sure you are using a MP4 video format. This is the only video format that works with this module. 
View the the other FAQ question - "What video sizes and file format do you recommend" for more information.

Some pages you create will require an image gallery or tab content, but others will not. HubSpot modules give you the control to add new functionality to only the pages you need without impacting the rest of the pages on your website. These modules are added to drag-and-drop areas or sections when editing a page. If you are more familiar with WordPress, they are like blocks or plugins in that CMS.

HubSpot CMS Hub Overview

The content management system you need to easily create and personalize website pages for every visitor — optimized for conversion across every device. Rely on developers as much or as little as you’d like.

HubSpot CMS Hub Features

  • Drag and drop page editor
  • Image and file manager
  • Fully integrated CRM
  • Contact attribution analytics – know where leads come from
  • Multiple language support
  • Build website pages, landing pages, and blog posts
  • Managed website hosting and security

HubSpot CMS Hub Benefits

  • Marketing and Sales can have one login and tool for their website
  • Easy to use website builder without having to manage website hosting and plugins
  • Can make content translation and smart content to leverage your CRM data

Get Started

Have a question? Contact Me
 

Module Documentation

Content Tab

Text

Text : A rich text box to make it easy to add as much text as you need.

Call to Action

Link : Add link to a page or file

Link Text : To hide the call to action, just delete the placeholder text

Custom CSS Classes : Use this to add a custom button class used by your theme or provided by your developer.

Background

Choose Background Style : Choose from images or video

Parallax Background : Toggle the parallax effect

Stop Video After Scrolling From Top : Pauses the video if you scroll down 500px from the top of the window

Video (MP4) : Add your MP4 video file (view my video file recommendations above in the FAQ section.)

Background Image - Desktop: Choose the image to display on desktop

Background Image - Mobile: Choose the image to display on mobile devices

Image Loading : If the module is at the top of the page choose eager. Choose lazy if it is in the middle or the bottom of the page.

 

Styles Tab

Text

Text Font: Adjust the text font styles. Mostly I would use this to adjust the font color and font family. Because you can also make font style adjustments in the rich text editor.

Text Alignment : Change text alignment to left, center, or right

Text Max Width : Helps to control text wrapping of long headlines. Applies only on desktop.

Text Drop Shadow : Used to provide more contrast for your text so it is more readable on a dark background.

Call to Action

Text Alignment : Change text alignment to left, center, or right

Background Color : Set a button background color

Hover Background Color : Set a button background color on hover

Font : Set a button font color

Hover Font : Set a button font color on hover

Spacing : Adjust button padding and margin.

Background

Overlay Color : Set an overlay color to go above your background image or video. Helps to increase contrast and make your text more readable.

Spacing Mobile : Adjust the padding and margin on mobile

Spacing Desktop : Adjust the padding and margin on desktop

Border Radius : Adds rounded corners to the container

 

Ready to Use This On Your Page?