Multicolumn Layout Custom Element

If you're creating navigation links for you're page the "Multi-Column Layout" is a custom element that can help you structure your web page. This custom element lets you create column containers for your element--this lets you put elements next to each other rather than on top of one another. An example can be seen on the ITCS home page: Example

To insert the "Multi-Column Layout" element follow these three (3) steps: 

  1. Insert the custom element "Multi-Column Layout" 
  2. Choose the number of columns 
  3. Set your preferred column widths

Detailed Tutorial

To create column containers using "Multi-Column Layout" follow these three (3) steps: 

Step 1: Insert the custom element on your page where you want it to be displayed by clicking on this icon. 

Multi-Column Layout multicol-270x300

Step 2: Now click on the gear icon to define the number of columns you would like. 

Multi-Column Layout colnumb-300x105

Step 3: Now click on the "Advanced Settings" tab and select your preferred width of the columns. If you do not specify a width they will be equally spit and displayed on your page. If you are putting navigation links in your first column you may consider a width of 200px. Separate your width in pixels with a common. Example: "200px, 960px" (total 960) would give you two columns the one on the let narrower than the one on the right (Like our home page

Multi-Column Layout width-300x146

And that's it! You're containers will now look something like this:

Multi-Column Layout colums-300x169

Tips & Tricks

Make sure if you want custom widths to uncheck "Equal Width Columns" on the "Advanced Settings" tab. The new width for CommonSpot pages is 960. If you are going to have navigation links to the left 180px wide set your second column or the sum of your addition columns (if you have more than two total) to add up to 960. Never exceed 960 as a total width otherwise your content my be cut off.