Image Callouts

An image callout can include two, three, or four linked images in a row. Your site must be using the top nav, responsive layout for it to function. A Go button will be displayed over the image when hovering and they may or may not have a section title above them or additional text or links below them. The title beneath the image becomes centered with a special font type and size.

Figure 1
Figure 1
Figure 2
Figure 2
Figure 3
Figure 3

  1. Create a separate 515 Sub-Banner Image Editor item for each picture being used.
  2. Create a separate Highlight for each individual image and link.
    1. The title below the image goes in the Title field.
    2. In the Callout section, insert the image inline using the icon. Screen shot of inline image icon shortcut.
    3. Select the image and link it using a regular hyperlink for external pages or the CMS link for internal pages.
    4. To include additional text or links below the image and its title (Figure 1), type that information in a new paragraph below the image.
  3. Create a Boxed Item for each row of callouts.
    1. Choose the Spacing Option desired, either Even Spaced (for any number of callouts), One-Third + Two-Thirds (for two callouts only), or Two-Thirds + One-Third (for two callouts only).
    2. Choose the Title Option desired, either Single Title to display the Boxed Item’s Title field about the callouts (Figure 2) or No Title (Figure 3).
    3. Insert.
    4. Slot each Highlight created in the Boxed Items slot using the Image Hover w/Go template.Screen shot of a boxed item.image-hover-go-template
  4. To include buttons above the title line (you must select Single Title for the Title Option):
    1. Slot the Page you want the button to go to in the Links slot of the Boxed Item.
    2. If the page you are linking to is not in the CMS or you want different text in the button than the page title, create an External Link item and slot that.
  5. To include Social Media icons above the title line (you must Select Single Title for the Title Option):
    1. Create a Highlight.
    2. In the Highlight add the following code in the Source Editor:
      <div id="social-links">
      <a class="PLATFORM" href="URL" itemprop="sameAs" title="TITLE"></a>
      1. The PLATFORM options are facebook, twitter, instagram, linkedin, youtube, and pinterest.
      2. For URL put your URL for that platform.
      3. TITLE will be the text that appears if someone hovers over the icon.
      4. Repeat the <a class=”PLATFORM” href=”URL” itemprop=”sameAs” title=”TITLE”></a> part of the code for each platform you want to include.
    3. Slot the Highlight in the Links slot of the Boxed Item.
  6. Slot the Boxed Item on the Generic (Page), normally in the List Slot.