{"id":2496,"date":"2021-12-13T10:25:52","date_gmt":"2021-12-13T10:25:52","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-spacer-widget\/"},"modified":"2022-08-22T07:06:51","modified_gmt":"2022-08-22T07:06:51","slug":"landing-page-spacer-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/landing-pages\/builder\/spacer\/","title":{"rendered":"Landing Page Spacer Widget"},"content":{"rendered":"
\n

The spacer <\/strong>widget helps you add a negative space between two widgets.<\/p>\n

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.<\/p>\n

<\/div>\n

You can add the spacer widget either horizontally between two widgets or texts or vertically along with borders.<\/p>\n

<\/div>\n

\"Example<\/p>\n

<\/div>\n

How to Use a Spacer Widget in a Landing Page?<\/h2>\n
<\/div>\n

Step 1 – Navigate to the Landing Page Builder<\/h3>\n

Use the Main Menu<\/strong> on the left to create a landing page<\/strong> and subsequently navigate to the Landing Page Builder<\/a>.<\/p>\n

<\/div>\n

Step 2 – Add a Spacer Widget to Your Landing Page<\/h3>\n

The blank area on the left is the work area<\/strong> 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<\/a>.<\/p>\n

In order to add negative space to your landing page, drag and drop the spacer <\/strong>widget to the work area (as highlighted in the screenshot below)<\/em>.<\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Step 3 – Design the Space as Required!<\/h3>\n

As you drop the widget into the work area, the widget Settings <\/strong>are displayed on the right (as highlighted in the screenshot below)<\/em>.<\/span><\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Herein, use the fields:<\/p>\n

3.1 Widget Background Color<\/strong><\/h4>\n