CommonSpot: How to Add the Responsive Columns Element

This element is used to add additional columns to your page instead of the standard one column content block. Choose to have two or three column blocks.

-  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, expand the UWP category and choose Responsive Columns.

-  Click on the Responsive Columns gear icon, choose New Data.

Responsive Columns context menu - New Data

-  Fill in the New Data properties.

New Data window

o   Number of Columns: choose between 2 or 3 columns.  

o   Column Block Heading: type in text for the heading of the columns you create; this is an optional field and can be left blank if you do not want to give a heading.

-  Click Save.

-  The page now has 2 or 3 column sections, depending on the choice from the previous step.   

Responsive Columns

o   Click the Click to insert new element link for your first new column.

o   From the Element Gallery, expand the Text Elements category and choose Formatted Text Block.

o   Click the Formatted Text Block gear icon and choose Text.

o   Enter content into the rich text editor and click Save when finished.

o   Repeat steps as needed per each added column. Note: other elements can be added but the formatted text block is the most likely.


*Responsive Columns example (3 columns): 

Responsive Columns example


Check out the How To video:




Keywords:CommonSpot, website, responsive columns   Doc ID:66850
Owner:Becky T.Group:UW Parkside
Created:2016-09-12 11:45 CDTUpdated:2016-11-10 11:53 CDT
Sites:UW Parkside
Feedback:  0   0