Code by Day | Explore By Weekend

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!

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.

21
Last updated Jan 3, 2021 @ 12:45 pm

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

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

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

Join over 4,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart