Bandzoogle's 'Timbre' template features the new expanding SiteWide Music Player. It also offers a variety of loading animations, each of which can add a modern twist to your website for memorable first impressions.

If you'd like to try the 'Timbre' template, head to your 'Edit Theme' tab. You can change templates any time while keeping your current content in place. With the new template in place, you can then customize the look and feel of your website using the design options along the left side of the editor.

Header image

Each Bandzoogle template offers different header sizes and options. The 'Timbre' theme offers a full-width header image that displays below your site title and menu.

You can customize the header image on each page, and the image style settings you apply in your theme editor will apply to all header images.

You can adjust the display options for your 'Header/Image' area within your 'Edit Theme' tab. The following options are available for you to customize your header:

  • Add an image filter
  • Add a custom filter color
  • Choose an image filter mode
  • Apply 'Custom mobile header height' for your mobile homepage
  • Set the 'Custom mobile header height' between 0% and 100%
  • Set the header height (homepage) between 0% and 100%
  • Adjust the header height (inner pages) between 0% and 100%

Title/Logo

Your band or artist name should display prominently on your website. You can use our 'Text' title option or upload a file to the 'Logo' tab if you've got one already designed. You can also choose 'None' to go without a title/logo altogether.

  • Text: Enter your band or artist name 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. Toggle on the 'Custom mobile size' setting to finetune 'Tablet logo size' and 'Mobile logo size' display settings if you prefer not to have them resized automatically.
  • None: This option leaves the site title area blank

You can also toggle on the 'loading animation' switch in the header options to add a dynamic touch to your site title. You'll then have the option to choose one of the six animation style options: Box Highlight, Wipe In, Blur In, Slide In From Back, Flip In, or Puff In.

The 'Timbre' template also allows you to set the 'Alignment' (Left, Center, or Right) and 'Vertical Position' (Top, Middle, or Bottom) of your 'Title/Logo.'

Menu

The navigation menu is the area where the page names are displayed. As clickable text buttons, they will allow your visitors to check out the different pages on your website. In the 'Timbre' template, your page names are listed horizontally below your 'Site Title,' and you have the option to set the following details as well:

  • Menu font color
  • Menu font hover color
  • Submenu background color
  • Submenu font color
  • Mobile font color
  • Menu font: type, style, size, and upper/lowercase
  • Apply the 'Menu hover animation' option to have a square animation appear when hovering over the menu item (selection options are Box, From Above, From Center, From Right, From Left, or None).

Page

The page controls allow you to customize the width of your content area. This can either give your site a fuller, more horizontal feel, or a more narrow, vertical aesthetic.

  • Page content positioning: determines the alignment of your website's content (Left, Center, or Right).
  • Page content width: Adjust the width of your content area to between 50% and 100%

Content

The content section of your website is where all your images, text, and features live. This is where you add your music, blogs, events, and anything else you'd like to present to your visitors. You can adjust the following settings:

  • Content font: set the font type, style, size, line height, upper/lowercase, and link style
  • Title font: set the font type, size, 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

Buttons

Some of your template features include buttons, such as the 'Mailing List Sign-up Form' and the 'Custom Form.' Here's how the buttons can be customized to flow with your website design:

  • Shape: Rounded, Square, or Pill
  • Style: Outline or Solid
  • (Color is adjusted using the 'button color' setting in the corresponding 'Section Style 1/2/3' area further down on the page.)

Site-wide music player

The 'Timbre' template features a site-wide music player, added through the 'Edit Content' tab. This player will appear on the right side of your website. It will pop up when clicked, and will continue to play music as visitors navigate all of your website pages.

To customize the colors of the player, toggle on the 'Use custom colors' option in the 'Edit Theme' area, and adjust these settings:

  • Background color (set the color you'd like to use)
  • Text color (White or Black)

Site-wide 'My Sites'

Links to external platforms can be added through the 'My Sites' feature. There are two versions of the 'My Sites' feature: Site-wide (displays on each page, either in the header or footer section), and per-page (appears only on the page to which it's directly added).

With the 'Timbre' template, the site-wide 'My Sites' icons will appear within the header area. You can control their placement within the header area using these options:

  • Button size
  • Button color
  • Button hover color
  • Button alignment: Left, Center, or Right
  • Button position: Top or Bottom

Sections

Each theme offers styled sections. The 'Timbre' theme also features full-width sections, so use the section options to create a cohesive look for your website.

Organize your website by using styled sections. Giving your content a modern look, you can apply up to three section styles on your website. You can set the design of the section styles in the 'Edit Theme' tab, then apply your choices to blocks of content through the 'Edit Content' tab.

You can customize your sections by using these options:

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

Variations

The 'Timbre' template offers six preset variations. Each one comes with a base palette of complementary colors. With each one, you can use the existing colours and simply add content, or adjust the colors and design options as you'd like.

Minimal: This variation offers a clean, uncluttered design with subtle typography. It's perfect for singer-songwriters, composers, or instrumentalists who want to create a refined and professional online presence.

Playful: Perfect for a project that is quirky and bright, the 'Playful' variation offers a bright purple aesthetic with a bold site title.

Elegant: With a bold palette and red section background colors, this variation is great for an americana or roots band.

Sombre: This variation features a bold font for the site title and its preset section styles would look great with the Nashville header image filter.

Neutral: This variation incorporates greyscale tones for a smooth, effortless look.

Bold: Perfect for musicians and music professionals who want to stand out and make a statement with their branding.

'Timbre' template tips:

  • Try different image filters, including a custom color filter, to add more graphic interest to your full-width header image.
  • Experiment with section shapes to give your website an extra artistic flair while scrolling.
  • Adjust your header height for your inner pages to add visual interest.
  • Try reducing your 'Page Content Width' to give your content more of an airy feel.