A component with two images, one visible by default and the other one hidden, that will appear only on hover. Both images should be the same size (width and height).
This is available as a custom module or entirely drag and drop.
The custom module is named Act2 Change Image.
You can simply drag and drop this module into your template:
Then you can edit its content at the page level (when you create your actual page). Click the Change Image area in the page preview, or find it in the modules sidebar on the left:
Important Notes:
Please keep in mind that the content of individual custom modules is only editable in the page editor and NOT from the template. So you would need to create and edit your actual page in order to add your own content to these modules.
This is the visible image.
This is the hidden image.
Use this box to add a link to a page, a larger image, element, etc.
Examples: /about-us -or- https://my.cdn.com/images/large-img.jpg -or- #tab2
The text of your link is not visible by default, unless you use this module as a tab link in a responsive and styled Tabs component.
This is useful if you want to link to a popup. Please do not add classes that could affect the design.
Check this box if you want to open your link in a new tab.
For SEO and popup image caption (if any).
Use this box if you want to add a custom class to your module.
Add two Image modules and a Rich Text (optional) in a group:
Add this class change-image
to your group:
Add this class change-image-img-1
to your first Image module:
And this class change-image-img-2
to the second Image module:
Add this class change-image-link
to your Rich Text module:
You can now add your Images:
Edit your Rich Text module to add a Link if you want any:
Important notes:
The drag and drop method is useful if you want to design your page as much as possible at the template level. That makes sense on a complex page that has its own unique template, that's not used by other pages.
Moreover, in HubSpot you can lock modules (except custom modules) at the template level. This way you can avoid making edits in two places (template and page) and only manage that content at the template level.
Due to the design, Image 2 and the Link are not visible in the page editor, that is why you cannot easily click-to-edit them, so we recommend adding recognizable names for these modules to find them easily in the modules sidebar if you later need to change something at the page level (if they are unlocked).