Blocks span the full available width of a page or content area. When multiple blocks are placed beside each other, they automatically resize relative to the adjacent blocks. This guide walks you through different ways to resize blocks in a page or blog post.
Note: For help laying out blocks into columns and rows, visit Moving blocks.
Resize with spacer blocks
Spacer Blocks are a popular way to resize blocks. A Spacer Block creates padding/white space and can be resized to make surrounding blocks larger or smaller.
To add a Spacer Block, click an Insert Point and select Spacer Block from the Block Menu. Then click and drag the Spacer Block to either side of the block you want to resize.
Tip: Keep an eye on the guidelines – the black lines that appear when clicking and dragging blocks. The guidelines indicate placement. 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 page, this will create a new column.
Click and drag the Spacer Block’s edges to adjust its size, resizing the surrounding blocks. This creates more blank space in the content area.
Resize with other blocks
When two or more blocks are placed next to each other, they resize relative to each other. Hover over where two blocks align, then click and drag a block's edge to adjust their sizes.
Resize with the cropping handle
Image Blocks, Spacer Blocks, Map Blocks, SoundCloud Blocks, and Carousel Gallery Blocks have a cropping handle you can use to trim their heights. The handle crops images and maps so content can resize without distortion.
Note: The Carousel Block is the only Gallery Block design with a cropping handle.
To use the cropping handle, click the block, and then click the circle handle that appears to resize it.
Tip: Press and hold the Shift key 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.