How to customize the default Elementor Column Gap presets

How to edit the default Elementor Column Gap presets with Style kits

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.

Elementor by default offers a scale of six column gap presets:

  1. Default
  2. No Gap
  3. Narrow
  4. Extended
  5. Wide
  6. Wider

You can apply any of the above Column gaps presets to your section, by tweaking the Columns Gap control in the Layout panel of your Section, as the screenshot shows.

Selecting an Elementor Column gaps preset from the Columns Gap panel.
Available column gap presets

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.

Manually adding padding to the padding controls of any Elementor columns

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

Style Kits for Elementor is a free Elementor add-on created by us, the analogwp team. It adds a number of useful design controls inside your Elementor Editor so you can manipulate the essential design styles of your layout from one place. Column Gaps control is one of them.

👉🏻 Style Kits are available in the WordPress repository and you can install and activate it like any other plugin. It does not require Elementor Pro in order to work. Check this article on how to install the plugin if you are not familiar with the process.

Design controls for Elementor, with global scope via the Style Kits panel, including the controls for editing the Elementor column gaps

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.

The cog icon at the bottom left of the Elementor editor

🌀 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. 

The right-click (secondary) menu of Elementor has a Style Kits link that can take you to the Style kits panel.

⚡️ 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.

Customizing the Elementor Column gap presets with Style Kits

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.

An elementor section with three columns, and the gap set to a custom 20px value, which is now the default preset.
The default column gap value is now 20px

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.

An elementor section with three columns, and the Elementor Column gaps set to a custom 40px value, which is now the Extended preset.
The extended column gap value is now 40px

⚡️ 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.

⚡️Style Kits for Elementor is free.

✌🏻 Share this post on Social

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on pinterest
Pinterest

Submit your comment

2 thoughts on “How to customize the default Elementor Column Gap presets”

  1. Style Kits represents a new and innovate way for building our layouts with Elementor. It’s easy to use and offer tools rarely see in a free plugin. Outstanding work from the analog team 👏

Leave a Comment

Your email address will not be published. Required fields are marked *

Sign up to our mailing list

Stay in tune with Style Kits updates, original, Elementor-focused content and resources.

By signing up, we assume you agree with our privacy policy.

Scroll to Top