help center

On this page

Spacer widget

Last Update: March 14, 2024

Add the widget

Spacer widget
  1. In Elementor Editor, click +.
    All available widgets are displayed.
  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Spacer widget?

The Spacer widget allows you to add customizable empty spaces or gaps between different elements on your webpage. You can create a block of space anywhere on your page and then fill this block of space with a color or an image. 

Further, you can use it to create cool shapes and elements as well.

Common use case

Emma is a web designer building a website for a client who wants a modern and minimalist design for their online store. In one section of the homepage, Emma wants to showcase a series of product images with text descriptions underneath each one. Emma also wants to ensure enough space between each product to create a clean and organized layout.

To create this, Emma uses the Spacer widget. After placing the product images and text descriptions on the page, they add a spacer widget between each product element. By adjusting each spacer’s height, Emma ensures consistent spacing between the products, creating a visually appealing grid layout.

For more customization, Emma enabled the Mask feature in the Spacer widget, creating interactive shapes for enhanced visual appeal and user engagement.

Spacer widget 2 Spacer widget 2

Additional use cases

  • Add spacing between a hero image and the main content of a webpage.
  • Ensure consistent space between columns in a multi-column layout.
  • Insert space between a navigation menu and the main content area of a webpage.

Video

See a video demonstrating the widget in action. 

Add the Spacer widget: Step-by-step

  1. Add the Spacer widget to the canvas. For details, see Add elements to a page.
  2. In the Content tab, below the Spacer section, use the slider to ​​set the amount of vertical space. Choose between PX, EM, REM, %, VW, or VH measurement units. For more details, see Units of measurement.
    Spacer widget 1

Advanced tab

The Advanced tab provides options to control spacer widget position, adjust spacing, add custom code, and more.

Spacer widget 3 Spacer widget 5

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article