---
title: Hero Banner Module Guide
---

[Skip to content](https://codkdops.com/assets/guide/hero-banner-module#main-content)

[![codkdops](https://codkdops.com/hs-fs/hubfs/codkdops-one-color.png?width=200&height=51&name=codkdops-one-color.png "codkdops")](https://codkdops.com/?hsLang=en)

Search

# Hero Banner Awesome

# User Guide

# Contents

In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non.

![Headline](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/Headline.jpg?width=400&height=597&name=Headline.jpg "Headline")

![description](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/description.jpg?width=400&height=598&name=description.jpg "description")

![button](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/button.jpg?width=400&height=598&name=button.jpg "button")

![side-content](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/side-content.jpg?width=400&height=598&name=side-content.jpg "side-content")

## Content Flexibility

![flexi](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/flexi.png?width=950&height=293&name=flexi.png "flexi")

# Style

In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non.

## Background Control

![background_type](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/background_type.jpg?width=400&height=709&name=background_type.jpg "background_type")

![background_image](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/background_image.jpg?width=400&height=709&name=background_image.jpg "background_image")

## Overlay Control

![overlay_gradient](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/overlay_gradient.jpg?width=382&height=644&name=overlay_gradient.jpg "overlay_gradient")

![flat_overlay](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/flat_overlay.jpg?width=382&height=644&name=flat_overlay.jpg "flat_overlay")

## Spacing for Devices

![padding_desktop](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/padding_desktop.jpg?width=270&height=304&name=padding_desktop.jpg "padding_desktop")

![padding_tablet](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/padding_tablet.jpg?width=270&height=309&name=padding_tablet.jpg "padding_tablet")

![padding_mobile](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/padding_mobile.jpg?width=270&height=311&name=padding_mobile.jpg "padding_mobile")

## Button Control

![button](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/button.png?width=250&height=205&name=button.png "button")

![btn_color](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/btn_color.png?width=250&height=178&name=btn_color.png "btn_color")

![btn_background](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/btn_background.png?width=250&height=181&name=btn_background.png "btn_background")

![btn_border](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/btn_border.png?width=349&height=511&name=btn_border.png "btn_border")

![btn_spacing](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/btn_spacing.png?width=352&height=442&name=btn_spacing.png "btn_spacing")

## Other Control

![maximum-width](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/maximum-width.png?width=355&height=226&name=maximum-width.png "maximum-width")

![alignment](https://codkdops.com/hs-fs/hubfs/marketplace-modules/hero-banner-module/hero-banner-module-documentation/alignment.png?width=349&height=163&name=alignment.png "alignment")

Get Started with This Module Now

## Build a beautiful page faster than ever.

Get It Now

[Follow us on Facebook](https://www.facebook.com) [Follow us on LinkedIn](https://www.linkedin.com) [Follow us on Twitter](https://www.twitter.com) [Follow us on Instagram](https://www.instagram.com)

© 2026 All rights reserved.