White space is one of the core principles of great website design. Adding space between blocks gives your content room to breathe, helps patients scan more easily, and makes your website feel clean and modern.
In this guide, you'll learn how to add space using vertical padding and height settings, and how to visually balance blocks using your own judgment.
Before you start
You'll need Admin access to edit your blocks.
How to Add Space Between Blocks
The step-by-step below walks you through how to create white space using padding and block height controls.
- Navigate to the block where you wish to add spacing.
- Hover over the block you'd like to add space to and click Edit Block
- Scroll until you read Vertical Padding and choose Small, Medium, or Large. This adds space within the block to separate its content from other elements.
- If more space is needed, adjust the Height setting. This changes the percentage of the screen the block occupies, giving even more vertical room.
- Use your eye to gauge balance. Try previewing on mobile to ensure buttons or text aren't pressed against the screen edge.
- Your height and padding changes will save automatically.
Nice work! Your blocks now have room to breathe, making your page feel more spacious. These changes help your website flow naturally and allow important design elements like text and images to stand out.
Note
Height is set as a percentage of the screen, so if someone is viewing your site on a smaller device (like a phone or tablet) the block will appear shorter compared to how it looks on desktop. Very small percentages set here can cut off photos in Text Media blocks on smaller devices. Adjust height with that in mind for the best cross-device experience.
Next steps
Now that you've improved your block spacing, you can fine-tune your layout further: