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, explains how to handle columns on mobile devices, and shows techniques that most Wix guides leave out - including background images in columns, Wix Studio differences, and how to work around the 5-column limit.

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 to Add Background Images and Colors to Wix Columns

One design feature that many Wix users miss is the ability to give individual columns different background colors or images. This is particularly useful for pricing tables, feature comparison sections, and testimonial grids.

Setting a Column Background Color

Click the column to select it (not the strip, but the individual column inside it). Click the "Design" tab or the paint bucket icon in the column toolbar. Under "Column Background," select a solid color, gradient, or image. You can set a different background for each column in the same strip, which is ideal for highlighting a "best value" option in a pricing table or visually separating content blocks.

Adding a Background Image to a Column

In the Design panel for the column, click "Image" under the Background section. Upload or select an image from Wix Media. Set the display to "Fill" so the image covers the full column area, and adjust the focal point so the most important part of the image stays visible as the column resizes.

Tip: For columns with background images, always add a semi-transparent color overlay (usually a dark overlay at 40-60% opacity) to ensure text placed over the image remains readable. You can set this in the Design panel under "Color Overlay."

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.

Wix Studio Columns vs Classic Wix Editor Columns

If you are using Wix Studio (formerly Editor X) instead of the classic Wix Editor, the column system works fundamentally differently. Understanding the distinction matters if you are choosing between the two platforms.

Classic Wix Editor columns are based on a fixed-canvas system. You add columns to strips and sections, drag dividers to set widths, and the editor adjusts the mobile view automatically (stacking columns). The approach is visual and immediate but provides limited control over how columns respond between the desktop breakpoint and mobile.

Wix Studio columns use CSS Flexbox and CSS Grid under the hood. You get:

• Multiple custom breakpoints (not just desktop/mobile) - you can define layouts for tablet, landscape phone, and other widths
• Column gap values in any CSS unit (px, %, vw, fr)
• Grid-based spanning, where a single element can span multiple columns or rows
• Consistent responsive scaling without having to manually adjust the mobile editor for every element

For most users building standard business sites, the classic Wix Editor is faster and simpler. Wix Studio column control is valuable for designers who need precise responsive behavior across a wide range of device sizes.

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.

Column Background Image Not Filling Properly

If a column background image appears cropped or stretched, go to the Design panel and check the "Display" setting for the background image. Change it from "Tile" or "Fit" to "Fill" and then reposition the focal point. The focal point is the area of the image that stays visible regardless of the column size - set it to the center or the most important part of the image.

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.
• Use the Rulers and Gridlines: Enable rulers and gridlines in the Wix Editor (View menu) to align column content precisely. Misaligned elements inside columns are one of the most common issues that make Wix sites look unpolished.