The most important image on your website is the header image. This is the image that displays at the top of your website. It’s the first thing a visitor sees, so it needs to grab the viewer's attention.

This Help article includes:

  • How to add images to the header
  • Header image guidelines
  • How to adjust the header image
  • How to add an image slideshow to the header
  • How to add a video header
  • How to use header image filters
  • How to add a logo to the header area
  • How to reorder and delete header images

Notes: Images must be in JPG, PNG, or GIF format. Animated GIF files will work in the site editor preview, but will not work on the live website.

How to add images to the header

Note: A stock image is pre-loaded as the header image in the theme selector. In the second step of the trial plan setup, you will upload your own image or assign a different stock image. The header image can be changed at any time.

  1. From the ‘Edit Content’ tab, click on the ‘Edit Header’ button listed in the left panel of options
  2. In the settings pane on the left, click ‘Replace’ below the image you would like to replace
  3. Choose from the following options
    • Upload images: Open the file manager on your device. Select the image from your device to use on your site. This image will be saved in your Image picker
    • Select a previously uploaded image from ‘My Uploads’
    • Stock imagery: Use a stock image from our library.
    • Dropbox: browse and select an image from your Dropbox account
  4. Click on the image you’d like to use and select ‘Apply Image’
  5. Once your image is applied, there are 3 ways to adjust the image:
    • Focal point tool: Click and drag the blue ‘focal point’ dot to the most important part of the image. This is the part of the image that will stay in view when scaled down to mobile devices. From here you can click the tablet and mobile phone icons in the top right corner to preview how the image will look on those mobile devices.
    • Dragging the image: Depending on the image size there may be some room to adjust the horizontal position. Click and drag the image to set it in place. If nothing happens when you click and drag, this means the image has reached the smallest size possible for the space.
    • Zooming: Use the zoom slider to zoom in or out on the image. After you zoom you can click and drag the image to the position of your choice. Note: You can adjust these settings at any time
  6. Click ‘Save’
  7. Toggle ‘Apply to all pages’ if you’d like this image to be set as the header image on all of your website pages
    • Note: If you apply this option, any edits you make to your header image will be applied to all pages. If you’d like to make unique adjustments to the image on each page, you can upload a duplicate image and deselect ‘Use image on all pages’
  8. Click ‘Save’

Header image guidelines

  • Use a standard web resolution of 72 dpi (dots per inch).
  • The image should be at least 2800 pixels wide.
  • Use landscape (horizontal) images instead of tall portrait (vertical) images.
  • Use images where the focus (the subject) is in the center of the photo. - Avoid using images that have important visual elements or text close to the outside edges - use those images within the content area of your site instead.

Adjusting the header image

  1. From the ‘Edit Content’ tab, click on the ‘Edit Header’ button listed in the left panel of options
  2. In the settings pane on the left, adjust the following options:
    • Display Style: Choose ‘Image’ or ‘Video’. The ‘Video’ header option is available to Pro plan members only.
    • Preview: Toggle between desktop and mobile view. You can use the slider to adjust the header height for the selected view.
    • Image fill:
      • Fill header area: your image will automatically fill the header area and will responsively adjust for mobile view
      • Fit header area provides further customization options, including the following:
        • Image position: Top, Center, Bottom
        • Image align: Left, Center, Right
        • Background style: Background color, Blurry image background
        • Vignette: None, Both, Start, End
        • Background color: Click the color swatch, and select from the following options:
          • Choose a preset color from the swatches
          • Click the color map/slider and select a new color
          • Enter the hex code for the color you’d like to use
  3. Click ‘Save’

Note: If you're having trouble with the image position, please view the 'Image Sizing' Help article.

Slideshow headers

  1. From the ‘Edit Content’ tab, click on the ‘Edit Header’ button listed in the left panel of options
  2. In the settings pane on the left, click ‘Add more images to make a slideshow’
  3. Click ‘Upload Image(s)’

    Note: You can upload an image from your computer, select a previously uploaded image, choose a stock photo from our gallery, or import images from your Dropbox account.

  4. Once your image is applied, there are 3 ways to adjust the image:
    • Focal point tool: Click and drag the blue ‘focal point’ dot to the most important part of the image. This is the part of the image that will stay in view when scaled down to mobile devices. From here you can click the tablet and mobile phone icons in the top right corner to preview how the image will look on those mobile devices.
    • Dragging the image: Depending on the image size there may be some room to adjust the horizontal position. Click and drag the image to set it in place. If nothing happens when you click and drag, this means the image has reached the smallest size possible for the space.
    • Zooming: Use the zoom slider to zoom in or out on the image. After you zoom you can click and drag the image to the position of your choice.
  5. Click ‘Save’
  6. Repeat these steps for each new image added to the header slideshow
  7. Toggle ‘Apply to all pages’ if you’d like this slideshow to be set as the header on all of your website pages
  8. Click ‘Save’

Note: Up to 5 images can be added to the header slideshow, per page. Different images can be set up on each page. For more information on this feature, please view the 'Header Slideshow' Help article.

Video Headers

Our Pro plan offers the option to add a silent video (no audio) to the header area. A different video can be added to each page.

  1. From the ‘Edit Content’ tab, click on the ‘Edit Header’ button listed in the left panel of options
  2. In the settings pane on the left, click ‘Video’

  3. Click ‘Upload Video’

    Notes:

    • The video file must be 50mb or less.
    • File types accepted: MOV, AVI, MP4, and M4V.
    • After clicking ‘Upload’ the video may take a few minutes to process. Please wait for the video to load before leaving the page or making any other updates to the site.
    • Some mobile devices may not support video autoplay (usually a default power- and data-saving setting on mobile devices). In those cases, your ‘Header image’ will display instead.

  4. Toggle ‘Apply to all pages’ if you’d like this video to appear in the header on all pages

  5. Click ‘Save’

To switch from a video header back to an image, or slideshow of images:

  1. Click ‘Images’ at the top of the settings pane on the left, under the 'Display style' heading
  2. Click ‘Save’

Notes:

  • You can upload a different video at any time (Pro plan) by clicking ‘Change Video’.
  • The video positioning cannot be modified. For more information on this feature, please view the 'Video Headers' Help article.

Using image filters

Some of our templates offer header image filter customizations. You can adjust the filters within your ‘Edit Theme’ tab following these steps:

  1. From the ‘Edit Theme’ tab, click the drop-down under ‘Image filter’
  2. Click the filter name to assign it to the image
  3. Click ‘Save’ at the bottom of the settings pane on the left

For more detailed information on filters, please view the 'Header Image Filters' Help article.

Adding a logo

  1. From the ‘Edit Theme’ tab, under the title/logo section click ‘Logo’
  2. Click ‘Choose an image’
  3. Click ‘Upload Image(s)’
    • You can upload an image from your computer, select a previously uploaded image, choose a stock photo from our gallery, or import images from your Dropbox account.

      Note: PNG files work best for logos as they can also be transparent.

  4. Adjust the following settings to your liking:
    • Logo size: adjust the slider to modify the display size of the logo image
    • Custom mobile size: Toggle on and adjust the 'Tablet logo size' and 'mobile logo size' sliders to set custom logo image sizes for mobile display
    • Loading animation: Set to Puff In, Flip In, Slide In From Back, Blur In, Wipe In, or Box Highlight
    • Blend modes: Set to Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, or Luminosity
    • Alignment: Set to Left, Center, or Right
    • Opacity: Adjust slider to reach desired opacity
  5. Click ‘Save’ at the bottom of the left-hand pane

⚠ Warning⚠ : The logo option should not be used as your header image as this can cause issues with the display. The logo option is meant to add a smaller image that sits in the menu or over the header image. Please use the header image option for your main header image (from the 'Edit Content' tab).

For logo best practices, please view the 'Image Sizing' Help article.

Reorder or delete header images

If you’ve added more than one image to the header (slideshow) and want to reorder the images, follow these steps.

  1. From the ‘Edit Content’ tab, click on the ‘Edit Header’ button listed in the left panel of options
  2. In the left-hand pane, click and drag an image up or down to the position you’d like
  3. Repeat for each image you’d like to reorder
  4. Click ‘Save’ at the bottom of the left-hand pane

If you’ve added more than one image to the header (slideshow) and want to delete images, follow these steps:

  1. From the ‘Edit Content’ tab, click on the ‘Edit Header’ button listed in the left panel of options
  2. In the left-hand pane, hover over the image you’d like to delete then click the ‘x’ in the top right corner of the image
  3. Repeat for each image you’d like to delete
  4. Click ‘Save’ at the bottom of the left-hand pane

Note: It’s not possible to delete all images. You must have at least one image in the header area.

For more information on how to optimize your Header images, please view '5 ways to optimize header images on your band website'.