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

---

How to Use This Module

The Theme Image module provides enhanced functionality beyond HubSpot’s standard image module, making it ideal for creating visually striking hero sections, feature highlights, and decorative elements throughout your Framework theme pages. This module works particularly well on landing pages, product pages, and homepage sections where you need more creative control over image presentation.

When dragging this module into your page editor, you’ll find it especially useful for breaking up content sections with eye-catching visuals. The overlap functionality allows you to create dynamic layouts where images extend beyond their container boundaries, creating depth and visual interest that standard modules cannot achieve. This works best when you have sections with contrasting background colors or textures.

Best practices for implementation:

• Use the overlap feature sparingly for maximum impact — typically one overlapping image per page works most effectively
• The load-in animation option enhances user engagement on key pages like your homepage or primary landing pages
• Position overlapping images at natural content breaks, such as between your hero section and features, or between testimonials and call-to-action areas
• Consider your section background settings in the theme customizer when planning overlap effects

The module integrates seamlessly with Framework’s responsive design system, ensuring your enhanced images display correctly across all devices. Unlike HubSpot’s default image module, you can achieve professional design effects without custom CSS or developer intervention. Content editors will find this particularly valuable when creating marketing campaigns or refreshing page layouts, as the visual enhancements can be applied instantly through the drag-and-drop interface.

For optimal performance, use high-quality images that complement your brand’s visual identity while taking advantage of HubSpot’s automatic image optimization features.