Global Paddings and Margins using Variables – Elementor/Hello Theme

Tagged: ,

Author Posts

danishc October 3, 2021 at 9:00 am

Hey Sebastian,

Hope you are doing well. 99% of the time I use a barebone theme like Hello with Elementor Pro.

I always wanted to control all the spacing via variables. Is there any way for me to control all the sections of elementor to use Variables/Spacing?

I can do it for headings and any widgets I like but is there any way to do it for sections? Because currently I go in each section and adjust the padding for each breakpoint. I can duplicate but still, I believe there is a better and more efficient method out there.

I tried using body and changed the padding but it obviously adds padding to all the sections. Some sections need to be full width like header so I cant control sections that way.

Thanks man
Danish

Sebastian October 4, 2021 at 9:28 am

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

danishc October 5, 2021 at 8:46 am

Thanks, Sebastian, You are a legend and I always appreciate your quick response and helpfulness.

You are right, it will take some fiddling around to get it to properly work.

Do you think it’s a good way to add global paddings/margins like that?


Sebastian October 5, 2021 at 1:46 pm

Certainly, if there isn’t some quirk of Elementor that makes it difficult in practice, I think it’s a good way to make global adjustments to the section spacing nice and manageable.

I just wanted to flag potential issues with having !important globally enabled, and remembering to avoid hard setting padding values in Elementor.

Cheers,
Sebastian

You must login or register to reply to this topic.