When combining the Custom block elements, you might need to change the spacing between widgets to maintain a professional look of your website layout. Though it’s impossible to customize margins inside widgets, you can add a Spacer between them.
Spacer is a transparent widget that serves as a divider between Custom block elements.
Adding Spacer widget
Assuming you have a column with two Image widgets, and you want to increase or decrease the spacing between them. Here’s what you need to do:
- Hover over one of the Image widgets to activate its controls. You will see the black Add widget (+) Plus icons on the top and the bottom border of the widget.
- Click the Add widget (+) Plus icon at the border where you want to add the spacing as if adding another widget.
- In the Widget library, find the Spacer and click it to add it to the canvas.
- You will see the Spacer as the diagonally striped space that you can customize.
- Click the Spacer to activate its controls and drag the control up or down to change the space between the widgets.
Duplicating Spacer widget
The height of one Spacer can be between 4 px and 400 px. To create a gap of more than 400 px between your elements, you can duplicate the Spacer.
To do this, click the Spacer to activate its controls and then click the Duplicate icon on the control pane.
The duplicate of the Spacer with the same dimensions will appear below the original.
Moving the Spacer widget
You can move the Spacer widget up and down inside the block among the other widgets.
To relocate the widget, follow these steps:
- Click the Spacer to activate its controls.
- Drag the widget to the new location while holding the Move icon. The new location will be highlighted with an orange line.
- Drop the widget at the new location.
Here’s the video of the process.