Alter the Layout of a Page with the 2 Column Element

By default, the content area of a page allows you only to stack elements one on top of another.   No matter how many times you try to drag an element alongside another element, it will always end up above or below that element.   This works great, unless you want to line up some of your elements side-by-side in multiple columns.  That's where the Two Column Layout comes in.

The Two Column Layout Element works like any other element: just drag it to a page.  It will stack above or beneath any other elements you've already placed on that page and is quite literally made up of two empty columns separated by a blue bar (note that this blue bar only shows in the editor and is not part of the published site).

To get started, just drag the Two Column Layout element to a page.

This blue bar can be clicked and dragged to the right or left to increase / decrease the size of a column.  Note that this bar does not appear on your published site, so your beautiful content will not be marred by a blue bar running down the middle. 

Adding content to one of the columns is as simple as dragging that content into the column.  

Moving an element is as simple clicking and then dragging on the blue bar at the top of the element.

I've placed each of the images in the sample above into its own column. 

A column can contain more than just one element - you can put as many elements as you like in each column - so I've placed a title element above each of these pictures.  You can drag content straight down from the element toolbar and into a column.

You can have multiple two column layouts on a page and can even  place two column elements inside of other two column elements.  Give it a try!