Blocks span the full available width of a content area. When multiple blocks are placed beside each other, they automatically resize to fit the content area. This guide reviews a few ways to resize blocks.
The examples in this guide use a Layout Page, but you can add and resize blocks in many different areas of your site.
Tip: For help laying out blocks into columns and rows, visit Moving blocks.
Watch a video
Resize with spacer blocks
Spacer Blocks create empty space and can be resized to make surrounding blocks larger or smaller.
Tip: Keep an eye on the guidelines, which are the black lines that appear when clicking and dragging blocks. If the guideline only spans the height of the block you're resizing, the Spacer Block will only resize this block. If the guideline spans the full height of the content area, this will create a new column.
To add a Spacer Block:
- Click an Insert Point
- Select Spacer Block from the Block Menu.
- Click and drag the Spacer Block next to the block you want to resize.
- Hover between the two blocks until your cursor becomes a column resizer, then click and drag to adjust the Spacer Block’s size. This resizes the surrounding blocks and creates more blank space in the content area.
Tip: To center a block in the content area, add a Spacer Block on either side, then adjust each Spacer Block to an equal size.
Resize with other blocks
When two or more blocks are placed next to each other, they resize relative to each other.
To resize a block, hover between two blocks until your cursor becomes a column resizer, then click and drag a block's edge. This adjusts the size of both blocks .
Tip: To create more advanced layouts, see our guides on moving blocks and creating columns and rows.
Resize with the cropping handle
You can trim a block’s height with a cropping handle so the content can resize without distortion. The cropping handle is available in these blocks:
Note: Carousel is the only Gallery Block design with a cropping handle.
To use the cropping handle, click the block, then click and drag the circle that appears at the bottom of the block.
Tip: Press and hold Shift while dragging the cropping handle to resize the image in 20 pixel increments. This can help align the bottom of the image with another block.