Follow us

How I Created the Divi Soup Redesign Boxed Layout | Divi Soup

Like our free content? Then you'll love our exclusive Club!

Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!

Today’s recipe is the result of MANY questions asking how I created the boxed layout on the redesign of Divi Soup. It’s been a while but I thought it was about time I wrote this up.

I am going to show you how to create the boxed layout with the shadow and the menu and footer elements outside of ‘the box’, there is also a little snippet in there to reposition the back to top button.

The Social Follow in the top right is actually a library layout added to my child theme’s header.php file, and that’s a whole ‘nother recipe wink

So let’s get cooking!

Ingredients

 

The latest version of the Divi Theme from Elegant Themes.

An active child theme. You can add the CSS to Divi’s Theme Options but its not much fun editing it in there!

 

Cooking time

 

This should only take around 15 minutes.

 

Preparation

 

For the prep we just need to make sure our menu is set up correct in the customiser, so navigate to Divi > Theme Customiser > Header & Navigation >Header Format and select Slide In. Also make sure Hide Navigation Until Scroll is unchecked.

How I created the Divi Soup redesign boxed layout

Then hit Publish.

 

Method

 

Now we just need to add some CSS, here’s what we are doing:

First, we set the main header max-height to zero so it doesn’t show, then we move the page content up by removing the padding.

#main-header,
#main-header.et-fixed-header {
    max-height: 0;
}

#page-container {
    padding-top: 0 !important;
}

 

Next, we use a media query to add the margin and shadow to the content area on tablets and desktops.

@media only screen and (min-width: 768px) {
    .entry-content,
    .search #main-content,
    .archive #main-content {
        position: relative;
        z-index: 10;
        margin: 45.5px 50px;
        -webkit-box-shadow: 0 0 20px grey;
        box-shadow: 0 0 20px grey;
    }
    .search #main-content,
    .archive #main-content {
        margin-bottom: 0;
    }
    #main-footer {
        margin: 0 50px;
    }
}

 

Then we need to move the slide in menu to the left and reposition the hamburger icon as well as adjust the animation and direction the page moves when the menu opens and closes. You can find a dediated quick snack on this here.

.et_fullwidth_nav #main-header .container {
    padding: 0;
}

.et_pb_slide_menu_active header#main-header,
.et_pb_slide_menu_active #page-container {
    left: 320px !important;
}

.et_pb_slide_menu_active .et_slide_in_menu_container.et_pb_slide_menu_opened {
    right: auto !important;
    left: 0 !important;
    z-index: 99999;
}

body.et_pb_slide_menu_active {
    overflow-x: hidden !important;
}

.et_slide_in_menu_container {
    left: -320px;
    -webkit-box-shadow: 0 0 20px grey;
    box-shadow: 0 0 20px grey;
    -webkit-transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
    transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
}

#et-top-navigation {
    position: fixed;
    float: left;
    padding-left: 0 !important;
}

 

Here we are repositioning the open and close icons

.mobile_menu_bar:before {
    top: -20px;
    left: 5px;
    font-size: 40px;
    color: #000;
    cursor: pointer;
}

.et_toggle_slide_menu:after {
    left: 250px;
    font-size: 40px;
    z-index: 1000000;
    position: fixed;
    opacity: 0;
    color: #fff;
}

 

Next we have a couple of media queries to reposition the hamburger on tablets and mobile.

@media only screen and (max-width: 980px) {
    .mobile_menu_bar:before {
        top: -65px;
        left: -72px;
    }
    .et_toggle_slide_menu:after {
        left: 250px;
        top: 10px;
    }
    .et_header_style_left #et-top-navigation {
        top: 45px;
    }
    .et_header_style_slide .et-fixed-header #et-top-navigation {
        top: 58px;
    }
    .single .mobile_menu_bar:before {
        top: -65px;
        left: 5px;
    }
}

@media only screen and (max-width: 767px) {
    .mobile_menu_bar:before {
        top: -15px;
        left: -35px;
    }
    .et_toggle_slide_menu:after {
        left: 210px;
        top: 15px;
    }
    .et_header_style_left #et-top-navigation {
        top: -5px;
    }
    .et_header_style_slide .et-fixed-header #et-top-navigation {
        top: 9px;
    }
    .single .mobile_menu_bar:before {
        top: -15px;
        left: 0;
    }
}

 

We then add some styling for the footer. We are giving it a transparent background, sizing and positioning the footer menu and resizing the bottom bar.

#main-footer {
    background: transparent;
}

#et-footer-nav {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0 30px;
}

#footer-bottom {
    width: 100%;
}

 

Next we use a couple of media queries to define the size and position of the footer elements.

@media only screen and (min-width: 981px) {
    #footer-bottom {
        width: 50%;
    }
    #footer-bottom .container,
    #et-footer-nav .container {
        width: 100%;
    }
    #et-footer-nav {
        background-color: transparent;
        position: absolute;
        right: 50px;
        width: 50%;
    }
    .bottom-nav {
        text-align: right;
    }
    #footer-info {
        text-align: left;
    }
}

@media all and (max-width: 980px) {
    #et-footer-nav {
        padding: 0 30px;
    }
}

 

Here we are adjusting the padding on the footer menu items so they line up properly, adding the dividing pipe and rotating it slightly (you could use a forward slash and leave out the transform property but I find it doesn’t line up nicely with the text), then we remove the pipe from the last menu item and the left padding from the first menu item.

.bottom-nav li {
    padding-right: 0;
    padding-left: 22px;
    position: relative;
}

.bottom-nav li:before {
    content: '|';
    position: absolute;
    right: -17px;
    color: #000;
    margin-top: -2px;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}

.bottom-nav li:last-child:before {
    content: '';
}

.bottom-nav li:first-child {
    padding-left: 0;
}

 

And finally, a little styling to adjust the position of the back to top button. You won’t see it on my demo as I don’t have enough content for scroll but its the same effect you see on this page you are reading now.

.et_pb_scroll_top.et-pb-icon {
    right: 7px;
    bottom: 8px;
    padding: 2px 3px 2px 1px;
    border-radius: 0;
    background: #000;
}

 

Copy the entire CSS from the toggle below and paste into your child theme stylesheet or Divi Them Options Custom CSS box and save.

Complete CSS
/*-----------------------------------------------*/
/*------Divi Soup Boxed Layout by Divi Soup------*/
/*-----------------------------------------------*/


/*Reduce main header height*/

#main-header,
#main-header.et-fixed-header {
    max-height: 0;
}


/*Move the page content up*/

#page-container {
    padding-top: 0 !important;
}


/*Set the content margins to create the boxed effect*/

@media only screen and (min-width: 768px) {
    .entry-content,
    .search #main-content,
    .archive #main-content {
        position: relative;
        z-index: 10;
        margin: 45.5px 50px;
        -webkit-box-shadow: 0 0 20px grey;
        box-shadow: 0 0 20px grey;
    }
    /*Adjust bottom margin on archive pages*/
    .search #main-content,
    .archive #main-content {
        margin-bottom: 0;
    }
    /*Set footer margins*/
    #main-footer {
        margin: 0 50px;
    }
}


/*Slide the menu in from the left*/


/*Remove header padding*/

.et_fullwidth_nav #main-header .container {
    padding: 0;
}


/*Move the menu to the left when open*/

.et_pb_slide_menu_active header#main-header,
.et_pb_slide_menu_active #page-container {
    left: 320px !important;
}

.et_pb_slide_menu_active .et_slide_in_menu_container.et_pb_slide_menu_opened {
    right: auto !important;
    left: 0 !important;
    z-index: 99999;
}


/*Hide the screen overflow*/

body.et_pb_slide_menu_active {
    overflow-x: hidden !important;
}


/*Switch the slide-in animation from right to left*/

.et_slide_in_menu_container {
    left: -320px;
    -webkit-box-shadow: 0 0 20px grey;
    box-shadow: 0 0 20px grey;
    -webkit-transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
    transition: left 0.8s cubic-bezier(0.77, 0, 0.175, 1), margin-top 0.4s ease-in-out !important;
}

/*Move the hamburger menu to the left*/

#et-top-navigation {
    position: fixed;
    float: left;
    padding-left: 0 !important;
}


/*Position the closed menu icon*/

.mobile_menu_bar:before {
    top: -20px;
    left: 5px;
    font-size: 40px;
    color: #000;
    cursor: pointer;
}


/*Position the open menu icon*/

.et_toggle_slide_menu:after {
    left: 250px;
    font-size: 40px;
    z-index: 1000000;
    position: fixed;
    opacity: 0;
    color: #fff;
}


/*Adjust position for smaller screens*/

@media only screen and (max-width: 980px) {
    .mobile_menu_bar:before {
        top: -65px;
        left: -72px;
    }
    .et_toggle_slide_menu:after {
        left: 250px;
        top: 10px;
    }
    .et_header_style_left #et-top-navigation {
        top: 45px;
    }
    .et_header_style_slide .et-fixed-header #et-top-navigation {
        top: 58px;
    }
    .single .mobile_menu_bar:before {
        top: -65px;
        left: 5px;
    }
}

@media only screen and (max-width: 767px) {
    .mobile_menu_bar:before {
        top: -15px;
        left: -35px;
    }
    .et_toggle_slide_menu:after {
        left: 210px;
        top: 15px;
    }
    .et_header_style_left #et-top-navigation {
        top: -5px;
    }
    .et_header_style_slide .et-fixed-header #et-top-navigation {
        top: 9px;
    }
    .single .mobile_menu_bar:before {
        top: -15px;
        left: 0;
    }
}


/*Footer*/


/*Remove footer background colour*/

#main-footer {
    background: transparent;
}


/*Position the footer menu*/

#et-footer-nav {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0 30px;
}


/*Resize the footer*/

#footer-bottom {
    width: 100%;
}


/*Reposition the footer elements on desktop*/

@media only screen and (min-width: 981px) {
    #footer-bottom {
        width: 50%;
    }
    #footer-bottom .container,
    #et-footer-nav .container {
        width: 100%;
    }
    #et-footer-nav {
        background-color: transparent;
        position: absolute;
        right: 50px;
        width: 50%;
    }
    .bottom-nav {
        text-align: right;
    }
    #footer-info {
        text-align: left;
    }
}


/*Adjust footer menu padding on tablet and mobile*/

@media all and (max-width: 980px) {
    #et-footer-nav {
        padding: 0 30px;
    }
}


/*Change the padding of the footer nav links*/

.bottom-nav li {
    padding-right: 0;
    padding-left: 22px;
    position: relative;
}


/*Add the divider and rotate it*/

.bottom-nav li:before {
    content: '|';
    position: absolute;
    right: -17px;
    color: #000;
    margin-top: -2px;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}


/*Remove the divider from the last footer menu item*/

.bottom-nav li:last-child:before {
    content: '';
}


/*Remove padding from the first footer menu item*/

.bottom-nav li:first-child {
    padding-left: 0;
}


/*Position the back to top button*/

.et_pb_scroll_top.et-pb-icon {
    right: 7px;
    bottom: 8px;
    padding: 2px 3px 2px 1px;
    border-radius: 0;
    background: #000;
}


/*-----------------------------------------------*/
/*----End Divi Soup Boxed Layout by Divi Soup----*/
/*-----------------------------------------------*/

 

And that’s it!

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. smile

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and full time Divi educator as well as a mother of two beautiful girls and two cheeky Black Labradors called Harley & Chaz. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!