Spacer blocks

false

Spacer blocks

Last updated July 29, 2026 20:24

Create and adjust the blank space between blocks in your page layouts.

Use spacer blocks to add an adjustable amount of empty space between blocks. Spacer blocks are a great way to create padding and white space on pages and blog posts. Spacer blocks can also help resize images and other blocks.

Spacer Blocks aren't supported in Fluid Engine. To add padding between blocks in Fluid Engine, click and drag the blocks to new positions on the page.

Tip: You can add padding in other areas, like below banners or above footers, in your style settings. To learn more, visit Making style changes.

Watch a video

Add a spacer block

  1. Edit a page or post.
  2. Hover over the section and click + to open the block menu, then click Spacer.
  3. Click and drag the block to its new location on the page. Use guidelines to help with placement. For more help, visit Moving blocks to customize layouts.

A gif shows a spacer block being grabbed and dragged from above a section to below a section.

  1. You can also click and drag the spacer block so the guideline displays vertically. The block will then create its own column.

A gif shows a horizontal spacer block being grabbed and dragged to create a vertical spacer block which creates a column on a site.

Resize the block

You can use spacer blocks to resize other blocks in a content area. As you resize a spacer block, the surrounding content adjusts accordingly.

Vertically

To resize a spacer block vertically, click on it, then drag the resize handle up or down. To resize the block in even increments, press and hold Shift while dragging the resize handle.

A gif shows the resize handle of a spacer block being clicked and dragged down to make the spacer block taller.

Horizontally

To resize a spacer block horizontally, click on it, then drag the resize cursor left or right.

A gif shows the resize handle being clicked and dragged to the right to make the spacer block longer.

Mobile display

Spacer blocks placed beside other blocks (including other spacer blocks) don't display on mobile. Instead, your site content expands to the full width of your mobile screen.

Spacer blocks placed above or below other blocks only appear on mobile in these version 7.0 template families:

  • Brine
  • Farro
  • Pacific

Was this article helpful?

Yes No

107 out of 440 found this helpful

Yes No

Spacer blocks