How To Add Columns In Wix (Step-by-Step Guide)

How To Add Columns In Wix (Step-by-Step Guide)

To add a column in Wix, click on any strip or section in the Wix Editor, open the Layout panel, and click "Add Column." You can then drag the column dividers to set custom widths and add content to each column individually. The exact steps differ slightly depending on whether you are working with a strip or a section.

This guide walks you through both methods, covers the most useful column layout patterns, and explains how to handle columns on mobile devices.

Key Takeaways
1
Add columns through the Layout panel in any strip or section of the Wix Editor.
2
Choose from common patterns like 2-column, 3-column, or sidebar layouts for different content needs.
3
Always check the mobile editor after adding columns -- Wix stacks them vertically by default on small screens.

How to Add Columns in Wix Using Strips

Strips are full-width horizontal sections in the Wix Editor. Each strip can hold multiple columns, and this is the most common way to create multi-column layouts.

Step 1: Select the Strip

Click on the strip where you want to add columns. If you do not have a strip yet, hover between two sections until a blue "Add" line appears and click it to insert a new blank strip. Once the strip is selected, you will see a toolbar appear above it.

Step 2: Open the Layout Panel

Click the "Layout" icon in the strip toolbar (it looks like a grid). This opens the Strip Layout panel on the left side of the editor. The panel shows your current column setup and all available layout options.

Step 3: Click "Add Column"

At the top of the Strip Layout panel, click the "+ Add Column" button. Wix adds a new empty column to the right side of the strip. You can keep clicking to add more columns -- most layouts work best with 2 to 4 columns.

Step 4: Adjust Column Widths

Drag the vertical divider between columns to resize them. You can also click on a column in the layout panel and type an exact percentage width. For equal columns, click the "Distribute Evenly" option. Wix also lets you set specific pixel values for spacing (gaps) between columns and padding within each column.

Step 5: Add Content to Each Column

Click inside a column and use the "Add Elements" button (the + icon) to drop in text, images, buttons, or any other Wix element. Each column acts as an independent container, so you can style and fill them separately.

How to Add Columns in Wix Using Sections

Wix sections (the newer building blocks in the updated editor) also support column layouts. The process is slightly different from strips.

Step 1: Select the Section

Click anywhere inside the section you want to modify. A blue border appears around the section, and a toolbar shows up at the top.

Step 2: Open the Section Layout Settings

Click "Layout" in the section toolbar. Under "Display," you will see preset column layout options -- single column, two equal columns, three equal columns, and several asymmetric splits.

Step 3: Pick a Column Layout

Click the layout that matches what you need. The section immediately splits into the selected number of columns. You can then drag content into each column or add new elements directly.

Step 4: Fine-Tune Spacing and Alignment

In the same Layout panel, adjust the gap between columns and the vertical alignment of content within each column (top, center, or bottom). Sections give you less granular control than strips, but they are faster to set up for standard layouts.

Common Column Layout Patterns

Not sure which column setup to use? Here are the most popular patterns and when each one works best:

  • 2-column (50/50): Best for side-by-side comparisons, image + text pairings, or splitting a page into two equal content areas. This is the most common layout on Wix sites.
  • 2-column sidebar (30/70 or 70/30): Works well for blog-style pages where one column holds the main content and the narrower column holds a sidebar with links, a contact form, or supplementary info.
  • 3-column (33/33/33): Great for feature highlights, pricing tables, team member profiles, or service cards. Three columns keep the page balanced without crowding.
  • 4-column (25/25/25/25): Useful for icon grids, product category previews, or stat counters. Avoid putting large blocks of text in 4-column layouts -- the columns get too narrow to read comfortably on most screens.
  • Asymmetric (60/40 or 40/60): Good for emphasizing one piece of content over another, such as a large product image next to a shorter description block.

If you are designing a full website with Wix, plan your column patterns before building. Consistent column usage across pages creates a professional, unified look.

How Wix Columns Behave on Mobile

Wix automatically stacks columns vertically on mobile devices. A 3-column layout on desktop becomes three rows stacked top to bottom on a phone screen. This is standard responsive behavior, but it means you need to check a few things after adding columns.

Check the Stacking Order

Switch to the mobile editor (click the phone icon at the top of the Wix Editor) and scroll through your page. Make sure the column that stacks on top is the one that makes the most sense to read first. If the order is wrong, go back to the desktop editor and rearrange the columns left to right -- the leftmost column stacks on top.

Adjust Content Size for Mobile

Text and images that look great in a 3-column desktop layout may appear too large or too small when stacked on mobile. Use the mobile editor to resize text blocks, swap large images for smaller versions, or hide elements that do not add value on small screens. You can hide any element on mobile by right-clicking it and choosing "Hide on Mobile."

Test Different Screen Sizes

The Wix mobile editor shows a single phone width, but your visitors use tablets, small laptops, and different phone sizes. Preview your site in a browser and resize the window to check how your columns respond at different widths. If a layout breaks, consider reducing the number of columns or switching to a simpler 2-column split for that section.

Troubleshooting Common Column Issues

Columns in Wix are usually straightforward, but a few problems come up regularly. Here is how to fix them.

Columns Not Aligning Properly

If your columns appear uneven or one column sits higher than another, check the vertical alignment setting in the Layout panel. Set all columns to "Top" alignment so their content starts at the same height. Also check that you have not accidentally added extra padding or margin to one column but not the others.

Content Overflowing Out of a Column

This usually happens when an image or text block is wider than the column. Click the element and resize it so it fits within the column boundaries. For images, set the width to 100% so the image scales with the column width instead of staying at a fixed pixel size.

Columns Disappearing After Saving

If you added columns to a strip and they vanish when you reload the editor, the strip may have reverted to a single-column layout. This can happen if you undo too many changes or if there is a sync issue. Re-open the Layout panel and add the columns again. Save and publish immediately to lock in the change.

Cannot Add More Than 5 Columns

Wix limits strips to a maximum of 5 columns. If you need more than 5 side-by-side elements, use a repeater or a grid gallery instead. You can also place two strips with columns directly on top of each other to create the appearance of more columns. If you are working with many elements in columns, you may also want to group elements in Wix to keep things organized.

Tips for Better Column Layouts

A few practical tips to get the most out of Wix columns:

  • Keep it consistent: Use the same column pattern across similar sections (e.g., all service sections use 3 columns) so the page feels organized.
  • Leave breathing room: Set column gaps to at least 20-30px. Columns crammed together with no spacing look cluttered and are harder to read.
  • Match content length: Try to keep the amount of content in each column roughly equal. If one column has 3 paragraphs and another has 1 sentence, the layout will look lopsided.
  • Use background colors strategically: You can set different background colors for individual columns in the Design tab. Alternating colors works well for pricing or comparison layouts.
  • Preview before publishing: Always check both desktop and mobile views before publishing. If you are building a landing page on Wix, column layout issues are especially important since landing pages depend heavily on visual structure.
Show More

* read the rest of the post and open up an offer
FAQs

You can add columns to any strip or section on your Wix pages. This includes your homepage, inner pages, blog post layouts, and landing pages. However, some areas like the header, footer, and pop-ups do not support the standard column layout tool. For those areas, you can position elements side by side manually using the drag-and-drop editor, but you will not get the automatic column dividers and resizing handles that strips and sections offer.

Wix allows a maximum of 5 columns per strip. If you need more than 5 side-by-side elements, consider using a repeater, a grid gallery, or stacking two strips with columns on top of each other. Sections in the newer Wix Editor typically offer preset layouts up to 4 columns. Also keep in mind that more columns means narrower content areas, which can cause readability problems on smaller screens.

Yes, every Wix template supports columns. The column feature is part of the Wix Editor itself, not the template, so it works the same way no matter which template you started with. You can add, remove, and rearrange columns in any template without restrictions. If your template already has columns in certain sections, you can modify those existing columns or add new ones alongside them.

Open the Layout panel for your strip or section and look for the "Distribute Evenly" button (it may also appear as an equal-width icon). Clicking it sets all columns to the same percentage width. You can also manually type the same percentage into each column's width field -- for example, 33.3% for three equal columns or 25% for four equal columns.

Wix stacks columns vertically on mobile devices instead of displaying them side by side. This is automatic responsive behavior and cannot be turned off. The leftmost column on desktop appears at the top on mobile, with each subsequent column stacking below it. To adjust how your layout looks on phones, switch to the mobile editor in Wix and rearrange or resize elements as needed. You can also hide specific elements on mobile by right-clicking them and selecting "Hide on Mobile."

Top