The spacer block provides an easy way to insert blank areas with a customizable height between elements and toggle the visibility of it within the breakpoints of the grid system.

Adding block

To add a spacer, click on the Block Inserter icon and select the “Spacer” block.

conj-support-add-spacer-block
Inserting spacer block

Alternatively, you can start typing /spacer in a new paragraph block, then press enter.

Editing block

Once you add the spacer block, you may type start dragging the double arrow icon to up or down to make the height bigger or smaller, respectively.

conj-support-edit-spacer-block
Adjusting spacer block height

Block interface

Although most blocks come with unique and block-specific controls, the spacer block is pretty straightforward and has a few visibility controls along with the “More Options” control available to config.

spacer-block-toolbar
Spacer block interface toolbar

Clicking on the ⚙ cog icon next to the publish button will toggle the visibility of this panel.

spacer-block-sidebar-settings
The spacer block settings in the sidebar

Spacer settings

On this tab, you can adjust the height (in pixels) of the space you want by typing the number or dragging the slider range right or left to make the height bigger or smaller, respectively.

spacer-block-height-settings
Spacer block space (height) settings

Visibility settings

The responsive visibility settings enable you to hide the spacer block from the view at any given or chosen viewport(s).

spacer-block-visibility-settings
Spacer block visibility settings

Color settings

On this tab, you can view color suggestions, refine with the custom color picker, and apply solid background color changes to your spacer block.

spacer-block-color-settings
Applying a solid background color to spacer block

Advanced

The advanced tab lets you to define an HTML anchor name or add a CSS class to your block, allowing you to write custom CSS and apply styles to the block as you see fit.

The HTML Anchor is a useful tool for creating page jumps. If you toggle the block to its HTML view, you’ll see that the HTML Anchor input is added as an ID to the spacer component tag.

advanced-custom-css-field
The advanced section lets you add a CSS class to your block

Last updated: 2 weeks ago

We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies ― Learn more

Accept