Call to Action (CTA) block

What do web editors use a CTA block for?

This is a handy block that includes a header, text field and button - making it an easy way to signal to the user that there is an action they can take.

Which layout can CTA blocks be used in?

CTA blocks can be used in any of the one to four column layouts. They can be placed on colour background and have colour accessibility built in. If you move blocks or change the background colour after a block has been place, remember to update the block to reset the accessibility colours.

Who can use CTA blocks?

Builders and Super Builder can create and edit CTA blocks.

CTA tutorial CTA examples

CTA tutorial

Step-by-step instructions

  1. Choose “CTA” in the add custom blocks menu.
  2. Title: This is an administrative title that will be used to identify the block and not displayed on the website. 
  3. Header: The is an optional field to display a header above the body text. 
    • Header will be set as an H2 by default but you have the option to change it. Note: Only use H1 if this is being used as a header/title for the page. H2 for any section header. H3 to break up content within the section. Never mix and match header sizes, this will confuse screen readers and make the site less accessible.
    • You will have a choice of heading colours depending on the choice of background colour selected. 
  4. Body: This is an optional field to display a chunk of text using a WYSIWYG (what-you-see-is-what-you-get) text editor where you can type or copy paste text into. If you copy paste make sure you always clean the formatting after you paste. Do this by highlighting the text and clicking on the clear formatting icon (Tx) on the top ribbon.  This will remove any unnecessary formatting copied over from a word doc or pdf file.
  5. Button: This is where you have the option to add up to four buttons. Style options will change depending on the background colour chosen. 
    • For internal links: start typing the name of the page or media item (pdf) in the URL field and select the page you want to link to.
    • For external link: copy paste the external link.
    • Type in the link description into the link text field.
    • For external links or pdf files: click on attributes and select new window for the target.
  6. Click on "Update" to save the block.

CTA examples

Sed a nulla ut sapien consequat faucibus. Morbi et metus non metus suscipit elementum feugiat id turpis. Maecenas at massa at eros vestibulum vehicula. Suspendisse ut magna nulla. Integer efficitur, massa mattis blandit fringilla, arcu purus tristique est, eget molestie quam odio eu nisi. Praesent in velit ligula.

Button text here

CTA H2

Proin convallis mauris non nibh egestas ullamcorper. Donec finibus mauris ac tortor pellentesque, eu vestibulum arcu placerat. Nam luctus eu justo sit amet porta. 

Button text here

CTA H2

Nulla imperdiet erat ut volutpat commodo. Fusce justo justo, fermentum id pellentesque porta, facilisis eu dolor. Ut pretium at quam id porttitor.

Button text here

CTA H2

Vestibulum vel consectetur est. Etiam ligula lorem, fermentum ut velit eget, interdum laoreet felis. Sed imperdiet fermentum dolor non dictum.

Button text here

CTA example with a section background

Sed a nulla ut sapien consequat faucibus. Morbi et metus non metus suscipit elementum feugiat id turpis. Maecenas at massa at eros vestibulum vehicula. Suspendisse ut magna nulla. Integer efficitur, massa mattis blandit fringilla, arcu purus tristique est, eget molestie quam odio eu nisi. Praesent in velit ligula.

Button text here

CTA H3

Nullam sollicitudin congue urna, eu convallis metus facilisis a. Praesent non sagittis ante. Vivamus eget ligula eleifend, pretium arcu vitae, mollis nunc. Etiam risus lorem, iaculis eget mollis in, viverra volutpat ipsum. Curabitur non purus enim. Curabitur vestibulum enim quis augue interdum gravida ac nec arcu. Proin nec enim quis leo tempor bibendum. Aliquam suscipit blandit lacinia. Donec fringilla at nulla ac vestibulum. Integer feugiat ex sed leo luctus tincidunt. Praesent sollicitudin mollis eros, at vulputate orci vehicula sed.

Button text here