/ How to

How to Insert and Add Additional Columns in Weebly Sites

Weebly is a popular website builder that allows anyone to easily create professional-looking websites without coding. One useful feature in Weebly is the ability to add columns to organize and layout your content. Here is a guide on how to insert and add additional columns in Weebly sites.

What are Columns in Weebly?

Columns in Weebly refer to vertical sections that you can add to pages to present content side-by-side rather than stacked on top of each other. For example, you may want a two-column layout with text on the left and an image on the right. Or a three-column layout with different sections of content.

Columns allow you to:

  • Organize information visually
  • Compare content side-by-side
  • Balance layout with images and text
  • Create more complex layouts
  • Improve readability

How to Add Columns in Weebly

Adding columns in Weebly is simple:

  1. Open the Weebly editor and edit the page you want to add columns to
  2. Find the “Columns” element in the left sidebar
  3. Click and drag the Columns element onto the page

This will insert a two-column layout. The columns will be divided 50/50 width by default.

Drag and drop columns element

Adjusting Column Widths

To adjust the column widths:

  1. Click on the divider between the columns
  2. Drag left or right to adjust widths

For example, drag left to make the left column narrower and the right column wider.

You can create up to 5 columns on a Weebly page.

Adding Content into Columns

To add content into columns:

  1. Click an element in the left sidebar such as Text, Images, etc
  2. Drag the element into one of the columns

You can layer multiple elements like images, text boxes, buttons, etc within each column.

Add elements into columns

Get creative with mixing and layering different elements within your columns!

Creating Equal Width Columns

To make all columns equal width:

  1. Click the settings icon on the Columns element
  2. Check the box for “Equal column width”

This will force all columns to take up equal space on the page.

Copying Columns

You can also copy entire columns to quickly duplicate the layout:

  1. Click the column you want to copy
  2. Click the Copy icon that appears
  3. Paste the copied column where needed

This copies everything within that column.

Adding Column Borders

To add borders between columns:

  1. Click the Columns element
  2. In the right sidebar, expand Design
  3. Under Borders, choose the border width and color

You can add borders to the top, right, bottom or left sides of the columns.

Adding column borders

Borders visually separate the columns.

Column Backgrounds

To add background colors or images to columns:

  1. Click the Columns element
  2. In the right sidebar, click on a column
  3. Under the Design tab, choose a background color or image

This will set a background for that individual column.

Column Spacing

You can also adjust the spacing (or gutters) between columns:

  1. Click the Columns element
  2. Under Design, enter padding values

Increase the padding to create more space between the columns.

Common Column Layouts

Here are some common ways to use columns in Weebly:

Two Column

A two column layout with a sidebar and content area is common. For example:

  • Navigation sidebar + blog content
  • Image + text content
  • Features list + product image

Three Column

Some three column layout ideas:

  • Small left sidebar + main content + right sidebar
  • Pricing table with 3 tiers
  • Image galleries

Four Column

Four columns can work for:

  • Portfolios and galleries
  • Pricing comparison tables
  • Displaying team members or testimonials

Experiment with columns to find the best layouts for your pages!

Troubleshooting Columns

Here are some common issues when working with Weebly columns and how to fix them:

Columns stacking vertically

If columns stack instead of sitting side-by-side, make sure that:

  • Page elements do not take up 100% width
  • Text elements have automatic width, not full width
  • Page layout is not set to “full width”

Uneven column heights

If columns are different heights, try:

  • Adding a background color or borders to see boundaries
  • Checking for hidden overflowing elements
  • Adding padding/margins between elements

Adding too many columns

More than 5 columns will start wrapping onto new rows. Consider using fewer columns or simplifying layouts.

Overlapping elements

If elements overlap oddly, check:

  • Z-index layering of elements
  • Overflow settings on elements
  • Column padding and margins

With some practice and tweaking, you can master column layouts in Weebly. Have fun and get creative!

Related Posts