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
  • 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, hover your cursor over the header section and click on 'Edit Image' when that button appears.
  2. In the settings pane on the left, click ‘Replace’
  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. Drag and drop, and use the 'zoom' slider to adjust the image placement.
  5. Click ‘Save’
  6. Toggle ‘Apply to all pages’ if you’d like this image to be set as the header image on all of your website pages
  7. Click ‘Save’

*Note: These themes use the header image as a full-page background

  • Echo
  • Dusted
  • Cross and Fade
  • Primer

Adjusting the header image

  1. From the ‘Edit Content’ tab, hover your cursor over the header section and click 'Edit Image' when that button appears
  2. In the settings pane on the left, **click 'Crop'
  3. From here 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.
  4. 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, hover your cursor over the header section and click 'Edit Image' when that button appears
  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. From here there are 3 ways to adjust the image display:
    • 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
  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

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

Some of our templates also offer filter customizations:

  1. Next to 'Image filter custom color,' click the color swatch to change the color and adjust the opacity.
    • Choose a preset color
    • Choose a color from the color selection tool
    • Enter the hex code for the color you'd like to use 2.Next to 'Image filter custom mode,' click the image filter name to select the one you'd like.

Templates offering filter customizations:

  • Motiv
  • Eclipse
  • Nocturne
  • Encore
  • Spotlight
  • Duet

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. Click ‘Save’ at the bottom of the left-hand pane

Logo resizing options:

  • Logo Size: Adjusts the size of your logo on desktop. Increase or decrease the percentage using the slider and see the live prevew of how it displays on the right.
  • Custom Mobile Size: Toggle this on to customize the size of your logo on mobile devices. Click the 'Tablet' or 'Mobile' icons in the top-right to adjust your live preview accordingly as you work.
    • Tablet Logo Size: Adjust the size of your logo for display on all tablets.
    • Mobile Logo Size: Adjust your logo sizing for display on all smartphones.

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

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

To create a great logo, please see: How to create a band website logo you love

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