A call to action (CTA) should encourage a user to carry out an action, for example, book on an open day, make an enquiry or purchase something.
The style is achieved by applying a class to your link. Use this method for stand-alone links only. Don't apply the style to a link mid-sentence.
How to create a call to action button
Within your page:
- Type your link text
- Highlight your text
- Create your hyperlink using the Insert/Edit Link button
- In the standard link properties, click within the CSS class box and select your CTA class (choose from the options below)
- Save link properties
To ensure the best possible results, there are a number of things to be aware of:
- Ensure each new CTA is created in a new paragraph, this will keep them all evenly spaced
- You can force your text to fall onto the next line by inserting a line break (Shift+Enter) - but do this after you've applied your link and class otherwise it might break
- Don't use too many CTAs on a page - they are supposed to guide the user to the main action you want them to take from that page
Which classes to choose?
We hope the class names are intuitive (for example, CTA-plainArrow for a basic arrow). However, if you're struggling to decide which to use, here's a hint:
- Any beginning with CTA-plain are the lighter and less obtrusive CTAs - a light neutral background is applied
- Those beginning with just CTA- have a blue background from the university colour palette
- If you want to change the CTA class, go back into the link properties and remove the current class and apply a new one
Available CTAs
Please note, there may be slight style differences from how these look below when using these on the left side menu template.
Additional classes
Your CTA button will fill the width of whichever column size it is placed in.
If you want to limit your button to the size of the text within it, you can also apply the following class, after your chosen button class:
CTA-Arrow CTA-ActualWidth