Color Block Blog Grid Similar to IFTTT - Masonry & Set Height | A Girl and Her Mac

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.

This is a really cool look, if you end up using it feel free to link in the comments, I’d love to see. And if any developers out there could make this better by adding maybe another function in the lower right corner or something that would be awesomesauce!

In the zip:

  • .json file to import through a page/post
  • CSS stylesheet
  • the masonry and equal height files are both included

Download Files

I just want the CSS

Instructions

How to 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 add the CSS:

Ideally this should go in your child theme stylesheet but it can also go 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.

Thanks for stopping by 😃👋

More Freebies

Get updated on new Divi layouts and tutorials!

Like my freebies? Any tips you'd like to leave are greatly appreciated 😍

Coffee & Snack

Donate $5

Doggie Treats

Donate $10

Dinner & Dessert

Donate $25

-- you may change the amount to anything you'd like --

Pin It on Pinterest