Platform 5: A Journey Into Boxed Layouts

After a couple requests via email and watching some posts  with in the Facebook I decided to write a tutorial or guide on boxed layouts and how I would lay one out.

Where do I begin.

When I decide that I will be going with a boxed layout on a project one of the first things I do is add a background color to the site. The colored  background will help you  get a better visual feel for your design. You can add a background color by going to  customize > color/background and selecting a color.

Next we need to configure some sections.

  1. Start by adding 2 containers to the page and give one a custom name of Outer and give the other a custom name of Inner .
  2. Drag the Inner container inside the Outer container.
  3. Go inside outer container and remove all the padding from the section by applying 0 in all the slots.
  4. Go inside the inner container and add a white background color. This will not be visible until you start adding section into it.

You should have something that looks like this:

Clone this a couple times and also save it as a template so that you can use this again through out your site.

Congratulations

By now you should have a colored screen and your builder should have the container we built cloned multiple times with one in the header and footer area.

So what do I do now.

With this basic set up you accomplish alot and build some interesting boxed layouts.

Normal Boxed Layout

This is the typical boxed layout style. There is nothing really special but it serves its purpose and you can see it alot through out websites.

Floating Boxed Layout

This version of the boxed layout gives the illusion that the content area is floating on the page. To achieve this look just add top padding to the first outer container on the page and add bottom padding to the last outer container on the page.

Rounder corners

This style adds a bit of flare to the floating boxed layout. To achieve this effect you just need to add a bit of less into your less custom area or jetpack with less enable. Which ever you decide is best for you.

 

.top-border.pl-sn-container {
    .pl-sn-wrap {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
}

.bottom-border.pl-sn-container {
    .pl-sn-wrap {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
}

For the style to take affect you simply need to add the class of top-border to the first inner container on the page and the class of bottom-border to the last inner container on the page.

Tips

  • Experiment with blurred backgrounds if done correctly they can really make your box design pop.
  • You can further expand on this by adding some break between the out containers or displaying you logo/brand outside of the boxed area.
  • If done right a combination of the global background color or image with the outer container color or image can produce some awesome effects. For example a blurred global background image and outer container(maybe the third one down) with a bottom-color to transparent gradient will give the effect that the image is fading away as you scroll down. 

As always you can find us on  Twitter and Facebook.

Share to your fingers hurt.

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

2 Responses to "Platform 5: A Journey Into Boxed Layouts"
  1. - I don't always need the Inner Container. I can put my content elements in Outer Container and style those elements with my cardStyle class. [This class sets the shadow, border radius and background color.]

    - if I don't set padding in the cardStyle class to zero, I get background colored vertical bars inside my card. Using the PL5 padding &/or margin settings doesn't fix this; I have to add the CSS to my class.

Leave a Reply

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


iheartpagelines

Platform 5: A Journey Into Boxed Layouts

Published on by | 2 Comments

After a couple requests via email and watching some posts  with in the Facebook I decided to write a tutorial or guide on boxed layouts and how I would lay one out.

Where do I begin.

When I decide that I will be going with a boxed layout on a project one of the first things I do is add a background color to the site. The colored  background will help you  get a better visual feel for your design. You can add a background color by going to  customize > color/background and selecting a color.

Next we need to configure some sections.

  1. Start by adding 2 containers to the page and give one a custom name of Outer and give the other a custom name of Inner .
  2. Drag the Inner container inside the Outer container.
  3. Go inside outer container and remove all the padding from the section by applying 0 in all the slots.
  4. Go inside the inner container and add a white background color. This will not be visible until you start adding section into it.

You should have something that looks like this:

Clone this a couple times and also save it as a template so that you can use this again through out your site.

Congratulations

By now you should have a colored screen and your builder should have the container we built cloned multiple times with one in the header and footer area.

So what do I do now.

With this basic set up you accomplish alot and build some interesting boxed layouts.

Normal Boxed Layout

This is the typical boxed layout style. There is nothing really special but it serves its purpose and you can see it alot through out websites.

Floating Boxed Layout

This version of the boxed layout gives the illusion that the content area is floating on the page. To achieve this look just add top padding to the first outer container on the page and add bottom padding to the last outer container on the page.

Rounder corners

This style adds a bit of flare to the floating boxed layout. To achieve this effect you just need to add a bit of less into your less custom area or jetpack with less enable. Which ever you decide is best for you.

 

.top-border.pl-sn-container {
    .pl-sn-wrap {
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}
}

.bottom-border.pl-sn-container {
    .pl-sn-wrap {
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
}
}

For the style to take affect you simply need to add the class of top-border to the first inner container on the page and the class of bottom-border to the last inner container on the page.

Tips

  • Experiment with blurred backgrounds if done correctly they can really make your box design pop.
  • You can further expand on this by adding some break between the out containers or displaying you logo/brand outside of the boxed area.
  • If done right a combination of the global background color or image with the outer container color or image can produce some awesome effects. For example a blurred global background image and outer container(maybe the third one down) with a bottom-color to transparent gradient will give the effect that the image is fading away as you scroll down. 

As always you can find us on  Twitter and Facebook.

Share to your fingers hurt.

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

2 Responses to "Platform 5: A Journey Into Boxed Layouts"
  1. - I don't always need the Inner Container. I can put my content elements in Outer Container and style those elements with my cardStyle class. [This class sets the shadow, border radius and background color.]

    - if I don't set padding in the cardStyle class to zero, I get background colored vertical bars inside my card. Using the PL5 padding &/or margin settings doesn't fix this; I have to add the CSS to my class.

Leave a Reply

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


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match