Free Divi Blog Grid Look + Category, Tag, Search Results

Jan 29, 2019 | CSS Tutorial, Free Layout | 0 comments

This is sort of half free layout and half CSS snippet, it’s a blog grid look I came up with when experimenting for a future Divi child theme. Who knows when that will be done though lol, so figured I’d just share this look now. It’s simple and clean, should fit in with a lot of existing sites after the colors are changed.

Typically when styling the blog grid you end up with other areas that don’t match and you need to start messing with FTP and child theme files, or use an injector plugin. I’ve added CSS to make the category, tag, and search results pages match so you don’t have to mess with any of that 🙂 

I’m removing the excerpt text for this look so the “read more” button verbiage doesn’t really make sense to use, so I’m also showing how to change the button text to something else.

If you need a lot of tweaks some CSS knowledge may be required, this is a great starting point for those who enjoy playing with code.

No need to import a layout since I’m just using a few settings in a few places…

  • Blog module content tab:
    • featured image ON
    • read more button ON
    • date ON
    • categories ON
  • Blog module design tab:
    • layout set to ‘grid’
  • This is just a blog module in a single column, I haven’t touched anything in the section or row
  • In the customizer all my typography settings are default except my header font, I’m using Montserrat
  • In Divi theme options > layout > single post layout and general settings I’m only showing the date and categories

css code

The CSS can go in your child stylesheet OR appearance > customize > additional CSS OR Divi theme options > custom CSS box.

/**************************************************/
/**** BLOG STYLE - FEATURED IMAGE ON THE BOTTOM ***/
/**************************************************/
/*** REMOVE ANIMATION FADE IN WHEN BLOG GRID LOADS - TOTALLY OPTIONAL ***/
.et_pb_blog_grid .et_pb_salvattore_content[data-columns] .column .et_pb_post {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    animation: none;
}
/*** SET TO FLEX AND ADJUST WIDTH ***/
.et_pb_blog_grid .column {
    width: 100%;
}
.et_pb_salvattore_content {
    display: flex;
}
/*** MAKE BLOG GRID TIGHTER ***/
.et_pb_gutters3 .et_pb_column_4_4 .et_pb_blog_grid .column.size-1of3 .et_pb_post, 
.et_pb_gutters3.et_pb_row .et_pb_column_4_4 .et_pb_blog_grid .column.size-1of3 .et_pb_post {
    margin-bottom: 20px;
}
.et_pb_column .et_pb_blog_grid .column.size-1of2 {
    margin-right: 0;
    flex: 1;
}
.et_pb_column .et_pb_blog_grid .column.size-1of2 .et_pb_post {
    width: auto;
    flex: 1;
    margin-right: 10px;
    margin-left: 10px;
    margin-bottom: 20px;
}
/*** SINGLE BLOG GRID ITEM ***/
.et_pb_blog_grid .et_pb_post {
    background: #f0f0f0; /* background color of grid item */
    border: 0;
    display: flex; /* allows us to reposition elements */
    flex-direction: column;
    margin-bottom: 0;
    padding: 20px 20px 0;
}
.et_pb_blog_grid .post-content {
    padding: 0 20px;
    margin-bottom: -13px; /* positions the read more button */
    z-index: 1;
}
/*** BLOG GRID TITLE H2 ***/
.et_pb_blog_grid h2 {
    color: #222;
    line-height: 1.2em;
    font-size: 2.2em;
    font-weight: 900;
    padding: 15px 20px 0;
    order: 0;
}
/*** TITLE HOVER STYLING FOR ALL PAGES ***/
.search-results .et_pb_post h2 a:hover, 
.archive .et_pb_post h2 a:hover, 
.et_pb_blog_grid h2 a:hover {
    border-bottom: .2em solid #08DF01;
    background: #fff;
}
/*** BLOG GRID FEATURED IMAGE ***/
.et_pb_blog_grid .et_pb_post .entry-featured-image-url, 
.et_pb_blog_grid .et_pb_image_container {
    margin-bottom: 0;
}
.et_pb_blog_grid .et_pb_image_container {
    order: 3; /* moves the image to the bottom */
    margin-top: 0;
}
/*** BLOG GRID POST META - SOME OF THIS AFFECTS ARCHIVE, SEARCH RESULTS, ETC ***/
.et_pb_blog_grid .post-content p {
    display: none; /* hide excerpt text */
}
.search-results .et_pb_post .post-meta,
.archive .et_pb_post .post-meta,
.et_pb_blog_grid .et_pb_post .post-meta { /* meta styling */
    color: #444; 
    font-size: 1em;
    min-height: 5em; /* this may need adjusting if you show more meta info than I do */
    padding: 10px 20px !important;
}
.search-results .et_pb_post .post-meta a, 
.archive .et_pb_post .post-meta a, 
.et_pb_blog_grid .et_pb_post .post-meta a {
    color: #000 !important; /* meta link color */
}
.search-results .et_pb_post .post-meta a:hover, 
.archive .et_pb_post .post-meta a:hover, 
.et_pb_blog_grid .et_pb_post .post-meta a:hover {
    border-bottom: 2px solid #08DF01; /* meta link on hover */
}
/*** CHANGE READ MORE BUTTON TEXT AND STYLE ***/
.et_pb_blog_grid a.more-link {
    font-size: 0; /* removes the default button text */
}
.et_pb_blog_grid a.more-link:before {
	content: 'VIEW'; /* add new button text */
	position: absolute;
	font-size: 16px;
	font-style: italic;
	line-height: 1.2em;
    font-weight: 600;
    padding: .5em 1.1em;
    border-radius: 50px; /* makes button rounded */
	background: #08DF01; /* button background color */
    color: #111; /* button text color */
}
.et_pb_blog_grid a.more-link:hover:before { /* button background and text color on hover */
    background: #111;
    color: #fff;
}
/*** BLOG GRID MEDIA QUERIES ***/
@media only screen and (min-width: 768px) and (max-width: 980px) {
    .et_pb_blog_grid h2 {
        font-size: 1.8em;
   }
}
@media only screen and (min-width: 981px) and (max-width: 1280px) {
    .et_pb_blog_grid h2 {
        font-size: 1.75em;
        padding: 10px 10px 0;
   }
    .et_pb_blog_grid .et_pb_post .post-meta {
        padding: 10px !important;
   }
    .et_pb_blog_grid .post-content {
        padding: 0 10px;
   }
}
@media only screen and (min-width: 768px) {
    .et_pb_blog_grid h2 {
        min-height: 6em; /* basically I'm telling it to make the title at least 4ish lines high (line height of 1.2em x 4 = 4.8em) so that the posts are equal height, you may need to play with this number depending on your longest post title length and font */
   }
}
@media only screen and (min-width: 981px) {
    .et_pb_gutters3 .et_pb_column_4_4 .et_pb_blog_grid .column.size-1of3, 
    .et_pb_gutters3.et_pb_row .et_pb_column_4_4 .et_pb_blog_grid .column.size-1of3 {
        width: auto;
        flex: 1;
        margin-right: 20px;
   }
}

/*********************************************/
/*** CATEGORY / TAG / SEARCH RESULTS PAGES ***/
/*********************************************/
.search-results .et_pb_post, 
.archive .et_pb_post {
    background: #f0f0f0;
    display: flex;
    flex-direction: column;
    padding: 20px 20px 0;
    font-size: 0; /* hide excerpt text */
}
.search-results .et_pb_post h2, 
.archive .et_pb_post h2 {
    color: #222;
    line-height: 1.2em;
    font-weight: 900;
    padding: 15px 20px 0;
    order: 0;
}
.search-results .et_pb_post h2, 
.archive .et_pb_post h2 {
    font-size: 32px !important; /* can't use em and need important because of font size 0 above */
}
.search-results .et_pb_post .entry-featured-image-url, 
.archive .et_pb_post .entry-featured-image-url {
    order: 1;
    margin: -20px -20px 0 -20px;
    overflow: hidden;
}
.search-results .et_pb_post a img, 
.archive .et_pb_post a img {
    margin-top: -20px;
}
/*** ADD A READ MORE BUTTON SINCE THERE ISN'T ONE ***/
.search-results .et_pb_post .entry-featured-image-url:before, 
.archive .et_pb_post .entry-featured-image-url:before {
    content: 'VIEW';
    position: relative;
    font-size: 16px;
    font-weight: 600;
    font-style: italic;
    background: #08DF01;
    color: #111;
    border-radius: 50px;
    padding: .4em 1.1em;
    margin-left: 35px;
    display: inline-block;
}
.search-results .et_pb_post .entry-featured-image-url:hover:before, 
.archive .et_pb_post .entry-featured-image-url:hover:before {
    background: #111;
    color: #fff;
}
/*** MEDIA QUERIES FOR ARCHIVE PAGE POSTS ***/
@media only screen and (max-width: 767px) {
    .search-results .et_pb_post .entry-featured-image-url, 
    .archive .et_pb_post .entry-featured-image-url {
        max-height: 250px; /* keeps images the same height since these pages don't automatically size the featured image like the blog module does, along with the overflow hidden above it's hiding what doesn't fit */
   }
	.search-results .et_pb_post h2, 
	.archive .et_pb_post h2 {
        font-size: 26px !important;
	}
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
    .search-results .et_pb_post .entry-featured-image-url, 
    .archive .et_pb_post .entry-featured-image-url {
        max-height: 350px;
   }
}
@media only screen and (min-width: 1201px) {
    .search-results .et_pb_post h2, 
    .archive .et_pb_post h2 {
        min-height: 6em;
   }
    .search-results .et_pb_post, 
    .archive .et_pb_post {
        max-width: 48%; /* turns posts into grid items like default blog grid */
        float: left;
        margin-right: 1%;
        margin-left: 1%;
        margin-bottom: 2%;
   }
    .search-results .et_pb_post .entry-featured-image-url, 
    .archive .et_pb_post .entry-featured-image-url {
        max-height: 215px;
   }
}

 

Notes:

  • I mix my units and use em for certain things, px for others, etc. It may seem odd but I have my reasons, change them to your preferred units if you’re comfortable doing so.
  • The fonts you choose and your average post title length will greatly affect this.
  • If you want this to be masonry style remove all instances of min-height, you’ll also need to tweak or remove some of my archive CSS though.
  • I could have consolidated more but I need my code chunks to visually make sense to me. You should edit it to your liking if you know how.
  • This is just one way to accomplish this, more flexbox could have been used but using min-height em’s make it easier for CSS novices to tweak (I think anyway).
  • There are still good reasons to use child theme files to do this as you can do more than style the blog using that method. You can add headers and more content, anything you want really.
  • Screenfly is just an online emulator to give an idea of what a site/page looks like on multiple browser sizes. You’re still responsible for your own real world testing.