Add More Article Columns To Divi Blog Module
kary4 edited this page Feb 9, 2018
·
5 revisions
- Please add the following script to the** wp-admin>divi>theme options>Integration>Add code to the < head > of your blog** option:
<script>
jQuery( document ).ready(function() {
jQuery('.et_pb_blog_grid').each(function(){
let thisArticle = jQuery(this).find('article');
jQuery(thisArticle).prependTo(this);
});
});
</script>
- Add the following code to the Custom CSS field under Wp-admin>Theme options>Custom CSS field
@media screen and (min-width: 981px) {
.et_pb_blog_grid[data-columns] .et_pb_post {
opacity: 1 !important;
width: 23%;
float: left;
margin-right: 2%;
}
.blog-sidebar .et_pb_post:nth-child(4n+1) {
clear: left;
}
}
Another solution (for 5 columns):
#page-container .et_pb_salvattore_content[data-columns]::before {
content: '5 .column.size-1of5' !important;
}
/* These are the classes that are going to be applied: */
#page-container .column { float: left !important; }
.size-1of5 {
width: 18% !important;
margin-left: 1% !important;
}
Tickets with solutions: https://www.elegantthemes.com/forum/viewtopic.php?f=187&t=813598