Reply To: Global Paddings and Margins using Variables – Elementor/Hello Theme

Hey Danish,

In principle this is possible, you just need to set the padding on selectors that globally target the classes Elementor uses to add spacing to sections. From having a quick look these are:

.elementor-section

and

.elementor-column-wrap

So you could have something like this:

.elementor-section {
   padding-top: var(--vertical-section-spacing);
   padding-bottom: var(--vertical-section-spacing);
}

This would set the top and bottom padding to whatever value is active for your –vertical-section-spacing variable.

If you have enabled global !important in MT’s preferences this will override all Elementor section spacing. But then it might apply in places you don’t want it to. On the other hand, if you haven’t enabled global !important, you may need to go into your Elementor styles and clear any padding settings that have been set there. Because when you apply padding styling in Elementor it creates CSS code that looks like this:

.elementor-9 .elementor-element.elementor-element-4ea416a4 {
   padding: 50px 0px 50px 0px;
}

And that would override your .elementor-section selector because it has higher CSS specificity (there are more classes being reference so the specificity score is 30, rather than 10).

So you may need to play around with this a bit to get it to work.

I’m here if you have any more questions.

Cheers,
Sebastian