The ‘Shade’ template offers incredible customization options spanning from background opacities, page and content borders, header height adjustments, and more. With a full-page header image and options to change the width of your page content and the positioning, there’s plenty of ways to create a ‘Shade’ that works for you.
The Shade template is designed to display beautifully on any mobile device. To try out the ‘Shade’ template, click on the ‘Edit Theme’ tab. You can change templates at any time and your current content will remain intact as you update your design.
Use the theme editing options below to further customize the preset ‘Shade’ website template variations.
Shade Template Features
Header image
The 'Shade' template features a full-page header image that stays fixed to the page as your content scrolls over top. The ‘Header’ options on this theme apply to the background beneath the ‘Site title,’ ‘Menu’ and ‘Site-wide my sites’ elements.
You can adjust your header options as follows:
- Image filter: select an option from the dropdown menu that will apply to your full-page header image
- Header background color: choose a color and opacity
- Header height: use the slider to set between 55% to 100% height of the header container
- Mobile header height: use the slider to set between 50% and 80% of the header container on mobile devices
- Flip SWMS and Menu: toggle to change the placement of these elements above or below the ‘Title/ Logo’
- Header height (inner pages): use the slider to set between 55% to 100% height of the header container on your inner pages
Title/Logo
With the 'Shade’ template, your ‘Title/Logo’ sits in the middle of your header area, between your ‘Menu’ and ‘Site-wide my sites’ logos. 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 desktop and tablet size using the slider
- None: This option leaves the site title area blank
- Loading animation: toggle on to apply a loading animation
- Loading animation style: choose an animation style from the dropdown
Menu
The ‘Shade’ navigation menu displays your website page names horizontally beneath or above your site ‘Title/Logo.’ As clickable text buttons, the menu lets your visitors navigate the different pages on your website.
Customize the look and feel of the ‘Shade’ menu text using these design options:
- Menu font color
- Menu font hover color
- Submenu background color
- Submenu font color
- Mobile font color
- Mobile background color
- Menu font: type, style, size, and upper/lowercase
Page
The ‘Shade’ theme allows you additional page customizations that affect your content positioning and width of your content containers above your full-page header image. These elements allow you to create a consistent page design across your website pages.
Adjust your page settings with the following options:
- Background color overlay: choose a color and adjust the opacity for an overlay on your full-page header image
- Page content width: use the slider to set your content to display between 50% to 100% of the page area
- Page content positioning: choose left, center, right
- Mobile page content width: use the slider to set your content to display between 80% to 100% of the mobile page area
Content
The ‘Content’ styling will determine the overall font and page display options throughout your website. The 'Shade' template allows you to adjust the following 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
- Content outer border: toggle to apply a border surrounding your content area
- Content inner border: toggle to apply a border between your content sections
- Border size: adjust the size of the border
- Border color: apply a color and opacity to your borders
- Mobile border size: set a custom border size
Sections
With the ‘Shade’ template, you can apply different section styles throughout your website pages to define certain areas of your content. Customize the section styles in the ‘Edit Theme’ tab as follows, then apply those styles to blocks of content using 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
- Background color
- Background color opacity
Buttons
Many of the features on your website include buttons, such as the ‘Mailing List Sign-up Form’ and the ‘Custom Form.’ Here’s how the buttons can be customized with your website design:
- Shape: rounded, square, or pill
- Style: outline or solid
- Color (adjust the ‘button color’ setting in the corresponding ‘Section Style 1/2/3’ area)
Site-wide music player
The ‘Shade’ 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, will pop up when clicked, and will play music as visitors navigate the pages of your website.
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
The ‘Shade’ template features ‘Site-wide my sites’ social media icons in the header area. You can adjust the appearance of these icons with the following options:
- Button size: use the slider to set between 1rem to 2.5rem
- Button color: choose from the color selector
- Button hover color: choose from the color selector
- Button alignment: left, center, or right
Variations
Every Bandzoogle website template comes with pre-templated variations to help get you started. Choose a version and add your content, or fully customize one of the variations below.
Elegant: The elegant variation features opaque black and grey overlays with refined fonts for a classic, stylish look. This variation is perfect for a jazz band.
Neutral: The neutral variation removes the header background so your imagery can make an immediate impact. The content borders are larger to create definition for your sections. This variation is perfect for a singer-songwriter with fabulous imagery.
Playful: The high-contrast playful variation features fuschia links and buttons against opaque blue content backgrounds for a stunning vibrance. This variation pairs well with a pop music project.
Sombre: This variation adds bold, black section background colors and borders, letting your header image appear only at the top of your page. The black backgrounds are complemented with stark white titles and peachy links and buttons. This variation is perfect for a country artist.
'Shade' template tips:
- Try setting an opaque page background color, then, use a solid complementary color for your content border color. This creates a neat effect as your content scrolls above your image.
- Adjust your page content width to 50% and change the page content positioning to let your full-page header image take the spotlight.
- Try adding a video header for movement in the background as your content scrolls.
