In this tutorial, we will learn how to use the Spacer widget to create unique designs, and explore different ways to customize it.
The tutorial will cover:
✔︎ Adding a spacer widget into your design
✔︎ Adding a parallax scrolling effect
✔︎ Customizing the spacer widget using the Advanced Tab
✔︎ Creating shapes with the spacer widget
✔︎ And much more!
See Also:
Landing Page Builder
Create Custom Shapes
Hi all, it’s Ziv from Elementor.
Today I’ll show you how to use the spacer widget. Which on the surface is a simple widget, with one clear use case: creating space between elements.
But if you dig a little deeper, you’ll see that it can be used to create unique designs .. just like this parallax scrolling effect, or bring your pages to life with shapes! Like these colorful animated bars, or circular backgrounds that grow when scrolling down the page. Spacer widgets also help make your designs more responsive.
So let’s dive in and see how this ” simple widget “ helps you achieve all of this good stuff!
I’ll use this Medical Practice landing page first..as an example.. Which you can find in the Elementor Landing Pages Library. Follow the link I left in the description.. to learn more about it.
Okay.. let’s start off with the obvious.. Using the spacer widget to create space between elements. From the widget panel, drag and drop the spacer between the elements you want to create some space.
The blue line indicates where it will be positioned when you let go.
Then, use the slider to set the amount you want. You can also type a specific value..
And choose which unit to use pixels, viewport height or EM.
As you can see, the spacer widget creates blank vertical space by default. It does it’s job, but if you want to customize it further, go to the Advanced tab, and get ready for some creative fun!
Let’s start off in the background dropdown, where you can choose to either set a classic or gradient background. Use it way you can create cool gradient elements without the need
For classic, you can give it a color, or choose to set a background image. Then play around with the settings to get the style you’re looking for.
I’ll go ahead and set the size to cover.. so the image takes up all of the space. To give a parallax effect, simply set the attachment to fixed. As you can see, scrolling up and down exposes different parts of the image. Cool!
You can even set your background to change on hover, enabling you to build creative interactions with just a few clicks.
Let’s move on to Border. You can select a border type, set the border width, and give it some rounded corners by playing with the border-radius.
In the Mask dropdown, you can create cool visuals with some of the default shapes, or.. upload your own ones and make your designs even more unique.
Let’s check out this next template to see how the spacer widget can be turned into creative elements that liven up your page!
As you can see, this spacer already has a yellow background color. Let’s go to the Positioning dropdown, and see how we can use its settings creatively!
For starters, you can give the spacer widget a specific width by setting it to Custom. Then adjust it accordingly.
You can also control its position on the page by either setting it to absolute or fixed. Then simply drag it, or use the horizontal and vertical offset sliders.. To place the spacer widget exactly where you want.
And as a cherry on top, you can apply some motion effects on elements like these, to make your pages even more engaging.
If you are new to custom positioning and motion effects, follow the links in the description to learn more about it.
Well That’s it! Now you know how to use the spacer widget to create space between elements, and also to use it more creatively and build unique designs with just a few clicks. We are looking forward to seeing what you come up with!
So feel free to share your creations in the comments below, and as always, don’t forget to subscribe to our YouTube channel for more tips and tutorials.
Ciao for now!
