5 Divi Portfolio Layouts

With Divi, you can build some great looking portfolio layouts. But if you build in combination with the Essential Grid plugin you can build some amazing looking portfolio layouts. In this tutorial, I have 5 Divi portfolio layouts for you. The first one is built with just Divi and some custom CSS, the other 4 are build in combination with the Essential Grid plugin. This is a paid plugin and costs $ 34, you can get it here.

To make it easy you can download all the setting files from the free membership dashboard. Not a member yet you can sign up here for free.

You can see all the demo portfolio layouts right here.

General portfolio settings

Step 1 download the package

First, go to your membership dashboard and go to Free downloads. Then click on the button download under 5 free Divi portfolio layouts to download the files package.

Extract the download file > Divi-Portfolio-Layouts.zip

Here you will find all the layout files which we need to import later on.

Adding portfolio items

Start with adding your portfolio items in Projects. I created a single portfolio layout which you can use if you like. You can see the demo here.

If you like to use this layout then you can import it.

Go to Divi > Divi > Library and click on the Import & Export button.

Then click on import and choose file.

Navigate to your extracted file Divi Portfolio Layouts > Single portfolio layout.json and start the import process.

Go to projects and click on Add New.

Give your project a title and click on Use Divi Builder.

On the next screen choose a premade layout.

On the next screen go to Your saved layouts and click on Single Portfolio Layout.

Then click on Publish.

Now go back to your dashboard to Projects and then to the project you just created.

First you need to assign this project to a category, if you don’t have any yet you can create here one and give it a check.

Then set a featured image. This is the image that you will see on the portfolio page.

Essential Grid plugin

For the portfolio layouts 2 to 5 you need to have the Essential Grid plugin. This is a paid plugin and costs $ 34. You can buy a copy here.

For now, you only need to install and activate the plugin. The importing process will be described in each section.

Now let’s start with the first portfolio layout, you don’t need to have the plugin for this one.

Portfolio example #1

This is a 2-column layout with an overlay hover effect. You do not need the Essential Grid plugin for this one.

First, you need to import this layout. Go to Divi > Divi Library and click on the Import & Export button.

Choose Import and navigate to your download folder and go to Portfolio example 1 folder.

Import the file Portfolio example 1 layout.json

Now go create a new page and give it a title and activate the Divi Builder.

After you did this choose a Build from scratch.

Now click on the blue section button > Add from library > Portfolio example 1

Publish the page.

Now you need to add the CSS code for this layout in Divi > Theme Options > CSS

/* ######  PORTFOLIO 1  ##### */

@media (min-width: 981px) {
.et_pb_gutters3 .et_pb_column_4_4 .et_pb_grid_item {
	width: 47.25%;
	margin-right: 0px;
}

.et_pb_gutters3 .et_pb_column_4_4 .et_pb_grid_item.first_in_row	{
		margin-right: 5.5%;
}}

.et_pb_gutters3 .et_pb_column_4_4 .et_pb_grid_item h2.et_pb_module_header {
	padding-bottom: 10px;
}

Portfolio examples 2 to 5

For the following layouts, you do need to have the plugin Essential grid installed and activated.

The process of installing each of these layouts is the same. In the download folder Divi Portfolio Layouts you will find 5 folders Portfolio example 1 to 5. I will describe the process of portfolio layout #2, but if you want portfolio layout #4 the only difference is you need the files in that folder.

Step 1

Go to Ess. Grid > Import/Export > Import

Click on choose file and navigate to your download folder. Go to the folder Portfolio example 2 and import the file portfolio_2_ess_grid.json

Click on Import Selected Data button.

Step 2

Now you need to import the page layout.

Go to Divi > Divi Library and click on import/export

Go to the import tab and navigate to your download folder and go to Portfolio example 2 and upload the file Portfolio example 2 layout.json

Step 3

Create a new page and choose build from scratch.

Now click on the blue section button > Add from library > Portfolio example 2
Publish the page.

Leave the visual builder and you should now see your portfolio items.

And that’s it for this tutorial. Check also out my tutorial on how to make some amazing Divi person module layouts.