Image Box

This is the Act2 Image Box custom module:

Act2 Template Builder 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:

Act2 Template Builder Drag Image Box Module Into The 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:

Act2 Page Editor Image Box

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

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.

Act2 Page Editor Image Box Image

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.

Note:

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

Icon

Please head over to the Font Awesome article to learn how to add an icon code. Leave empty for no icon.

Act2 Page Editor Image Box Icon

Line 1

Please keep it short. Leave empty if you don't want to show this line.

Act2 Page Editor Image Box Line 1

Line 2

Please keep it short. Leave empty if you don't want to show this line. Line 2 has a slight transparency.

Act2 Page Editor Image Box Line 2

Link URL

Add a link to your entire Image Box. Leave empty for no link.

Act2 Page Editor Image Box 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 Image Box 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 Image Box Link Class

Open link in new tab

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

Act2 Page Editor Image Box Open link new tab

Link Title

For SEO and popup image caption (if any).

Act2 Page Editor Image Box Link Title

Overlay Color

Specifies the color of the image overlay.

Act2 Page Editor Image Box Overlay Color

Overlay Opacity

Specifies the opacity for the image overlay.

Act2 Page Editor Image Box Overlay Opacity

Content Color

Specifies the color of the text, if it should be white or the default typography color. Line 2 has a slight transparency.

Act2 Page Editor Image Box Content Color

Content Alignment

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.

Act2 Page Editor Image Box Content Alignment

Icon Type

Specifies the type of the icon.

Act2 Page Editor Image Box Icon Type

Icon Color

Specifies the color of the icon.

Act2 Page Editor Image Box Icon Color

No hover

If checked, this will disable any overlay change on hover. So, if you also check the Reverse box, it will show the caption permanently.

Act2 Page Editor Image Box No Hover

Reverse

Reverses the way the caption is shown: hidden initally, or shown initally.

Act2 Page Editor Image Box Reverse

Always show caption on small screens

Whatever the two options above, if you check this, it will always show the caption on small screens.

Act2 Page Editor Image Box Always show caption on small screens

Category

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.

Act2 Page Editor Image Box Category

Custom Class

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

Act2 Page Editor Image Box Custom Class

Advanced Drag-and-Drop

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.

Act2 Template Builder Image Box Drag and Drop

CSS Class Content
image-box
image-box-image Your image
image-box-caption
image-box-overlay overlay-theme overlay-90 Must be empty
image-box-content white-content tc
image-box-icon icon-disc white mb5
<i class="fa fa-cloud" aria-hidden="true"></i>
image-box-line-1 mb5 Your header
image-box-line-2 Your subheader
image-box-link