January 15, 2015

Page Section with Blank Space & Content Container Example

Page Sections

The blank space short code is a very simple layout element that allows you to add a custom amount of  EMPTY or BLANK SPACE , vertical space in between two items or lines of content.

 
…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 of Blank Spaces and Content Containers

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 and a Content Container:

 
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. We’ve also given the Content Container a MAX Width of 400, keeping all the text together.
 

Adding a Content Container

A Content Container is like an invisible content box, the width and alignment of which you can customize. You can even choose to set the image as "Default" which will keep the image "STILL" or "STATIC" which you can see the Text moving on the image. 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 RESPONSIVE on mobile devices. This keeps your "DFY"  Done-For-You Websites looking GREAT on any Mobile Device!

This is how the HTML Code looks that created the Page Section above.

Enter HTML Code here

2nd Admin

Click Here to Leave a Comment Below

Leave a Reply: