How To Reorder The Divi Blog Image, Title, Meta, Excerpt, and Button

In this Divi tutorial you will learn an easy trick to change the order of the Divi blog grid title, image, meta, excerpt, and button!

Categories: Divi Blog Divi CSS Tutorials

Change The Order Of Divi Blog Grid Elements

Today we are adding another tutorial to our Divi Blog tutorial series with an easy trick to reorder the different parts that make up the blog post grid! This CSS code and tutorial allows you to choose which item you want to show first, second, third, etc. and it is very easy for anyone to do. Please be sure to follow along with the video and enjoy the tutorial!

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Subscribe On YouTube

How To Change The Order Of The Elements Of The Divi Blog Module

Setup

Set the Blog module to either grid of fullwidth layout under the Design tab>Layout (it works for either one). You can go ahead and adjust the Divi builder design settings and style the title text and meta however you want.

OPTIONAL: Add A Custom CSS Class

If you only want to affect just one blog module on yoru site (if you have more than one) then you will want to add a custom class in front of each selector in the snippet below. Then add a custom CSS class in the module to match. Go to the Advanced tab to the Custom CSS ID & Classes toggle and add “pa-reorder-blog” to the CSS Class input field.

Copy & Paste The CSS Snippet

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*make the parts of the blog post flexible*/

.et_pb_post {
	display: flex;
	flex-direction: column;
}


/*blog post featured image*/

.et_pb_post .et_pb_image_container, .et_pb_post .entry-featured-image-url {
	order: 2;
}


/*blog post title*/

.et_pb_post .entry-title {
	order: 1;
}


/*blog post meta*/

.et_pb_post .post-meta {
	order: 3;
}


/*blog post excerpt and button*/

.et_pb_post .post-content {
	order: 4;
}

This next part of the CSS is two snippets that adjust the default margin found on the blog post featured images. The first one removes the default negative margins, making the image inline the same width as the title, meta, excerpt, etc. The second part adjust the spacing below the image, which may be needed depending on which order of items you use.

/*remove negative margin on blog image*/

.et_pb_blog_grid .et_pb_image_container {
	margin: 0!important;
}


/*adjust margin below blog post featured image*/

.et_pb_post .entry-featured-image-url {
	margin-bottom: 10px;
}

Here are some of the ways you can arrange the Divi blog post items.

Divi blog post with title meta image excerpt button

Divi blog post with title image meta excerpt button

Divi blog post with image meta title excerpt button

Occasionally, depending on the order, you may need to add a margin to one of the items. If you watch the video, you will see me doing that a few times to adjust the spacing to perfection.

Last updated Aug 31, 2021 @ 11:10 am

That's it!

I hope you have enjoyed learning How To Reorder The Divi Blog Image, Title, Meta, Excerpt, and Button. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

10 Comments

iTheo on February 11, 2021 at 7:25 am

Awesome!!!!! I really like your tutorials. I just created a blog grid with two of your tutorials.

I also read and used the Change The Number Of Columns In The Divi Blog Module and Change The Divi Blog Module Into A List Layout.

But I have a question. Would it be possible to separate the author from the category and the publish date so I could show the category above the title, and below the excerpt the author and date?

Thank you!
Reply
- Nelson Lee Miller (aka The Divi Teacher) on February 22, 2021 at 4:47 pm
  
  Hi there,
  Those items are all part of the meta class, so that will not work. You could probably reorder them within the meta, but you couldn’t separate the meta items and mix and match them with the other items.
  Reply
HollyG on April 6, 2021 at 9:48 am

This is great, thank you, is there a way to use this in conjunction with your other post? –
https://wordpress-292293-1617718.cloudwaysapps.com/how-to-change-the-divi-blog-module-into-a-list-layout/
Reply
- Nelson Lee Miller (aka The Divi Teacher) on April 30, 2021 at 8:47 pm
  
  Should be fine, have you tried it?
  Reply
david cutrano on August 14, 2021 at 8:25 am

Hi Nelson…Your tutorials are super helpful and I’m trying to combine a few of them to achieve a specific outcome

I am trying to implement the change in order of the title, meta, and excerpt on the fullwidth layout. However when I change everything to flex it places items in the vertical layout.

I need that flex option for something else as well. After I get these items in order I want to use margin: auto to center the text to the image in the right column. It seems as though I need columns within the et_pb_post class but I don’t know what to do.

My staging site is here. If you have a chance could you please offer
your recommendation for making this happen

https://vps70997.inmotionhosting.com/~natur380/blog/
Reply
- Hemant Gaba on August 16, 2021 at 3:56 pm
  
  Hi David,
  Go to the Divi > Theme Options > Integrations and place the jQuery code given below:
  jQuery(document).ready(function(){ jQuery(".pa-blog-list article").each(function(){ jQuery(this).children('h2,p,div').not(':first-child').wrapAll('
  '); }) })
  Note: The jQuery code should be wrapped in script tags.
  
  Now go to Divi > Theme Options > Custom CSS Panel and place the CSS code given below:
  .pa-blog-list article .wrap{ display: flex; flex-direction: column; justify-content: center; }
  .pa-blog-list article .wrap h2{ order: 1; width: 100%; } .pa-blog-list article .wrap div{ order: 2; width: 100%; }
  .pa-blog-list article .wrap p{ order: 3; width: 100%; }
  
  In the CSS code, you can see orders 1, 2, and 3. These are the default order of your heading, content, and meta tags respectively and you can change the order by changing these order numbers as per your liking.
  
  Let me know if that helps. 🙂
  Reply
  - David Cutrano on August 17, 2021 at 10:16 am
    
    Amazing. This worked beautifully. Thank you for taking the time to reply to me and help. You guys are great
  - Hemant Gaba on August 17, 2021 at 1:49 pm
    
    I am really glad to hear that everything is working fine now. 🙂
    
    Please let me know if you need any further assistance.
Az on September 11, 2021 at 12:05 am

I want to display parent category underneath each title within the blog module.

Is it possible?
Reply
- Hemant Gaba on September 14, 2021 at 8:03 pm
  
  Hi AZ,
  
  Could you please share the URL of the page where the blog module is present for me to investigate further?
  Reply