Skip to content

Callout Box

Resources

Watch Video

Callout Box

Callouts allow you to create stylized boxes for featured content. These boxes give users a visual cue that the information is important and offset the featured content from the rest of the page. Your callout can also include a call to action button, as in the Read More button below,  or a simple link.

Read More

Create a Callout Box

  1. Navigate to the desired page and click Page Editor in the header bar.
  2. Click the + plus icon in the header bar.
  3. Ensure the Modules tab is selected.
  4. Drag and drop Callout onto your page.
  5. On the General tab:
    • Enter a Heading for the callout, and customize the Heading Tag.
    • Enter the Text you wish to display in your Callout. You are given the same text editing functions as in the text editor.
  6. On the Style tab, you can customize the appearance of the callout box, headings & text:
    • Background Color: Allows you to set the background color for the callout box.
    • Border: Allows you to format the border surrounding the callout box. You will be able to customize the border style, color, and width.
    • Alignment: Allows you to set the alignment for all elements within the callout box.
    • Padding: Allows you to adjust the space between your content and the edges of your callout box.
    • Heading: These settings allow you to customize the heading. Changes can be made to the color, font, and other typography options.
    • Text: These settings allow you to customize your text. Changes can be made to color, font and other typography options.
  7. On the Image tab, you will be able to add and customize the image displayed in your callout box:
    • Image Type: Choose None, Photo, or Icon.
    • Icon/Photo: Dependent on the image type you have chosen, you will now click the Select Photo or Select Icon link. Selecting photo will open the media library where you can choose an existing photo, or upload a new photo. Select Icon will open the Icon library. Position allows you to place the image in relation to the text in the callout box (above, below, right, left).
    • Image Style options allow you to set the crop on the image.
  8. On the Link tab, you can set a hyperlink URL and set the call to action type
Scroll To Top