Adding Spacers – Sinorbis

A spacer is a block of space with structure but no content. Add a Spacer Component to your webpage to create a design effect.

Spacers add white space to improve text readability or support a specific layout in a column.

1 Placing a Spacer Component on a page

Click WEBSITE on the top menu bar.
On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays.
Hover your mouse pointer on a page.
Click the Edit button. The Edit Content area opens.
Drag a Spacer Component from the Drag and Drop Panel on the left side of the screen.
Place the Spacer Component wherever you want to create an empty space on the page.

2 Customising height settings

Hover the mouse pointer on the Spacer Component to display the toolbar.
Click the Settings button to open the Spacer Settings panel.
Click the plus (+) or minus (-) boxes to increase or decrease the height of the Spacer Component. The maximum height is 500 px.

3 Customising Advanced features

Click the toolbar Settings button to open the Spacer Settings panel.
Click Advanced to open the Advanced Settings panel.

To learn about custom styling with ID and Class Name selectors, see:

Adding CSS

Component Visibility

Configuring visibility lets you control which devices display the content. The default is all devices. To learn about visibility settings, see:

Customising Visibility

4 Working with layout examples

Adding White Space

In the text example below, a Spacer Component sits between two Text Components. The spacer improves readability by increasing the amount of white space around the text. When published, the Spacer Component appears as white space.

Supporting a Layout

In the image example below, a Spacer Component is above a horse image. The Spacer Component pushes the horse image down to keep it parallel with the adjacent eraser image.

If you find this article useful, you may also be interested in the following: