Frontier is a wide-layout music website template that looks great on any device. Frontier is loaded with features designed to give you complete flexibility - you can customize your website’s flow using custom spacing and section layouts.

To customize your template, head to the ‘Edit Theme’ tab. Along the left side you’ll see options for your current template. You can change templates any time while retaining your current content.

Frontier Template Features

Header image

The landing page offers a space for a header image. In the ‘Edit Content’ tab, choose an image that represents your music and is wider than it is tall. Then, in the ‘Edit Theme’ tab, you can modify the image as follows:

  • Add an image filter
  • Adjust the header height (non-mobile)
  • Adjust the mobile header height
  • Set the animated header elements ‘on’ or ‘off’
  • Set the display of animated lines to:
    • ‘None’
    • ‘Top’ - below title
    • ‘Bottom’ - above menu
    • ‘Top & Bottom’ - title and menu
  • Set the accent border width
  • Set the accent border color

Using the Frontier theme, interior pages of the website will include your site title or logo, plus any applied loading animations. There is no header image on interior pages.

Title / logo

In the Frontier template you can use a text title, upload a custom image, or set this option to ‘none’. The title will appear in the top left corner of your home page. It features the following options:

  • ‘Text’: Enter your 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 display size
  • ‘None’: This option leaves the site title area blank

Navigation menu

The navigation menu is the area where page names display on your website. Page names are clickable buttons that direct visitors to the different pages or your website. Customize the look and feel of your menu using these design options:

  • Menu font color
  • Menu font hover color
  • Submenu background color
  • Submenu font color
  • Mobile menu font color
  • Mobile menu background color
  • Menu font: type, style, letter spacing, and upper/lowercase
  • Inner page menu font: Menu font color, Menu font hover color, Submenu font color, Submenu font hover color

Call-to-action

To draw attention to your latest release, new video, or build up your mailing list, you can use a ‘Call-to-Action’ feature. This feature displays at the top of your homepage and is customizable in the following ways:

  • Heading color
  • Subheading color
  • Border width
  • Border color
  • Background color
  • Button color
  • Button hover color
    • To customize the shape or fill of the button, adjust the ‘Buttons’ section (see below).
  • Alignment: set the call-to-action to the left, right, or center of the header area
  • Position: set the call-to-action to the top, bottom, or middle of the header space
  • Heading font (font type, style, letter spacing, and upper/ lowercase)
  • Subheading font (font type, style, letter spacing, and upper/ lowercase)

Page content

The ‘Content’ section defines the consistent choices throughout your website, such as your content font. With the Frontier template you can adjust these options:

  • Content font: includes 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
  • Column spacing: choose from ‘none’, ‘small’, ‘medium’, ‘large’, or ‘extra large’
  • Page content width: slide the width up to 100% to fill the content area
  • Page content positioning: If the width is not set to 100%, set the content to the left, center, or right side of the page
  • Site background color: choose a color that will apply to your inner pages (header area)

Sections

Use styled sections to make your website content stand out. Up to three section styles can be used for your website. These styles can be applied to blocks of content through the ‘Edit Content’ tab. You can set up the design of the section styles in the ‘Edit Theme’ tab as follows:

  • Content font color
  • Link color
  • Heading 1 font color
  • Heading 2 font color
  • Button color
  • Button hover color
  • Section background color

Buttons

With this template you can customize your action buttons. Look for these in features such as ‘Mailing List Sign-up Form’ and ‘Custom Form’. Here’s how the buttons can be customized to suit your site design:

  • Shape: rounded, square, or pill
  • Style: choose from ‘outline’ or ‘solid’
  • Color (adjust the ‘button color’ setting in the corresponding ‘Section Style 1/2/3’ area)

Site-wide music player

This template features a ‘Site-Wide Player’ feature that can be added through the ‘Edit Content’ tab. The player displays at the bottom of each page on your website. To customize the colours of the player, toggle on the ‘Use custom colors’ option and adjust these settings:

  • Background color (set the color you’d like to use)
  • Text color (‘white’ or ‘black’)

Site-wide ‘My Sites’

This template includes site-wide social media icons that will display in the header area on the bottom right side, opposite your navigation menu. You can adjust them as follows:

  • Button size (increase or decrease the size)
  • Button color
  • Button hover color

Variations

The Frontier template offers four style variations. Each one comes with a base palette of colors that work well together. With each variation you can use the existing colours and simply add content, or adjust the colors and design options as you’d like.

Playful: features teal and white tones and a simple font that makes for a modern look.

Elegant: pared down completely with a white background, this one’s ready for lots of content.

Sombre: Uses black and grey in the default section styles, and minimalist typography.

Neutral: Showcases simple lines, plus white and charcoal colors in the sections.

Frontier template tips

  • Widen your page in the content area to 100% to make your features fill the entire screen
  • To give your ‘news’ section a modern look, add a ‘Blog’ feature set to ‘Carousel view’ with 3 images per slide using a square ratio.
  • In the ‘Photo Gallery’ feature, choose the square option, and then set your column spacing to ‘0’. The images there will touch at the sides, giving your gallery a modern grid display.