Banner with Background Image

Make an impact with our versatile banner with background image module, featuring extensive customization options.

What makes this a valuable investment?

Backed by UX data and research, incorporating background images in modules has proven to enhance engagement (source). This module is versatile and can be adapted for various purposes, serving not only as an engaging hero section but also as promotional banners anywhere on a web page.

Crafted with a focus on SEO and accessibility, the module includes animations to enhance engagement and elevate the overall user experience. Imagine having a highly adaptable module at your disposal, allowing you to customise and highlight your core value proposition seamlessly based on your unique requirements.

Feature Highlights

• Built in animations: On-page animations have been proven to enhance user experience and engagement (source). Explore built-in animations to fade in or fade up your content, boosting your site’s appeal.
• Define custom containers or use predefined ones: Seamlessly integrate the module in your setup. By default, the containers are set to follow the Bootstrap 5 responsive framework. However, options exist for you to override these and define custom breakpoints to tailor it to your specific needs.
• Craft custom CTAs or use HubSpot’s built-in functionality: Why not enhance your analytics with HubSpot’s built-in CTA tracking? Opt for HubSpot CTAs to monitor clicks and engagement. Not interested? No worries! You also have the option to craft custom CTAs within the module.
• Built for versatility – use anywhere on the page: The module isn’t restricted to a specific position on a page. Built-in options let you customize its visuals to suit your needs. SEO features, including header selection, also enable you to maintain your on page header hierarchy.
• Have full control over typography settings: Integrating this module into your setup is easy. Toggle options are built in, enabling the module content to seamlessly inherit typography styles from your existing theme setup. Additionally, you have the flexibility to define custom header and body font families, along with sizes and line heights.
• Want to see more? Discover additional details in our handbook here.

Upon purchase, you will receive a zip file containing:

• banner-with-background-image.module (folder)
  • fields.json
  • meta.json
  • module.css
  • module.html
  • module.js
  • src (folder)*
    • module.js
    • module.scss

* Our src folder contains the source files before they’re compiled and optimized for usage. Our workflow compiles and compresses these files for better performance. Upon purchase, you will receive these source files, enabling you to easily make changes to the code if needed.

Visit our FAQs page for answers to common questions about our products and processes.

Still have questions or need support with your purchase? Feel free to contact us or email us directly at support@webmanics.com!