Working with columns in Elementor
Learn how to add, resize, reorder, and style columns inside Elementor sections to create side-by-side layouts.
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.
Quick summary
Columns sit inside sections. To resize a column, drag the handle between columns. To add a column, right-click an existing column. To delete a column, right-click and choose Delete. All column content is lost when you delete a column.
What you'll need
Beginner 5 minutes- 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.
Look for the vertical handle between two columns. It appears as a thin grey bar in the middle of the border between them.
Click and drag the handle left or right to resize the columns. The percentage widths update as you drag.
Release when you are happy with the proportions.
For a precise width, click the column, open the left panel's Layout tab, and type an exact percentage into the Column Width field.
How to add a column to a section
Right-click an existing column inside the section.
Click "Add New Column" in the context menu.
A new, empty column is added to the section. Its width is calculated automatically by dividing the available space equally.
How to delete a column
Deleting a column removes everything inside it
All widgets inside a deleted column are permanently removed. Make sure you have moved or saved any content you need before deleting.
Right-click the column you want to remove.
Click "Delete Column." 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:
Right-click the column you want to move.
Click "Navigate to Column" or look for a move option in the context menu. Alternatively, hover over the column until the drag handle appears at the top.
Drag the column handle left or right to reorder it.
Styling a column
Click a column to select it (be precise — click the column edge, not a widget inside it). Then use the tabs in the left panel:
- Layout tab — column width, vertical alignment of content, and HTML tag
- Style tab — background color or image, border, padding for the column itself
- Advanced tab — margin, custom CSS, motion effects
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
By default, content inside a column aligns to the top. You can change this 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
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
By default, all columns in a section share the same height (the height of the tallest column). To control how content fills that height, use the vertical alignment settings above.
Common questions
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
Changing colors & fonts in Elementor
Learn how to change the color and font of any element in Elementor, and understand when to use element-level settings vs. global styles.
Making your page look good on mobile
Learn how to use Elementor's responsive editing tools to control how your page looks on phones and tablets.