The ‘Call-to-Action Header’ feature is ideal for encouraging visitors to your website to perform a specific action. This could be collecting new mailing list signups, getting more sales on a new album, selling tickets to an upcoming gig or promoting a new merch item. Place a call-to-action in your website’s header as a marketing tool to increase engagement.
This help article includes the following:
- How to add the “Call-to-Action Header’ feature to your website
- ‘Call-to-Action Header’ display formats
- Alignment and Position options
- Heading and Subheading options
- Link types
- Mailing list signup options
- How to customize font, colors and styling
How to add the “Call-to-Action Header’ feature to your website
- From the ‘Edit Content’ tab, click ‘Add feature’ on the left
- Select the 'Call-to-Action Header' feature
'Call-to-Action Header' display formats
There are two different display formats provided for your call-to-action header. The first is a text and button combination to redirect traffic to a specific page of your site or to download a file. The second is to display a mailing list signup form to collect new subscribers for your email list. You’ll be able to adjust the header and subheader text as well as the alignment of the 'Call-to-Action Header' within each of these two display formats.
- Text and button: Heading and Subheading text along with a button below
- Mailing list signup: Title and Description text with a fillable mailing list signup form
Alignment and Position options
The Alignment and Position settings allow you to control where the call-to-action box displays over your website’s header. Use these options to prevent it from covering up important parts of your header image and also manage how it looks alongside your site title or logo.
Alignment
- Left: Left-aligns the call-to-action box over the header image
- Center: Horizontally centers the call-to-action box in the header
- Right: Right-aligns the call-to-action box over the header image
Position
- Top: Positions the call-to-action at the top of your header image
- Middle: Vertically centers the call-to-action box in your website’s header
- Bottom: Positions the Call-to-Action at the bottom of your header image
Heading and Subheading
With the ‘Text and button’ display format, the Heading and Subheading text are used to let your visitors know what action you’d like them to take. For example, you could promote your new album with a buy button, or mention a limited time sale in your merch store. Use the Heading text as a title and the Subheading as a description.
- Heading: Displays first at the top of your call-to-action box
- Subheading: Smaller text that displays just under the Heading text
Note: The fonts and font size of your Heading and Subheading can be adjusted in your Edit Theme tab, which we’ll cover in the last step.
'Link Type' options
This is where you can select the link type that will be applied to the button in your call-to-action. Set up the button to direct to a specific page of your site, an external url, or a file download.
The different Link type options for your call-to-action button are:
- No link: Choose this option if you want to remove the button from your Call-to-Action Header.
- An external page: Enter the url for an external page where you want the button to redirect
- Open in new window: Toggle this on if you’d like the URL to open in a new browser window when your call-to-action button is clicked.
- One of my pages: Select a page to redirect to from a list of your existing pages in the drop-down menu
- A file: Select from a drop-down list of existing files on your site to link to. If this option is selected, the file will be downloaded immediately once the call-to-action button is clicked.
- An email address: When visitors click the button, their default native email platform will open with your address automatically populated in the “To:” field. Enter your email address in the provided box.
- Album: Link to a page containing an album from your website, where it can be streamed or purchased.
- Track: Link to a page featuring a specific track from your website for streaming and/or sale.
- A Page PDF File: Select one of your pages from the drop-down. With this option selected, a PDF file with the page’s contents will be downloaded when the call-to-action button is clicked.
Button text: Customize the text that will display on your call-to-action button.
Mailing list signup options
Customize the text that will display above the mailing list signup form in your call-to-action header. Here you’ll want to encourage visitors to leave their email address by letting them know they can keep up with the latest news, tour dates, or even get a free download in exchange for subscribing.
- Title: Similar to the Heading in the ‘Text and button’ display format, this will be larger text that displays first in your call-to-action box.
- Description: Displays in a smaller font below the title. Use this to describe what kind of news they’ll be receiving after subscribing, or the free download that they’ll get in return.
- Add signups to group: Automatically add new signups through the call-to-action to a specific contact group in your Mailing List tab > Manage Members.
- Free download: Select from a list of files uploaded to your site in the drop-down here. This file will automatically be sent to new mailing list subscribers.
How to customize the font, colors and styling of your 'Call-to-Action Header' feature
The call-to-action feature will by default use the Heading font you already have selected in your Edit Theme tab, under the ‘Content’ controls. This can be fully customized just for the call-to-action to give it a unique look that stands out on your Home page.
To customize your call-to-action, follow these steps:
- Click on your Edit Theme tab
- Scroll down in the control panel on the left to the ‘Call-to-action header’ settings
- Heading color: This will be applied to the ‘Heading’ text in ‘Text and button’ display and the ‘Title’ text in the ‘Mailing list signup’ display.
- Subheading color: Change the color of the Subheading text in the ‘Text and button’ display.
- Description color: Choose a color for your description text if using the “Mailing list signup’ display format.
- Border color: If using a border around your call-to-action box, click the Border color control to adjust its look.
- Border width: Adjust the thickness of the border around the call-to-action box. Setting this to “0” will remove the border completely.
- Background color: Set a solid color background for your call-to-action box
- Button hover color: Choose a color for the button to change to when hovering your cursor over it
- Button shape: Choose the display style of your call-to-action button
- Rounded: A rectangular shape with slightly rounded corners
- Square: A fully rectangular button shape
- Pill: Use more of an oval shape
- Button style: Choose the fill option for you button.
- Solid: Button will have a solid color fill
- Outline: The button color will be applied to an outline of the shape, but have a transparent interior
- Button color: Choose the color for your call-to-action button
- Heading font: Customize the Heading and Title fonts
- Font size: Choose the size of the font
- Line height: Customize the distance between the Heading and Subheading text
- Letter spacing: Increase or decrease the distance between the letters in your text
- Uppercase: Toggle on this control to set all letters as uppercase
- Subheading font: Customize the Subheading font in the “Text and button” display format
- Font size: Choose the size of the font
- Line height: Customize the distance between the Heading and Subheading text
- Letter spacing: Increase or decrease the distance between the letters in your text
- Uppercase: Toggle this control on to set all letters as uppercase.
- Description: Customize the Description font in the “Mailing list signup” display format
- Font size: Choose the size of the font
- Line height: Customize the distance between the Heading and Subheading text
- Letter spacing: Increase or decrease the distance between the letters in your text
- Uppercase: Toggle this control to set all letters as uppercase
