The full-width portfolio section is one of my favourite Divi sections – combined with the ability to use page-builder in projects, it gives you a wealth of ways to display and categorise information on your site. Which is all well and good if you consistently have landscape images to illustrate your projects, but what if you want to customise the display? I worked with a promoter who wanted to showcase the bands he’d put on, where the most consistent image size is square, for album artwork, so with a bit of help from the support team at Elegant Themes, I managed to come up with a work-around to make the full-width portfolio display square images. You can see it in action on the Chaos Theory Music website.

Note: You should be using a child theme for this tutorial, as it requires changes to theme files which will be otherwise lost when updating to newer versions of Divi. Elegant Themes wrote a great blog post about setting up child themes, which you can read here.

STEP 1:
In your child theme folder:
Create a folder called js
Copy across the custom.js file from Theme/Divi/js into this folder
In custom.js, search for

portfolio_item_height = portfolio_item_width * .75;

Change this to

portfolio_item_height = portfolio_item_width;

(i.e. delete * .75)

STEP 2:
In your child theme folder:
Create a colder called epanel
Copy across the post_thumbnails_divi.php file from Theme/Divi/epanel into this folder
Change the value for

et-pb-portfolio-image

to

400x400

Your child theme folder should look something like this (it won’t necessarily have all those files in, but it should have the folders):

FTP site

STEP 3:
Add the following to your child theme style.css

.et_pb_fullwidth_portfolio .et_pb_portfolio_image {
height: 381px !important;
}

.et_pb_fullwidth_portfolio .et_pb_portfolio_item {
height: 381px !important;
}

STEP 4:

You’ve got two options here.

EMP Tutorial Portfolio Image 1To make the title appear above the plus sign when you hover-over a portfolio item, add this code to your child theme’s style.css:

.et_pb_fullwidth_portfolio .et_pb_portfolio_image .et_overlay:before {
top: 55% !important;
}

 

 

EMP Tutorial Portfolio Image 2If you’d prefer the plus sign to appear above the title, add this code instead:

.et_pb_fullwidth_portfolio .et_pb_portfolio_image h3 {
margin-top: 40%;
}

.et_pb_fullwidth_portfolio .et_pb_portfolio_image:hover h3 {
margin-top: 50%;
}

STEP 5:
Regenerate Thumbnails

And you’re done! This should give you a square container for your full-width portfolio images and display a square crop of the featured image you’re using for the project pages. Enjoy!  See the site live: Chaos Theory Music

EMP Divi Tutorial Chaos Theory screenshot

Hannah Morgan
I am a web and graphic designer based in London. When I'm not building websites I can normally be found playing with my band, watching other bands, taking photos, drinking cider or a combination of the above!