‘Alto’ is a template that pulls focus to three main elements of your website from the start - your header image, navigation menu, and call-to-action. With options to change the alignment and positioning of these elements, you can create an angled or balanced effect.
The Alto template is designed to display beautifully on any mobile device. To try out the ‘Alto’ 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 ‘Alto’ website template variations.
Alto Template Features
Header image
The 'Alto' template places your header image to the right of your menu area. You can set the header image to fill the page or, create a ribbon effect by decreasing the header image. With the ‘Alto’ template, the header image appears on your homepage, not on your inner pages.
Consider complementing your menu colors with colors in the header image you choose to create visual harmony.
You can adjust your header options with the following:
- Image filter: select an option from the dropdown menu
- Header height: use the slider to set between 40% to 100% height of the header container
- Custom mobile header height: toggle on to set a custom mobile header height
Title/Logo
With the 'Alto’ template, your ‘Title/Logo’ is fixed at the top left of your website. 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 Site title align: left, center, right
Menu
The ‘Alto’ navigation menu displays your website page names vertically beneath your site ‘Title/Logo’, in a fixed left-side panel. You can set the alignment for your ‘Menu’ items to contrast or cohere to your ‘Title/Logo’ alignment. As clickable text buttons, the menu lets your visitors navigate the different pages on your website.
Customize the look and feel of the ‘Alto’ menu text using these design options:
- Menu font color
- Menu font hover color
- Submenu background color
- Submenu font color
- Menu font: type, style, size, and upper/lowercase
- Align: left, center, right
Call-to-action header
Layered over the homepage image is a call-to-action, which can be used to promote your latest project, or build your mailing list.
The call-to-action area is customizable in the following ways:
- Heading color
- Description color
- Border color and opacity: set the color of the border around your text
- Border width: 0px to 20px
- Background color and opacity: set the color of the text background
- Button hover color and opacity
- Button shape: square, rounded, or pill
- Button style: solid or outline
- Button color and opacity
- Align: left, center, or right
- Position: top, middle, or bottom
- Heading font: font type, style, size, line height, letter spacing, and upper/ lowercase
- Description font: font type, style, size, line height, letter spacing, and upper/ lowercase
Content
The ‘Content’ styling will determine the overall font and page display options throughout your website. The 'Alto' 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
- Sidebar background color: set solid background color for your ‘Menu’ and ‘Title/Logo’ area
- Show “Scroll down” button: toggle on for a ‘Scroll Down’ button to appear at the base of your header image, if the header image is full-height
Sections
With the ‘Alto’ 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 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
- Background color
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 ‘Alto’ 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 ‘Alto’ template will feature your ‘Site-wide my sites’ social media icons fixed in the left-side panel, below your menu.
- 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 pre-templated variations below.
Elegant: The elegant variation features a lush color palette with evergreen and golden tones. The interplay between serif and sans-serif fonts create a stunning visual chemistry.
Sombre: The sombre variation brings attention to a bold call-to-action area, with vivid color blocks of white, red, and black throughout the content area.
Neutral: The neutral variation pairs delicate base tones with solid black fonts colors to create a traditional backdrop for your content.
Playful: The high-contrast playful variation features a vibrant color palette that makes a bold statement in shades of purple.
'Alto' template tips:
- Try staggering the alignment of your menu, site title, and call-to-action to create a cascading look.
- Decrease your header height to the minimum amount to create a ribbon across the top of your site, then, add an abstract image in your header for an artistic statement.
- Add multiple images in your header to create a full-page slideshow effect next to your navigation menu.
