Template Customization Guide: Odeum

Bandzoogle's new 'Odeum' template features a large full-screen header image and dynamic loading animation options. This template is a good choice when you want to make your header image or video the star of your homepage. The 'Odeum' template also includes a header section on interior pages. 'Odeum' is available on all Bandzoogle website plans (not on the EPK plan).

If you'd like to try the Odeum template, head to your 'Edit Theme' tab. You can change your template any time while retaining your current page content. With the new template applied to preview in your 'Edit Theme' tab, you can further customize the look and feel of your website using the design options along the left side of the preview panel. From there you can publish the new theme to your live website, or save it to continue working on the new design later on.

'Odeum' Template Features

Header image or video

The top section of your website homepage is reserved for displaying your header image or header video (Pro plan) - it is the first thing a visitor sees when they load your website, so it's important to make your page header stand out. Each Bandzoogle template offers different header sizes and options.

The 'Odeum' template provides a full-width header section, along with height settings. These changeable height parameters allow you to finetune how tall you'd like the section to be, to most optimally display your header image or header video. 'Odeum's' full-width header image displays behind your site title and call-to-action in the page header. In your 'Edit Content' tab, upload a header image featuring a visual for your project. A landscape-style image (longer than it is wide) will work best here.

You can adjust your header image display options in the 'Edit Theme' tab, modifying it as follows:

  • Add an image / video filter
  • Adjust the header height
  • Adjust the header height for inner pages (up to 30%)
  • Animate the header features on page load: first you'll see a fade-in of your header image, followed by a fade-in of the site title / logo, and lastly a fade-in of your call-to-action feature
  • Add a customized background color to the 'Site Title' and 'Call-to-Action Header' feature together
  • Add a customized background to your 'Call-to-Action Header' feature only
  • Set the menu to full screen width
  • Set a custom header height for viewing on mobile devices
  • Adjust the 'Menu bottom spacing' setting to add space below your navigation menu
  • Add tile backgrounds to appear behind titles in your page header

    Note: When toggled on, use 'Site title font color' in the Title/Logo section to assign your title background color

Title/Logo

With the bold 'Odeum' title and menu bar, your 'Site Title' appears as the first item at the top of your page, overtop of the header image/video. In the 'Header' section, toggling on the 'Title background' option allows you to add a background color with adjustable opacity. Make use of the unique negative text spacing with your title to give your site a retro abstract look - excellent used with flashy neon shades if you want a contemporary callback to style trends of the 80s-90s.

You can also toggle on 'Animations when page loads' so that your 'Site Title' and 'Call-to-Action Header' fade in after a few seconds.

You can use a text title, upload a custom logo, or set this option to 'none'. The title will appear above your menu. 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. New with the 'Odeum' theme, there are additional settings for customizing how the Site Title' displays on mobile devices: 'Custom mobile size' allows you to set a specific font size for mobile devices only, and toggling on the 'Apply letterspacing on mobile' option will apply your letter spacing settings to the 'Site Title' text on mobile, rather than having it automatically fit to the space available on the device screen.

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

Navigation menu

The navigation menu is the area where page names are displayed. As clickable text buttons, they will allow your visitors to move between the various pages of your website. In 'Odeum,' your page names are listed horizontally below your 'Site Title' and 'Call-to-Action Header'.

In addition, you can adjust the 'Menu bottom spacing' so that it is tight to your page content, or so that it hovers higher up in the header section, over the header image (use the slider to adjust the placement). You can also toggle on a 'Full width menu' or, let the menu take up only the space of its items.

Customize the look and feel of your 'Odeum' 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, size, and upper/lowercase
  • Background color

    Note: a menu set to full-width will still become a hamburger menu (tap to open) on mobile, as well as in computer view when the menu contains numerous items

'Call-to-Action Header'

A call-to-action is the primary action you'd like visitors to take once they load your site. This can be something like "buy my album" or "sign up to my mailing list". The 'Odeum' template places the 'Call-to-Action Header' feature overtop of the header image. Your 'Call-to-Action Header' design settings can be adjusted in the following ways:

  • Heading color
  • Subheading color
  • Description color: Choose a color for the description text
  • Border color: Change the color of the border to your liking
  • Border width: Use the slider to set the width of your border lines, from 0px to 20px
  • Background color: Set a background color for your 'Call-to-Action Header' feature
  • Button hover color
  • Button shape: Rounded / Square / Pill
  • Button style: Outline / Solid
  • Button color
  • Align: Left / Center / Right
  • Position: Top / Middle / Bottom
  • Heading font: Set the font type, style, size, line height, letter spacing, uppercase/lowercase
  • Subheading font: Set the font type, style, size, line height, letter spacing, uppercase/lowercase
  • Description font: Set the font type, style, size, line height, letter spacing, uppercase/lowercase
  • Inline headings: When toggled on it displays the heading and subheading side-by-side

Content

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

  • Content font: Set the font type, style, size, line height, upper/lowercase, and link style (None / Underline)
  • Title font: Set the font type, style, size, line height, letter spacing, and upper/lowercase options
  • 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
  • Title background: Toggle on to add a background tile to titles on the page
  • Title underline: Toggle on to add an underline to titles on the page

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 / Pill
  • Style: Outline / Solid
  • Color (adjust the 'Button color' setting in the corresponding 'Section Style 1 / 2 / 3' area - see the 'Section Styles' details below)

Site-wide music player

The 'Odeum' template features an expandable site-wide music player that can be added through the 'Edit Content' tab. This player appears in the bottom right corner of your website and will play music as visitors navigate your website. The player will pop up when clicked, displaying details of the track currently playing (artwork, artist name, etc.) along with a clickable list of tracks available to play. To customize the colors of the player, toggle on the 'Use custom colors' option in the 'Edit Theme' settings panel under the 'SITE-WIDE MUSIC PLAYER' heading, and adjust these settings:

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

Site-wide 'MySites'

The 'Odeum' template displays the linked icons of 'Site-wide MySites' feature as buttons in the menu area. This makes it easy for your website visitors to click through to your profiles on social media and external channels. The clickable 'MySites' icons can be customized using the following settings in your 'Edit Theme' tab:

  • Button size: Use the slider to set the icon size anywhere from 1.00rem to 2.50rem
  • Button color
  • Button hover color
  • Button alignment: Right / Center / Left

Section Styles

Organize your website by using styled sections. Giving your content a modern look, you can apply up to three 'Section Styles' to your website. You can set the design parameters of 'Section Style 1,' 'Section Style 2.' and 'Section Style 3' in your 'Edit Theme' tab, then apply your styles to blocks of page content through your 'Edit Content' tab.

You can customize your section styles ('Section Style 1 / 2 / 3') 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
  • Background color opacity
  • Title background color: Set the color of the tile that displays behind titles when the 'Title background' options in the 'Content' section is toggled on

Variations

The 'Odeum' template offers six preset variations. Each variation loads with a base palette of complementary colors. You can use those preloaded colors and simply add content to pages, or you can customize the colors and design options to suit your personal style.

Minimal: Uses a white page background with black headings, and cool sky-blue accents in buttons, links, and the sitewide player. Features modern sans-serif fonts and crisp black titles with tight style lines.

Playful: Uses a white page background, with playful splashes of bold color: a yellow hover over white menu font, pink hover color on buttons and links, and a sky-blue site-wide music player. Features a contemporary sans-serif content font with large black serif titles for flair.

Somber: Using black page backgrounds with white text, this variation includes a left-aligned white menu overtop of a transparent black background, deep fuschia buttons and links. Features a modern sans-serif content font with a larger serif title font for subtle emphasis.

Neutral: Uses a white page background with a left-aligned menu and a black site-wide music player alongside soft gray buttons and dark charcoal text links. Features a black non-serif content font with a large non-serif title font for a succinct and clean style.

Bold: Uses a deep green page background with matching site-wide player color making the player frame blend into the page background. Buttons are an eye-catching royal-blue, with a left-aligned menu. Features an uncomplicated non-serif content font offset with bold serif titles.

Elegant: Uses a white page background with dark khaki-green color appearing in the classic non-serif content font, the large serif title font, and the site-wide music player. Buttons appear in a lighter sandy shade. A calm serene vibe.

'Odeum' template tips: