Recently when building a page in Elementor I discovered that there is a flaw in how columns work within the page builder. Like me, you’ve probably discovered that there is no Elementor column gap and no feature for enabling one within the Elementor editor.
This is problematic when it comes to designing your pages, as if you use a row with 2 or more columns, they will appear to ‘stick together’, as pictured below.
Thankfully, I managed to find quite a simple solution to insert a column gap when using rows with multiple columns in Elementor.
Here are the steps you can take to fix this issue:
- Click Edit on the top left of a column
- Navigate to the Advanced tab of the Elementor column editor (shown below)
3. Unlink the margin values for the column by clicking the icon under PX
4. Set a value of 20 for the left and right margins on the column
5. Set a value of 20 for the left and right margins on any other columns within your row
By adding a margin of 20 to the left and right side of your columns, you are basically creating a barrier. Think of it like this. Your column is sitting on the subway with two people either side – you are telling it to stick both arms out to left and right to a value of 20, now people have to stay at least 20 pixels away from it.
The end result as you can see is a nice column gap. If you’d like a larger gap, try increasing the value to 30 or 40.
Hopefully this simple solution will help you with your Elementor column gap issues. Unfortunately there isn’t a built in solution to Elementor, but I found this works well and it only takes 10 seconds to do.
