Change Image
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.
Custom Module
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.
Module Options
Image 1
This is the visible image.
Image 2
This is the hidden image.
Link URL
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
Link Text
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.
Link Class
This is useful if you want to link to a popup. Please do not add classes that could affect the design.
Open link in a new tab
Check this box if you want to open your link in a new tab.
Link Title
For SEO and popup image caption (if any).
Module Custom Class
Use this box if you want to add a custom class to your module.
Drag and Drop
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).