Tag Archives: Columns

Custom Elements: “Multi-Column Layout”

Share

Tutorial At A Glance

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: http://www.ecu.edu/itcs/

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 prefered column widths

Detailed Tutorial – PDF

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. 

multicol

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

colnumb

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 http://www.ecu.edu/itcs/)

width

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

colums

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.