This is the Act2 Hero Banner custom module:
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 Hero Banner 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.
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.
You can add your text and the Call to Action buttons in a Rich Text editable area.
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.
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.
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.
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.
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.
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.
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.
Check this box if you want the content inside your Hero Banner to be white.
This specifies how tall your Hero Banner should be.
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.
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.
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.
Specifies the width of your content inside the Hero Banner.
Specify the path to your video URL file. Please read this article to learn more about this option and how to add a video background to your Hero Banner. Leave blank for no video.
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.
Use this box if you want to add a custom class to your Hero Banner module.