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

Nelson Miller Pee Aye Creative
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!

1. Set Up The Divi Blog Module

Set the Blog module to either grid or 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.

2. Add A Custom CSS Class

If you only want to affect just one blog module on your 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.

add a CSS class to reorder the elements in the Divi Blog module

3. Copy & Paste The CSS Snippet

The last step is to add the CSS code snippet below into your Divi website.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about 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.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*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.

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

17 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
  4. Yuka

    Hi,Thank you for the tutorial.

    Can I change the order of authors, dates, categories, etc. in the meta information?

    Reply
  5. Conor

    Hello!

    Is there a way to have this work on mobile only?

    I have a different CSS class for desktop that floats the featured image left.

    I tried creating a separate mobile-visibility-only blog module with the “pa-reorder-blog” CSS class but the CSS effects the existing desktop-only CSS as well.

    Reply
    • Hemant Gaba

      Hi Conor!

      The code provided in this post is applicable to all views (Desktop, Tablet, & Mobile). If you want to make modifications to a certain blog module, you must add the CSS class to the ” pa-reorder-blog ” in the CSS code.

      If the blog module in your case has a CSS class added specifically for mobile views, you can use the following code:

      /*make the parts of the blog post flexible*/
      .pa-reorder-blog .et_pb_post {
      display: flex;
      flex-direction: column;
      }

      /*blog post featured image*/
      .pa-reorder-blog .et_pb_post .et_pb_image_container, .pa-reorder-blog .et_pb_post .entry-featured-image-url {
      order: 2;
      }

      /*blog post title*/
      .pa-reorder-blog .et_pb_post .entry-title {
      order: 1;
      }

      /*blog post meta*/
      .pa-reorder-blog .et_pb_post .post-meta {
      order: 3;
      }

      /*blog post excerpt and button*/
      .pa-reorder-blog .et_pb_post .post-content {
      order: 4;
      }

      /*remove negative margin on blog image*/
      .pa-reorder-blog .et_pb_blog_grid .et_pb_image_container {
      margin: 0!important;
      }

      /*adjust margin below blog post featured image*/
      .pa-reorder-blog .et_pb_post .entry-featured-image-url {
      margin-bottom: 10px;
      }

      OR

      You can use the code with the “media query”, so the code will work only on mobile view:

      @media only screen and (max-width: 767px) {

      /*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;
      }

      /*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;
      }
      }

      Hope this helps!

      Reply
  6. Jonathan

    Hi, this also works:

    /* Divi blog module: Metatext above the title */
    jQuery(function ($) {
    “use strict”;
    $(“.home .et_pb_post”).each(function () {
    var $title = $(“.entry-title”, this);
    $(“.post-meta”, this).insertBefore($title);
    });
    });

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart