January 15

Page Section with Blank Space & Content Container Example

0  comments

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.

[blank_space height=’2em’]…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

[page_section image=’http://buildmyfirstwebsite.org/wp-content/uploads/2015/01/videobg.jpg’ image_tablet=” textstyle=’light’ position=’default’][content_container max_width=’800′ align=’center’]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.[/content_container][/page_section]

 

We can change the way the Page Section is shown by adding
a blank space and a Content Container:

[page_section image=’http://buildmyfirstwebsite.org/wp-content/uploads/2015/01/videobg.jpg’ image_tablet=” textstyle=’light’ position=’default’ img_static=’off’][content_container max_width=’400′ align=’center’][blank_space height=’3em’]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.[blank_space height=’3em’][/content_container] [/page_section]

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.

[page_section image=’http://buildmyfirstwebsite.org/wp-content/uploads/2015/01/videobg.jpg’ image_tablet=” textstyle=’light’ position=’default’ img_static=’on’][content_container max_width=’400′ align=’right’][blank_space height=’3em’]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.[blank_space height=’3em’][/content_container] [/page_section]

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


Tags


You may also like

TCB Custom HTML Element

TCB Credit Card Icons Example

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}

Subscribe to our newsletter now!