Blank Space & Content Container

The blank space short code is a very simple layout element that allows you to add a custom amount of vertical space in between two items…

 

…such as these two lines of text.

Why does this matter? The white space on a page is a very important (yet often overlooked) layout element. The blank space short code is a tool that can help you get the look and feel of a page just right.

Example Use

This is a page section with an image background. By default, the page section height is determined only by the amount of content inside it.

We can change the way the page section is shown by adding a blank space:

 

Now, we’ve added some extra spacing before and after the text, so we can show more of the background image and have better control over where the text is shown.

 

Adding a Content Container

A content container is like an invisible content box, the width and alignment of which you can customize. This is another layout element that can help you achieve exactly the look and feel you have in mind.

 

This text is inside a right-aligned content container. Unless viewed on a narrow screen, it will not cover the entire width of the background image.

 

Content containers restrict the width of content, but they remain mobile responsive.

Code Example:

[page_section image='http://yoursite.com/image.png' textstyle='light' position='default' padding_bottom='on' padding_top='on']
[blank_space height='3em']
[content_container max_width='400' align='right']This text is inside a right-aligned content container. Unless viewed on a narrow screen, it will not cover the entire width of the background image.[/content_container]
[blank_space height='2.5em'][/page_section]