Skip to main content
CMS Example Site CMS Example

Call to Action Inset Module

Use the call to action inset module like you would the call to action module. The main difference is that this module has a background image with an inset text box floating over it.

Best Practices

  • The call to action inset 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 inset 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 a background image that will still display well when approximately half of it is covered by the text box. See the call to action inset image library.

To create a new call to action inset module:

  1. From the New Content menu, click Modules->Call to Action Inset. 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:
    • Block name: This will default to "call-to-action-inset". Change it to something that describes the module.
    • 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
    • Box Position: The text box can be aligned on the right or left side of the image 
    • Link Type: Choose internal or external
    • Internal/ External Link: Select your internal link or enter your external link
    • Background Type:
      • Image (upload your own): Choose or upload an image. 
      • Default (pre-canned background): Select one of four options (see examples below)

Examples

Call to Action Inset: Right Box Position

HEADLINE: Sentence case. BLURB: Sentence case, no formatting. BUTTON TEXT: All Caps, link. IMAGE: 1200 x 388 pixels in the background. Text box will float over image.

The Call to Action Inset

Call to Action Inset: Left Box Position

HEADLINE: Sentence case. BLURB: Sentence case, no formatting. BUTTON TEXT: All Caps, link. IMAGE: 1200 x 388 pixels in the background. Text box will float over image.

Call to Action Inset

Pre-canned option: One Grit Orb

HEADLINE: Sentence case. BLURB: Sentence case, no formatting. BUTTON TEXT: All Caps, link. IMAGE: 1200 x 388 pixels in the background. Text box will float over image. Text box can still be placed on either right or left.

The Call to Action Inset

Pre-canned option: Two Grit Orbs

HEADLINE: Sentence case. BLURB: Sentence case, no formatting. BUTTON TEXT: All Caps, link. IMAGE: 1200 x 388 pixels in the background. Text box will float over image. Text box can still be placed on either right or left.

The Call to Action Inset

Pre-canned option: Two Grit Orbs Light

HEADLINE: Sentence case. BLURB: Sentence case, no formatting. BUTTON TEXT: All Caps, link. IMAGE: 1200 x 388 pixels in the background. Text box will float over image. Text box can still be placed on either right or left.

The Call to Action Inset

Pre-canned option: Grit Pattern

HEADLINE: Sentence case. BLURB: Sentence case, no formatting. BUTTON TEXT: All Caps, link. IMAGE: 1200 x 388 pixels in the background. Text box will float over image. Text box can still be placed on either right or left.

The Call to Action Inset

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, warping the background image.
  • 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: Sentence case. BLURB: Sentence case, no formatting. BUTTON TEXT: All Caps, link. IMAGE: 1200 x 388 pixels in the background. Text box will float over image.HEADLINE: Sentence case. BLURB: Sentence case, no formatting. BUTTON TEXT: All Caps, link. IMAGE: 1200 x 388 pixels in the background. Text box will float over image.HEADLINE: Sentence case. BLURB: Sentence case, no formatting. BUTTON TEXT: All Caps, link. IMAGE: 1200 x 388 pixels in the background. Text box will float over image.HEADLINE: Sentence case. BLURB: Sentence case, no formatting. BUTTON TEXT: All Caps, link. IMAGE: 1200 x 388 pixels in the background. Text box will float over image.

Learn More About The Call to Action Inset Module By Clicking on this link, which will bring you to a page with further instructions

Image problems:

This is not a good background image.

  • This person is obscured by the text box. Landscapes make good background images - people and groups of people do not.
  • The image should not be text dependent. Avoiding text in images is a general best practice, but it is an even more obvious issue in a background image that has floating text.
  • See the call to action inset image library.

Call to Action Inset with Image issues

HEADLINE: Sentence case. BLURB: Sentence case, no formatting. BUTTON TEXT: All Caps, link. IMAGE: 1200 x 388 pixels in the background. Text box will float over image.

The Call to Action Inset