Steps to move the Divi blog module items with custom ordering using CSS.
Step 1: Add the class customBlogOrder to your blog module.
Step 2: Update the 4 “order” values in the CSS to your preferred order.
Step 3: Add the custom CSS to the Divi theme options / Custom CSS area.
Scroll down to see what it looks like using a Divi blog module with the below code where the meta info is moved to the second spot instead of the default third spot.
/* moving info on blog module BEGIN */
/*make the parts of the blog post flexible*/
.customBlogOrder .et_pb_post {
display: flex;
flex-direction: column;
}
/*blog post featured image*/
.customBlogOrder .et_pb_post .et_pb_image_container, .customBlogOrder .et_pb_post .entry-featured-image-url {
order: 1;
}
/*blog post title*/
.customBlogOrder .et_pb_post .entry-title {
order: 3;
}
/*blog post meta*/
.customBlogOrder .et_pb_post .post-meta {
order: 2;
}
/*blog post excerpt and button*/
.customBlogOrder .et_pb_post .post-content {
order: 4;
}
/*remove negative margin on blog image*/
.customBlogOrder .et_pb_blog_grid .et_pb_image_container {
margin: 0!important;
}
/*adjust margin below blog post featured image*/
.customBlogOrder .et_pb_post .entry-featured-image-url {
margin-bottom: 10px;
}
/* moving info on blog module END */Here’s what it looks like:
Integrate PHP Code into your Divi Web Pages
If you find yourself wanting to incorporate unique functionality into your web pages using Divi, this may be useful.
Guide to Removing/Replacing Google Fonts in Divi
To address potential GDPR compliance and security concerns associated with loading Google fonts from their server, it is recommended to take the following steps in Divi.
Add image icon to read more button on Divi blog module
How to add an image icon to read more button on the Divi blog module.
0 Comments