Eliminate the Separators in the Post Meta
Include a personalized CSS Class in your Divi Blog module. This is a way to prevent the code from making unintended changes to other modules. To include a personalized class, follow these steps:
Open the module settings
Go to the Advanced tab
Open the CSS ID & Classes option
In the CSS Class input field, add the class
divi-blog-separators
In Divi > Theme Options > General Tab > Custom CSS, add this CSS code:
.divi-blog-separators article {
position: relative;
}
Reposition the published date above the Featured Image
In Divi > Theme Options > General Tab > Custom CSS, add this CSS code:
.divi-blog-separators .et_pb_blog_grid .et_pb_post .post-meta span.published {
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff !important;
background: lightgreen !important;
padding: 5px 10px;
margin: 10px;
border-radius: 30px;
}Go to the Blog module > Content > Elements and disable Show Categories.
That will place the published date over the featured image, like in the screenshot below:
Reposition the Category above the Featured Image
Enable the "Show categories" option in the Blog module Settings -> Content
In Divi > Theme Options > General Tab > Custom CSS, add this CSS code:
.divi-blog-separators .et_pb_blog_grid .et_pb_post .post-meta a:nth-child(3),
.divi-blog-separators .et_pb_blog_grid .et_pb_post .post-meta .entry-categories a {
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff !important;
background: #0071fc !important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}
Reposition the Author above the Featured Image
In Divi > Theme Options > General Tab > Custom CSS, add this CSS code:
.divi-blog-separators .et_pb_blog_grid .et_pb_post .post-meta span.author.vcard a {
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff !important;
background: #0071fc !important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}
You can see the result in the screenshot below:
Reposition both Author and Category
In Divi > Theme Options > General Tab > Custom CSS, add this CSS code:
.divi-blog-separators .et_pb_blog_grid .et_pb_post .post-meta span.author.vcard a {
position: absolute;
top: 0;
left: 0;
margin-bottom: 0;
color: #ffffff !important;
background: #0071fc !important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}
.divi-blog-separators .et_pb_blog_grid .et_pb_post .post-meta a:nth-child(3),
.divi-blog-separators .et_pb_blog_grid .et_pb_post .post-meta .entry-categories a {
position: absolute;
top: 0;
right: 0;
margin-bottom: 0;
color: #ffffff !important;
background: #0071fc !important;
padding: 6px 12px;
margin: 15px;
border-radius: 50px;
}
You can see the result in the screenshot below:
