Landing Page Spacer Widget

The spacer widget helps you add a negative space between two widgets.

Negative space refers to the space between different content blocks on your landing page. Including negative space in your landing pages is important from both aesthetic and functional points of view. Pages with negative space look better and are easier to read, especially on smaller screens.

You can add the spacer widget either horizontally between two widgets or texts or vertically along with borders.

Example image showing the usability of the spacer widget for a landing page

How to Use a Spacer Widget in a Landing Page?

Step 1 – Navigate to the Landing Page Builder

Use the Main Menu on the left to create a landing page and subsequently navigate to the Landing Page Builder.

Step 2 – Add a Spacer Widget to Your Landing Page

The blank area on the left is the work area where you design your landing page, and the area on the right is the tools area where all the available design elements are displayed as widgets.

In order to add negative space to your landing page, drag and drop the spacer widget to the work area (as highlighted in the screenshot below).

Landing page builder drag and drop spacer widget

Step 3 – Design the Space as Required!

As you drop the widget into the work area, the widget Settings are displayed on the right (as highlighted in the screenshot below).

Landing Page Spacer Widget styling tab

Herein, use the fields:

3.1 Widget Background Color

  • Either use the color picker to specify the color of this negative space, or
  • Select the checkbox – Widget Background Transparent if you wish to make this space transparent.

3.2 Spacer Height

Use the Spacer Height sizing bar to adjust the height of this blank space.

Click Save, and that’s it!

You have successfully added blank space between two content blocks on your landing page!

Let’s proceed, and have a look at how to add a map to a landing page using the map widget!