Homepage Square or Circle Touts

You can create these touts as squares or circles, with images behind them or a choice of solid colors, and with a choice of background color that stretches across the full screen width. The font color is set automatically based on the tout color and is not editable. You should use three or four statistics in a row. These can only be used on the homepage of a top nav, responsive site.

tout-circletout-square

  1. If the shape will have a background image, create an Image Editor item using the 250 Square crop.
  2. Create a separate Highlight for each statistic. Many shared statistics can be found in the touts folder under Top Level that you can copy and paste as a link to use on your site.
    1. The number or text within the shape goes in the Title.
    2. The text below the shape goes in the Callout.
    3. If the shape will have a background image, slot the Image Editor item in the Background Image slot of the Highlight.
    4. If the tout is linking to a page, link the text in the Callout field using Insert Link or Insert CMS Link icon.
  3. Create a Tout Wrapper item for the row of touts.
    1. Give it a System Title.
    2. The Callout field will not be used in this scenario.
    3. Choose the Tout Shape desired.
    4. Choose the Tout Color if you are not using background images for the shapes.
    5. Choose the Background Color. This is the shaded area behind the shapes that stretches the full screen width.
    6. Insert.
    7. Slot each statistic Highlight in the Tout Slot.Screen shot of a Tout Wrapper item.
  4. There are several ways you can display the touts.
    1. To show the touts on a homepage with the background stretching across the full screen, slot the Tout Wrapper in the List Slot of the Generic (Page).
    2. To have one to two touts in the sidebar on any page, slot the Tout Wrapper in the Right Sidebar Slot – No box. Be sure your background color is set to white for this option. Two touts will stack on top of each other.
    3. If you want to use two to three touts on an internal page that has left navigation with or without a right sidebar, they can be inserted inline within your content so that the background is only as wide as the content area (not including the left navigation or right sidebar). Only use three if you are not using a right sidebar. Insert an Inline Template using the icon Screen shot of the inline template icon.. Select the Tout Wrapper item and open it.