Module 4 of 6
Training / Building with Elementor / Lesson 3 of 9
Good spacing is most of what makes a page look tidy. Elementor has three kinds, and each has its own job.
You'll learn
How to add or remove space around things on a page
Takes
About 5 minutes
You'll need
A page open in Elementor
Watch: “How to Control Direction, Wrap, and Spacing in Flexbox”, an official video from Elementor. It shows the same job on their own demo site, so your screen may look a little different. The written steps below are the ones to follow.
1
Padding pushes the contents of a box away from its edges. Select a container, open Advanced and find Padding.
2
Margin pushes a whole item away from its neighbours. It sits just above Padding in the same tab.
3
Gaps sets one even space between everything inside a container. Select the container and look under Layout. Use this before reaching for margin.
4
Padding and margin have four boxes: top, right, bottom and left. Click the chain icon to unlink them, then change just the side you need.
5
Before you type a number, click a similar section and note the values it uses. Copying them keeps the page even.
6
Spacing that looks right on a computer is often too big on a phone. Switch to mobile view and reduce it there.
It may belong to the item next door. Click the neighbours and check their margin and padding.
The container needs some left and right padding in mobile view. Around 20 is usual.
It often causes overlaps on other screens. Reduce the gap or padding instead.
Tell us which page it’s on and what you’re trying to do. We can talk you through it or make the change for you.
