How to Create Matching Portfolio & Projects with Divi

If you are a creative or run a service-based business, you may want to create a portfolio website to showcase your experience and display your projects. Having an online portfolio can help you be discovered by potential clients and can establish your credibility. You can use project pages to demonstrate your process and the ideas behind your work, helping visitors imagine what it might be like to work with you.

In this tutorial, we will show you how to create a matching portfolio and project page with Divi. We will use dynamic content for the design of the portfolio page so that you can quickly and easily add new projects to your portfolio without having to design a project page each time. We’ll highlight using the powerful Divi Filterable Portfolio Module as well!

Let’s get started!

Here is a preview of what we will design

What You Need to Get Started

Before we begin, install and activate the Divi Theme and make sure you have the latest version of Divi on your website.

Now, you are ready to start!

How to Create Matching Portfolio & Projects with Divi

Set Up Advanced Custom Fields Plugin

For this design, we are going to be using dynamic content to create a template for our project pages. By using dynamic content in a template, you can create and update fully-designed project pages by filling out the custom fields associated with the project. You can use the built-in custom fields function in WordPress to do this, but it has some limitations. For this design we want multiple photos to dynamically populate, so we are going to use the Advanced Custom Fields Plugin to accomplish this. This plugin is free on the WordPress plugin directory and allows us to add powerful custom fields to the project pages.

From the WordPress dashboard, navigate to the Plugins settings and click Add New. Then search for the Advanced Custom Fields Plugin, install, and activate.

Add Custom Fields

Once the plugin has been installed and activated, open the Advanced Custom Fields settings and add a new Field Group. Add a title, then set the location rules and set the field group as active.

Next, add the custom fields by clicking the blue Add Field button. For this tutorial, we will only modify the field label and type for each field. The first field will be the client name.

Next, add the following fields.

Once you publish and save the custom fields, add a new project or edit an existing one. You should see the custom fields toward the bottom of the editing page. For this portfolio and project layout, fill out each of the custom fields and upload a featured image to the project. If you want to add a filterable portfolio, make sure the posts are categorized as well.

Design Portfolio Page

Now let’s get started with designing our portfolio page. We’ll start with a premade landing page and add a filterable portfolio module to it.

Start With a Premade Layout

Let’s start by using a premade layout from the Divi library. For this design, we will use the Print Designer Landing Page from the Print Designer Layout Pack.

Add a new page to your website and give it a title, then select the option to Use Divi Builder.

We will use a premade layout from the Divi library for this example, so select Browse Layouts.

Search for and select the Print Designer Landing Page.

Select Use This Layout to add the layout to your page.

Now we are ready to build our design.

Add the Filterable Portfolio Module

Add a new regular section below the image of the desk, above the orange “My Latest Prints” section.

Add a single row.

Then, add the filterable portfolio module to the row.

Open the section settings and add a background color.

Next, open the filterable portfolio module settings. Under Content, set the post count to 6.

Under Elements, disable the title and categories.

Then, move to the design tab and open the Layout settings. Select the Grid layout.

Under Overlay, customize the options as follows:

Next, add an image box shadow.

Now modify the filter criteria font settings.

Finally, modify the pagination font settings.

We want the active portfolio filter and the active page color to be a different color than the rest of the text. Move over to the advanced tab and add the following CSS.

Under the Active Portfolio Filter CSS section add the following:

Finally, add the following to the Pagination Active Page CSS:

Portfolio Page Final Design

Now here is the final design for the portfolio section.

Design Project Template

Use the Theme Builder

Now let’s create the template for our project pages. To do this, we will use Divi’s theme builder. Open the WordPress dashboard and navigate to the Theme Builder. Then select Add a New Template.

Next, set the template to apply to all project pages.

Click “Add Custom Body”, then select “Build Custom Body”.

Header Design

First, add a fullwidth section to the page.

Then, add a fullwidth header module.

Open the header settings. We want the title of this page to dynamically populate based on the title of the project. Next to Title, click the dynamic content icon.

Then, set the Title to “Posts/Archive Title.” Now the title will dynamically populate.

Remove the text from the Button #1 and Body sections and remove the background color.

Next, we want to add a dynamic background image. Move to the background image tab and click the dynamic content icon. Set the background image to “Featured Image”. This way, the featured image for the project post will appear at the top of our project page.

Move over to the design tab and open the layout settings. Set the alignment to centered and make the header fullscreen.

Then, modify the title font settings.

Use the responsive settings to set different text sizes for different screen sizes. Additionally, set the line height.

Under the Overlay settings, add an overlay.

Now move the fullwidth section to the top of the page.

Project Description Design

Open the section settings for the empty regular section on the page and set a background color.

Then add a row with two columns.

Add a text module to the column on the left.

Replace the body content with dynamic content. For this module, we will add the Project Year.

Move to the design tab and open the Text font settings. Customize the font as follows.

Next, set the text size and line height. Use the responsive options to set a smaller text size on tablet and mobile.

Finally, move to the Spacing section and add a bottom margin.

Now duplicate the Project Year text module.

Open the duplicated module settings and replace the Project Year dynamic content with the Client Name dynamic content.

Repeat the same steps and duplicate the Client Name text module. Then, replace the Client Name dynamic content with the Deliverables dynamic content.

Next, add a new text module below the Deliverables module.

Replace the content with the Project Description dynamic content.

Open the Text options under the Design tab and customize the font:

Then set the text size and line height. Once again, use the responsive options to set different text sizes for different screens.

Finally, add an image module to the right column.

The image will also be dynamically populated. Select the dynamic content icon and select Image 1 from our custom fields.

About Section Design

Now let’s move on to the About section. Add a new regular section to the page.

Open the section settings and add a background color.

Add a row with two columns.

Next, add an image to the left column.

Select the dynamic content icon and select Image 2.

Next, add a text module to the right column.

Add the body text.

Under the design tab, modify the heading text styles.

Next, modify the text size using the responsive options, and add the line height.

Finally, open the Sizing settings and remove the bottom margin.

Duplicate the Project Description text module from the section above, then drag it to below the About text module.

Open the duplicated module settings and replace the dynamic content with the About Text.

Images 3 and 4

Add a new row with two columns to the page.

Then, add an image module to the left column.

Using the dynamic content settings, set this image module to the Image 3 custom field.

Under the Sizing settings in the Design tab, enable Force Fullwidth.

Repeat these steps in the right column and add an image module. Use the dynamic content settings to set this image to Image 4.

Once again, enable Force Fullwidth in the Sizing settings.

Next, open the row settings and open the Sizing settings under the Design tab. Customize the sizing settings as follows:

Testimonial Layout

Add a new row with a single column to the page.

Then, add the testimonial module.

We will use dynamic content in this module as well. Open the testimonial module setting and add the following dynamic content to the fields.

Delete the testimonial image.

Move to the design tab and customize the quote icon.

Next, modify the body font.

Customize the body text size using responsive options and adjust the body line height.

Next, customize the author text settings.

Then modify the font settings for the position text.

Customize the company font settings as well.

Finally, add a box shadow to the testimonial module.

Fullwidth Image

Add a fullwidth section to the page.

Then, add a fullwidth image module.

Using the dynamic content settings, set this image module to Image 5.

Call to Action Sections

Now our dynamic content has been laid out. There are a couple of call-to-action sections that we will copy and modify from the portfolio page. In a different tab, open the portfolio page in the visual builder, then scroll to the bottom of the page.

Copy the “Custom Designs & Commissions” section.

Move back to the project page template and paste the “Custom Designs & Commissions” section below the existing content.

Open the section settings and change the background color.

Open the settings for the “Custom Designs & Commissions” text module and change the Heading 2 text color.

Then, open the module settings for the body text and change the text color.

Next, move back to the portfolio page. Copy the “Free Matting on Orders of 4 or More Prints” section.

Then, paste the “Free Matting” section to the bottom of the Project template page.

Open the Call To Action module settings and change the text.

Open the row settings, then open the Column 2 settings.

Change the background color.

Then, add a background image. This image of abstract lines should be in your media library as long as you used the print designer landing page layout pack to design the portfolio page.

Footer Section

We will also copy the footer section from the portfolio page to use on the project template. Move to the tab with the portfolio page and copy the “Subscribe for Drop Updates” footer section.

Then finally, paste the footer section to the bottom of the project template page.

Project Page Final Design

Here is the completed design for the project page. The template is applied to one of the projects and is populated with dynamic content.

Final Result

Now let’s take a look at our matching portfolio and project pages.

Project Page

Final Thoughts

By using dynamic content in your designs, you can easily create templates that allow you to quickly add new pages and content to your website without having to design the page layout each time. This works great for portfolio and project content, but you can use the same principles to create any kind of page template you would like! For another portfolio tutorial, check out this article to learn how to create a scrollable portfolio navigation list. Do you use dynamic content or templates on your website? We would love to hear from you in the comments!