Spacer block

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.

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

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

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.

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.

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

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.

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

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

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.