Home / Module Guide
HubSpot Marketplace v1.0 CMS Module

Content Width
Tiled Media
Module

A complete setup and customization guide for the Content Width Tiled Media HubSpot module. Learn how to install it, populate your content, upload images, and fine-tune the styling — all without touching code.

Platform HubSpot CMS
Level Beginner — No code required
Read Time ~5 minutes

Introduction

The Content with Tiled Media module offers a visually appealing way to present content on your HubSpot website. It combines written content — a heading, subheading, body text, and call-to-action buttons — with a tiled grid of images, giving your pages a dynamic, professional look without any custom code.

This guide walks you through each step of adding, editing, and styling the module so you can get it working exactly the way you need.

01

Adding the Module

  1. 1

    Log in to your HubSpot account and open the page editor for the page where you want to add the module.

  2. 2

    Click the Add Module button (or the equivalent option in your editor) to open the module library.

  3. 3

    Search for “Content with Tiled Media” and click it to insert it into your page.

02

Editing Content

Heading & Subheading

  • Click on the existing heading or subheading text to activate the text editor.
  • Type your updated text and click outside the field to confirm.

Text

  • Click the body text area to open the rich-text editor.
  • Edit your content and apply formatting — bold, italics, bullet lists, and more — to improve readability.

Call-to-Action (CTA) Buttons

  • Locate the CTA button area on the module.
  • Click Add button to insert a new button and open its settings.
  • Set the button label, link destination, and appearance — background color and text color are controlled from the Style tab.
03

Uploading Images

  1. 1

    Locate the media section in the left panel, just below the content fields.

  2. 2

    Click Upload Image to open the file uploader.

  3. 3

    Upload a new image from your computer, or select an existing one from your media library.

04

Styling Options

Colors

  • Open the Style tab in the module settings panel.
  • Use the color pickers to customize heading color, body text, button colors, and section background.
  • If you’re using a HubSpot theme, your brand colors will appear in the picker by default.

Spacing

  • In the Style tab, find the spacing controls.
  • Adjust the top and bottom padding to control the vertical space around the module.

Container Width

  • Still in the Style tab, find the container width slider.
  • Drag the slider to adjust how wide the module appears on the page. Changes are reflected in real-time in the editor preview.
05

Preview & Save

  1. 1

    Use the Preview option to see how the module looks with all your edits before going live.

  2. 2

    Once you’re satisfied with the result, click Save or Update to apply your changes to the live page.

Conclusion

You’ve successfully set up and customized the Content with Tiled Media module. With your headings, text, buttons, images, and styles all in place, the module is ready to engage your website visitors in a visually compelling way.

As your content evolves, remember to revisit the module to keep it current and on-brand. Regular updates help maintain a fresh, professional impression for every visitor.

Need a custom module?

I build custom HubSpot CMS modules, themes, and CRM integrations. If you need something beyond the marketplace, let's talk.

Start a Conversation