CommonSpot: How to Add the Side Square with Text Element

Learn how to add the side square with text element. While adding more of a visual aspect to your page, use this element to help break up lists of links or text into smaller specific topics that help visitors zero in on the content they are looking for.

-  Open the page you want to use this element with. (Author mode - View > Work on this Page).

-  Click on the Click to insert new element link.

Click to insert new element

-  From the Element Gallery, choose to use the Find field to search by name OR expand the UWP category and choose Side Square with Text.

Element Gallery

-  Click on the Side Square with Text element action icon (gear), choose New Data

Context menu - New Data

-  Fill in the New Data properties.

New Data window

o   Square Color: choose 1 of 4 available colors for your square; if an image is defined, color will not display. *required field

o   Square Text: text that will display in the square; if an image is defined, will be alt text that will appear when hovering over the image or if the image can’t display in browser. *required field

o   Optional Image: if desired, select an image to be used as the square box.

o   Box Link: if desired, choose to insert a link to another page or document when clicking on the box.

o   Side Text: the text or content you want to display next to the square.  Note: the option to insert links to pages or documents is available to you.

o   Click Save.

-  Back on your page, click the orange Preview button to display how your finished square graphics will appear.

Preview button

*Side Square with Text example:

Side Square with Text example


Check out the How To video:




Keywords:CommonSpot, website, text element, side square   Doc ID:64453
Owner:Becky T.Group:UW Parkside
Created:2016-06-27 08:18 CSTUpdated:2017-08-15 14:24 CST
Sites:UW Parkside
Feedback:  0   0