Color Block Blog Grid Similar to IFTTT – Masonry & Equal Height

May 13, 2017 | Free Layout | 6 comments

Update 9/14/2018 If you’re using this and your columns went from 3 to 2 after a recent Divi update look at the “Make Grid Tighter” section of the CSS (see below) and change the 31.999% value to 29.667%

I’m on a little podcast called Divi Chat and this week we discussed tools we used outside of WordPress, like 17Hats and Slack. A friend mentioned IFTTT, something I’d heard of but never used. When I went to their site I really liked their card style and thought something similar could be done with the Divi blog grid, so that’s the inspiration for this look.

The background colors are coordinated by category using the same method I used on this tutorial. I added an ET calendar icon in front of the date but that’s the only icon I added to the meta info. The reason was the author and the date have a unique class associated with them, but the comments and categories don’t (that I could see but someone more skilled than me please comment if I’m wrong because I would love to add them).

Without those unique classes I couldn’t think of a way to add icons in front of those with CSS alone (which is what I stick to on my blog). I’m including looks in the demo showing the meta options and what they could look like.

Install the layout

  • Start a new page > enable the Divi builder > click on the 2 arrows in the upper right and upload the .json file from the UNZIPPED file you downloaded.

How to find your category slugs

  • These will need to be adjusted to your categories in the CSS if you want the background color to change per category like my demo.

Adding the CSS

  • This can go in your child theme stylesheet or in Divi’s custom CSS box: theme options > general > scroll to the bottom of the page.

css code for masonry

/*** FEATURED IMAGE ***/
.et_pb_image_container {
    margin: 0;
}
.et_pb_blog_grid .et_pb_image_container img {
    min-width: 100px;
    max-width: 100px;
    height: 100px;
    border-radius: 10px;
    object-fit: cover;
    margin: 20px;
}
/*** HIDE EXCERPT TEXT ***/
.et_pb_bg_layout_light .et_pb_post p,
.article .et_pb_bg_layout_light .et_pb_post p {
    display: none;
}
/*** POST META ***/
.et_pb_post .post-meta {
    display: block !important;
    padding-bottom: 0;
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 20px !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.et_pb_post .post-meta a {
    color: #fff !important;
}
/*** TITLE ***/
.et_pb_blog_grid h2 {
    padding: 20px;
    margin-top: 0;
    margin-bottom: 30px;
}
/*** REMOVE BORDER AND ADD ROUNDED EDGES TO GRID ITEMS ***/
.et_pb_blog_grid .et_pb_post {
    padding: 0;
    border: none;
    border-radius: 12px;
}
/*** GRID BACKGROUND COLOR - REPLACE CATEGORY SLUGS WITH YOURS AND CHANGE THE COLORS ***/
.et_pb_blog_grid .et_pb_post.category-travel {
    background: #4A5899;
}
.et_pb_blog_grid .et_pb_post.category-wildlife {
    background: #559CAD;
}
.et_pb_blog_grid .et_pb_post.category-under-the-sea {
    background: #C1B2AB;
}
.et_pb_blog_grid .et_pb_post.category-food {
    background: #E8634E;
}
/*** MAKE GRID TIGHTER ***/
.et_pb_blog_grid .column.size-1of3 {
    width: 29.667% !important;
    margin-right: 2% !important;
}
.et_pb_blog_grid .column.size-1of3 .et_pb_post {
    margin-bottom: 7% !important;
}
/*** ADD CALENDAR ICON - OPTIONAL ***/
span.published:before {
    font-family: "ETmodules" !important;
    content: "\e023";
    margin-right: 4px;
}

 

css code for equal height

/*** FEATURED IMAGE ***/
.et_pb_image_container {
    margin: 0;
}
.et_pb_blog_grid .et_pb_image_container img {
    min-width: 100px;
    max-width: 100px;
    height: 100px;
    border-radius: 10px;
    object-fit: cover;
    margin: 20px;
}
/*** HIDE EXCERPT TEXT ***/
.et_pb_bg_layout_light .et_pb_post p,
.article .et_pb_bg_layout_light .et_pb_post p {
    display: none;
}
/*** POST META ***/
.et_pb_post .post-meta {
    display: block !important;
    padding-bottom: 0;
    margin-bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px 20px !important;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.et_pb_post .post-meta a {
    color: #fff !important;
}
/*** TITLE ***/
.et_pb_blog_grid h2 {
    padding: 20px;
    margin-top: 0;
    margin-bottom: 30px;
}
/*** MAKE THE GRID EQUAL HEIGHT ***/
@media only screen and (min-width: 768px) {
    .et_pb_blog_grid h2 {
        min-height: 270px;
        /*** YOU WILL NEED TO PLAY WITH THIS 270 NUMBER ***/
    }
}
/*** REMOVE BORDER AND ADD ROUNDED EDGES TO GRID ITEMS ***/
.et_pb_blog_grid .et_pb_post {
    padding: 0;
    border: none;
    border-radius: 12px;
}
/*** GRID BACKGROUND COLOR - REPLACE CATEGORY SLUGS WITH YOURS AND CHANGE THE COLORS ***/
.et_pb_blog_grid .et_pb_post.category-travel {
    background: #4A5899;
}
.et_pb_blog_grid .et_pb_post.category-wildlife {
    background: #559CAD;
}
.et_pb_blog_grid .et_pb_post.category-under-the-sea {
    background: #C1B2AB;
}
.et_pb_blog_grid .et_pb_post.category-food {
    background: #E8634E;
}
/*** MAKE GRID TIGHTER ***/
.et_pb_blog_grid .column.size-1of3 {
    width: 29.667% !important;
    margin-right: 2% !important;
}
.et_pb_blog_grid .column.size-1of3 .et_pb_post {
    margin-bottom: 7% !important;
}
/*** ADD CALENDAR ICON - OPTIONAL ***/
span.published:before {
    font-family: "ETmodules" !important;
    content: "\e023";
    margin-right: 4px;
}

Notes

  • Knowledge of basic CSS is required (i.e. color codes and inserting image URLs).
  • Be sure to read all my comments in the CSS to better understand how/where to customize.
  • In order for the blog to show up like the demo you need to have:
    • posts (with featured images attached) already published.
    • the category slugs must be changed in the CSS to match yours – see above how to find these, notice they are always lowercase.
  • You’ll most likely want to have your search results page and category pages to have this look too. I’m not going to add how to do that here because there are already good tutorials and plugins that can help you do that.
    • For a tutorial Elegant Themes has a pretty good one here. You’ll need to do some CSS tweaking as well.
    • For a (quicker) plugin solution there’s a great Divi injector plugin here.
  • I changed the date format in the blog modules. You can see the reference here if you want to change it to something else.