Bandzoogle websites are designed to help artists create a cohesive look for their music. Starting with hundreds of template styles, we offer customizable design details for fine tuning your visuals and layout options for detailed organization.

A section is a block of content with many customizable design and layout properties. Sections are a great tool for visually organizing content.

This help article includes:

  • How to add a section
  • How to edit a section
    • Section options (Including background color and background image)
  • Style options for your section (‘Edit Theme’ tab)
  • How to reorder sections
  • How to delete sections

For information on templates, features, or adding columns, please view the following help articles:

Adding a Section

  1. From the ‘Edit Content’ tab, move your cursor over the content area (under the header area)
  2. Click the blue ‘Add section’ button
    • This will insert a new section above the currently-selected section
  3. Add any features you’d like to display in this section
    • Click the ‘Add feature’ button on the left, or on ‘add feature’ within the section

Editing a Section

  1. From the ‘Edit Content’ tab, move your cursor over the section you’d like to edit
  2. Click the blue ‘Edit section’ button

Section Options

  • Section properties:

    • Title: The title of the section
    • Show title: Toggle ‘ON’ if you want this section title to be visible on the site, or ‘OFF’ if you want the section title to be hidden.
    • Show in menu: Toggle ‘ON’ if you’d like to display this title in the site’s navigation menu. This is commonly used for setting up one-page websites.
      • Note: On one-page websites this will create a menu, with the page section 'Title' as a menu item. On multi-page websites, the section titles will appear as a submenu item.
    • Section title alignment: Select ‘Left’, ‘Center’, or ‘Right’ to determine the placement of the title within the section.
    • Section colors
      • Section chooser: Select the section style you want to use for this section. Each section style is determined by the colors set in the ‘Edit Theme’ tab.
    • Background image
      • Add image: Upload an image from your computer, select a previously-uploaded image, choose a stock photo from our gallery, or import an image from your Dropbox account.
      • From here there are 3 ways to adjust the image:
        • Focal point tool: Click and drag the blue Focal Point dot to the most important part of the image. This section of the image will stay in view when scaled down to mobile devices. From here you can click the tablet and mobile phone icons in the top right corner to preview how the image will look like from those mobile devices.
        • Dragging the image: Depending on your image size there may be some room to adjust the position. Click and drag the image vertically or horizontally to set it in place. If nothing happens when you click and drag, this means the image is at the maximum size for the space available.
        • Zooming: Use the zoom slider to zoom in or out on the image. After you zoom you can click and drag the image to the position of your choice.
        • Click 'Save' once you've applied the options of your choice
    • Image transparency: Use the slider to set the opacity of the section background image.
    • Scroll effect:
      • Normal: The image covers the section area and scrolls with the content at the same speed
      • Parallax: The image scrolls with the content at a different speed.
      • Fixed: The image stays fixed in the background as the content scrolls.

  • Alignment:

    • Section padding: Using the dropdown, choose the amount of padding you want in this section (none, extra small, small, medium, large, or extra large). Padding adds space at the top and bottom of that specific section.
    • Make section full height: Toggle ‘ON’ to fill the available browser viewport with this section. Toggle ‘OFF’ to have the section area match the size of the feature
    • Content vertical alignment: If the full height section option is toggled on, choose from ‘Top’ or ‘Center’
    • Click ‘Save’

Style options for your section (‘Edit Theme’ tab)

Each website allows for three section styles. This means that all sections using Section Style 1, for example, will display the same colors, regardless of which page they are on.

Note: If you’ve uploaded a section background image it will be unique to that section and page, not applied to other sections across the website.

  1. From the ‘Edit Theme’ tab, scroll to the section you’d like to edit
  2. From the settings pane on the left, click the color swatch
    • Choose a preset color from the swatches
    • Click the color wheel and select a new color
    • Enter the hex code for the color you’d like to use
  3. Adjust each colour setting to suit your site design
    • Content font color: Choose the color of your content font
    • Link color: Choose the color of linked content
    • Title font color: Choose the color for titles
    • Heading 1 font color: Choose the color for heading 1 content
    • Heading 2 font color: Choose the color for heading 2 content
    • Button color: The color of the button (either outline or solid)
    • Button hover color: The color of the button after the visitor places their cursor on it
    • Background color: The color of your section background
  4. Click ‘Save’ at the bottom of the settings pane to apply the changes

Note: The same color options are available for section styles 1, 2, and 3 - these control colors in the corresponding sections of the website.

Warning: If you change themes, custom section colors you’ve applied will not automatically apply to the new theme. If your original theme was saved (or published on your site) it will be listed in the ‘My Themes’ section of the theme chooser. When you switch back to the original theme, all the section customizations saved there will still be applied to your site.

How to reorder sections

  1. From the ‘Edit Content’ tab, hover your cursor over the section you want to move
  2. Click the ‘move’ icon in the top right corner of the section (four arrows)
  3. Select from these options:
    • Up on this page: Moves the section up one place
    • Down on this page: Moves the section down one place
    • To another page: Click, then select the destination page from the dropdown
      • This will be placed at the top of the destination page, repeat the reordering steps to move it lower on the page

How to delete sections

  1. From the ‘Edit Content’ tab, hover your cursor over the section you want to delete
  2. Click the ‘trash’ icon in the top right corner of the section
  3. Under the ‘Are you sure?’ pop-up, click ‘Remove’.

    Warning: Deleting a section will remove all the features contained in it. There is no way to undo this ‘Remove’ action. To add back a feature, you would need to start from clicking ‘Add Feature’ in the ‘Edit Content’ tab.

To see styled sections in action, please check out How to use styled sections to customize your band website design.