Spacing blocks with whitespaces

When creating your website, remember that whitespace (block indent) is your friend! By adding space between blocks, you can avoid your site feeling cluttered. Ultimately, visitors want to be guided through information effortlessly and whitespace makes this easier for them. 

You can easily increase or decrease the whitespace (indents) in the Sitebuilder, without any  CSS editing, in just a few clicks.


What is whitespace

Blank areas( also known as whitespace) can be a key component of visual design, creating a clean and uncluttered layout. Whitespace not only creates harmony and balance, but it can also be used to lead a visitor from one element to another and divide blocks without using visible dividers.

In Sitebuilder, a page can have multiple horizontal blocks that create one long scrolling page. The whitespace can be used to add more room between these sections.


Before you begin

  • Every block has its own style options. Although many blocks give you control over padding, some areas may not be adjustable.
  • The padding around certain blocks, such as the Gallery full page width block or Business Card block, cannot be adjusted.
  • To check if you can adjust whitespace (padding) for an element on your site, navigate to the block and explore the block spacing options in Block settings > Appearance.


How to adjust whitespace


To increase the size of the whitespace:

  1. Click on the block. In the activated menu, click the Block settings icon:



  1. In the Appearance tab, navigate to the Block spacing area. 



  1. Click and drag the white round dot to make the spacing wider or more narrow:

           To increase or decrease the indent at the top of the block, move the dot right or left:



     To increase or decrease the indent between the next blocks at the bottom move this dot right or left:



Tip: To create large spaces between blocks, increase both the whitespace (indents) at the top and bottom of each block.

  1. Once you’ve adjusted the spacing, click Save.
  2. Publish the page and see how the larger whitespace looks like.
  3. If you want to adjust the spacing again, simply return to the Sitebuilder, hover over the section you want to edit, and repeat the steps to manipulate the spacing levers until you are happy with the layout. 

By adjusting the space between blocks you can transform your website design. With whitespace, you can fully customize any page in Yola Sitebuilder. Block spaces (whitespaces) help your website look simple and uncluttered while delivering a clear and direct message.

Tip: For a modern minimalist look, consider setting larger spaces.

Other helpful articles

What you can do with your blocks

Building a page with language-specific blocks

Customizing block settings

Was this article helpful?
0 out of 0 found this helpful