The Spacer module inserts an adjustable blank space between elements on your web page.



Here’s how to add and adjust a spacer module to your page.


Step 1: Open the target page

In the website builder, open the page of your site that you want to add the spacer module to.


Step 2: Open the Modules tab

In the left sidebar menu, click on Modules:


Step 3: Locate the spacer module Icon

In the Modules sidebar, you will see the Spacer module icon.


Step 4: Click and drag the spacer module icon onto your page

Point your mouse at the spacer module, click and drag it onto your page to where you want to create some blank space. Then drop it.

As you drag it around the page, you will see black lines appear, indicating the edges of the existing elements on the page. Use these lines as guides help you drop your spacer module in the right place.

For this example, we will add a spacer between the images on the right-hand side of the web page, to make them staggered with the blocks on the left side, instead of lined up evenly with each other

Below you can see the spacer module before it was dropped, hovering over the page. The black line indicates the top edge of the image. If the spacer module is dropped now, it will insert blank space between the photos on the right-hand side of the page.

Tip: Hover until you see the outlines you need. If the black line extended all the way across the web page, that would mean the spacer will also be the whole width of the web page.



After dropping the module:


Tip: To move the spacer, including removing it to the trash can, click the thick black grab bar in the center-top and drag it.


Step 5: Adjusting the spacer

To adjust the depth of the space, just click and drag the bottom edge of the spacer module up or down until you have the desired amount of space.

For our example, we want to stagger the image on the right side of the page with the image on the left side, so we’ll drag the spacer down about half-way down the image on the left:


Step 6: Saving the changes

Once you have finished with your Spacer, remember to click the Save button at the bottom center of the modules sidebar to save and protect your changes.


Now you know how to add and adjust a Spacer module.

Experiment with dropping Spacers in various places on your webpage to create different types of space.


Did this answer your question?