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:
Configuring visibility lets you control which devices display the content. The default is all devices. To learn about visibility settings, see:
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:
- 5 essential tips on how to build a website for China
- 7 tips to increase Chinese website traffic
- Top tips to design a mobile responsive website for China