Working with columns in Elementor
Learn how to add, resize, reorder, and style columns inside Elementor sections to create side-by-side layouts.
- Time
- 5 minutes
- Difficulty
- Beginner
- You’ll need
- The Elementor editor open · A section that has columns
Columns are what allow you to place content side by side on a page — like text on the left and an image on the right, or three product cards in a row. This guide covers everything you need to know about working with columns in Elementor's section-and-column layout (sites built with containers work differently; see the last question below).
Quick summary
Columns sit inside sections. To resize a column, right-click its handle, choose Edit Column, and set Column Width (%) on the Layout tab. To add a column, right-click an existing column's handle. To delete a column, right-click its handle and choose Delete. Everything inside a column is deleted with it.
What you'll need
- The Elementor editor open, with a section that has columns
How to resize columns
Hover over the section containing the columns you want to adjust.
Right-click the handle of the column you want to resize and choose Edit Column. The column's settings open in the left panel.
Open the Layout tab in the panel.
Type a percentage into the Column Width (%) field. Adjust the other columns in the section the same way until you are happy with the proportions.
How to add a column to a section
Right-click the handle of an existing column inside the section.
Choose "Add New Column" in the context menu, if your menu shows it. Otherwise choose Duplicate, which adds a copy of the column (with its content) that you can then clear out and reuse. Elementor's help articles don't agree on whether Add New Column is on this menu, but both list Duplicate.
A new column is added to the section. Check the column widths afterwards and adjust them on each column's Layout tab if needed.
How to delete a column
Deleting a column removes everything inside it
All widgets inside a deleted column are removed with it. Make sure you have moved or saved any content you need before deleting.
Right-click the handle of the column you want to remove.
Click "Delete." The column and all its widgets are removed.
Undo immediately with Ctrl+Z / Cmd+Z if you made a mistake.
How to reorder columns
To swap two columns left-to-right:
Open the Structure window. Right-click the handle of the column you want to move and choose Structure, or press Ctrl+I (Windows) / Cmd+I (Mac).
Find the column in the tree. Choosing Structure from the right-click menu opens the window with that column already selected.
Drag the column up or down in the tree and drop it before or after the other column.
Styling a column
Right-click a column's handle and choose Edit Column (be precise — the column's handle, not a widget inside the column). Then use the tabs in the left panel:
- Layout tab — column width, vertical and horizontal alignment of content, and HTML tag
- Style tab — background (a color or image, a gradient, or an image slideshow), background overlay, border, and text colors for the column
- Advanced tab — margin and padding for the column itself, entrance animation, and responsive (show or hide) settings. Elementor Pro adds motion effects and custom CSS here (custom CSS isn't included in the Essential plan).
Adding padding to a column is useful when you want content inside the column to have more breathing room from the column's edges.
Vertical alignment
You can change where content sits inside a column in the column's Layout tab under Vertical Align:
- Top — content sticks to the top of the column
- Middle — content is centered vertically (useful when columns have different heights)
- Bottom — content sits at the bottom of the column
Vertical Align also offers Space Between, Space Around and Space Evenly, which spread the widgets out inside the column.
Setting all columns in a section to "Middle" is often the easiest way to align cards or image-text pairs that differ in height.
Equal-height columns and stretching
Columns in the same section can hold different amounts of content. Elementor's alignment settings (Vertical Align on each column, and on the section) are how you line up content in columns of different heights; Elementor describes using them to get a "stretch-to-fill" layout.
Common questions
How do I make one column take up 1/3 and another take up 2/3?
After creating a two-column section, open one column's settings (right-click its handle, then Edit Column) and type 33 in the Column Width (%) field on the Layout tab. Then set the other column to 66 (or 67) the same way.
My columns stack on mobile — is that correct?
Yes, that is usually the right behavior. On small screens, side-by-side columns become too narrow to be readable. You can control column behavior on mobile using the responsive settings, such as the section's Reverse Columns option. See Making your page look good on mobile.
I want columns with different background colors — how?
Open each column's settings (right-click its handle, then Edit Column), go to the Style tab, and under Background choose Classic and set a different color for each. The section itself can have a separate background too.
My site uses Containers — does it have columns?
On container-based sites, new layouts don't use the traditional Column element. Instead, you nest containers inside containers. (Older sections and columns can still sit on the same page as containers.) See Containers explained for the modern approach.
Related guides
- Sections, columns & widgets explained
- Containers explained
- How to add a new section
- Spacing, margin & padding
- Making your page look good on mobile
Need a hand?
Learn more
Last updated
Containers (the modern layout) explained
Understand Elementor's Flexbox Container system — the modern replacement for sections and columns on newer sites.
How to add a new section in Elementor
Learn how to add a new content section (or container) to any page in Elementor, choose a column layout, and fill it with widgets.