The Call to Action tool creates a visually distinct ‘call out’ to your visitors helping to highlight key messages and actions. It can be used to highlight content, link to another page with a participation activity on it, or download a specified document.

The Call to Action Block comprises a short title, a description and up to two action buttons. It can be styled to achieve a variety of looks and should be used strategically to add visual interest and emphasise key information.

🖼️ Examples

Call to action

Get your audience's attention

⚙️Settings

Basic

  • Title - sets the main Call to Action text for the block. The title is limited to 50 characters.
  • Description - sets a short description that can be used as tagline or byline. The description is limited to 25 characters.
  • Button One - adds a button that can be used to fire off an action such as opening a new page or downloading a file. The available options for the button are:
    • Button text - Sets the text displayed on the button (e.g. ‘Take the survey’, ‘View the Results’, ‘Download the Paper’, etc. Button text is limited to 30 characters.
    • Page, link or download - Selects the type of action that will be performed when the button is clicked and includes:
      • Page - Links to an internal page of the site. The page can be selected from the sitemap or it’s url can be directly entered.
      • Link - Links to an external webpage. The pages url must be entered.
      • Download - Downloads a selected file to the user’s device. The file can be selected from the File Manager. Enabling the ‘Open in new window’ option will open the defined webpage in a separate browser tab, leaving the current page open. This is recommended for linking to external sites.
    • Button Style - Sets the look of the button which can be displayed as either filled or outlined.
  • Button Two - adds a second action button next to the first button.

Display

  • Call to Action Style - sets the visual appearance for the Call to Action Block. Two options are available:
    • Solid - Displays a solid colour as the background for the Block (defaults to the primary theme colour of the site).
    • Image - Displays an image as the background for the Block.
    • When an image is used as the background, the image file is given a treatment that both darkens and tints (colourises) it. The colour used in the tinting process is taken from the primary colour used in a site’s theme.
      While the treatment applied to the image helps to give it more contrast between the white text that sits on top of it, it is important to ensure that the image selected has sufficient contrast with the text so that the text remains legible in accordance with applicable accessibility standards.
  • Text Alignment - sets alignment of the content within the Block. Three options are available:
    • Left aligned - Left justifies all text and buttons.
    • Centred - Centres all text and buttons.
    • Right aligned - Right justifies all text and buttons.
  • Block Height - determines the relative height of Call to Action block. Three options are available:
    • Thin - Adds 40px of padding to the top and bottom of the Block.
    • Medium - Adds 80px of padding to the top and bottom of the Block.
    • Large - Adds 80px of padding to the top and bottom of the Block.
  • Full Width - allows the Call to Action Block to be displayed at 100% of the width of the user’s screen. This feature can only be used on Page Templates that do not have Sidebar Content Area such as ‘Narrow’ or ‘Full Width.
    If used on Page Template with a Sidebar, the feature will not initialise.

🎯 Key Actions

  • Under the Basic tab, toggle Button One on.
  • Add button text
  • Choose whether to link to an internal page (Page), an external URL (Link) or a file (Download).
  • If linking to an internal page, use the sitemap function rather than pasting a whole url from another page.
  • Choose your button style (filled or outline).
  • Repeat for Button Two if required.
  • Once complete, select the blue Save button.
  • Under the Display tab choose Image from the Call to Action Style drop-down list.
  • Select Choose New File.
  • The File Manager screen will open.
  • Select your image.
  • Alternatively, upload a new image via drag and drop, or the Upload File button at the top right of the screen.
  • Once complete, select the blue Save button.

Practice tips

  • If using the ‘Image’ option for the Call to Action, try and choose images that are less busy. Images that have less detail, especially behind where the text will be set, will make your content more legible.
  • For best results, try converting your images to black and white and darkening them slightly.
  • Using an ‘Image’ as a background is great way to add visual interest to your site. However, as the image contains colour that sits behind text, you need to ensure that appropriate visual contrast is maintained. Avoid using images that lack contrast, or treat them in a photo editing software to apply an appropriate treatment (e.g. colourise, add gradients, etc.).