Add and Customize a Hero Image

Add and Customize a Hero Image

A hero image is the prominent image that greets visitors at the top of a webpage, serving as a powerful welcome screen. This guide will walk you through adding a hero image and making it appear behind your site's header and navigation.

 

Add a Hero Image to a Page

First, you'll need to create an image gallery to house your hero image and adjust its settings.

  1. Navigate to the Pages tab at the top of your Websites app and open the page where you want to add the image.

  2. Add an Image Gallery block and upload your desired image(s).

  3. Click Design this page at the top of the page. This will open the design panel.

  4. In the right-hand sidebar, click the Page tab and select Image gallery.

  5. Next to Height, open the menu and choose from the following options:

    • Adjust manually: Allows you to set a custom height for the image.

    • Fit to window: Makes the hero image fill the entire upper half of the webpage.

  6. Scroll down to the Container section and check the box for Expand content to container edges. This will stretch your image to the full width of the page.

  7. Click Save at the bottom of the sidebar.


Make the Hero Image Appear Behind the Header and Navigation

To create a seamless look where the hero image is visible behind your site's header and navigation, you need to adjust their transparency settings.


  1. Open the Design tab at the top of your Websites app.

  2. In the right-hand sidebar, click the Sitewide tab and choose Header & Logo.

  3. Scroll down to the Container section and click to expand it.

  4. Next to Color, click the color box.

  5. In the menu that appears, slide the Opacity scroll all the way down to 0.


Adjusting the Navigation

  1. In the right-hand sidebar, click the Sitewide tab again and choose Navigation.

  2. Scroll down to the Container section and click to expand it.

  3. Next to Color, click the color box.

  4. Slide the Opacity scroll all the way down to 0.


Adjusting the Page's Top Padding

  1. In the right-hand sidebar, click the Page tab at the top.

  2. Click the gear icon to open Page Settings.

    • Tip: If you don't see this option, try clicking the Page tab a second time.

  3. Under Page Settings, slide the Top Padding scrollbar all the way to the left.

  4. Click Save at the bottom of the sidebar to apply all your changes.

    • Related Articles

    • Add a Drop Shadow to Your Images

      Adding a drop shadow to your images gives your image depth and perspective. It makes it look like the image is popping right out of the screen! Images without a drop shadow effect: Images with a shadow drop effect: Turn on drop shadows Edit the drop ...

    • Add a Link to an Image

      You can insert a hyperlink into an image on your website. When a user clicks on your image, they will be redirected to the page of your choice. To add an image hyperlink: Navigate to the Pages tab at the top of your Websites app, and open the page ...

    • Image Tool Tabs

      The Image Collection allows you to edit image information with great detail. Each image has a Details, SEO, and Tags tab that allows you to modify the information for surface-level information, as well as SEO-level information. To access the image ...

    • Add an Image or Image Gallery to a Page

      You can add images to your website using either an Image block, for a single picture, or an Image Gallery block, for multiple photos. Add an Image Block Select the Pages tab and open the page where you want to add the image. Click the (+) button at ...

    • Image Collection

      Manage Your Image Collection The Image Collection is your central hub for managing all the images on your website. Every image you upload to a page is also saved here, giving you a dedicated library to organize, bulk-upload, or bulk-delete images ...