Call to Action Component

Showcases the Call to Action component. [3:24]

Two options for completing this exercise...
  1. Request a Self-Paced account on the Training Server. Then just follow the instructions as is.
  2. If you already have access to the main Author Server, adapt the instructions to fit your own site.

Scope

Call to Action components provide a highly visible link on the page, which prompts visitors to click to take an action or learn more. They are quite common on UBCMS pages.

For accessibility reasons, always provide a clear statement about the link’s purpose, so visitors have a clear understanding why they should click the link, or where it will take them, so they are not surprised or confused. All your links should make sense if they are viewed (or heard) completely out of context.

Instructions

1. Log into the UBCMS.

2. Open the Sites Console and navigate to your site; e.g. Sites + Self-Paced Training + {your site}.

3. Choose any page on your site or create a new page.

4. Select that page and click Open in the Commands Menu that now appears.

5. To add a component...

  • Click the Toggle Side Panel button in the upper left of the window.
  • Switch to the Component Browser.
  • Components are listed alphabetically. Or type part of its title and click Enter.
  • Find your desired component and drag it onto the page.

6. Note how the component appears initially, with some filler text: "Learn more."

7. Select the component, then click the wrench icon to Configure it. (The pencil icon allows 'edit in place' of just the text words.)

  • Title: Make the text meaningful; e.g. “Learn more about the Alumni Association.”
  • Link: For a page outside the UBCMS, the complete URL is required, such as http://, as well as the rest of the URL, such as alumni.buffalo.edu. To link to another part of the UBCMS, click the magnifying glass and navigate to that page.
  • Open in new window: Makes the link open in a new tab.
  • Size: Large is the default. Choose a smaller size when desired.

8. Click the checkmark icon when you are done. (The 'X' cancels your changes.)

Best practice: we recommend using the largest size when you have a small number of links, like one or two. When you have a half dozen, consider switching to the medium size. And when you have a dozen or more, consider the smallest size, so the volume of links do not overpower the entire page.

Be cautious selecting the 'Open in New Window' setting. Unexpected website behavior, like having a link open a new tab can confuse your visitors especially in mobile devices.

Additional Reading