Beyond colours and spacing, blocks and columns have a few styling options that make a proposal look designed rather than assembled. This article covers dividers, background overlays, shadows, tilt and offset.
Block dividers
A divider is a shape along the top or bottom edge of a block, such as a wave, a curve or a slope. Dividers soften the hard line between two sections.
To add one, click the block to open the block menu, then choose a divider shape, which edge it sits on and its colour.
Set the divider’s colour to match the background of the block next to it. A wave at the bottom of a cream block, coloured the same green as the block below, makes the two sections flow into each other. You can also flip the divider horizontally or vertically to change its direction.
Use dividers sparingly. One or two on a page looks intentional. A different shape between every section looks busy.
Background images and overlays
A block can have a background image, with an overlay colour on top. The overlay darkens or tints the photo so text on it stays readable.
For white text on a busy photo, use a dark overlay at around 50% to 60%. If the text is still hard to read on a phone, make the overlay stronger or choose a calmer photo.
Column shadows
A column can have a shadow behind it, with settings for its offset, blur and colour. A soft shadow makes a column look like a card sitting on the page, which works well for feature lists, pricing notes and testimonials.
Keep shadows subtle. A light, blurred shadow in a dark shade of your background colour looks more natural than solid black.
Column tilt
Tilt rotates a column slightly. Combined with a white border and a shadow, a tilted column with a photo in it looks like a polaroid pinned to the page. It’s a nice touch for galleries and handwritten-style notes.
Small angles work best. A couple of degrees looks playful. Much more than that becomes hard to read.
Column offset
Vertical offset moves a column up or down from its normal position. Offsetting the middle column in a row of three gives a staggered look, which breaks up a page full of straight lines.
Check it on a phone
Columns stack on a phone, so tilt and offset look different on a small screen. Always preview the page on mobile after using them.