For any person with a service-based business, a portfolio is important to have a place to show all your best work. A portfolio is like your product category page, and your projects are the individual product page.
Divi is the only page builder I’ve seen with a portfolio builder built right into the theme. When you download it, you instantly have a custom post type for projects. And it also has built-in portfolio modules to create a general portfolio page template. In this post, I have a total of 4 tutorials for…
- How to add a new project in Divi
- How to create a project page template
- How to create a portfolio page template using the portfolio module
- How to create a portfolio page template using the filterable portfolio module
Divi Features for Creating Your Portfolio
There are 3 features within Divi that are specifically for the purpose of creating a portfolio with your Divi website.
Projects Post Type
One of the most useful things all users alike would find useful in Divi is the built-in custom post type for projects. Like posts, you can publish and elaborate on individual works or projects you’ve accomplished, and categorize them according to skills, niche, or companies.
The Portfolio Module
The portfolio module displays all projects, regardless of category or tags. There’s an option to make the layout either a standard list or grid view. Either way, this module is for the actual projects portfolio page where you display all of your works – that is, all of the projects you published under the custom post type.
The Filterable Portfolio Module
The filterable portfolio module, like the portfolio module, displays all projects but grouped into categories. Categories will appear as tabs above the list or grid view of projects, and clicking on a particular category will change the projects displayed accordingly.
How to Add a New Project in Divi (Tutorial)
Adding a new project is easily done from the WordPress Dashboard. The post type is built-in, so you’ll find it on the left menu panel, likely somewhere below ‘Posts’ and ‘Pages’.
Hover over Projects and click ‘Add New’.
On the native WordPress editor page, type in the title of your project. For this tutorial, I’m making a mock interior design portfolio.
Check the corresponding categories that the project applies to. Upload a featured image. It will show on the page and will also display as a thumbnail on the portfolio page that we’ll create later on.
Afterwards, publish it immediately, then click on ‘Use Divi Builder’.
Choose to start building from scratch.
We’ll need a single row for every module we’ll insert.
First, insert an Image module.
On the settings panel that appears, click on the image box.
Select your image. The same one that we set as the featured image.
Save your changes.
Click the gray ‘+’ button, then insert a Text module.
On the text field, type the same title of your project. Make sure it’s set to Heading 1
Insert another text field for the category. When the settings panel appears, click on the icon for using dynamic content.
Choose ‘Project Categories’ from the dropdown menu.
Another panel will appear. Just type ‘Category: ’ on the Before text field.
Leave the ‘Link to Category Index Pages’ toggled on Yes.
For the Category Type, select ‘Project Categories’.
Save your changes for the Text module.
As you might have noticed, I added another Text module for the project description or summary.
How to Create a Project Page Template
If you don’t want to do the steps above for every single new project, you can also create a page template for project post types.
Go to the Divi Theme Builder from the Dashboard. Click ‘Add a New Template’.
Select ‘All Projects’ from the dropdown that appears.
Click ‘Build a Custom Body’.
It will bring you to the Divi Builder. Just choose the same selections we did for the tutorial above.
When you get to a blank page, insert an Image module.
On the image settings panel that appears, delete the empty image thumbnail. Then, open the Background tab.
Choose the image background, and then click on the icon for dynamic content.
Select ‘Featured Image’.
Note that I also set the minimum height for 600px. You can do this by going to the Design tab on the settings panel.
Insert a Text module for the Title, project category, and project description or summary.
For the Title text, I chose a dynamic content again and selected ‘Post/Archive Title’.
Here are the settings I configured under the Design tab:
- Text font weight: ultra-bold
- Text size: 28px
For the project category, I just did the same thing as I did when I created a new project above.
As for the text module for the project description or summary, I used dynamic content and selected ‘Post Excerpt’.
With this, you can type in the project description in the default WordPress editor and it will automatically display on the project page.
With this new template, the project we created above will now look like this:
How to Create a Portfolio Page Template in Divi (Tutorial)
Before we create a portfolio page, let’s add more projects first…
In my new project, I filled out the necessary information: project title, featured image, category, and project description.
For the project description, click on ‘Use Default Editor’.
Type the description or summary of the project in the text field.
Same goes for this other new project I published...
By this point, you should have 3 projects, all using the same template we just created.
Now we’re ready to make a portfolio page!
Using the Portfolio Module
Go back to the Divi Builder, and add a new template. This time, choose ‘Projects Archive Page’.
You can also choose All Project Category Pages, if you want to have different pages for each project category.
I just want a single page where all of my sample work will be shown.
When you get to the Divi Builder with an empty page, insert a new single-column row, then a Text module.
Type the title of the page you want. I just put “Projects Portfolio” as an example, but you can say Interior Design Portfolio or Interior Design Projects.
Click on the gray + button, then insert the Portfolio module.
Here are the only settings I changed on the panel…
Under the Content tab...
- Post Count: 6
- Included Categories: All Categories
- Show Pagination: No
Under the Design tab...
- Layout: Grid
Save your changes!
Using the Filterable Portfolio Module
Follow the steps above up to the point of the Text module for the Portfolio page title.
Next, instead of using the portfolio module, insert the Filterable Portfolio module.
The only setting I changed is the layout to grid view.
Save your changes, and there you have it!
