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.

Act2 Template Builder Change Image Custom Module

You can simply drag and drop this module into your template:

Act2 Template Builder Change Image 3 Modules in the 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:

Act2 Page Editor Change Image Edit Custom Module

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.

Act2 Page Editor Change Image Image 1

Image 2

This is the hidden image.

Act2 Page Editor Change Image Image 2

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

Act2 Page Editor Change Image Link URL

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.

Act2 Page Editor Change Image Link Text

Link Class

This is useful if you want to link to a popup. Please do not add classes that could affect the design.

Act2 Page Editor Change Image Link Class

Open link in a new tab

Check this box if you want to open your link in a new tab.

Act2 Page Editor Change Image Open Link in a New Tab

Link Title

For SEO and popup image caption (if any).

Act2 Page Editor Change Image Link Title

Module Custom Class

Use this box if you want to add a custom class to your module.

Act2 Page Editor Change Image Module Custom Class

Drag and Drop

Add two Image modules and a Rich Text (optional) in a group:

Act2 Template Builder Change Image

Add this class change-image to your group:

Act2 Template Builder Change Image Edit CSS

Act2 Template Builder Change Image CSS Class

Add this class change-image-img-1 to your first Image module:

Act2 Template Builder Change Image Image 1 Edit CSS

Act2 Template Builder Change Image Image 1 CSS Class

And this class change-image-img-2 to the second Image module:

Act2 Template Builder Change Image Image 2 Edit CSS

Act2 Template Builder Change Image Image 2 CSS Class

Add this class change-image-link to your Rich Text module:

Act2 Template Builder Change Image Edit CSS

Act2 Template Builder Change Image CSS Class

You can now add your Images:

Act2 Template Builder Change Image Image 1 Edit Options

Act2 Template Builder Change Image Image 1 Replace Image

Edit your Rich Text module to add a Link if you want any:

Act2 Template Builder Change Image Link Edit Options

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).