Select Page

Grid post on non Divi pages


Divi allows us to create truly unique website and pretty decent blog pages but some stuff you can’t use the page builder on like category pages and the archive, the reason that this is a problem is because it leaves your website looking inconsistent, which is not very professional so today I’m going to show you how to makes these pages have the grid blog style.

First you thing you will need to decide is if you want these pages to be fullwidth or if you would like a sidebar on these pages, if you want a sidebar you can scroll down to column section.

Removing sidebar:

next we are going to remove the sidebar line from our pages.

Making content area full width:

Now that we’ve removed the sidebar there is a massive space where the sidebar used to be, we will need to extend our content area into that space.

3 Column layout (fullwidth):

2 Column layout (sidebar):

If you chose to keep your sidebar you will only need the following code make your post display as a grid on those pages.

Responsive time

Next we will need to make sure our grid stay responsive on mobile devices, I’m going to make both 3 and 2 columns become 2 columns on tablets and 1 one column on mobile phones.

If you want it on just a category or archive page, you will just need to remove either .archive, .category or .blog to every CSS item we have added, personally, I think it best to apply the style to all blog pages.

For demo purposes, I’ve made my archive page have a sidebar and my blog page to not have a sidebar so that you can see what the two layouts will look like.

Hope you find this tutorial useful 🙂

2 Comments

  1. lelebart
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    Thanks, it’s a very useful trick: may I suggest a different approach for the 2 columns grid?

    [...]
    .archive .et_pb_post:nth-child(odd), .category .et_pb_post:nth-child(odd), .blog .et_pb_post:nth-child(odd) {
    margin-right: 10%;
    }
    .archive .et_pb_post:nth-child(even), .category .et_pb_post:nth-child(even), .blog .et_pb_post:nth-child(even) {
    margin-right: 0;
    }

    Reply
  2. kat
    • Facebook
    • Twitter
    • LinkedIn
    • Google+
    • Buffer
    • Pinterest
    • reddit
    • StumbleUpon

    This is an old post, but a very valuable post. I have been struggling to find a way to get the standard category pages to look like the divi-built blog pages. Thank you to both of you. I don’t know why, almost 2 years later, Divi hasn’t added this.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Why use The Divi Framework.


Divi is a leading WordPress theme which powers almost 2 million websites around the world, Divi makes building a website super simple as it has one of the most powerful drag and drop builders for WordPress.

We've been using Divi since December 2013 to help speed up client projects, it has made our workflow 1000% times better and has saved us countless hour everyday.

Divi Stride is a Divi Third Party developer, we spend countless hours building tools and resources for the Divi Community.

We are the creators of Section Style Manager (the 5th Divi Plugin to be released), Divi Commerce & Tighten.

| 8 minutes

Pin It on Pinterest

Share This

Share this post with your friends!

No products in the cart.