Folwell Transparent Overlay Callouts

What are they?

Callouts are groupings of text that are stylized with different color and photo combinations. In CSE Web, there are two ways to create callouts:

  1. You can create text callouts within a paragraph using the CKEditor.
  2. You can create text and/or photo callouts on advanced and unit landing pages using either the Folwell Callout widget or the Folwell Transparent Overlay Callout widget.

This page is an overview of the second option—creating callouts using the Folwell Transparent Overlay Callout widget. Note that these styles appear slightly different from the overlay options in the Folwell Callout widget. Learn more about and see examples of the Folwell Callout widget.

For more examples of CKEditor callouts, visit the Web Training & Resources callout example page.

A screenshot of the Transparent Overlay Callout widget
Above: Two examples of the Folwell Transparent Image Overlay widget

How do I use them?

While editing an advanced or unit landing page, navigate to the widget drop-down menu and select "Folwell Transparent Overlay Callout." Add a photo and the text you'd like to include to the "Callout text" paragraph field below.

Note: An image is required on the Folwell Transparent Overlay Callout widget. The widget will not appear correctly without a photo. 

Folwell Transparent Image Overlay editing fields
Above: Folwell Transparent Image Overlay editing fields

Display options

In the two drop-down menus, you can choose from multiple background color options and choose where you want text to appear overlaid on the photo.

Transparent Overlay widget style options
Above: Folwell Transparent Image Overlay widget style options

Which type of callout should I use?

Below is a list of the differences between the callouts you create within the CKEditor and the callout widgets. 

Folwell CKEditor callout:

  • Cannot include images
  • Only includes one heading and one space for text
  • Cannot include a link in the heading
  • Can include bulleted lists / numbered lists
  • Can set the width within the paragraph space
  • Can align the callouts to the left or right of text

Folwell Callout widgets:

  • Can include images
  • Includes more style options
  • Can include multiple headings, blocks of text, and links
  • Can include links in headings
  • Can use bulleted lists / numbered lists
  • Cannot set the width within the paragraph—the callout will take up 100% width of whatever column it is in
  • Cannot set the float/alignment—it is displayed as a full-width block

Depending on the layout of your page, it may be easier for you to use the CKEditor callouts or the widget callouts, or a combination of both. The best way to find this out is to try both.