How to Design a Recent Posts by Category Layout with Cool Hover Effects in Divi

Posted on December 17, 2019 by in Divi Resources | 16 comments

How to Design a Recent Posts by Category Layout with Cool Hover Effects in Divi

We are all used to seeing recent posts being displayed on a website.  They are usually generated using the WordPress Recent Post widget or a plugin to show the most recently published articles on the blog. And they usually show up on the blog page, at the bottom of posts, in sidebars, or as a featured section of a landing page (something like this).

For this tutorial, we are going to show you how to display recent posts by category. Using only the Divi Builder (and a few blog modules), we are going to create a section that displays the latest posts from four different categories. This recent posts by category section will include unique category tags, animations, and hover effects – all without a plugin.

Check it out!

Sneak Peek

Here is a quick look at the design and functionality of the Recent Posts by Category Layout we will build together.

recent posts by category

recent posts by category

Download the Recent Posts by Category Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If youíre already on the list, simply enter your email address below and click download. You will not be ìresubscribedî or receive extra emails.

To import the layout to your page, simply extract the zip file and drag the json file into the Divi Builder.

Letís get to the tutorial shall we?

What You Need to Get Started

recent posts by category

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Also, the functionality of the recent posts section depends on having actual blog posts on your site with categories assigned to them. So make sure you have a few mock blog posts setup if you are using a test site.

After that, you will have a blank canvas to start designing in Divi.

Creating the Recent Posts by Category Section in Divi

Create a 4 Column Row

To get things started in the Divi Builder, create a 4 column row.

recent posts by category

Creating Blog Module 1

Each of the four columns will hold a separate blog module. Add the first blog module to column 1.

recent posts by category

Each of the blog modules will display the most recent post from your site by default. All we are going to do is select a specific category to include for that specific blog module. Then we will limit the post count to 1 so that only one post will show. This will give us the latest blog post for that category dynamically.

Blog Content

Update the Blog Content options as follows:

  • Post Type: Posts
  • Post Count: 1
  • Included Categories: News (or one of your own)
  • Use Post Excerpts: NO
  • Excerpt Length: 120

recent posts by category

Element Options

Then update the elements options as follows:

  • Show Categories: NO
  • Show Excerpt: NO (desktop), YES (Hover and Tablet)
  • Show Pagination: NO

recent posts by category

Blog Design

Then update the design as follows:

  • Background Color (desktop): #ffffff
  • Background Color (hover): #8ac829
  • Title Font Weight: Semi Bold
  • Title Font Style: TT
  • Title Text Size: 24px
  • Title Letter Spacing: 1px
  • Title Line Height: 1.4em
  • Body Text Color: #ffffff
  • Meta Font Weight: Light
  • Meta Letter Spacing: 3px

recent posts by category

  • Min Height: 450px (desktop), auto (tablet)
  • Padding: 5% top, 5% bottom, 5% left, 5% right
  • Box Shadow: See Screenshot
  • Animation Style: Zoom

recent posts by category

That takes care of the design of our first blog module. Now we need to create our custom category tag.

Creating Category Tag 1

To create the tag, add a new text module under the blog module and then drag it above the blog module.

recent posts by category

Text Content

Update the body content with the name of the category you chose for the blog module. In my example, I’m displaying the recent post from the News category so I will add the word “News” to the body content.

recent posts by category

Designing the Category Tag

Under the text design settings, update the following:

  • Background Color: #8ac829
  • Text Font Weight: Ultra Bold
  • Text Text Color: #ffffff
  • Text Alignment: center
  • Width: 120px
  • Margin: 80px top, -80px bottom
  • Padding : 10px top, 10px bottom
  • Animation Style: Fade
  • Animation Delay: 1000ms
  • Z Index: 1

Since we are using negative margin to drop the tag over the blog card, we will need to set the z index to 1 so that the tag stays above the blog module.

recent posts by category

Now that we have one post done, we can deploy the wireframe view mode and copy those modules over to the other columns.

Copy the text and blog module in column 1 and paste them into columns 2,3, and 4 so that you have the exact same modules in each column.

recent posts by category

For each duplicate blog module, we need to give it a new blog category and hover background color. And for each duplicate category tag, we need to update the category name to correspond with the category selected for the blog module and then update the background color to match the hover background color of the blog module.

Update Modules in Column 2

Staying in wireframe view, open the settings for the blog module in column 2, and update the following:

  • Included Categories: Business (or your own)
  • Background Color (hover): #f64937

recent posts by category

Then update the settings for the text module in column 2 as follows:

  • Body: “Business”
  • Background Color: #f64937

recent posts by category

Update Modules in Column 3

Then open the settings for the blog module in column 3, and update the following:

  • Included Categories: Money (or your own)
  • Background Color (hover): #6529c7

recent posts by category

Then update the settings for the text module in column 3 as follows:

  • Body: “Money”
  • Background Color: #6529c7

recent posts by category

Update Modules in Column 4

Then open the settings for the blog module in column 4, and update the following:

  • Included Categories: Coaching (or your own)
  • Background Color (hover): #f17809

recent posts by category

Then update the settings for the text module in column 4 as follows:

  • Body: “Coaching”
  • Background Color: #f17809

recent posts by category

Updating the Row Settings

There are a few adjustments we need to make to our row, including a set height and custom gutter width. Update the following row settings:

  • Use Custom Gutter Width: YES
  • Gutter Width: 2
  • Width: 94%
  • Max Width: 1400px
  • Height: 540px (desktop), auto (tablet)
  • Padding: 0px top, 0px bottom

recent posts by category

We are setting the row height to 540px on desktop in order to keep the row from expanding and moving other content on the page when hovering over a blog card. Make sure to set the height to auto on tablet so you won’t hide any content.

Updating the Settings for Each Column

To give the recent blog posts a hover effect that is applied to both modules simultaneously, we can add the hover effect to the column that contains the two modules that make up the blog post. Open the settings for each of the columns and update the following:

  • Transform Scale (Hover): 115%

Then add the following custom CSS to the main element on tablet display only:

transform: none !important

This little snippet will disable the transform scale hover effect for mobile.

recent posts by category

Now whenever the recent posts are all set with a corresponding category tag and a matching background color that show when hovering over the card. Also, the card will get larger and show the excerpt on hover as well.

recent posts by category

Updating the Section Settings

For the section, let’s give it a new background gradient and some padding. Open the section settings and update the following:

  • Background Gradient Left Color: #6529c7
  • Background Gradient Right Color: #f64937
  • Gradient Direction: 270deg
  • Padding: 10vw top, 10vw bottom

recent posts by category

Final Result

That’s it! Let’s check out the final result. This image includes a title that can easily be added to complete the design.

recent posts by category

recent posts by category

And here is the animation and hover effects.

Final Thoughts

Creating a Recent Posts by Category Layout really is an easy process once you think outside the box a little. All you really need to do is create a blog module for every category you want to display. Then limit that module to only displaying the most recent post for a certain category. After that, you have the power of Divi at your side to take care of the design.

This layout can be used anywhere on your site, including Theme Builder Templates. So feel free to import them anywhere you need them using the portability options. I hope it comes in handy for your next project or at least gives you a little inspiration to get those wheels turning for even better Divi designs.

I look forward to hearing from you in the comments.

Cheers!

Premade Layouts

Check Out These Related Posts

16 Comments

  1. Super Cool. Really Love the Creativity here!

  2. I love hover effects. Never used Divi Themes but the explanation is extremely in-depth. Loved it.

    • Awesome! You should definitely give Divi a try. Thanks for the comment.

  3. nice posting thanks for sharing this articles

  4. Than you for this, I’m trying to find recent post plugin but all of theme sucks. I’m thinking that there is a way to make it carousel the 4 columns?

  5. Very clear explanation. Thanks for sharing.

  6. Really nice effects and thorough explanation. I was even able to replicate it myself. 🙂
    This reminds me of one thing in particular I miss in Divi, and that it the opportunity to pick a random post from one or more categories. Not just the latest. I am relying on a third-party plugin to randomly suggest other posts, listed at the bottom of each post. What is it I’ve overlooked?

    • Sandalsand,

      I see what you mean. Looks like the blog module doesn’t include the option to display random posts. But, the post slider module does. So, theoretically, you could display a single random post using a slider with only one slide. That might work. Hope that helps.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest