Theme Image

View a live demo of this module.

Styles

• Set module to overlap section above or below it (only visible if section module is in and section it’s overlapping have differing backgrounds)
• Add load-in animation

---

---

Usage Guide

The Theme Image module serves as an enhanced alternative to HubSpot’s standard image module, giving you greater creative control over visual elements in your Vertical theme pages. This module is particularly valuable when you need to create sophisticated visual layouts that extend beyond basic image placement.

When to use this module: Choose the Theme Image module for hero sections, feature callouts, or anywhere you want images to break out of traditional grid constraints. The overlap functionality makes it ideal for landing pages and service pages where you want to create depth and visual interest between sections.

To add this module to your page, navigate to the HubSpot page editor and drag the Theme Image module from the module library into your desired section. Once placed, you can upload your image through the module settings panel and configure the styling options.

The overlap feature is especially powerful when combined with sections that have contrasting background colors or patterns. For example, you might overlap a product screenshot from a white section onto a dark-colored section below, creating a modern, layered effect that’s popular in SaaS websites.

Load-in animations help draw visitor attention to key visuals as they scroll through your page. This feature works well for product images, team photos, or infographics that support your content narrative.

Best practices: Use high-resolution images optimized for web to ensure crisp display across devices. The module respects your theme’s responsive breakpoints, so test your overlap settings on mobile devices to ensure the visual hierarchy remains effective. Consider the reading flow of your page when positioning overlapping images to avoid interfering with important text content.