Elementor uses a section-based layout system where each section contains one or more columns. A two-column layout is one of the most common patterns – text on the left and an image on the right, two service cards side by side, a form next to contact details. This guide covers the complete setup and the specific settings that control how columns behave on mobile.
Step 1: Add a Section With Two Columns
Click the + icon to add a new section. Elementor shows a column structure selector – click the two-column option (two equal squares). This creates a section with two 50/50 columns. You now have two column containers ready for content.
Alternatively, add a one-column section first and then right-click the column to “Duplicate” it, which creates a second identical column. This approach is useful when you have already added content to the first column and want to match it with a second.
Step 2: Adjust Column Width
Columns do not have to be equal width. Click on the divider between two columns to grab it and drag left or right to change their proportions. You will see the percentage widths update as you drag – a common split for text+image layouts is 60/40 (text gets more space) or 40/60 (image gets more space).
For precise control, click on a column to select it, then in the Layout tab of the column settings, find the “Column Width” percentage field and type the exact value. The adjacent column automatically adjusts to use the remaining width.
Need help with your WordPress site? Describe your project and get a free estimate.
Step 3: Set Column Gap
The spacing between columns is controlled at the section level, not the column level. Click on the section (the outermost container) to select it. In the Layout tab, find Columns Gap. Options are: No Gap, Narrow, Default, Wide, Wider, Widest, and Custom. For most layouts, Default (20px) or Wide (30px) works well. For custom control, select Custom and enter a specific pixel value.
Step 4: Control Mobile Stacking
By default, Elementor stacks columns vertically on mobile – the left column appears above the right column. This is usually correct for text+image layouts. However, if your right column contains an important element (a CTA button, a phone number) that should appear first on mobile, you can reverse the stacking order.
Click the section, go to the Advanced tab, and find Reverse Columns. Toggle it on for mobile devices in the device-specific responsive settings. The columns swap order on mobile while maintaining the original order on desktop.
Step 5: Common Two-Column Patterns
Image left, text right: Add an Image widget to the left column, add a Heading widget and Text Editor widget to the right column. Set vertical alignment of both columns to “Middle” in the column Layout tab so the content centers vertically relative to each other.
Two equal feature cards: Add an Icon Box widget to each column. Use the same widget settings in both for visual consistency. For more than two cards, add a three or four-column section instead.
Form next to text: Add a Fluent Forms or Gravity Forms widget to one column, add a Heading and text to the other. Set the column with the form to 40% width and the text column to 60%.