Skip to content

Add More Article Columns To Divi Blog Module

kary4 edited this page Feb 9, 2018 · 5 revisions
  1. 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>
  1. 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

Clone this wiki locally