Setting the space between 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:

 whitespace_1.png

 

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

whitespace_2.png

  

  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:

whitespace_3.png

 

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

 whitespace_4.png

 

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, allowing you to fully customize any page in Yola Sitebuilder. The whitespaces help your website look simple and uncluttered while delivering a clear and direct message.

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

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