Working with Column Gaps

Column Gaps is a control that is available in every Section, and what it actually does is to add padding inside the columns that the sections contain. 

Elementor 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 to your section, by tweaking the Column Gap control in the Layout panel of your Section.

The problem with Current setup

As per current Elementor version (2.6.5) there is no way to edit the default elementor gap values. These values are hard-coded into Elementor and are the following:

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

Note that on top of that, there is no way to have control over the responsive values for these column gap presets. This makes Column Gap controls practically unusable, so most of the users end up manually adding padding to their columns, which is not the best practice.

Controlling the Column Gap with Style Kits

Maintaining control over the column gap presets is essential for consistent spacing across your layouts. Instead of adding padding manually to your columns, how about you assign one of the available Column gap presets to your sections? but we first need a place to define the padding values for those column gaps presets.

In the Style Kits sidebar, go to the Column Gaps panel. There 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.

You will not find controls for the No Gap preset here, because No gap always corresponds to 0px 😉

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us