How to add a space widget?

To add a space widget to your website simply drag & drop the “Space Widget” from the dashboard anywhere on the page. 


A space widget is used to create blank spaces on the website for flexible positioning and distancing between items on the page. 


You can resize and position the space widget as you require.

Here is how to add a space widget:

Step 1: Drag and drop a space widget.

Step 2: Click on the pencil icon.

Step 3: Adjust height and/ or style

Space Widget can be modified in two ways:

1. Adjust the height of the spacer by inserting the exact number in pixels 

2. Adjust the height by dragging the top or bottom border of the spacer, to the desired height 


You can change the style of the spacer, by clicking the pencil, then entering Style tab. Here you can add color as a background, add image, set borders, etc.


Usage of the Space Widget

The space widget is used mainly to organize other items by creating blank spaces for aesthetic purposes. Since all the items on the Exai Website Builder are actually cubes, the space widget plays an important role allowing you to add space between the items. 

Examples of using the Space Widget

Example 1: you can make a line on your page by adding a space widget, setting a height of 2px and adding a background color of the widget. 

The line below is created with this method. (see the blue line below).  


Step 1: Drag and drop the space widget to page

Step 2: Click on the pencil icon to get into edit mode of the widget

Step 3: Manually insert 10px height 

Step 4: Go to the background color icon and choose the desired color

Example 2: To place two items in the middle of the page, you need to add space widgets, one from each side (see image below). This way your two main text/image items will be placed in the middle. Then all you need to do is adjust the width between the items. 


Here is how to add two Space Widgets from the sides: 


Step 1: Place the two main items on the page 

Step 2: Drag and drop a Space Widget from the left side of the items 

Step 3: Drag and drop a Space Widget from the right side of the items 

Step 4: Adjust the space between the four items by dragging the line between them to left or right