Theme Image
An image module with extra styling options not available in HubSpot's default module.
View a live demo of this module.
Styles
- Have module overlap the section above or below it
- Add a load in animation (fade in, up, right, down, or left)
Overview
The Theme Image module enhances your visual storytelling capabilities beyond HubSpot’s standard image module by providing advanced styling controls that help your images stand out on the page. This module is particularly valuable for product showcase pages, landing pages, and content sections where you need images to make a stronger visual impact.
When to Use This Module
You’ll find the Theme Image module most effective on pages where visual hierarchy and engagement are crucial. Product pages benefit from the overlap functionality to create layered, professional layouts that draw attention to key product shots. Landing pages can leverage the load animations to create dynamic first impressions that capture visitor attention as they scroll through your content.
The module works exceptionally well in the Traverse theme’s flexible layout system, allowing you to break free from traditional grid constraints when needed.
Implementation Tips
When using the overlap feature, consider your section backgrounds and spacing carefully. Dark images work best when overlapping light sections, while light images shine against darker backgrounds. The overlap effect creates depth but requires thoughtful color contrast planning.
For the load animations, fade in works universally across all page types, while directional animations (up, down, left, right) are most effective when they complement your page’s natural reading flow. On mobile devices, subtle animations like fade in typically provide better user experience than dramatic directional movements.
Position this module strategically within your page sections—it’s designed to work seamlessly with other Traverse modules while providing the visual emphasis that standard image modules cannot achieve.