R20: How to Create a Fullwidth Alternating Blog Layout

Recipe #20 is something I initially thought was going to require some clever PHP editing, until I remembered the ‘odd’ and ‘even’ CSS pseudo classes. I had great fun with these and will definitely be using them more in the future. The best thing about this recipe is that it uses the automatic excerpt so if you have existing posts there is no need to go in and add manual excerpts, and not a bit of PHP in site

I had always intended Divi Soup to be a video based Divi tutorial site but in the beginning I had so many other things on my plate I just didn’t have the time to create a video as well. I plan to change that! So watch the video, get the code you need in the accompanying blog post, be sure to scroll to the bottom for your fabulous freebie, and let me know what you think in the comments!

You can view the demo here

So let’s get cooking!

Ingredients

The Divi Theme from Elegant Themes

An active child theme

Some existing blog posts or some demo content. Divi uses a default featured image size of 1080 x 675px, this should work with any size images but you are best to make them all the same size. Any size with the same aspect ratio as the default featured image size will avoid your images being cropped.

Cooking time

This should take you around 10 minutes max.

Preparation

The first thing we need to do is set up our section. So add a new section with a single column and then add the blog module.

Open the row settings and make the row fullwidth and set the gutter to 1, then Save & Exit.

Method

Next we need to configure our blog module. Open up the blog module and give it the following settings:

Layout: Fullwidth
Show Featured Image: Yes
Content: Show Excerpt
Read More Button: Yes
Featured Image Overlay: Off (well will set this in the CSS)

For the remaining settings you can choose whatever you like, this is all that’s needed for the layout to work.

Next click on the Custom CSS tab and give the module a CSS Class of ds-alternating-blog

Be sure to Save & Exit.

Now for the CSS. Add the following to your child theme stylesheet or Divi theme options custom CSS box.

/*Alternating blog layout*/

/*Set the effect for screen sizes 980px and larger*/
@media only screen and (min-width: 980px) {
    .ds-alternating-blog .et_pb_post {
    background-color: #fff;
    margin-top: 0;
    margin-bottom: 0;
    padding: 30px;
}

/*Add some hidden content to clear the floats and make our posts site on their own row*/
.ds-alternating-blog .et_pb_post:after {
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

.ds-alternating-blog .et_pb_post h2 {
    margin-top: 0;
}

/*This sets the odd post images to the left*/
.ds-alternating-blog .et_pb_post:nth-child(odd) img {
    float: left !important;
    overflow: hidden;
    width: calc(50% + 60px);
    height: auto;
    padding-right: 30px;
    margin: -30px 0 -30px -30px;
}

/*This sets the even post images to the right*/
.ds-alternating-blog .et_pb_post:nth-child(even) img {
    float: right;
    overflow: hidden;
    width: calc(50% + 60px);
    height: auto;
    padding-left: 30px;
    margin: -30px -30px -30px 0;
}

/*This sets the background color of the image ready for the hover effect*/
.ds-alternating-blog .et_pb_post img {  
    background:rgba(255,255,255,.75);
    opacity:1;
    -webkit-transition: opacity .25s ease;
    -moz-transition: opacity .25s ease;
    transition: opacity .25s ease;
}

/*This gives us the image opacity on hover*/
.ds-alternating-blog .et_pb_post img:hover {
    opacity: .5;
}     

/*This aligns the post text to the right on even posts*/    
.ds-alternating-blog .et_pb_post:nth-child(even) {
    text-align: right;
}
    
/*This sets the position of read more button on odd posts*/
.ds-alternating-blog .et_pb_post:nth-child(odd) a.more-link {
    display: block;
    clear: none;
    margin-left: calc(50% + 30px);
}

/*This sets the position of read more button on even posts*/
.ds-alternating-blog .et_pb_post:nth-child(even) a.more-link {
    display: block;
    clear: none;
    margin-left: calc(50% - 180px);
    }
}

/*This styles the read more button*/
.ds-alternating-blog a.more-link {
    border: 1px solid #000;
    width: 150px;
    color: #000;
    margin-top: 20px;
    padding: 10px;
    text-align: center;
}

/*This styles the readmore button on hover*/
.ds-alternating-blog a.more-link:hover {
    border: 1px solid #000;
    color: #fff !important;
    background: #000;
}

/*This changes the layout to stack posts on smaller screens*/
@media only screen and (max-width: 979px) {
    .ds-alternating-blog .et_pb_post {
    margin-bottom: 0;
}
   .ds-alternating-blog .et_pb_post a img {
    min-width: 100%;
}
    .ds-alternating-blog .et_pb_post .entry-featured-image-url {
    margin: -30px -30px 30px -30px;
}
    .ds-alternating-blog .et_pb_post {
        padding: 30px;
    }
}

/*This fixes a small margin issue with the post meta on small screens*/
@media only screen and (max-width: 479px) {
    .ds-alternating-blog .et_pb_post .post-meta {
    margin-top: 10px;
    }
}

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.

Michelle X