On a few projects I have had to combine the boxed layout and fullwidth layout. And so I came up with an easy way to add a boxed section while using the fullwidth layout. I even added a little extra css to move a boxed section up into another section above it such as a fullwidth slider.

Getting Started

So to get things started a I created a basic home page with a standard primary menu

1. As you can see here I have not done any other customization to the header area except change some colors and added some basic content.

001

 

2. Now the first thing you are going to do is open up the section you would like to make a boxed section and add a custom css class.

002

    In this case I use boxed

003

 

3. Select Save & Exit and Update page


And Now The Magic of CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

7. Add this CSS.

/*------------------------------------------------*/
/*------------[CREATE BOXED SECTION]--------------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/

/* boxed sections */
	.boxed {
    		max-width: 1200px;
    		float: none;
			margin-bottom: 25px;
            margin-top: 25px;
			left: 50%;
    		margin-right: -50%;
    		transform: translate(-50%, 0%);
    		-webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
    		-moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
    		box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);}

	@media only screen and (max-width : 1350px) {
	.boxed {max-width: 95%;}}

	@media only screen 
		and (min-device-width : 320px) 
		and (max-device-width : 1024px)
		and (-webkit-min-device-pixel-ratio: 1){
			.boxed {
    			max-width: 100%;
    			float: none;
				margin: 0;
				left: 0%;
    			margin-right: 0%;
    			transform: translate(0%, 0%);}}


 

8. And this should be the result.

004

 

Moving A Boxed Section Into The Section Above It

 

Let’s say you want to use boxed sections throughout the website but on some occasions you want the boxed layout to overlap into the section above it. You can find an example of this design on Fiverr.com

005

 

So here is how you add that feature to a specific boxed section but not all of them

 

1. Open up that section once again and this time you are going to add a second custom CSS Class.

002

    As you can see I am adding the class move-up right after the existing class called boxed

006

    Bet you did not even know you can do that right? 😉

 

2. I also suggest making a few changes to the row settings. Make it Fullwidth and reduce some of the top and bottom padding.

007

    I changed the top and bottom margin to 0 and am leaving the the right and left alone

009

 

3. Select Save & Exit and Update page

 

And Now The Magic of CSS.

If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)

7. Add this CSS.

/* boxed-up sections */
	.move-up {
    		margin-top: -50px;
    		border-radius: 5px;}

 

8. And this should be the result.

010

 

There is so much more you can do with this and I hope it gets your creative juices flowing. Check out the live Demo and if you use this one one of your projects please share a link below 🙂

See Demo

 


Well that’s all for now. I hope you find this article useful.


DISCLOSURE: I may be an affiliate for some of the products that I recommend. If you purchase those items through my links I will earn a commission which helps cover the cost of the free resources we provide. If you ever have any questions about my affiliations, please do not hesitate to ask..

Pin It on Pinterest

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!