How white space is used in a layout is critical to how people experience your page. It’s a fundamental element in effective design and helps lead the users through the content. We’ve established some guidelines to help you account for sufficient vertical spacing between your block components to assist in vertical spacing between elements when the default spacing is not sufficient. <\/p>\n\n\n\n
To implement spacing block on your page:<\/strong> While you are on the page you wish to edit, click on the block before <\/em>where you want to add some vertical space. Then, click the little [+] icon at the top left of your page. Type “spacer” in the Block search field to filter all blocks by “spacer”. Select the “spacer” block to load it into your page below the component that you have selected.<\/p>\n\n\n\n By default, the spacer sets 100px of vertical space. We have found that the following guidelines for vertical spacing work well on both desktop view and mobile.<\/p>\n\n\n\n 8px spacer:<\/strong> Use after headlines<\/p>\n\n\n\n 48px spacer:<\/strong> Use between blocks<\/p>\n\n\n\n 120px spacer:<\/strong> Use above the footer<\/p>\n\n\n\n 160px spacer:<\/strong> between certain components when stacked.. ie: between stacked Media & Text blocks. See example: <\/a><\/p>\n<\/div>\n\n\n\n How white space is used in a layout is critical to how people experience your page. It’s a fundamental element in effective design and helps lead the users through the content. We’ve established some guidelines to help you account for sufficient vertical spacing between your block components to assist in vertical spacing between elements when … <\/p>\n
<\/p>\n\n\n\nSome guidelines for vertical spacing<\/h2>\n\n\n\n