Hero Slider

This is the Act2 Hero Slider custom module:

Act2 Template Builder Hero Slider Custom Module

Act2 Hero Slider Sample

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

Act2 Template Builder Home II Hero Slider

Then you can edit its content at the page level (when you create your actual page). Click the Hero Slider area in the page preview, or find it in the modules sidebar on the left:

Act2 Page Editor Hero Slider Edit

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

To make it easier for you to add images to the Hero Slider, we hard-coded a HubSpot Image Gallery module into this custom module, and because of that, there are two sets of settings available:

1. Image Gallery Settings

The Image Gallery module's options, named Act2 Hero Slider Add Images that can be accessed by clicking the Hero Slider area in the page preview or from the modules sidebar on the left:

Act2 Page Editor Hero Slider Modules

This is where you add your slider images:

Act2 Page Editor Hero Slider Add Images

You can also add text or Call to Action buttons:

Act2 Page Editor Hero Slider Add Images Edit

Act2 Page Editor Hero Slider Add Images Edit Captions

Please make sure the Standard slider option is selected:

Act2 Page Editor Hero Slider Add Images Standard Slider

Also, we recommend these Settings:

Act2 Page Editor Hero Slider Add Images Recommended Settings

2. Custom Module Options

The other set of options is accessible in the modules sidebar on the left. You need to look for the Act2 Hero Slider module, then click it. Please be careful if there are multipe Act2 Hero Slider modules in your template, because they are named the same.

Act2 Page Editor Hero Slider Options

Act2 Page Editor Hero Slider Module Options

Overlay Color

Sometimes you would want to add a transparent overlay to your Hero Slider, especially if there are slides that make your text barely visible. This specifies the color of that overlay.

Choose None to remove the overlay.

Act2 Hero Slider Overlay Color

Act2 Hero Slider With and Without Overlay Sample

Overlay Opacity

This will set the opacity of the overlay described above. 0% means the overlay is fully transparent (invisible), 100% means the overlay is fully opaque.

Act2 Page Editor Hero Slider Overlay Opacity

White Content

Check this box if you want the content inside your Hero Slider to be white.

Act2 Page Editor Hero Slider White Content

Minimum Height

This specifies how tall your Hero Slider should be.

Act2 Page Editor Hero Slider Minimum Height

If you choose Natural, no minimum height is specified, so the height of your Hero Slider is determined by its slides.

Act2 Hero Slider Minimum Height Natural

Full Viewport will make your Hero Slider at least as tall as the viewport (browser window). It will exceed that height if your content is taller. This option is useful on pages with Header Overlap, when the Hero Slider is the first content section.

Act2 Hero Slider Minimum Height Full VH

Full Viewport Minus Header will make your Hero Slider at least as tall as the viewport (browser window), minus the header height. It will exceed this minimum height if your content is taller. This option is useful on pages with normal header (not Header Overlap), when the Hero Slider is the first content section.

Act2 Hero Slider Minimum Height Full VH Minus Header

Scroll Next

Adds an arrow at the bottom of your Hero Slider that, when clicked, will scroll your page to the next Content Section. If it doesn't exist, the arrow will not appear.

Act2 Page Editor Hero Slider Scroll Next

Option Sample
scroll-next-theme-dot Act2 Scroll Next Theme Dot Sample
scroll-next-theme-circle Act2 Scroll Next Theme Circle Sample
scroll-next-theme-disc Act2 Scroll Next Theme Disc Sample
scroll-next-dark-dot Act2 Scroll Next Dark Dot Sample
scroll-next-dark-circle Act2 Scroll Next Dark Circle Sample
scroll-next-dark-disc Act2 Scroll Next Dark Disc Sample
scroll-next-white-dot Act2 Scroll Next White Dot Sample
scroll-next-white-circle Act2 Scroll Next White Circle Sample
scroll-next-white-disc Act2 Scroll Next White Disc Sample

Custom Class

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

Act2 Page Editor Hero Slider Custom Class

For more sliders visit this page.