Skip to main content

Call to Action Module

Best Practices

  • The call to action module is designed to feature a single idea and link users to more information. It is not designed to contain dense information.
  • Use the call to action module with a short, attention-grabbing headline and image.
  • Give the user a bit more detail in the blurb, but save the in-depth information for the page you link to.
  • If you have multiple modules with button links on the same page, avoid repeating the link text ("learn more," etc.). See example link text.
  • Choose an appropriately sized image. See the call to action image library.

To create a new call to action module:

  1. From the New Content menu, click Modules->Call to Action. The module will be placed in the _modules folder by default. You can create multiple sub-folders within _modules as needed (similar to images and files). To create multiple instances of this module, copy the module and rename it. Edit each module separately.
  2. Click Edit to bring up the edit screen.
  3. Complete these fields:
    • Headline (all caps):
      • Approximately 25 characters per line
      • Maximum two lines
    • Blurb (single text area with sentence case):
      • Brief is better. Approximately 100 words = 8-9 lines.
      • Keep it simple: No formatting is available in this section, including paragraphs
    • Button Text (All caps link text in a yellow box):
      • Use as a call to action (CTA)
      • Maximum 30 characters
    • Link Type: Choose internal or external
    • Internal/ External Link: Select your internal link or enter your external link
    • Style: Choose 'Light' for the default, white background and 'Dark' for a shaded background
    • Media Position: Choose Left or right
    • Media Type: Select Image to upload an image, WYSIWYG to enter video embed code, or Trident Graphic to use the yellow trident background.
    • Image: Choose or upload an image.

Examples

1) CTA: Left Image Dark Style

HEADLINE: Approx 25 characters per line, 2 line max. SINGLE TEXT AREA: Approximately 100 words = 8-9 lines max. Text does not break into paragraphs. BUTTON: link with call to action (CTA) all caps statement (e.g., MEET THE STAFF). Beside IMAGE: Image size: 550 x 370 pixels.

Call to Action Instructions

Important: add image description

2) CTA: Right Image Light Style

HEADLINE: Approx 25 characters per line, 2 line max. SINGLE TEXT AREA: Approximately 100 words = 8-9 lines max. Text does not break into paragraphs. BUTTON: link with call to action (CTA) all caps statement (e.g., MEET THE STAFF). Beside IMAGE: Image size: 550 x 370 pixels.

Call to Action Instructions

Important: add image description

3) CTA: Trident Graphic background

HEADLINE: Approx 30 characters. SINGLE TEXT AREA: No specific length. BUTTON: link with call to action (CTA) all caps statement (e.g., Meet the Staff). IMAGE: No image. Background design is Trident Graphic.

Call to Action Instructions

4) CTA: WYSIWYG block for Video

HEADLINE: Approx 30 characters. SINGLE TEXT AREA: Approx length 80 words, depending on video height. BUTTON: link with call to action (CTA) all caps statement (e.g., Meet the Staff).

Call to Action Instructions

Embed code for Video here in the Code View.

What not to do

Text problems:

There is too much text in this module.

  • The headline and blurb is too long. The module is stretched vertically. This is particularly noticeable with the dark style.
  • The button text is too long. The button longer than the text box and floats past the edge.

What Not to Do: Put Too Much Text in the Headline, Blurb, or Button

HEADLINE: Approx 25 characters per line, 2 line max. SINGLE TEXT AREA: Approximately 100 words = 8-9 lines max. Text does not break into paragraphs. BUTTON: link with call to action (CTA) all caps statement (e.g., MEET THE STAFF). Beside IMAGE: Image size: 550 x 370 pixels. HEADLINE: Approx 25 characters per line, 2 line max. SINGLE TEXT AREA: Approximately 100 words = 8-9 lines max. Text does not break into paragraphs. BUTTON: link with call to action (CTA) all caps statement (e.g., MEET THE STAFF). Beside IMAGE: Image size: 550 x 370 pixels. HEADLINE: Approx 25 characters per line, 2 line max. SINGLE TEXT AREA: Approximately 100 words = 8-9 lines max. Text does not break into paragraphs. BUTTON: link with call to action (CTA) all caps statement (e.g., MEET THE STAFF). Beside IMAGE: Image size: 550 x 370 pixels.

Learn how to insert a Call to Action module in your V5 CMS site here at UC San Diego

Important: add image description

Image problems:

Your image should not be text-dependant.

  • For text, use the headline, blurb and button.
  • Text in an image is inaccessible and excluded from search.
  • See the call to action image library.

What not to do: Too much text in image

Screen readers can't read text in an image. This is an ADA accessibility issue. Search engines also can't read text in an image, which can impact your search ranking.

Working with Images

Important: add image description