The Nocturne theme is classy and understated, with a sleek floating menu over a full width header image.
If you’d like to try the Nocturne template, head to the ‘Edit Theme’ tab. You can change templates any time while retaining your current content. Theme variations are customizable, so you can create your own look and feel for your website.
'Nocturne' Template Features
Header image
'Nocturne' features a full-width header image, nestled below your menu and call-to-action. In the ‘Edit Content’ tab, upload a stunning header image that conveys your vibe. A portrait-style image (longer than it is wide) is ideal to use here.
You can adjust this header image in the ‘Edit Theme’ tab, modifying it as follows:
- Add an image filter
- Use a custom mobile header height
- Adjust the header height
- Apply animations on page load
The interior pages of your ‘Nocturne’ website template do not have a header image. Your menu and logo will appear on the left-hand side.
Title / logo
With the 'Nocturne' template you can use a text title, upload a custom logo, or set this option to ‘none’. The title will appear in your menu area, above your page names. 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 size using the slider
- ‘None’: This option leaves the site title area blank
Navigation menu
The navigation menu is the area where page names are displayed. As clickable text buttons, they will allow your visitors to check out the different pages on your website. In 'Nocturne,' your page names are listed vertically under your ‘Site title,’ in a block on the left hand side, with a customizable background color.
Customize the look and feel of your ‘Nocturne’ menu area using these design options:
- Menu font color
- Menu font hover color
- Submenu background color
- Submenu font color
- Mobile font color
- Menu font: type, style, letter spacing, and upper/lowercase
- Menu bar background color and opacity
- Hover background color and opacity
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. With the ‘Nocturne’ theme, this feature displays at the top of your homepage over your header image and is customizable in the following ways:
- Heading color
- Description color
- Border color
- Border width
- Background color
- Button hover color
- Button shape: Rounded, Square, Pill
- Button style: Solid, Outline
- Alignment: left, right, or center of the header area
- Position: set the call-to-action to the top, bottom, or middle in the header area
- Heading font (font type, style, letter spacing, and upper/ lowercase)
- Description font (font type, style, letter spacing, and upper/ lowercase
Content
The ‘Content’ section defines the fonts and display features throughout your website. This includes your content font and page positioning. The ‘Nocturne’ 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, 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
- Display feature separators: draws a diagonal-dashed line between each feature on your page
- Feature separator color: choose the color of the feature separator
Sections
Organize your website by using section styles. The ‘Nocturne’ theme offers three section styles. You can set the design of the section styles in the ‘Edit Theme’ tab as follows, then apply your choices to your sections in 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
Some of your template features include buttons, such as the ‘Mailing List Sign-up Form’ and the ‘Custom Form.’ Here’s how the buttons can be customized:
- 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 ‘My Sites’
This template includes site-wide social media icons that will display in your menu area below your page names. You can adjust them as follows:
- Button size (increase or decrease the size)
- Button color
- Button hover color
- Button alignment: center, left, right
Variations
The 'Nocturne’ template offers four variations. Each one comes with a base palette of complementary colors and fonts. With each one, you can use the existing settings or adjust the design options as you’d like.
Sombre: A super minimal palette, the dark palette with golden accents make your content pop.
Neutral: A delicate variation, with white and soft pink colors and feature separators applied.
Playful: This variation applies a filter to your header image, which looks great against the turquoise fonts and blue background.
Elegant: Using the opacity options, this variation is subtle and stunning.
'Nocturne' template tips:
- Adjust your menu background color opacity to make your ‘Site title’ and pages stand out.
- Choose different background colors for your ‘Call-to-action header’ and ‘Menu’ to make an interesting color-block effect in your header area.
- Try different section color backgrounds, so you can highlight your different content.
