Expand Images to Fill Window (Set a Hero Image)

Note: This option is only available for Emerging, Professional, and Custom plans. This feature is not available on Legacy Hosting or Legacy Professional plans.

A Hero Image is an image on your website that is the background for the navigation bar, as well as the top portion of your home page.

Add a Hero Image

1. Select the Content tab in the gray navigation bar, and click on the Page you would like to add a Hero Image to.

2. Add an Image Gallery block at the very top of the page and add the image you want to appear in the block.

3. Select the Design this page link above Setting on the right-hand side.

4. Click on the Page tab on the right-hand menu panel, and click on Image Gallery. 

5. Adjust the Height, and select Adjust manually. However, if you want your Hero Image to take up the full upper half of your webpage, select Fit to window.

6. Scroll down the right-hand menu until you see Container and tick the box next to Expand content to container edges. This takes the image to each side of the webpage (if you have a Wrapper set on your template, it will take the image to the end of the wrapper).

Make your Hero Image appear behind your Header, Logo, and Navigation

1. Click on the Sitewide tab on the right-hand menu bar and choose Navigation. 

2. Scroll down until you see Container, select the Color selector, and use the Opacity scroll to change the opacity. You want to change the opacity all the way down to 0.

3. Repeat Step 9 and change the Opacity for your Header & Logo down to 0.

4. Click back into the Page tab on the right-hand menu, and then select the Page Settings icon.

5. Under Page Settings, use the Top Padding scrollbar and slide it all the way to the left.

6. Click Save and Publish to take your changes live!