Unlock Flexible Content Layouts in HubSpot CMS with Custom Modules

HubSpot's CMS is powerful, but sometimes you need more flexibility than the standard modules offer. Ever find yourself wishing you could create more dynamic and customizable content layouts? You're not alone! A recent HubSpot Community thread highlighted this very need, with a user looking for a way to build a custom module that allows for more adaptable content structures on their website pages.

The Challenge: Building a Flexible Columns Module

The original poster described the need for a reusable custom module enabling content editors to:

• Choose the number of columns (1-4)
• Add repeatable content blocks
• Insert rich text and/or images inside each column
• Optionally include buttons
• Control basic styling (text alignment, background color, spacing)

The goal? To move beyond hard-coded modules with limited flexibility and create something truly adaptable.

The Solution: Leveraging Repeater Functions

One respondent offered a detailed solution using HubSpot's repeater function. Here's a breakdown of the steps involved:

1. Create a new custom module. This is your starting point for building your flexible module.
2. Add an image field and rich text field to the module. These will be the basic content elements within your columns.
3. Group the image and rich text fields. Grouping allows you to apply repeater options to the collection of fields.
4. Enable the repeater option for the group. This is the key step that allows editors to add multiple instances of the image and text combination.
5. Add a boolean field (e.g., "Add Button") to the group. This will control the visibility of the button options.
6. Add a Link field and a text field to the group. This defines the button's URL and label.
7. Create another group containing the Link and text fields (button).
8. Set the visibility of the button group to "if add button is true." This ensures the button options only appear when the "Add Button" checkbox is selected.
9. Copy the snippet from the column's "Actions" menu.
10. Paste the snippet into the module.html area.

At this point, you've created the basic structure for a repeatable content block with image, text, and optional button. However, styling is crucial to make it visually appealing and consistent with your brand.

Styling Your Flexible Module

The respondent suggested two approaches to styling:

• CSS Classes: Create CSS classes for various styling options (text alignment, background color, spacing) and trigger them using choice fields in the style group. This allows for global control and consistency.
• Scope CSS: Use {% require_css %} and {% scope_css %} to add CSS directly within the module. This approach is more modular but can be harder to manage globally.

Here's an example of using require_css with a scope_css block:

{% require_css %}

{% require_css %}

ESHOPMAN Team Comment

We at ESHOPMAN appreciate the practical approach outlined in the community discussion. Using repeater functions within HubSpot modules is an excellent way to achieve flexible content layouts without extensive coding. The suggestion to use CSS classes for styling is spot-on; it promotes consistency and maintainability across your HubSpot site. For e-commerce businesses using HubSpot, this level of customization can be crucial for creating engaging product pages and landing pages that convert.

By using custom modules, you avoid limitations and restrictions found in other platforms. If you are looking for a free [platform] alternative, consider using HubSpot CMS with custom modules. Even though wix ecommerce website cost may seem low, the limitations may cost you more in the long run.

Building flexible content modules in HubSpot CMS empowers you to create dynamic and engaging web experiences. By leveraging repeater functions and thoughtful styling techniques, you can break free from the limitations of standard modules and build truly custom layouts that meet your specific needs.