Callout Content Module
Best Practices
- The callout content module is designed to call out 2 to 4 related ideas, such as courses for undergraduates and graduates, or 2 or 3 key resources. If you have more than 4 related ideas to call out, you should use a call to action module instead. The call to action can send people to a page where you can break down the related ideas in more detail.
- The first headline should be what the content in the boxes have in common ("courses," or "resources").
- The individual callout box headlines should be what distinguishes the content from each other ("undergraduate," "graduate").
- Give the user a bit more detail in the blurb, but save the in-depth information for the page you link to.
- Avoid repeating link text in the callout boxes ("learn more," etc.). See example link text.
- Choose a background image that will still look good when covered by the semi-transparent callout boxes. See the callout content image library. The image library was developed with 2-3 boxes on a homepage template in mind. If you are using 4 boxes and/or a different template, be sure to test your module on a variety of screen sizes.
To create a new callout content module:
- From the New Content menu, click Modules->Callout Content. 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.
- Click Edit to bring up the edit screen.
- Complete these fields:
- Block name: This will default to "callout-content". Change it to something that describes the module.
- Top material: Optional text displayed outside of blue boxes (will be over image directly - plan image accordingly)
- Headline: White, sentence case, Formatted as heading 2
- Headline Break: As Headline, indented
- Blurb: Smaller sentence case, white
- Button Text: All caps link text in a yellow box
- Link Type: Choose internal or external
- Internal/ External Link: Select your internal link or enter your external link
- Callout Box Link Settings
- Callout Box Link Type: Choose what text will act as a link
- Headline as link text: Headline acts as link, no 'Button Text' field
- Dedicated link text: Default option, creates a separate 'Button Text' to use as a link
- Callout Box Link Type: Choose what text will act as a link
- Callout Boxes: 2-4 blue boxes. Use green + to add a box, red X to delete and arrows to change order.
- Headline: White, sentence case
- Formatted as heading 3
- Maximum 25 characters
- Blurb: Single text area with sentence case):
- Brief is better: Approximately 25 words = 4 lines for 2 boxes
- Keep it simple: No formatting is available in this section, including paragraphs
- Brief is better: Approximately 25 words = 4 lines for 2 boxes
- Button Text: White, all caps link text, underlined (only present if 'Dedicated link text' was selected)
- Note: Formatted as link text, not a button
- Maximum 30 characters
- Link Type: Choose internal or external
- Internal/ External Link: Select your internal link or enter your external link
- Headline: White, sentence case
- Text Box Color: Choose one of the following (do not use navy with the Grit Texture Background):
- Blue - Opaque
- Blue - Semi-transparent
- Navy - Opaque
- Navy - Semi-transparent
- Background Options: Choose one of the following:
- Image:
- 1200 x 410 pixels for homepage template with 2-3 boxes. If you are using 4 boxes, a large amount of text, or on a different template, be sure to test your module on a variety of screen sizes.If needed, you can use a larger image.
- This is a background image that will be covered by semi-transparent text boxes. Landscapes and abstract images work well but people do not.
- See the callout content image library.
- Choosing an image is required
- Text Color: Light (default) or Dark (if you are using a lighter image)
- 1200 x 410 pixels for homepage template with 2-3 boxes. If you are using 4 boxes, a large amount of text, or on a different template, be sure to test your module on a variety of screen sizes.If needed, you can use a larger image.
- White Background: Image selection disabled. All white text in top material will be changed to dark text.
- Sand Background: Image selection disabled. All white text in top material will be changed to dark text.
- Grit Texture Background: use the Grit Texture background (see example below). Note: Do not use this with Navy text boxes as they will blend in with the navy background.
- Image:
Examples
Callout Content with 2 boxes
Headline break
Two Text Boxes
HEADLINE: Sentence case, white text, outside of the two or three boxes. CALLOUT BOX HEADLINE: Sentence case inside the boxes. BLURB: Sentence case, no formatting. BUTTON TEXT: All caps underlined text.
Use Informative Link Text
Avoid text like "click here" or "more" for your link text.
Make the Headline Your Link
Use the "Headline as link text" option to avoid coming up with additional link text. The News With Images module also has this option.
Don't Repeat Link Text
The "Headline as link text" option also helps you avoid repeating the headline as the dedicated link text below.
Callout Content with white background
Text above the Callout Boxes will automatically be made darker
Two Text Boxes
HEADLINE: Sentence case, white text, outside of the two or three boxes. CALLOUT BOX HEADLINE: Sentence case inside the boxes. BLURB: Sentence case, no formatting. BUTTON TEXT: All caps underlined text.
Spacing
Although there is no background image, that space is still taken up by whitespace. Plan your content above and below the module accordingly. Remember that you can have WYSIWYG content that isn't in a module.
Callout Content Grit Texture
Two Text Boxes
HEADLINE: Sentence case, white text, outside of the two or three boxes. CALLOUT BOX HEADLINE: Sentence case inside the boxes. BLURB: Sentence case, no formatting. BUTTON TEXT: All caps underlined text.
Callout Content with 4 boxes
This is using semi-transparent boxes with a custom image
Image Size
The standard 1200 x 410 pixel background image is designed for 2 or 3 boxes.
Test Image
Make sure you test your image on multiple screen sizes to make sure it displays well.
What Not to Do
Text problems:
There is too much text in this module.
- The blurb and link text is too long. The module is stretched vertically, warping the background image.
- The text in the boxes is uneven. The module has a lot of wasted space.
Callout Content
Two or Three Text Boxes
This box has too much text. It looks very uneven when you compare it to the other boxes in this module. Having one set of text much, much longer than the others creates a large amount of unused space. If you can't find a way to shorten a large amount of text, then you should try moving the longer text out to a different module. If you try to keep the text boxes fairly close in length, you won't have an issue with unused space. But the text can still be difficult to read if all of the text boxes are long. Just use this space to highlight an idea and drive traffic to a page with more content on it.
Third Box
Be careful with the amount of text you use in the boxes. Too much can be difficult for users to scan.
Image problems:
This is not a good background image.
- This person is obscured by the text boxes. 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.
- Avoid light/ white images. Since the Initial Headline text of the module is white, you need a darker background for contrast.
- See the callout content image library.
Callout Content
Two or Three Text Boxes
HEADLINE: All caps, white text, outside of the two or three boxes. CALLOUT BOX HEADLINE: All caps inside the boxes. BLURB: Sentence case, no formatting. BUTTON TEXT: All caps underlined text.