--- title: HubSpot Banner for HubSpot CMS | Parallax Image / Video Hero description: Grab attention with a Parallax Hero Banner Module for HubSpot CMS. Easily add engaging visuals to your pages and enhance user experience. Boost engagement now! image: https://www.bootstrapcreative.com/hubfs/hero-banner-module-jake-lett-thumbnail.png --- [![logo-1](https://www.bootstrapcreative.com/hubfs/logo-1.svg)](https://bootstrapcreative.com/) - [**FREE** HubSpot Modules](https://www.bootstrapcreative.com/jake-addons/modules) - [HubSpot Themes](https://www.bootstrapcreative.com/jake-addons/hubspot-themes-templates) Open main navigation Close main navigation - [**FREE** HubSpot Modules](https://www.bootstrapcreative.com/jake-addons/modules) - [HubSpot Themes](https://www.bootstrapcreative.com/jake-addons/hubspot-themes-templates) - [Website Support Plans](https://www.bootstrapcreative.com/jake-addons/hire-hubspot-developer) [Website Support Plans](https://www.bootstrapcreative.com/jake-addons/hire-hubspot-developer) [HubSpot Modules](https://www.bootstrapcreative.com/jake-addons/modules) / # Parallax Hero Banner Module for HubSpot CMS Paid ## Wave Goodbye to Low Engagement and Start Grabbing Attention with A Parallax Scroll Hero Banner Grab attention with a Parallax Hero Banner Module for HubSpot CMS. Easily add engaging visuals to your pages and enhance user experience. Boost engagement now! [![Get Module](https://no-cache.hubspot.com/cta/default/1637283/interactive-161109619009.png)](https://www.bootstrapcreative.com/hs/cta/wi/redirect?encryptedPayload=AVxigLLUr6M2H3pNaAgMAoL10QMVIslW9O7ByckHHBZHdXANw4jzoMvtdRWHo4TeFb9XemwksHeZxZWJkcNX%2BBiS6yUOq4ujwpJSyitO1pXOL8bSwm15dgcZ635Xuw%2BSwqRLIx%2BkeFRbvykVMUnaC4u2OUpEaeJezWBEHnxsaNqYRZbIyJ5jzNU2frtZ3zorHY09AOjB4sA%2Bz5Ub96%2B4cLhMpmZ7QDpWXJDhaRFLvxFRCVZ34xDYVSHKGTMB%2Btt3CkeGh7aIKMqNjXK7twixhV9M259nNFL0zw%3D%3D&webInteractiveContentId=161109619009&portalId=1637283) [FAQ](https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module#faq) [Documentation](https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module#documentation)   ## Module Demo # Jake Hero Banner Parallax Image or Video. Free & Easy to Use. [Learn More](https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module#form) ![jake-hero-banner-tall](https://www.bootstrapcreative.com/hubfs/jake-hero-banner-tall.jpg) # Also Works With Images Parallax Image or Video. Free & Easy to Use. [Learn More](https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module#form)   ## Frequently Asked Questions ## How Do I Add This Jake Hero Banner to a HubSpot Page? How Do I Make it Full Width? #### 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" ![](https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-58-18-0558-AM.png?width=910&height=588&name=image-png-Aug-28-2024-09-58-18-0558-AM.png) 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. ![](https://www.bootstrapcreative.com/hs-fs/hubfs/image-png-Aug-28-2024-09-54-14-4097-AM.png?width=774&height=1000&name=image-png-Aug-28-2024-09-54-14-4097-AM.png)   ## What Video Sizes and File Format Do You Recommend? 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. - 16:9 aspect ratio, 1280 x 720 mpg - if it needs to be crisper and less pixelated try increasing the resolution to 1920 x 1080. [Here is a full list of video resolutions and how they impact the quality.](https://typito.com/blog/video-resolutions/) - would make the run time as short as possible to visually communicate your subject matter. This can vary if you are showing different scenes vs a loop background texture. I would also look into building a seamless loop if possible - [Watch tutorial on how to make a seamless video edit](https://www.youtube.com/watch?v=gP76Sk_P6Ng&t=4s) ## The video is Shown as a Solid Black Color on Mobile. How Do I Fix This? 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. ## What are Modules in HubSpot? 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. ## What is HubSpot CMS and How Does it Compare to WordPress? ### 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 - [A Beginner’s Guide to HubSpot CMS - Free eBook](https://bootstrapcreative.com/resources/a-beginners-guide-to-hubspot-cms/) - [HubSpot CMS vs. WordPress](https://bootstrapcreative.com/hubspot-cms-vs-wordpress/) - [Get Started Free HubSpot CMS](https://bootstrapcreative.com/hubspotcms) **Have a question?** [Contact Me](https://bootstrapcreative.com/contact/)   ## 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? [![Get Module](https://no-cache.hubspot.com/cta/default/1637283/interactive-161109619009.png)](https://www.bootstrapcreative.com/hs/cta/wi/redirect?encryptedPayload=AVxigLLUr6M2H3pNaAgMAoL10QMVIslW9O7ByckHHBZHdXANw4jzoMvtdRWHo4TeFb9XemwksHeZxZWJkcNX%2BBiS6yUOq4ujwpJSyitO1pXOL8bSwm15dgcZ635Xuw%2BSwqRLIx%2BkeFRbvykVMUnaC4u2OUpEaeJezWBEHnxsaNqYRZbIyJ5jzNU2frtZ3zorHY09AOjB4sA%2Bz5Ub96%2B4cLhMpmZ7QDpWXJDhaRFLvxFRCVZ34xDYVSHKGTMB%2Btt3CkeGh7aIKMqNjXK7twixhV9M259nNFL0zw%3D%3D&webInteractiveContentId=161109619009&portalId=1637283) ### [Related HubSpot Custom Modules](https://www.bootstrapcreative.com/jake-addons/modules) --- #### Filter Modules: All Free Paid [![HubSpot Banner for HubSpot CMS | Parallax Image / Video Hero](https://www.bootstrapcreative.com/hs-fs/hubfs/hero-banner-module-jake-lett-thumbnail.png?width=250&name=hero-banner-module-jake-lett-thumbnail.png)](https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module) Paid ## [Jake Hero Banner Custom Modulefor HubSpot CMS](https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module) Grab attention with a Parallax Hero Banner Module for HubSpot CMS. Easily add engaging visuals to your pages and enhance user experience. Boost engagement now! [Learn More](https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module) [![FREE Logo Slider Carousel Module for HubSpot CMS](https://www.bootstrapcreative.com/hs-fs/hubfs/logo-slider-hubspot-module-jake-lett-thumbnail.png?width=250&name=logo-slider-hubspot-module-jake-lett-thumbnail.png)](https://www.bootstrapcreative.com/jake-addons/logo-slider-hubspot-module) Free ## [Logo Slider Custom Modulefor HubSpot CMS](https://www.bootstrapcreative.com/jake-addons/logo-slider-hubspot-module) Adding a logo or image carousel is made easy with this logo slider for HubSpot CMS. [Learn More](https://www.bootstrapcreative.com/jake-addons/logo-slider-hubspot-module) [![Overlap Card HubSpot Module for HubSpot CMS Hub](https://www.bootstrapcreative.com/hs-fs/hubfs/overlap-card-hubspot-module-jake-lett-thumbnail.png?width=250&name=overlap-card-hubspot-module-jake-lett-thumbnail.png)](https://www.bootstrapcreative.com/jake-addons/overlap-card-hubspot-module) Free ## [Overlap Card Custom Modulefor HubSpot CMS](https://www.bootstrapcreative.com/jake-addons/overlap-card-hubspot-module) Want to have a text block overlapping an image? Or the reverse with the image on top of text? Now you can do this easily without writing any code. Overlap Card HubSpot Module, [Learn More](https://www.bootstrapcreative.com/jake-addons/overlap-card-hubspot-module) [![Stylized Card HubSpot Module for HubSpot CMS Hub](https://www.bootstrapcreative.com/hs-fs/hubfs/stylized-card-hubspot-module-jake-lett-thumbnail-1.png?width=250&name=stylized-card-hubspot-module-jake-lett-thumbnail-1.png)](https://www.bootstrapcreative.com/jake-addons/stylized-card-hubspot-module) Free ## [Stylized Card Custom Modulefor HubSpot CMS](https://www.bootstrapcreative.com/jake-addons/stylized-card-hubspot-module) The Stylized Card Module for HubSpot makes it easy to add block of content into a column grid. You can add a border, background color, background image, and drop shadow. [Learn More](https://www.bootstrapcreative.com/jake-addons/stylized-card-hubspot-module) ## Get Dedicated HubSpot Website Support. [![Jake Lett Lett headshot photo](https://www.bootstrapcreative.com/hs-fs/hubfs/jake-lett-2026-v3.jpg??&width=150&height=150&name=jake-lett-2026-v3.jpg)](https://www.bootstrapcreative.com/jake-addons/hire-hubspot-developer) ### Hey there! [I'm Jake Lett](https://www.bootstrapcreative.com/jake-addons/hire-hubspot-developer) Don't let technical limitations bottle-neck your marketing. I provide the ongoing custom development you need—themes, modules, and troubleshooting—without the cost or hassle of a full-time hire. Businesses trust me to keep their HubSpot websites running flawlessly. #### Fast Turnaround • Reliable Code • Monthly Peace of Mind • Located in USA --- [See Plans](https://www.bootstrapcreative.com/jake-addons/hire-hubspot-developer) [![HubSpot](data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMzguNjU5NjEgOTYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMzOC42NTk2MSA5NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBvbHlnb24gZmlsbD0iIzIxMzM0MyIgcG9pbnRzPSIzNi42NzcyNSw1NC4zMzIxOSAxMS44MDkxOCw1NC4zMzIxOSAxMS44MDkxOCw4MC41Mjg1OSAwLDgwLjUyODU5IDAsMTUuODkwODMgMTEuODA5MTgsMTUuODkwODMgCgkJMTEuODA5MTgsNDIuOTcxMDMgMzYuNjc3MjUsNDIuOTcxMDMgMzYuNjc3MjUsMTUuODkwODMgNDguNDgzNzgsMTUuODkwODMgNDguNDgzNzgsODAuNTI4NTkgMzYuNjc3MjUsODAuNTI4NTkgCSIvPgoJPHBhdGggZmlsbD0iIzIxMzM0MyIgZD0iTTg2LjI2OTM2LDU5LjYzNjM0YzAsNS4zODM0NC00LjM4NTMxLDkuNzYzNzUtOS43Njc1NSw5Ljc2Mzc1Yy01LjM4MzY4LDAtOS43NjYxNi00LjM4MDMxLTkuNzY2MTYtOS43NjM3NQoJCXYtMjcuNjg0OUg1NS41NTMzOXYyNy42ODQ5YzAsMTEuNTUwMjUsOS4zOTc2NCwyMC45NDU1OCwyMC45NDg0MiwyMC45NDU1OGMxMS41NDg0MiwwLDIwLjk0NjA1LTkuMzk1MzMsMjAuOTQ2MDUtMjAuOTQ1NTgKCQl2LTI3LjY4NDloLTExLjE3ODVWNTkuNjM2MzR6Ii8+Cgk8cGF0aCBmaWxsPSIjMjEzMzQzIiBkPSJNMTY5LjI0NTU2LDM0LjgwMTljMC01LjY3NjIxLDMuNzU2OTktNy40NzYxNSw3Ljg3MDI1LTcuNDc2MTVjMy4zMTIwMSwwLDcuNjk0NzIsMi41MjA2OSwxMC41NTQyNCw1LjU4MzYxCgkJbDcuMzMzMjUtOC42NDQ0Yy0zLjY2NDUxLTQuOTUxMi0xMS4wODc5MS04LjM3NDEzLTE3LjE3MDc1LTguMzc0MTNjLTEyLjE2NzMxLDAtMjAuOTMzODUsNy4xMTQyNC0yMC45MzM4NSwxOC45MTEwNgoJCWMwLDIxLjg4MDQ2LDI2Ljc0ODIsMTQuOTQ0NzksMjYuNzQ4MiwyNy4xOTQwNGMwLDMuNzc3NTMtMy42NjYzOCw3LjExMjM2LTcuODY5MzQsNy4xMTIzNgoJCWMtNi42MjE3LDAtOC43Njk2MS0zLjI0MTc0LTExLjgwOTg2LTYuNjY0bC04LjE0MTgyLDguNDYyNzJjNS4xOTEyMiw2LjM5MzczLDExLjYzMDA4LDkuNjM3MzYsMTkuMzIzNjUsOS42MzczNgoJCWMxMS41Mzk0OSwwLDIwLjg0MzI1LTcuMjA0MDUsMjAuODQzMjUtMTguNDYxNDlDMTk1Ljk5MjgsMzcuNzcxNDgsMTY5LjI0NTU2LDQ1LjMzNjI3LDE2OS4yNDU1NiwzNC44MDE5eiIvPgoJPHBhdGggZmlsbD0iIzIxMzM0MyIgZD0iTTMzNC43MjA0OSw3MC4yMDI3OGMtNi42MTY5NywwLTguNDk1MDYtMi44NjA5Ni04LjQ5NTA2LTcuMjQ1OThWNDMuNTQ2NThoMTAuMjg0ODJ2LTkuODM4OTJoLTEwLjI4NDgyCgkJVjIwLjczNTE1bC0xMS4zNTc3OSw1LjA5ODI2djM5LjUzOTMxYzAsMTAuMTA5Myw2Ljk3NDY0LDE1LjIwOTIsMTYuNTQyNjYsMTUuMjA5MmMxLjQzMTIxLDAsMy40MDEyMS0wLjA5MjQ4LDQuNDc1NjgtMC4zNTc2NgoJCWwyLjc3MzYyLTEwLjE5NzA2QzMzNy40MDc3NSw3MC4xMTM1NywzMzUuOTc3MDIsNzAuMjAyNzgsMzM0LjcyMDQ5LDcwLjIwMjc4eiIvPgoJPHBhdGggZmlsbD0iIzIxMzM0MyIgZD0iTTEyOC44OTMyMywzMi4yNzUzM2MtNS41NDY3MywwLTkuNDE4MjksMS42MTAwMi0xMy4xNTczNiw1LjI4MDAzVjE2LjI3Njg1aC0xMS4yMTgwOXYzOS40MzU0NgoJCWMwLDE0Ljc2MDQsMTAuNjcxNjEsMjQuODY5NjMsMjIuNjYyMzYsMjQuODY5NjNjMTMuMzI5MDYsMCwyNS4wMDc3Ny0xMC4yODg5OSwyNS4wMDc3Ny0yNC4xNTIzMgoJCUMxNTIuMTg3OTEsNDIuNzQxOTEsMTQxLjQxODY5LDMyLjI3NTMzLDEyOC44OTMyMywzMi4yNzUzM3ogTTEyOC44MjM1LDY5LjI5MTczYy03LjAyNzU0LDAtMTIuNzIzNzQtNS42OTY0Mi0xMi43MjM3NC0xMi43MjM1MwoJCWMwLTcuMDI2ODksNS42OTYyLTEyLjcyMzUzLDEyLjcyMzc0LTEyLjcyMzUzYzcuMDI2NjcsMCwxMi43MjMzMSw1LjY5NjY0LDEyLjcyMzMxLDEyLjcyMzUzCgkJQzE0MS41NDY4MSw2My41OTUzLDEzNS44NTAxNyw2OS4yOTE3MywxMjguODIzNSw2OS4yOTE3M3oiLz4KCTxwYXRoIGZpbGw9IiMyMTMzNDMiIGQ9Ik0yNTAuNjgzNDYsNTUuODQ3MjRjMC0xMy44NjMzMy0xMS42Nzg3My0yNC4xNTIzMi0yNS4wMDc3OC0yNC4xNTIzMgoJCWMtMTEuOTkwNzUsMC0yMi42NjIzNSwxMC4xMDkyMi0yMi42NjIzNSwyNC44Njk2M1Y5NmgxMS4yMTgwOVY3NC43MjE0OWMzLjczOTA2LDMuNjcwMDEsNy42MTA2Myw1LjI4MDAzLDEzLjE1NzM1LDUuMjgwMDMKCQlDMjM5LjkxNDIyLDgwLjAwMTUyLDI1MC42ODM0Niw2OS41MzQ5NCwyNTAuNjgzNDYsNTUuODQ3MjR6IE0yNDAuMDQyMzQsNTUuNzA4NjVjMCw3LjAyNjg5LTUuNjk2NjQsMTIuNzIzNTMtMTIuNzIzMzEsMTIuNzIzNTMKCQljLTcuMDI3NTQsMC0xMi43MjM3NC01LjY5NjY0LTEyLjcyMzc0LTEyLjcyMzUzYzAtNy4wMjcxLDUuNjk2Mi0xMi43MjM1MywxMi43MjM3NC0xMi43MjM1MwoJCUMyMzQuMzQ1Nyw0Mi45ODUxMywyNDAuMDQyMzQsNDguNjgxNTUsMjQwLjA0MjM0LDU1LjcwODY1eiIvPgoJPHBhdGggZmlsbD0iI0ZGNUMzNSIgZD0iTTI4Ni45MzI0NiwzMS4xNTE1NFYxOS44ODMxMmMyLjk0MTE2LTEuMzg5NTEsNS4wMDIwMS00LjM2NTA4LDUuMDAyMDEtNy44MTg1di0wLjI2MDM4CgkJYzAtNC43NjU1Ny0zLjg5OTQ0LTguNjY0OC04LjY2NDgzLTguNjY0OGgtMC4yNjAxNmMtNC43NjU3OCwwLTguNjY1MjIsMy44OTkyMy04LjY2NTIyLDguNjY0OHYwLjI2MDM4CgkJYzAsMy40NTM0MSwyLjA2MTI4LDYuNDI5NDIsNS4wMDI0MSw3LjgxODcydjExLjI2ODQyYy00LjM3OTI0LDAuNjc2NTYtOC4zODA2NSwyLjQ4MjY5LTExLjY4MjE5LDUuMTQwNzlsLTMwLjkzODg3LTI0LjA2NzU2CgkJYzAuMjAzNTEtMC43ODM3NywwLjM0NjQ1LTEuNTkxMjksMC4zNDczMi0yLjQzODY4YzAuMDA2OTctNS4zOTc5MS00LjM2MzEzLTkuNzc5MzMtOS43NjEyNS05Ljc4NjMxCgkJYy01LjM5ODEzLTAuMDA2NzUtOS43Nzk1Niw0LjM2MzU2LTkuNzg2NTMsOS43NjE0N2MtMC4wMDY1Myw1LjM5NzkxLDQuMzYzNTYsOS43NzkzMyw5Ljc2MTY5LDkuNzg2MDkKCQljMS43NTkyOCwwLjAwMjE4LDMuMzg3MzktMC40OTc0NSw0LjgxNDYxLTEuMzA5MTFsMzAuNDM0NjUsMjMuNjc1NzljLTIuNTg4NTksMy45MDY4NS00LjEwNDI1LDguNTg2OC00LjEwNDI1LDEzLjYyNDUyCgkJYzAsNS4yNzQ1OCwxLjY2NjAyLDEwLjE1MjgxLDQuNDgyMDksMTQuMTY1NzdsLTkuMjU1NzQsOS4yNTU3NGMtMC43MzE2OS0wLjIxOTQyLTEuNDkxMjctMC4zNzMwNC0yLjI5NDg2LTAuMzczMDQKCQljLTQuNDM1NDcsMC04LjAzMTYsMy41OTU5Mi04LjAzMTYsOC4wMzE2czMuNTk2MTMsOC4wMzE2LDguMDMxNiw4LjAzMTZjNC40MzU5LDAsOC4wMzE1OS0zLjU5NTkyLDguMDMxNTktOC4wMzE2CgkJYzAtMC44MDMxNi0wLjE1MzM4LTEuNTYyOTYtMC4zNzMwMi0yLjI5NDY1bDkuMTU1NDktOS4xNTUyOGM0LjE1NTcsMy4xNzI1NSw5LjMzMDY5LDUuMDc4MDMsMTQuOTYyODMsNS4wNzgwMwoJCWMxMy42NDU0NSwwLDI0LjcwNzUyLTExLjA2MjI5LDI0LjcwNzUyLTI0LjcwODE3QzMwNy44NDc3NSw0My4xODU4NywyOTguNzcyODYsMzIuOTgwMzMsMjg2LjkzMjQ2LDMxLjE1MTU0eiBNMjgzLjE0MDIzLDY4LjIwNjI4CgkJYy02Ljk5NjE1LDAtMTIuNjY4NC01LjY3MTM3LTEyLjY2ODQtMTIuNjY3NTNjMC02Ljk5NTk0LDUuNjcyMjQtMTIuNjY3NTMsMTIuNjY4NC0xMi42Njc1MwoJCWM2Ljk5NTMsMCwxMi42Njc1NCw1LjY3MTU4LDEyLjY2NzU0LDEyLjY2NzUzQzI5NS44MDc3Nyw2Mi41MzQ5MiwyOTAuMTM1NTMsNjguMjA2MjgsMjgzLjE0MDIzLDY4LjIwNjI4eiIvPgo8L2c+Cjwvc3ZnPgo=)](https://bootstrapcreative.com/hubspotcms) © 2026 Designed by Jake Lett. Bootstrap Creative All rights reserved. - Privacy Policy - Website Terms of Use - Cookie Policy ```json { "@context" : "http://www.schema.org", "@id" : "https://www.bootstrapcreative.com/jake-addons/jake-hero-banner-module", "@type" : "product", "aggregateRating" : { "@type" : "aggregateRating", "bestRating" : "5 ", "ratingValue" : "5", "reviewCount" : "1 " }, "brand" : { "@type" : "Brand", "name" : "Bootstrap Creative" }, "description" : "Grab attention with a Parallax Hero Banner Module for HubSpot CMS. Easily add engaging visuals to your pages and enhance user experience. Boost engagement now!", "image" : "https://1637283.fs1.hubspotusercontent-na1.net/hubfs/1637283/hero-banner-module-jake-lett-thumbnail.png", "mpn" : "IF", "name" : "HubSpot Banner for HubSpot CMS | Parallax Image / Video Hero", "review" : { "@type" : "Review", "author" : { "@type" : "Person", "name" : "Jake Lett" }, "reviewRating" : { "@type" : "Rating", "bestRating" : "5", "ratingValue" : "4" } }, "sku" : "IF" } ``` ```json { "@context" : "https://schema.org", "@type" : "FAQPage", "mainEntity" : [ { "@type" : "Question", "acceptedAnswer" : { "@type" : "Answer", "text" : "Steps How to add a Jake Addons custom module to a page. In your HubSpot account, navigate to the page you would like to edit. Hover over a page and click Edit. In the content editor sidebar on the left of the window, locate the search box and type \"jake\" Next, select a module that appears in the All Modules section Click a module and drag it into position on the page. 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." }, "name" : "How Do I Add This Jake Hero Banner to a HubSpot Page? How Do I Make it Full Width?" }, { "@type" : "Question", "acceptedAnswer" : { "@type" : "Answer", "text" : "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. 16:9 aspect ratio, 1280 x 720 mpg - if it needs to be crisper and less pixelated try increasing the resolution to 1920 x 1080. Here is a full list of video resolutions and how they impact the quality. would make the run time as short as possible to visually communicate your subject matter. This can vary if you are showing different scenes vs a loop background texture. I would also look into building a seamless loop if possible - Watch tutorial on how to make a seamless video edit" }, "name" : "What Video Sizes and File Format Do You Recommend?" }, { "@type" : "Question", "acceptedAnswer" : { "@type" : "Answer", "text" : "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." }, "name" : "The video is Shown as a Solid Black Color on Mobile. How Do I Fix This?" }, { "@type" : "Question", "acceptedAnswer" : { "@type" : "Answer", "text" : "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." }, "name" : "What are Modules in HubSpot?" }, { "@type" : "Question", "acceptedAnswer" : { "@type" : "Answer", "text" : "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 A Beginner’s Guide to HubSpot CMS - Free eBook HubSpot CMS vs. WordPress Get Started Free HubSpot CMS" }, "name" : "What is HubSpot CMS and How Does it Compare to WordPress?" } ] } ``` ```json { "@context" : "https://schema.org", "@id" : "https://bootstrapcreative.com/#organization", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "US" }, "founder" : { "@id" : "https://bootstrapcreative.com/#person" }, "logo" : { "@type" : "ImageObject", "height" : "35", "url" : "https://bootstrapcreative.com/wp-bc/wp-content/themes/wp-bootstrap/images/bootstrap-creative-logo-2.svg", "width" : "232" }, "name" : "Bootstrap Creative", "sameAs" : [ "https://www.bootstrapcreative.com/", "https://www.linkedin.com/in/jacoblett/", "https://www.youtube.com/c/Bootstrapcreative" ], "url" : "https://bootstrapcreative.com/" } ``` ```json { "@context" : "https://schema.org", "@id" : "https://bootstrapcreative.com/#person", "@type" : "Person", "jobTitle" : "HubSpot CMS Developer", "name" : "Jake Lett", "sameAs" : [ "https://www.linkedin.com/in/jacoblett/", "https://www.youtube.com/c/Bootstrapcreative" ], "url" : "https://www.bootstrapcreative.com/jake-addons/hire-hubspot-developer", "worksFor" : { "@id" : "https://bootstrapcreative.com/#organization" } } ```