Expand Images to Fill Window (Set a Hero Image)

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.

Screen_Shot_2018-10-03_at_9.22.16_AM.png

 

Add a hero image to your front page

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

Screen_Shot_2020-03-11_at_2.05.41_PM.png

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

Hero_Image.gif

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. 

Screen_Shot_2018-09-28_at_12.32.20_PM.png

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.

Screen_Shot_2018-09-28_at_12.35.04_PM.png

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

Screen_Shot_2018-09-28_at_12.37.18_PM.png

 

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

Screen_Shot_2018-10-03_at_9.21.30_AM.png

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

Screen_Shot_2018-09-28_at_12.42.46_PM.png

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.

ezgif.com-video-to-gif.gif

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

Screen_Shot_2018-09-28_at_12.47.31_PM.png

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

Screen_Shot_2018-09-28_at_12.48.49_PM.png

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

    • Related Articles

    • Customize the Height of Your Image Gallery

      All of our slideshow Image Gallery layout types have customizable height attributes that can be set to manually adjust, fit to window, or auto adjust. These design features are great for photographers who are looking for a full bleed aesthetic or ...

    • Gallery Settings - Fit to window (Video Tutorial)

      How to properly set up your galleries as 'fit to window' or full frame.

    • Fully Stretch Background Image/Images for Content Blocks

      You can add a fully stretched background to your content blocks by following these steps: 1. Select the Design tool in the gray navigation bar. Under the Sitewide tab in the design options on the right-hand side of the preview, select Styles. 2. ...

    • Choose the Number of Visible Images on Image Gallery (Classic Slideshow)

      One unique image gallery feature is our "Visible Items" option, you can use it to display 1, 2, or 3 images per gallery slide. 1. Select Design from the navbar and navigate to the page that contains your Image Gallery 2. Select the Page tab at the ...

    • Enable Mobile Navigation on Desktop

      You can use your website's mobile navigation even when it's viewed on a desktop. This can create a consistent experience for your visitors, especially if you prefer the mobile menu's compact design. Steps to Use Mobile Navigation on Desktop View ...