Filter is a music website template that adapts to any screen size. It is loaded with features to allow full customization over the look and feel of your website, from the thumbnail and background header area to the content.

To customize your template, head to the Edit Theme tab. Along the left side you’ll see options for your current template. You can change templates any time while retaining your current content.

Filter Template Features

Header image

Filter has a thumbnail image plus a full-width background header area along the top of the template. In the Edit Content tab, upload a header image that represents your project. A square image will work well here. You’ll see the image reflected behind the thumbnail, in the header area.

You can adjust the square thumbnail image by doing the following:

  • Removing or adding a drop shadow
  • Removing or adding a border
  • Adjusting the border colour

You can adjust the wider background version of your header image by doing the following:

  • Removing or adding a modern blur effect
  • Adjusting the height of the header area on the home page
  • Adjusting the height of the header area on the inner pages (all)
  • Adjusting the height of the header area on mobile view
  • Setting the position of the image (top, center, bottom, and left, center, right).

Using the Filter template, the interior pages of your website will include your site title or logo as well as the header image (thumbnail and full-width).

Title/Logo

With the Filter template you can use a text title, upload a custom logo, or set this option to ‘none’.

The title will appear beside your thumbnail image. It features the following options:

  • Text: Enter your text in the ‘Site Title’ field; select the font color; set the font style, size, and spacing, and toggle on/off the ‘uppercase’ option
  • Logo: Click ‘Choose An Image’ to upload a logo, and adjust the size using the slider
  • None: This option leaves the site title area blank

Navigation menu

The navigation menu is the area where page names are displayed. In 'Filter' they are contained along the top of your website. These page names are clickable buttons that direct visitors to the different pages or your website.

Customize the look and feel of your menu bar using these design options:

  • Menu font color
  • Menu font hover color
  • Submenu background color
  • Submenu font color
  • Mobile menu font color
  • Mobile menu background color
  • Menu font: type, style, letter spacing, and upper/lowercase
  • Menu bar background color and opacity
  • Menu button hover color
  • Menu button size: small, medium, or large

Call-to-action

Use the ‘Call-to-Action’ feature to build up your mailing list or feature your latest release or new video within the header area of your website. This feature displays beside your thumbnail image on your homepage and is customizable in the following ways:

  • Heading color
  • Subheading color
  • Border color (around your text)
  • Border width
  • Background color (behind your text)
  • Button color
  • Button hover color
    • To customize the shape or fill of the button, adjust the ‘Buttons’ section (see below).
  • Alignment: set the call-to-action feature to the left, right, or center of the header area
  • Position: set the call-to-action feature to the top, bottom, or middle of the header area
  • Heading font (font type, style, letter spacing, and upper/ lowercase)
  • Subheading font (font type, style, letter spacing, and upper/ lowercase)

Page content

The ‘Content’ section defines the consistent design choices throughout your website. This includes your content font and page positioning. The 'Filter' template allows you to adjust these options:

  • Content font: set the font type, style, size, line height, upper/lowercase, and link style
  • Title font: set the font type, style, size, line height, letter spacing, and upper/lowercase
  • Heading 1 font: set the font type, style, size, line height, and upper/lowercase options
  • Heading 2 font: set the font type, style, size, line height, and upper/lowercase options
  • Page content width: slide the width up to 100% to fill the content area
  • Page content positioning: with a content width less than 100% you set the content to align to the left, center, or right of the page

Sections

Use styled content area sections to make your website organized. Up to three section styles can be used for your website. These styles can be applied to blocks of content through the ‘Edit Content’ tab. You can set the design of the section styles in the ‘Edit Theme’ tab as follows:

  • Content font color
  • Link color
  • Heading 1 font color
  • Heading 2 font color
  • Button color
  • Button hover color
  • Section background color

Buttons

Look for buttons in features such as the ‘Mailing List Sign-up Form’ and the ‘Custom Form.’ Here’s how the buttons can be customized to suit your website design: - Shape: rounded, square, or pill - Style: choose from ‘outline’ or ‘solid’ - Color (adjust the ‘button color’ setting in the corresponding ‘Section Style 1/2/3’ area)

Site wide music player

The Filter template features an expandable site wide music player that can be added through the ‘Edit Content’ tab. This player appears on the right side of your website, and will play music continuously as visitors navigate your site pages.

To customize the colours of the player, toggle on the ‘Use custom colors’ option and adjust these settings:

  • Background color (set the color you’d like to use)
  • Text color (‘white’ or ‘black’)

Site wide ‘My Sites

This template includes site wide social media icons that will display in the header area on the bottom right side, opposite your navigation menu. You can adjust them as follows:

  • Button size (increase or decrease the size)
  • Button color
  • Button hover color

Variations

The Filter template offers four style variations. Each one comes with a base palette of complementary colors. With each variation you can use the existing colours and simply add content, or adjust the colors and design options to your liking.

Playful: Features white sections with pops of red and purple, and a section style in pale purple.

Elegant: A modern classy look displaying a simple white background with muted olive tones.

Sombre: Showcasing black, grey, and mint tones, with plenty of room for content. Neutral: Uses striking black and white section styles alongside modern typography.

Filter template tips:

  • Be sure to set the focal point in the ‘Edit Content’ tab. Move it around on the wider image to reflect how your website will crop on mobile devices.
  • Apply a header image filter to change the look and color of both the thumbnail and wider background header image.
  • Adjust the border width and color of your call-to-action to make it stand out.
  • Try full-width content sections to mirror the navigation bar at the top of your website.