How To Reorder The Divi Blog Image Title Meta Excerpt and Button Tutorial by Pee Aye Creative

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!

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

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.

25
Last updated Aug 31, 2021 @ 11:10 am

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

10 Comments

  1. iTheo

    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)

      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
  2. david cutrano

    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

      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

        Amazing. This worked beautifully. Thank you for taking the time to reply to me and help. You guys are great

      • Hemant Gaba

        I am really glad to hear that everything is working fine now. 🙂

        Please let me know if you need any further assistance.

  3. Az

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

    Is it possible?

    Reply
    • Hemant Gaba

      Hi AZ,

      Could you please share the URL of the page where the blog module is present for me to investigate further?

      Reply

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart