Search the Support Center

Columns

Use the Columns Element to put different elements side-by-side. You can add a Columns Element directly from the Elements Menu:

 

Adding a Columns Element

Adding columns and adjusting their size

When you add a Columns Element you'll see two columns appear, but you can create up to six columns by clicking on the blue Edit Columns button.  

 

Add more columns

Once you click Edit Columns, click on the (+) sign to add another column. You can add a column to the middle, or to the side. 

 

Adding Columns
  • Adjust the width of your columns manually by dragging the bars between columns, or select Make columns equal width to automatically resize them. 
  • To delete a single column, click on the trashcan icon beneath it. 
  • To delete the entire Columns Element (and all the content within it), click on the trashcan icon on the far left side.
  • Click Save to save all adjustments before you start adding elements to the columns. 

 

Adding elements to columns

You can add one or more elements to each column in exactly the same way that you add elements to other parts of your pages: click the button that says + Add Element. This will open up the Elements Menu. 

 

Add Element to a Column

You can also drag existing elements on your page into a column. All elements work normally within columns as they do elsewhere on your site—they will just be narrower to fit within the column. You can add photos, text, maps, videos, or anything else to a column on your website. (Except you can't add a Columns Element to a Columns Element...that would open up a wormhole into another dimension.) 


Here's an example with three columns:


Example using three columns

Ideas for using columns

Once you've mastered columns, you'll see that they are a great tool to use across your entire website. Here are some ideas:

 

  • Break up the text on your website: In websites with a wide content area, long lines of text can be hard to read. Putting your text into columns instead can make it more user-friendly (similar to a newspaper layout).
     
  • Use empty columns to add white space and padding: Think of an empty column like a vertical Spacing Element; it can help you position an element exactly where you want it on your page and also give it some breathing room. 
  • Use columns to put icons or photos in a row: Create up to six columns, then add Photo Elements to each colums with an image or graphic. For example you can do this with social media icons. For best results, make sure all the images are cropped to be the same size before putting them into your columns. 
  • Put text next to another element, rather than on top of or below it: Want to put in a video with a paragraph of text next to it? Use columns. This technique can help when a Text with Photo Element just won't cut it. 

Related articles: