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 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 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's 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 panel on the left, click the drop-down menu under 'Image filters'

  2. Click the filter name to apply it to the header

    • None: Your original image.
    • Darken: Places a darker hue over the image.
    • Lighten: Boosts the brightness of the image.
    • 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 image and gives it a yellowish tint.
    • Brooklyn: Brightens your image and boosts yellow tones.
    • Earlybird: Desaturates colors in your image while allowing bright colors to still show. Also adds a sepia tint and vignetting to your image.
    • Gingham: Removes some color from the image, 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 image with a strong red tint and a burnt edge.
    • Walden: Brightens the center of your image 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 image.
    • Squares: Adds a layer of tiny squares over your image.
    • Custom: Use the filter customization option here to select your custom filter overlay and transparency with the following options

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

Some of our templates also offer filter customizations

  • Next to the 'Image filter custom color,' click the color swatch to change the color and opacity

    • Select 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 the '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

  • In the ‘Edit Theme’ tab, click ‘LOGO’ under the ‘TITLE/LOGO’ section

  • Click ‘Choose an image’

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

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

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 preview of how it displays on the right.
  • Custom Movile 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.

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. 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, click on the ‘Edit Header’ button listed in the left panel of options
  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.