The Bandzoogle ‘Eclipse’ template features a loading animation. Your ‘Site Title’ or ‘Logo’ and ‘Menu’ will fade into place as a rectangle outline flashes in and out.

If you’d like to try the ‘Eclipse’ template, head to the ‘Edit Theme’ tab. You can change templates any time while retaining your current content. Then, you can customize the look and feel of your website by using the options along the left side of the editor

‘Eclipse’ Template Features

Header image

The ‘Eclipse’ theme features a full-width header image, layered under your ‘Site Title’ and ‘Menu.’ With the ‘Eclipse’ theme, you can adjust your ‘Header image height’ for your homepage and inner pages and set a custom mobile header height.

You can adjust your ‘Header’ area display options in the ‘Edit Theme’ tab, modifying it as follows:

  • Add an image filter
  • Add an image filter custom color
  • Set an image filter custom mode, including; normal, multiply, screen, overlay, hard-light, soft-light, and color-burn
  • Custom Mobile header height - Toggle on/off
  • Adjust the header height
  • Adjust the header height for inner pages
  • Loading animation - Toggle on/off

Title / Logo

The ‘Eclipse’ theme ‘Title’ or ‘Logo’ hovers over your header image. You can choose its vertical position and alignment over your header image.

You can use a text title, upload a custom logo, or set this option to ‘none.’ It features the following options:

  • ‘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
  • ‘None’: This option leaves the site title area blank
  • ‘Alignment’: Left, Center, Right
  • ‘Vertical position’: Top, Middle, Bottom

Navigation menu

The navigation menu is the area where page names are displayed. As clickable text buttons, they will allow your visitors to check out the different pages on your website. In the 'Eclipse,' template, your page names are laid out horizontally below your ‘Title’ or ‘Logo.’

Customize your menu bar in ‘Eclipse’ using these design options:

  • Menu font color
  • Menu font hover color
  • Submenu background color
  • Submenu font color
  • Mobile menu font color
  • Menu font: type, style, and upper/lowercase
  • Menu hover animation: Toggle On/Off

Content

The ‘Content’ section defines the consistent design choices throughout your website. This includes your content font and background accents. You can toggle on the ‘Feature backgrounds’ option, which adds a background color to your ‘Music’ features, or to the second column in a two-column layout.

The 'Eclipse’ 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, 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
  • Feature backgrounds: Toggle On/Off

Sections

We offer a few section styles that you can use within your content. You can apply up to three section styles on your website to enhance your project. 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

Buttons

In the ‘Mailing List Signup Form’ feature, ‘Custom Form,’ and other features of your Bandzoogle website, you’ll see buttons. Here’s how the buttons can be customized to flow with 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 ‘Eclipse’ template features a full-width music player that can be added through the ‘Edit Content’ tab. This player appears across the bottom of your site.

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.

With the ‘Eclipse’ theme, the Site-wide ‘My Sites’ icons will appear within the header area. You can control their placement within the header area with these options:

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

Variations

The 'Eclipse' template offers four 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.

  • Sombre: With a striking turquoise ‘Site Title’ and ‘Menu’ and blue-tinted greys in your section colors, this variation sets the mood.
  • Playful: Featuring fuschia elements and a serif font, play up your best content with this variation.
  • Elegant: Warm golden tones make this variation an instant classic.
  • Neutral: Set with blue hues, greys, and whites, this variation is the perfect backdrop for your content.

‘Eclipse’ template tips:

  • Customizing the Eclipse website template will suit all types of bands, with all genres of music
  • Consider your placement options for your ‘Site Title’ ‘Menu,’ and ‘Site-wide My Sites’ to create a dynamic header area.
  • Enable ‘Feature backgrounds’ and work with different section column layouts to highlight your ‘Music’ features.