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.

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.

Style Kits for Elementor is Free

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


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

8 Responses

  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 👏

    1. Nope, but it’s certainly a very good idea for us to consider for a future update 🙂 Thanks for your input Jeshua.

    1. Hi, I’m not really sure what happens from the screenshots, but feel free to send an email at [email protected] with a link to your site and ideally temporary admin login details so we can take a look. Many thanks!

  2. Hi there,
    just tried Style Kits and as of now it doesn’t work for me. If it worked, it would be a nice correction of the Elementor’s inexplicable hard-coded settings, forced upon designers.

    First and most important info I couldn’t find in your description, at least at first glance:
    1) how to create a new own style kit? There is no option, no button to be found under Theme Style Kits or anywhere else in the settings. If I need to purchase a PRO license in order to buy it, please say so. If I need to create an Elementor template to funcion as a style kit, please share the details on which type it has to be and maybe a step-by-step;
    2) you describe that the plugin will affect new pages, but what about the existing ones? A simple line to add this important info wouldn’t hurt;
    3) what if the plugin doesn’t work even on the new pages I create – where should I look for something I might have missed?

    Acutally, from the above screenshots by HSINNY, I can cleary understand what they mean. And I don’t even speak Chinese 😉 They have the same issue I do. Followed your instructions, but no effect on paddings…


Leave a Reply

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

Share this post on social

Let's stay in touch!

Sign-up to our mailing list for occasional updates.

Join our mailing list

Stay in touch! Subscribe for occasional Style Kits updates.

We use cookies to optimise your experience. By continuing browsing our website, you agree to our Privacy Policy