Spacer Properties
The Spacer content block adds empty space between elements in your campaign. Use it to create visual separation and keep your layout clean and organized.
To learn more about adding and arranging components, see Working with Components.
Adding a Spacer
To add a Spacer to your campaign:
- Open the Design Editor
- Open the Content panel.
- Drag the Spacer component onto the canvas.
- Select the Spacer to open its properties.
For more information about adding content blocks, see Working with Content Blocks.
Spacer Properties
When you select the Spacer on the canvas, the properties panel allows you to customize its appearance, behavior, and size.
The available settings include:
- Visibility
- Actions
- Background
- Borders
- Shadow
- Size
- Edit HTML
- Products
Visibility
The Visibility settings control where the Spacer is displayed.
- Desktop — displays the Spacer on desktop devices.
- Mobile — displays the Spacer on mobile devices.
You can enable or disable each option independently.
For more information about arranging content for different layouts, see Managing Rows and Layout.
Actions
The Actions setting determines what happens when a visitor interacts with the Spacer.
Available actions include:
- Do Nothing
- Go to URL
- Go to URL and show this step's sticker
- End this campaign
- Show this step's sticker
- Reopen this step from sticker
- Change step
For a Spacer, Do Nothing is typically used because the component is primarily intended for layout.
For details about these actions, see Configuring Element Actions.
Background
Use Background to add a background color to the Spacer.
Select Solid Color and choose the desired color.
If you want the Spacer to remain invisible, leave the background unset.
For more information, see Background and Visual Styling.
Borders and Shadow
You can customize the Spacer's appearance using Borders and Shadow.
Borders
Available border settings include:
- Radius
- Width
- Style
- Color
- Per side
Border styles include None, Solid, Dashed, Dotted, and Double.
For a simple spacing element, None is generally recommended.
Shadow
Use Shadow to add a visual shadow effect to the Spacer.
For most layouts, a shadow is unnecessary unless the Spacer is being used as a visible design element.
Size
The Size settings control how much space the Spacer creates.
Height
Adjust the Height to increase or decrease the empty space between elements.
For example:
- A smaller height creates a subtle gap.
- A larger height creates more separation between sections.
You can adjust the height using the available control or enter a value in pixels.
For more information about organizing and sizing elements, see Managing Rows and Layout.
Edit HTML
The Edit HTML option allows advanced users to modify the HTML associated with the Spacer.
Use this option only when custom HTML changes are required.
For more information about working with content blocks, see Working with Content Blocks.
Products
The Products section allows you to associate products with the Spacer.
Click + Add to tag a product or product category when needed.
For more information, see Tagging Products.
Best Practices
When using Spacers:
- Use consistent spacing between related elements.
- Avoid excessive empty space.
- Keep spacing compact on mobile devices.
- Use Spacers to separate sections when needed.
- Preview the campaign to make sure the spacing looks balanced.
For more information about previewing and checking your campaign, see Saving and Publishing a Campaign.