Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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. 🙂

 


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


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest