Hey guys, here’s a really easy way of adding two layout options to the blog module.

The code

First, take this CSS snippet, and add it to the theme. (Divi > Theme Options > Custom CSS)

/* The CSS for getting a double columned blog */
.et_pb_module.double-column .et_pb_ajax_pagination_container {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .et_pb_module.double-column .et_pb_ajax_pagination_container article.et_pb_post {
    width: 45%; }
    @media all and (max-width: 479px) {
      .et_pb_module.double-column .et_pb_ajax_pagination_container article.et_pb_post {
        width: 100%; } }

/* The CSS for having the featured image on the left */
.et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post {
  width: 100%; }
  .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .entry-featured-image-url {
    width: 45%;
    float: left; }
  .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .entry-title,
  .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .post-meta,
  .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .post-content {
    width: 50%;
    float: right; }
  @media all and (max-width: 479px) {
    .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .entry-featured-image-url,
    .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .entry-title,
    .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .post-meta,
    .et_pb_module.image-on-the-left .et_pb_ajax_pagination_container article.et_pb_post .post-content {
      width: 100%;
      float: none; } }

Note: You can change the % to change the ratios. Also, they just stack on mobile.

 

Remember: This trick works only with the fullwidth layout for the blog module

 

The next part is really easy.

 

Double Columns

This part’s really easy. Oh, I mentioned that already.

Add a blog module, and then in the advanced tab, add a class “double-column”

… and you’re done.

Voila

Easy Peasy.

Next!

 

Featured Image on the Side

Add a blog module, and then in the advanced tab, add a class “image-on-the-left”

… and you’re done.

like this:

Pretty easy, right?

 

Extra: If you need a comprehensive tutorial on how to control the archive page (like when you click a category, you get whisked off to an archive page) click on the image below to check it out!

 

To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi

 

Notice

Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

You will also get a discount coupon in your inbox as soon as you sign up!

 

 

Photo by oldskool photography on Unsplash