How to customize the default Elementor Column Gap presets

Update: If you are working with Containers, check out the Container Spacing Presets in the latest Style Kits versions.

Elementor Column Gaps is a control available in every Section of our layouts and templates. What it actually does, is to add padding in the column(s) that the section contains. This has the same effect as manually adding column padding to your column.

As per current Elementor version (2.6.8) there is no way to customize these default elementor gap values. And that’s because they are hard-coded into Elementor, with the following properties:

• Default: 10px
• No-Gap: 0px
• Narrow: 5px
• Extended: 15px
• Wide: 20px
• Wider: 30px

So, by default, every column that exists in your template has 10px padding. Not always what you need, right?

On top of that, there is no way to have control over the responsive behavior for these column gaps presets. This makes Column Gap controls a tool with only limited usability. And that’s because the only way to edit these default values is via CSS.

For this reason, it is not uncommon among users to end up manually adding padding to their columns, which is definitely not the best practice.

Adding column padding manually

If you are one of the users who do not use CSS to manipulate the column spacing, it should be a common practice for you to add padding manually, on every column, in order to give your content the appropriate spacing.

In the best case, you might follow a consistent spacing scale, with common padding values throughout your entire layout.

In the worst case, your layout follows a random spacing logic with inconsistent values, which, in the long-term will hit you back. Because as your project scales, you end up with an un-flexible design that cannot adapt to changes.

Also, take a deep breath and really think about the excessive amount of CSS that manually-added values lead to. Let alone how much un-scalable your project really is, now that you probably rely on copying / pasting column styles between your layouts.

Why Column Gaps presets are important

Maintaining control over the Elementor column gap presets is essential for consistent and hassle-free spacing across your layouts. Instead of adding manual padding values to your columns, how about you make use of the Column Gap presets and control the column spacing from a single source of control for our entire site?

This way, you would simply assign one of the available Column Gap presets (default, narrow, extended etc) to the section’s columns, and stop micro-managing the columns individually.

Let’s see how we can edit and manage the values for the default Column Gap presets without getting our hands dirty with CSS.

Editing the Elementor Column Gaps with Style Kits

Workflow

⚡️ Create a new page and add some sections to create a basic layout

After installing and activating Style Kits, create a new page and Edit with Elementor.

Simply add a section with any number of column, and populate these columns with a few elements. This way, you will have a basic layout to see how it gets affected by the new values.

See below screenshots of a simple column structure with icon boxes.

⚡️ Access the Style Kits panel

When you are ready to go, you can start customising the Elementor column gaps presets in the Style Kits panel. Here is how you can access it:

⚙️ Cog icon

You can do it by clicking the cog at the bottom left of your editor and then navigate to the Style tab. This is where you will find the Style Kit panels.

🌀 Teleportation from the secondary menu

There is an easier way to access the Style Kits panel, from anywhere in the page, without the need to navigate to the cog icon. Simply trigger the right-click menu and you will find a Style Kits link that will teleport you to the Style Kits panels. 

⚡️ Customize the Elementor Column Gap values

In the Style Kits panel you will find a set of padding controls that correspond to the Column Gap presets. You now have a way to control the Column gap in px, em or % values, for every viewport breakpoint.

If you have created a simple structure in your editor, you should be able to see the column spacing adapt to your values.

⚠️ For the column gap presets to work, you must not have any manually-added padding to your columns. Manual styles always override the column gap preset, so make sure your columns are free of hard-styles.

In the screenshots below, the columns and elements have borders, to showcase the padding of the column and the element boundaries.

Personally, I usually try to work with the default and extended presets only, and make sure that most (if not all) of the columns in my entire layout have these presets applied. This gives me only two points of control for adjusting the column spacing across my entire project.

⚡️ Save the custom Column Gaps values in a Style Kit

These Column Gap values we just added can be saved as a Style Kit and applied on any Elementor-powered page, or Globally (on all the Elementor pages of your site).

This means that, at whatever page you apply this Style Kit, it will follow the column gap values that you have created, giving you cross-layout consistency.

💡 The panel offers a large number of options to be saved with a Style Kit, but for now, we only focus on Column Gaps. In the same logic, you could define defaults for Typography, color, buttons etc, and macro-control them from the Style Kits panel.

More information os Saving and Updating your Style Kit can be found in this article.

⚡️ Make the Style Kit Global

To have the new Column Gap presets apply by default to every Elementor page of your site, you can easily set a global Style Kit. More on this can be found in this article from the Style kits documentation.

Wrapping up

Elementor Column Gap presets is a handy way to maintain a level of spacing consistency throughout your templates. Instead of micro-design-ing every instance of a Column, you can globally affect the spacing density of your design via native controls.

We hope Style Kits introduces an intuitive way to create, manage and maintain a spacing scale for your Elementor projects.

Have you been implementing column gaps in your elementor workflows so far? Let us know your recipes and methods, and make sure you give Style kits a try. You can download it from the WordPress repository or right here by clicking the button below.