Documentation for Agile Banner Module
Welcome to the documentation for the Agile Banner module, your go-to solution for creating visually striking hero sections on your HubSpot CMS pages. This module offers unparalleled flexibility and customization options, enabling you to design stunning hero sections that capture your brand's essence and engage your audience.
With a user-friendly drag-and-drop interface, Agile Banner Variations allows you to effortlessly integrate pre-made layouts, add compelling content, and adjust styles—all without needing any coding skills. This guide will walk you through the setup process, content addition, and customization options, ensuring you can make the most of your hero sections.
Let’s get started on transforming your website with Banner Variations!
Getting Started
To begin using the Banner Variations module, navigate to the editing interface within HubSpot. Use the Finder or search bar by inputting "Agile Banner" to locate the Agile Banner module. Once found, integrate it into your page for easy customization.
-
Finder → Hero Banner
-
Choose a Variation
-
Choose a Size
Adding Content
Customizing the Banner Variations module is a straightforward process:
-
Adding a Background Image: Start by adding a background image that captures the essence of your brand or message. Upload the image directly into the module for enhanced visual appeal.
-
Editing Headline and Subheadline: Click on the text fields to customize the headline and subheadline. Ensure they reflect your brand voice and effectively communicate your message.
-
Adding Call-to-Action Buttons: Include buttons that guide visitors to take action. You can set these buttons to link externally or navigate internally within your site.
-
Customizing Text and Colors: Tailor the text styles, colors, and button appearances to align with your branding.
Module Customization
Within the Styles tab of the Hero Variations module, you’ll find an array of customization options:
-
Adjusting Spacing: Fine-tune the spacing between elements to achieve a harmonious layout that is visually appealing.
-
Content Alignment: Align your content for consistency and balance, ensuring that the most important elements stand out.
-
Customizing Backgrounds: Change the background color or image to complement your site’s design and enhance the overall aesthetic.
-
Fonts and Colors: Modify fonts, colors, and other visual elements to ensure that the Hero Variations module integrates seamlessly with your website’s overall look while effectively conveying your message.
Module Variations
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.