How to Use Multiple Columns Element in Weebly?

Weebly’s “columns” element (Multiple Column in the old editor) is a wonderful option available for both free and Pro users to overcome certain features not available in Weebly by default. For example Weebly has very limited built-in themes and none of them by default have a site sidebar or three or four columns. Columns element is the simple way to divide any page layout into columns and here is the various features of the columns element along with simple tips for how effectively you can use it in your site.

Note: Weebly introduced Spacer element to replace Columns element with same kind of features.

Features of Columns Element

• Divide your page layout up to five columns using “Columns” element.
• Adjust the content padding using “Spacing” option.

• Resize the columns by just dragging the vertical bar.
• Drag and drop any other element inside any column of the element. You can also drop another “Columns” element to make it a nested multiple columns.
• Delete the content inside the columns before deleting the element.

Here is How You Can Use Multiple Columns Effectively

The trick in the “Columns” element is that the empty columns displayed in the editor are not shown in the published site. This feature can be used to adjust the width and height of any elements like slideshow, divider and audio player. For example below is the look of three columns with the only center column having a slideshow element and dividers.

The dividers and slideshow elements are resized automatically to fit the column width of the multiple columns element. Any Weebly element which does not have default width and height adjustment option like Slideshow, Pro Audio Player, Divider, Gallery, Contact Form, YouTube and Scribd Document can be resized using multiple columns element.

Positioning of Elements

Weebly elements can be aligned center, right or left and it is not possible to position the text or images where ever you want. Multiple column element can be used to position any element in the desired place. Below is an example of positioning a text and images using multiple columns element.

You can also create a nested layout structure using multiple columns, besides creating a simple columns on your page layout.

Deleting Elements from Multi-Columns Element

One of the drawbacks of using “columns” element is to delete it. You first need to delete the elements inside the column in order to delete the complete element. You need to delete the last column element to reduce the number of columns.