This is the Act2 Image Box custom module:
For the advanced drag-and-drop component, please scroll down.
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 Image Box area in the page preview, or find it in the modules sidebar on the left:
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.
Your image will set the width and height of the box, so please make sure you include one that provides enough room for the caption.
This image takes the full width of its container (it’s as wide as the module) and is fully responsive. That means when the column becomes narrow on smaller screens the image will become smaller as well (without losing its aspect ratio or being cropped), providing less space for the caption. So this is another aspect you should consider when choosing your image and the text inside.
The text and icon will automatically decrease in size on smaller screens, but it depends on your image and text length if it fits the area. That’s why it’s always a good idea to test your page on multiple screen sizes. HubSpot provides a preview feature where you can test your page on various screen sizes directly in the page editor. More about that here.
The width and height of the image is set automatically so the Quick sizes and Custom sizes in the page editor are ignored for this module.
If you want to use multiple Image Box modules with the same size you should choose images with the exact same dimensions (width and height).
Please head over to the Font Awesome article to learn how to add an icon code. Leave empty for no icon.
Please keep it short. Leave empty if you don't want to show this line.
Please keep it short. Leave empty if you don't want to show this line. Line 2 has a slight transparency.
Add a link to your entire Image Box. Leave empty for no link.
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).
Specifies the color of the image overlay.
Specifies the opacity for the image overlay.
Specifies the color of the text, if it should be white or the default typography color. Line 2 has a slight transparency.
The caption will always be centered on this module both vertically and horizontally. This only specifies the text and icon alignment inside the content block.
Specifies the type of the icon.
Specifies the color of the icon.
If checked, this will disable any overlay change on hover. So, if you also check the Reverse box, it will show the caption permanently.
Reverses the way the caption is shown: hidden initally, or shown initally.
Whatever the two options above, if you check this, it will always show the caption on small screens.
This is optional, only applicable with listing sections, when using filtering. You can specify multiple categories separated by commas. Example: apple, orange, pear. Please try using one word with alpha-numeric characters only. You can separate multiple words with "_". Example: inbound_marketing. This is case sensitive, so use the same as in your Listing Menu. Example: you have #iPhone in your Listing Menu, it should be iPhone here, not iphone.
Use this box if you want to add a custom class to your module.
For advanced users this component can also be created with the drag-and-drop tools, specific Image Box classes and utility classes, although we recommend using the custom module for this component.
|image-box-overlay overlay-theme overlay-90||Must be empty|
|image-box-content white-content tc|
|image-box-icon icon-disc white mb5||
|image-box-line-1 mb5||Your header|