How to Add Columns in Weebly

Many entrepreneurs enjoy using Weebly for their website building because of its many tools and services. Millions of businesses take advantage of the free offerings and user-friendly design of Weebly. When designing your business or personal website on Weebly, layout and design are important. Follow these steps to learn how to add columns to your Weebly pages.

How to Add Columns with the Column Button

First impressions matter, and it is imperative to customers that your website is organized and pleasing to the eye. Previously, Weebly limited the number of available columns to five. Now however, there is no limit to how many columns you can add. Adding columns on Weebly is simple using the following steps.

1. Open a Weebly template page.
   
2. Locate “Columns” in the editing panel on the left side of the screen.
   
3. Click and drag the “Columns” icon onto the page. You will see “drag elements here” in the area where the columns can be dropped.
   
4. Drop the columns on the page. Hover over them to adjust the number and spacing of the columns.

How to Add Columns by Dragging Elements

You can also arrange any Weebly elements into columns by positioning them next to each other.

1. Open a Weebly template page or “Edit site.”
   
2. Click and drag any element icon from the editing panel onto the page.
   
3. Click and drag another element and place it next to the first.
   

Weebly automatically adjusts the content to be formatted into columns. Note that if too much content is added, columns will grow very narrow as they squeeze onto the page.

How to Add Columns with HTML

Sometimes you need to add multiple columns in the form of a table. Follow these steps to add columns to your Weebly page using HTML code.

1. Open Microsoft Word.
   
2. Click on the “Insert” menu at the top of the page.
   
3. Click “Table,” and choose the table size with the drop-down grid.
   
4. Once your table of columns is ready to go, save the document as a webpage.
   

To do this, select “File,” “Save As,” and in the extension drop-down menu, choose “.htm/.html”.

• Open the saved document/webpage with a text editor and copy the HTML code for the table.
• Open the Weebly page where you want to add the table of columns.
• Click on the Build tab.
• Click and drag the “Embed Code” element into the working space.
• Click the “Embed Code” element and select “Edit Custom HTML.”
• Paste the table code from the Word document.

Positioning Columns

Once you have added columns to your Weebly page, it is easy to move them around to experiment with different layouts. To move columns, follow these steps.

1. Hover over the column you wish to move.
   
2. A blue line appears around the column, and a white rectangle appears at the top center of the element.
   
3. To move the column, click and drag the white rectangle to the column’s new top center position.
   

It is also possible to add space between columns.

1. Hover over a column and click the blue line to make the options menu appear.
   
2. Increase or decrease the spacing between columns as desired.

Changing Column Width to Preset Widths

Changing the size of columns is as easy as click and drag.

1. Open the Weebly page editor window and hover over a column you would like to resize.
   
2. A blue highlighted line will appear between the column and the element next to it.
   
3. Click on the blue line and drag it to the desired width. The width will snap to default widths.
   

Changing Column Width to Custom Widths

Columns can also be sized to custom widths instead of preset points.

1. Open the Weebly page editor window and hover over a column you would like to resize.
   
2. A blue highlighted line will appear between the column and the element next to it.
   
3. Click on the blue line and hold down Shift to drag to the desired width.
   

Copying a Column to Another Page

Once a column has been added, it can be copied easily to another page following these steps.

1.  Hover over the column to be copied.
   
2. Click the blue and white arrow in the upper left corner.
   
3. Select “Copy,” and choose a page from the drop-down menu for the column to be copied onto.
   

Moving a Column to Another Page

Columns can also be moved between pages.

1.  Hover over the column to be copied.
   
2. Click the blue and white arrow in the upper left corner.
   
3. Select “Move,” and choose a page from the drop down menu for the column to be moved onto.
   

Deleting a Column

If you would like to delete a column and the content inside of it, it can easily be done with one click. Just be careful, as the change will be permanent, and the content is not able to be recovered. If you are sure you want to delete a column, follow these steps.

1. Hover over the column to be deleted.
   
2. Click the blue and white “X” in the upper right corner and hit “Delete”.
   

Adding Content to Columns

Columns in Weebly can contain any content you can imagine. The Weebly editing panel offers various options to add such as text, pictures, and embedded code. Maps can also be added to columns. Columns can be created as elements and added side by side. But also, content can be layered on top of each other inside the columns if desired. To add any content to a column, follow the steps used to add elements to the page.

1. Open a Weebly template page or “Edit site” template.
   
2. Click and drag any element icon from the editing panel into the column.
   
3. Click and drag any other desired elements and layer them into the column.
   

Successfully Adding Columns in Weebly

These steps can help you learn how to add columns to your Weebly page. Adding and working with columns in Weebly is fun and easy to learn. Once you have created your own Weebly website, be sure to share it with others by telling us about it in the comments section below! Also let others know your tips and tricks for working with columns in Weebly.