Your header image is the first thing visitors see when they get to your website, so it needs to stand out. One way to achieve this is by using image filters.

How to add image filters to your header image:

Before you can add filters you’ll need to add an image (or slideshow of images) to your website header area.

Note: A stock image is loaded during the trial setup. In the second step of the setup process you will upload your own image, or use a stock image. You can change your header image at any time.

  1. From the ‘Edit Content’ tab, hover your cursor over the header section, and click the ‘Edit Image’ button
  2. At the top of the setting 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 an image from your Dropbox account.

  4. Adjust the image to your liking

  5. Click ‘Save’
  6. Toggle ‘Apply to all pages’ if you’d like this image to display as header image on all of your website pages
  7. Click ‘Save’

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.
  • For more information on header images, please view the ‘Header Images’ help article.

Using image filters

  1. From the setting pane on the left, click the drop-down under ‘Image filters’
  2. Click the filter name to apply it to the header
    • None: Your original video.
    • Darken: Places a darker hue over the video.
    • Lighten: Boosts the brightness of the video.
    • Grayscale: removes colour and converts to shades of gray.
    • 1977: Adds a faded look and a red tint.
    • Brannan: A high-contrast, high-exposure filter which brightens your video and gives it a yellowish tint.
    • Brooklyn: Brightens your video and boosts yellow tones.
    • Earlybird: Desaturates colors in your video while allowing bright colors to still show. Also adds a sepia tint and vignetting to your video.
    • Gingham: Removes some color from the video, and adds a yellow hue and a brighter exposure.
    • Kelvin: Uses high saturation and a warm tint.
    • Moon: A black and white filter that intensifies shadows.
    • Nashville: High exposure, low contrast, and adds a warm tint.
    • Toaster: Adds a dodged center to your video with a strong red tint and a burnt edge.
    • Walden: Brightens the center of your video and adds an icy blue tint.
    • Xpro2: Bumps up the contrast, adds a strong vignette, and warms all colors. Intensifies shadows, dark elements, and adds a strong vignette.
    • Dots: Adds a layer of tiny dots over your video.
    • Squares: Adds a layer of tiny squares over your video.
    • Custom: Use the filter customization option here to select your custom filter overlay and transparency. (Only available on select templates.)
  3. Click ‘Save’ at the bottom of the settings pane on the left.

Some of our templates also offer filter customizations:

  • Next to ‘Image filter custom color’, click the color swatch to change the color and opacity
    • Choose a preset color
    • Select a custom color from the color wheel
    • Enter the hex code for the color you’d like to use
  • Next to ‘Image filter custom mode’, click the image filter name to select the one you’d like
    • Normal: Your video as-is with your custom filter overlay.
    • Multiply: Darkens tones using your custom color.
    • Screen: Brightens the video using your custom color.
    • Overlay: A combination of Multiply and Screen filters.
    • Hard-light: Adds a strong contrast to the video using your custom color.
    • Soft-light: Adds a mild contrast to the video using your custom color.
    • Color burn: Darkens the video using your custom color.

Templates offering filter customizations:

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

Adding a logo

  1. In the ‘Edit Theme’ tab, click ‘LOGO’ under the ‘TITLE/LOGO’ section
  2. Click ‘Choose an image’
  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 an image from your Dropbox account.

  4. Click ‘Save’ at the bottom of the settings pane on the left.

Warning: The logo option should not be used as your header image as this can cause display problems. The logo option is meant to add a smaller image that sits in the menu or overtop of the header image. Please use the header image option in the Edit Content tab to set up your main header image display.

Note: PNG files work best for logos as they can be saved with a transparent background.

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, hover your cursor over the header section, and click the ‘Edit Image’ button
  2. At the top of the setting pane on the left, click and drag an image thumbnail 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 settings pane on the left.

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, hover your cursor over the header section, and click the ‘Edit Image’ button
  2. At the top of the setting pane on the left, hover your cursor over the thumbnail of the image you’d like to delete, then click the ‘x’ in the top right corner
  3. Repeat for each image you’d like to delete
  4. Click ‘Save’ at the bottom of the settings pane on the left.

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