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

May 13, 2017 | Free Layout | 6 comments

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.

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.

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.

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.