As a WordPress developer in Auckland, I faced dozens of WordPress websites running in Elementor page builder, which are visually built in a good enough state, but when reviewed on the implementation side, the margin and padding spacing are inconsistent, making it hard to manage and visually the gap between sections looks unprofessional.
In this video, I will walk you through the Elementor page builder using the Space widget and it will surely improve your business’s website design.
Transcript
Spacing. There are a couple of ways of adding a space between sections using Elementor page builder. The common pattern is using margin and padding to create spacing between sections from many companies I have seen so far. And let me show you what I meant by that. Let’s go to edit solutions.
Let’s say I’ll add 20 padding here. Tap. And then going to here, I will add another padding or margin bottom. Let’s say I’ll add margin 60 pixel bottom here and then on this section, I’ll add another 60 margin. As you can see now, one of the issues that you may encounter would be I added a margin of 60 pixel but it seems that it did not apply properly.
But then when I go here, there is a 60 top margin which creates a space between the row. And you may wonder what’s going on. I added a 60 pixel there. Some content managers decides to add 60 pixel bottom padding, and then they will just delete the margin bottom shift to zero. And then they start to wonder why is it not working?
I put margin, but it won’t work and only padding works. Then they will continue working here and then they will decide, okay, if margin won’t work, I’ll just use padding bottom instead. And then on the next section here is they start adding 60 pixel padding. Now you start to realize that it becomes messy when you have padding 60 margin here with 120 or 60 pixel. This will become chaotic later on when you start creating more pages with different spacing.
It takes a bit of time going through each of the section to add a margin and padding top or bottom. So instead of using margin or padding to make a spacing between section, I recommend to use spacing widget. I’ll add a new layout and then just use flex and then pick the first one that goes down and then it creates a container here. Then inside the container, let’s add a spacing or a spacer widget. So I click and drag it here.
Okay. Let’s add about 120 spacing. Then what I’ll do is I’ll drag it here between these two sections, and then I’ll duplicate. I’ll add another spacing here between this section. And I missed this one out, and let’s add another section of spacing here.
This is a simpler approach rather than going to each of the section of the element and then adjust the margin and padding, which is time consuming. And you will encounter some technical difficulties where some margin don’t work, only paddings. With spacer, it’s easy to adjust the spacing on responsive screens from tablet to mobile. And that’s pretty much it. Let me know your thoughts by leaving a comment in the YouTube section, and I’ll see you next time.
Bye bye.
Learn more about our website services
Need a website or help? Contact us
