Theodore is built around a simple, confident lockup: a full-width photo with your title anchored in the bottom left corner. It shares the same 'Image shape' header control as Levi, but none of Theodore's presets apply one by default, keeping the image as a clean, uncropped rectangle where your photo and title share the space without competing for it. If you'd like to add a shape of your own, the option is there whenever you're ready for it.
'Theodore' template features
Header image
The 'Theodore' template features a full screen header space. Each Bandzoogle template offers different header sizes and options. Using the 'Theodore,' template, your header image will only display on your homepage, and not on the inner site pages —something to consider when choosing your theme.
Within the 'Theodore' template header settings, you can make use of the 'image shape' option to give your image a unique and striking look. Shapes will cut out sections of your image to match the pattern chosen. The 'Rounded' and 'Cut' options will customize the outside edges of your image.
You can also adjust the image size within the header space, as well as alignment options for both menu and title.
You can adjust your 'Header/Image' display settings within the 'Edit Theme' tab, modifying it as follows:
- Image shape
- Add an image filter (see the 'Header Image Filters' for detailed options)
- Image size
- Image position
- Image alignment
- Header height
- Animations on page load
- Background color
Title/logo
In the 'Theodore' website template, your site's title or logo is displayed overtop of your header image. You can use a text title, upload a custom logo, or set this option to 'none' using 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. You can also toggle on 'Custom mobile size' setting to adjust the size of your site title on your mobile site only.
- Logo: Click 'Choose An Image' to upload a logo, and adjust the size using the slider. Toggle on 'Custom mobile size' to adjust the size of your logo on mobile.
- None: This option leaves the site title area blank.
You can further customize your website title using these options:
- Position: Choose from top, center, or bottom.
- Alignment: Select between left or right.
- Blend modes: Choose a blend mode from the drop-down menu to change how your text interacts with the background.
- Scale to fit: Toggle on to have your title fill the available space. Disable to use custom font sizing and letter spacing.
- Inner page font size: Adjust the size of your title font on the inner pages of your website (every page except the Home page).
- Inner page scale title to fit: Toggle on to have your title fill the available space on your inner pages.
- Site title width: Use the slider to change the width of your title.
Menu
The navigation menu is the area where your website's page names are displayed. As clickable text buttons, they allow your visitors to check out the different pages on your website. In the 'Theodore' template, your page names are listed horizontally above your site title and above your header image, aligned to the left of the page.
Customize the 'Theodore' menu bar 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)
- Menu bar background color
- Separate navigation
Page options
The 'Theodore' template offers a full-page background, along with the following options for your page content:
- Page background color: Set the color of the page background.
- Page content width: Set how wide the page content spans across the screen (50-100%).
Content
The 'Content' section defines the consistent design choices throughout your website. This includes your content font and page positioning. The 'Benily' 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.
- Title text style: Customize your titles by selecting 'Strikethrough, Underline, or Lowercase.
Buttons
Some of your template features include buttons, such as the 'Mailing List Signup Form' and the 'Custom Form' features. Here's how the buttons can be customized to flow with your website design:
- Shape: Rounded / Square / Pill
- Style: Outline / Solid
Site-wide 'MySites'
In the 'Theodore' template, the site-wide 'MySites' social media icons display at the bottom of every page just above the footer area.
The customization options are:
- Button size: Use the slider to set the icon size anywhere from 1.00rem to 2.50rem.
- Button color: Set the loading color of the icons.
- Button hover color: Set the rollover color of the icons.
- Button alignment: Right / Center / Left
Section Styles
To give your content a modern look, organize your website by using styled sections. 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: color of all content font within that section style
- Link color: color of all links within that section style
- Title font color: color of all titles within that section style
- Heading 1 font color: color of all text using heading 1 within that section style
- Heading 2 font color: color of all text using heading 2 within that section style
- Button color: loading color of all buttons within that section style
- Button hover color: rollover color of all buttons within that section style
- Section background color: color of the page background for that section style
- Shape: set the edge shape for that section style
Variations
The 'Theodore' template offers six preset variations. Each preset variation loads with a base palette of complementary colors. With each variation, you can use the existing color palettes and simply add content, or you can adjust the colors and design options to suit your preferences.
Bold: Goes all in on color, with a coral-orange palette and a chunky, rounded sans-serif title. A powerful option for a trap artist or a genre-blending rapper who wants their website to hit as hard as their music.
Elegant: Built around a sage green color palette and a tall, rounded serif-style title. A fitting choice for a collaborative duo project or a dream pop artist with a soft, considered visual style.
Minimal: Uses a warm tan and gold color palette with a thin, elegant title font. A great option for an ambient artist or a lo-fi bedroom producer who prefers a softer, understated style.
Playful: Pairs a cool steel-blue color palette with a bold, condensed all-caps title. Suits an alt-pop artist or a synth/electro-pop act looking for a striking, contemporary look.
Sombre: Pairs a warm olive and rust color palette with a rounded, characterful title font. A natural fit for a funk or soul artist, or a jam band that wants their site to feel like it was pulled straight from the stage.
Neutral: Strips color out entirely, pairing a black palette with a bold, condensed title font. This gritty, high-contrast look is perfect for a punk band or a hardcore band that wants to keep things raw.
'Theodore' template tips
- Experiment with the 'Image shape' and ‘image size’ settings and background colors to take the look of your header image to the next level. Try matching the background color used in the header with the color of your first content section to blend them together as you scroll down the site.
- Toggle on the 'Animations on page load' setting to get the full effect of the 'Image shape' option
- Adjust your section's background color opacity to add dynamics to the background image visible behind your page content.
