The ‘Call-to-action’ 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’ feature to your website
  • ‘Call-to-action’ display formats
  • Alignment and Positioning 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’ feature to your website

  1. From the ‘Edit Content’ tab, click ‘Add feature’ on the left
  2. Select the 'Call-to-action' feature

'Call-to-action' display formats

There are two different display formats to choose from your call-to-action header. The first is to use a text and button combination to redirect traffic to a specific page of your site or to download a file. The second is to set up 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 with 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 positioning options

The Alignment and Positioning settings allow you to control where the call-to-action box displays over your website’s header. Use these 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: Centers the call-to-action in the header
    • Right: Right-aligns the call-to-action box over the header image
  • Positioning

    • Top: Positions the call-to-action at the top of your header
    • Middle: Centers the call-to-action vertically in your website’s header
    • Bottom: Call-to-action will be 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

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:

  1. No link: Choose this option if you want to remove the button from your call-to-action header.
  2. 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 on.
  3. One of my pages: Select a page to redirect to from a list of your existing pages in the drop-down menu
  4. A file: Select from a drop-down 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.
  5. 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.
  6. Album: Link to a page containing an album from your website, where it can be streamed or purchased.
  7. Track: Link to a page featuring a specific track from your website for streaming and/or sale.

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 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:

  1. Click on your Edit Theme tab
  2. 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 for your button
    • 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