Hero Banner

This is the Act21 Hero Banner custom module:

Act2 Template Builder Hero Banner Custom Module

Act2 Hero Banner Sample

Options

Background Image

There are no specific image dimensions, but just as an example, we used this for the default sample image with the default settings: 1920x1216px. For repeatable textures you would probably need to use smaller dimensions.

Act2 Page Editor Hero Banner Background Image

Content

You can add your text and the Call to Action buttons in a Rich Text editable area.

Act2 Page Editor Hero Banner Content

Background Position

This sets the starting position of your background image. If Parallax or Video Background is enabled this setting will be ignored and the value will automatically be set to Center.

Act2 Page Editor Hero Banner Background Position

Background Repeat

This specifies if your background image should be repeated and how. If Parallax or Video Background is enabled this setting will be ignored and the value will automatically be set to Do not repeat.

Act2 Page Editor Hero Banner Background Repeat

You can use this to apply a repeatable texture background to your hero banner. For that to work, you would also need to select these options: Background Size -> Natural and Background Scroll -> Static.

Background Size

This specifies the size of the background image.

If Parallax or Video Background is enabled this setting will be ignored and the value will automatically be set to Cover.

Act2 Page Editor Hero Banner Background Size

  • Cover (default), recommended and pretty much the standard. It may stretch and crop, but does not distort the image. Covers the entire section.
  • Natural, does not stretch or distort the image, but may not cover the entire section. May cut off the edges of the image if it's too large. Useful for images that you want to repeat (eg. textures).
  • Full, may stretch and distort, but does not crop the image. Covers the entire section.
  • Full Width, may stretch, but does not distort the image. Covers the entire width of the section, but may not cover the height. May cut off the top or bottom.
  • Full Height, may stretch, but does not distort the image. Covers the entire height of the section, but may not cover the width. May cut off the sides.

Background Scroll

This specify if your background image should scroll with the page, remains fixed, or has a parallax scrolling effect. It doesn't apply to video backgrounds.

Act2 Page Editor Hero Banner Background Scroll

Overlay Color

Sometimes you would want to add a transparent overlay to your Hero Banner, especially if you applied a background image or video background and your text is not very visible. This specifies the color of that overlay.

Choose None to remove the overlay.

Act2 Page Editor Hero Banner Overlay Color

Act2 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 Banner Overlay Opacity

White Content

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

Act2 Page Editor Hero Banner White Content

Minimum Height

This specifies how tall your Hero Banner should be.

Act2 Page Editor Hero Banner Minimum Height

If you choose Natural, no minimum height is specified, so the height of your Hero Banner is determined by the content inside, plus its default top and bottom padding.

Act2 Hero Banner Minimum Height Natural

Full Viewport will make your Hero Banner 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 Banner is the first content section.

Act2 Hero Banner Minimum Height Full VH

Full Viewport Minus Header will make your Hero Banner 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 Banner is the first content section.

Act2 Hero Banner Minimum Height Full VH Minus Header

Content Width

Specifies the width of your content inside the Hero Banner.

Act2 Page Editor Hero Banner Content Width

Act2 Hero Banner Content Width Sample

Video Background

Add an MP4 file to set a video background on your Hero Banner. We recommend uploading a file smaller than 5 MB.

Act2 Page Editor Hero Banner Video URL

You will also need an image with the first frame of your video to show until your video starts playing and on older browsers that don't allow or support playing videos in the background.

You need to add this image on the Background Image module we previously described.

Scroll Next

Adds an arrow at the bottom of your Hero Banner 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 Banner 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 Banner module.

Act2 Page Editor Hero Banner Custom Class

Using Act2 with the old Design Manager? Read this documentation.