Introducing 'Benily,' our latest website design template that brings a fresh, artistic flair to your online home. The standout feature of this theme is the innovative 'Image shape' option for your website's header image, allowing you to stylistically crop your main photo into various captivating shapes and patterns. Alongside these unique shape controls, 'Benily' offers enhanced flexibility with new options for adjusting the size, position, and alignment of your header image, giving you complete creative control to make a striking first impression.
'Benily' template features
Header image
The 'Benily' template features a header image below your menu, layered under your optional 'Call-to-Action Header' feature and site title. Each Bandzoogle template offers different header sizes and options. You can adjust your 'Header image height' setting to fill more (or less) space on the page of your website. Using the 'Benily,' 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 'Benily' 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 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 'Benily' 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 'Benily' 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 'Benily' 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 'Benily' 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 'Benily' template, the site-wide 'MySites' social media icons display at the top of every page to the right of your menu. 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
- Background color opacity: opacity of the background color for that section style
Variations
The 'Benily' 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: A striking red combined with black create the perfect mood and also allow your text and 'MySites' icons to stand out. If you're a rapper or hip-hop artist, this variation could be just right for you.
Elegant: A sharp navy menu font and 'MySites' icons contrast perfectly against a misty, soft gray. This variation is perfect for R & B singers and pop groups.
Minimal: A faint floral yellow is the perfect backdrop for any project not looking to be too bold with its website palette but still wanting a hint of color.
Playful: Features a cheerful color palette of pink and soft purple, with a bold san-serif font. This lively design sets an energetic tone for any group with an electronic or nostalgic vibe to their music.
Sombre: For a dramatic look, the sombre option offers bold fonts with a green and pink palette. This variant is perfect for anyone that would like their site title to really pop.
Neutral: The classic black-on-white approach is taken in this variation. It's crisp and uncomplicated — perfect for indie artists or classical musicians.
'Benily' template tips
- Experiment with the 'Image shape' setting 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.
