Creating Callouts

Callouts are a great 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. 

Once you have created one or more callouts, you can then navigate to the layout builder and begin adding them to landing pages. 

To create a callout:

1. From the Dashboard, click Callouts
2. Click Add Callout, then in the window that opens, complete the fields as needed:
   1. Title -  add a title for the callout
      1. This title is for administrative purposes and will be the name that appears in the list of callouts on your dashboard
   2. Language - select the appropriate language value from the list
   3. Click the Add Callout button just below the language field, a section will appear to add the details for a single callout block
      1. Title - this is the title for the callout block
      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. For an optimal user experience see the Recommended Image Sizes article for guidance when uploading/selecting images
      3. Link - add a URL to this field, users will be directed to this url when the title or image is clicked
         1. For links to external websites be sure to use the full URL (eg: https://website.com)
         2. For links to Stacks internal pages 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 

Adding a Callout to a Landing Page

Once a callout has been created, it can be added to any landing pages on your Stacks site. 

1. Navigate to the page you wish to add the callout to
2. Click the Layout tab just below the header
3. If needed, add a new section to the landing page, otherwise go to step 4
   1. To add a new section
      1. Click + Add section
         1. A window will open with 3 layout options
            1. 1 column, the section will be the full width of the content area
            2. 2 column, the section will be split into two columns both 50% of the content area
            3. 3 column, the section will be split into three columns, with an additional option to choose between either a 33%/34%/33% split OR a 25%/50%/25% split, select the appropriate option
         2. Administrative label, once the column configuration is selected, you will have the option to add this label
            1. This will only be visible to administrators when in this layout builder view and may be helpful in identifying the type of content being added to the section, especially if you have multiple administrators who manage the site
         3. Click Add Section
4. In the desired section, click + Add block
   1. A window will open on the right listing the content that can be added to the section
      1. Content will be organized by feature type, scroll to the Callout section or filter by the callout's name in the filter field at the top
   2. Once found, click the callout's Title
      1. A window will open displaying the current Heading
         1. By default this will be the Title value entered when the callout was created, you have 3 options
            1. Leave the heading as is, by default this will be visible to your users/patrons
            2. Change the heading name, click into the field and type in a new heading name
            3. Hide the heading, if you do not wish to show any heading, click the eyeball icon to the right
               1. The field (and helper text field below) will then be "greyed-out" and cannot be edited
         2. Helper Text, if applicable, enter a short description or instructions to provide guidance to the user/patron
            1. This will appear as an 'i' icon to the right of the heading, users/patrons can click or hover over the icon to view the helper text
         3. Subheading, if applicable, enter a value to display as a subheading
            1. Sub-Title URL, if applicable, enter the full URL to the page you wish to direct users/patrons to when they click the displayed subheading
            2. Open in new tab/window, if adding a Sub-Title URL, check this box to open that page in a new browser tab/window
      2. Click Add Block
5. Scroll to the top of the page, then click Save Layout to save your changes