Creating Callouts

A callouts is a visual element that can be added to your Stacks site to call attention to important information, features, or direct users to other areas in Stacks or websites outside of Stacks.

A single callout can contain up to 4 blocks, each block can contain its own title and image (both of which can by hyperlinked), description, and additional related links. Multiple callouts can be created and added to your homepage or any other landing pages you have created. This article will discuss both creating callouts and how to add them to a landing page. 

How to Create a Callout

1. From the Dashboard, click the Callouts tile
2. Click Add Callout, in the window that opens:
   1. Title, enter a title for the callout
      1. Tip! This title is used for both administrative purposes and will be the default heading that can be displayed when the callout is added to a landing page
   2. Language - select the appropriate language value from the list
   3. Click the Add Callout button, this will open a set of fields allowing to add the content for the first block within the callout
      1. Title, enter a title for the block (optional)
         1. Tip! If a Link is added (discussed in step 3) clicking this title will direct the user/patron to the location added in the link field
      2. Image - click the button to browse for and select existing image or upload a new image that will be displayed within the callout block
         1. Tip! For an optimal user experience see the Recommended Image Sizes article for guidance when uploading/selecting images. Also, if a Link is added (discussed in step 3) clicking this image will direct the user/patron to the location added in the link field
      3. Link - add a URL to this field, users will be directed to this url when the title or image is clicked
         1. Tip! Links to external websites should always use the full URL (eg: https://website.com); whereas, links to internal Stacks pages should always use the URL alias (eg: /events)
      4. Description - enter the details you wish to display as a description under the image (if adding an image)
         1. See the WYSIWYG editor article for more information on formatting options and field functionality  
      5. Additional Links - click the Add Link button if additional links are required, add the appropriate URL and Link Text as needed
         1. Patrons/users will see these links will below the description, if one has been added
3. Click Add Callouts button below the Additional Links fields to add more callout blocks and repeat the steps above as needed, adding up to 4 blocks within the callout
4. Review and configure the Publishing workflow as needed
5. Click Save

For more information on how to add a callout to your homepage or any other landing page, see the article Adding Callouts to a Landing Page. For more information on editing callouts, removing callouts from a landing page without deleting the callout, or how to delete a callout, please see the article Editing and Deleting Callouts.