Divi – Styling the blog module

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!

[sc name=”learn css”]

Photo by oldskool photography on Unsplash