Theme Image
An image module with extra styling options not available in HubSpot's default module.
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 is designed to give you enhanced visual control over images throughout your Impact theme pages. Unlike HubSpot’s standard image module, this component provides specialized styling options that align with the theme’s bold, full-width design aesthetic.
You’ll find this module particularly valuable when creating hero sections on your nonprofit’s program pages or educational landing pages where you need images to seamlessly blend with adjacent content sections. The overlap functionality works especially well when you’re building layered designs—for instance, placing an image that extends into a colored background section above or below it.
Best practices for implementation:
When adding the Theme Image module through the page editor’s drag-and-drop interface, consider your page’s overall visual hierarchy. The load-in animation feature enhances user engagement, making it ideal for key images like program highlights, student success stories, or impact photography that you want to emphasize as visitors scroll.
For optimal results, use this module on landing pages, program detail pages, and about pages where visual storytelling is crucial. The overlap styling creates sophisticated layouts that would typically require custom CSS, but here it’s available through simple module settings.
Remember that the overlap effect only displays when sections have contrasting backgrounds—plan your section color schemes accordingly. This module pairs exceptionally well with the Impact theme’s full-width sections and bold typography, creating cohesive designs that maintain the theme’s nonprofit-focused aesthetic while giving your content the professional presentation your organization deserves.
Test the animation timing in preview mode to ensure it complements your page’s loading sequence and doesn’t overwhelm other animated elements.