Divi Custom Blog module Tutorial: How To Edit the Dimension Of Your Divi Thumbnails

In WordPress, CSS is not always your best solution when it comes modifying a style. Sometimes, you need to use php and consider applying hook to overwrite the default value.

In this tutorial, I’m going to walk you through how you can transform your Divi blog module to look like Instagram.

Are you ready?

Note: Please make sure to install a Child Theme. If you’re not sure what child theme, check my video here.

Step 1: Video Stamp: (12:03) – Add A Hook Function: Add_filter

Go to Appearance > Theme Editor > Functions.php > Paste the code below.

<?php
add_filter ('et_pb_blog_image_height','blog_height');
add_filter('et_pb_blog_image_height','blog_width');

function blog_height($height){
$height = 500;
return $height;
}

function blog_width($width){
$width = 500;
return $width ;
}

$new_image = add_image_size ('new-blog-size', $height, $width');

echo $new-image;

?>

Optional: If you want to add additional zoom in effect on blog module. Kindly add a class ID in your blog module called #square-blog and add the following code in Divi > Theme Options > CSS Code or put it on the “Child Theme” > Style.CSS

@media(min-width:768px) {
#square-blog a:hover {
transform: scale(1.1);
}}

//remove this code if you want to keep the title visible
#square-blog .entry-title a {
display: none;
}

If you want to add Instagram feed style in mobile version, simply put the additional CSS code in the Theme Option > Custom CSS

@media(max-width:768px) {
#square-blog .et_pb_blog_grid .column {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
}
	
#square-blog .et_pb_blog_grid .et_pb_post {
    margin-top: -10px;   
    padding: 0 5px;
}
	
}