How to Create Matching Portfolio & Projects with Divi

Posted on January 10, 2023 by Leave a Comment

How to Create Matching Portfolio & Projects with Divi
Blog / Divi Resources / How to Create Matching Portfolio & Projects with Divi
Play Button

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!

Subscribe To Our Youtube Channel

Sneak Peek

Here is a preview of what we will design

Portfolio Page

Divi Matching Portfolio and Projects Portfolio Page Final Design

Divi Matching Portfolio and Projects Portfolio Mobile Final Design

Project Page

Divi Matching Portfolio and Projects Project Page Final Design

Divi Matching Portfolio and Projects Project Page Mobile Final 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.

Divi Matching Portfolio and Projects Advanced Custom Fields

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.

  • Title: Project
  • Location Rules: Show this field group if Post Type is equal to Project
  • Active: Yes

Divi Matching Portfolio and Projects Edit Field Group

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.

  • Field Label: Client Name
  • Field Type: Text

Divi Matching Portfolio and Projects Add Field

Next, add the following fields.

  • Field Label: Project Year
  • Field Type: Number
  • Field Label: Deliverables
  • Field Type: Text
  • Field Label: Project Description
  • Field Type: Text Area
  • Field Label: Image 1
  • Field Type: Image
  • Field Label: Image 2
  • Field Type: Image
  • Field Label: About Text
  • Field Type: Text Area
  • Field Label: Image 3
  • Field Type: Image
  • Field Label: Image 4
  • Field Type: Image
  • Field Label: Testimonial Text
  • Field Type: Text Area
  • Field Label: Testimonial Name
  • Field Type: Text
  • Field Label: Testimonial Job
  • Field Type: Text
  • Field Label: Image 5
  • Field Type: Image

Divi Matching Portfolio and Projects All 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.

Divi Matching Portfolio and Projects Use Builder

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

Divi Matching Portfolio and Projects Premade Layout

Search for and select the Print Designer Landing Page.

Divi Matching Portfolio and Projects Search Layout

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

Divi Matching Portfolio and Projects Use Layout

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.

Divi Matching Portfolio and Projects New Regular Section

Add a single row.

Divi Matching Portfolio and Projects Insert Row

Then, add the filterable portfolio module to the row.

Divi Matching Portfolio and Projects Portfolio Module

Open the section settings and add a background color.

  • Background: #eae8de

Divi Matching Portfolio and Projects Background Color

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

  • Post Count: 6

Divi Matching Portfolio and Projects Post Count

Under Elements, disable the title and categories.

  • Show Title: No
  • Show Categories: No
  • Show Pagination: Yes

Divi Matching Portfolio and Projects Show Pagination

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

  • Layout: Grid

Divi Matching Portfolio and Projects Grid Layout

Under Overlay, customize the options as follows:

  • Zoom Icon Color: #FFFFFF
  • Hover Overlay Color: rgba(10,10,10,0.25)
  • Hover Icon: Plus Icon in Circle

Divi Matching Portfolio and Projects Hover Overlay

Next, add an image box shadow.

  • Image Box Shadow: Below

Divi Matching Portfolio and Projects Box Shadow

Now modify the filter criteria font settings.

  • Filter Criteria Font: Inter
  • Filter Criteria Font Weight: Light
  • Filter Criteria Text Color: #000000

Divi Matching Portfolio and Projects Filter Criteria Text

Finally, modify the pagination font settings.

  • Pagination Font: Inter
  • Pagination Font Weight: Light
  • Pagination Text Color: #000000

Divi Matching Portfolio and Projects Pagination Text

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:

color: #C89A5A !important;

Divi Matching Portfolio and Projects Custom CSS

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

color: #C89A5A !important;

Divi Matching Portfolio and Projects Custom CSS 2

Portfolio Page Final Design

Now here is the final design for the portfolio section.

Divi Matching Portfolio and Projects Portfolio Section Final Design

Divi Matching Portfolio and Projects Portfolio Section Mobile Final Design

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.

Divi Matching Portfolio and Projects Theme Builder

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

Divi Matching Portfolio and Projects Template Settings

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

Divi Matching Portfolio and Projects Custom Body

Header Design

First, add a fullwidth section to the page.

Divi Matching Portfolio and Projects FW Section

Then, add a fullwidth header module.

Divi Matching Portfolio and Projects FW 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.

Divi Matching Portfolio and Projects Use Dynamic Content

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

Divi Matching Portfolio and Projects Select-Dynamic-Content

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

Divi Matching Portfolio and Projects Background-Color-1

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.

Divi Matching Portfolio and Projects Background Image

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

Divi Matching Portfolio and Projects Alignment

Then, modify the title font settings.

  • Title Font: Inter
  • Title Font Weight: Bold
  • Title Text Color: #FFFFFF

Divi Matching Portfolio and Projects Title Font

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

  • Title Text Size on Desktop: 90px
  • Title Text Size on Tablet: 60px
  • Title Text Size on Mobile: 40px
  • Title Line Height: 1.1em

Divi Matching Portfolio and Projects Header Title Text Size

Under the Overlay settings, add an overlay.

  • Background Overlay Color: rgba(0,0,0,0.33)

Divi Matching Portfolio and Projects Background Overlay

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

Divi Matching Portfolio and Projects Move Section

Project Description Design

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

  • Background: #dfdcd2

Divi Matching Portfolio and Projects Section Background

Then add a row with two columns.

Divi Matching Portfolio and Projects Row Layout

Add a text module to the column on the left.

Divi Matching Portfolio and Projects Add Text Module

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

Divi Matching Portfolio and Projects Add Project Year Dynamic

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

  • Text Font: Inter
  • Text Font Weight: Light
  • Text Text Color: #000000

Divi Matching Portfolio and Projects Year Text

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

  • Text Text Size Desktop: 24px
  • Text Text Size Tablet: 20px
  • Text Text Size Mobile: 18px
  • Text Line Height: 1em

Divi Matching Portfolio and Projects Year Text Size

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

  • Margin Bottom: 10px

Divi Matching Portfolio and Projects Margin Bottom

Now duplicate the Project Year text module.

Divi Matching Portfolio and Projects Duplicate Module

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

Divi Matching Portfolio and Projects Client Name

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

Divi Matching Portfolio and Projects Body Deliverables

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

Divi Matching Portfolio and Projects Insert Text Module

Replace the content with the Project Description dynamic content.

Divi Matching Portfolio and Projects Description

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

  • Text Font: Inter
  • Text Font Weight: Light
  • Text Color: #000000

Divi Matching Portfolio and Projects Text Font

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

  • Text Size Desktop: 17px
  • Text Size Tablet: 16px
  • Text Size Mobile: 14px
  • Text Line Height: 1.8em

Divi Matching Portfolio and Projects Text Size
Finally, add an image module to the right column.

Divi Matching Portfolio and Projects Image Module

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

Divi Matching Portfolio and Projects Image 1

About Section Design

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

Divi Matching Portfolio and Projects Regular Section

Open the section settings and add a background color.

  • Background: #eae8de

Divi Matching Portfolio and Projects Set Background

Add a row with two columns.

Divi Matching Portfolio and Projects Insert Row Layout

Next, add an image to the left column.

Divi Matching Portfolio and Projects Add Image

Select the dynamic content icon and select Image 2.

Divi Matching Portfolio and Projects Dynamic Image 2

Next, add a text module to the right column.

Divi Matching Portfolio and Projects Text Module New

Add the body text.

  • Heading 2: “About”

Divi Matching Portfolio and Projects About Text

Under the design tab, modify the heading text styles.

  • Heading 2 Font: Inter
  • Heading 2 Font Weight: Light
  • Heading 2 Text Color: #000000

Divi Matching Portfolio and Projects Text Settings

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

  • Heading 2 Text Size Desktop: 60px
  • Heading 2 Text Size Tablet: 36px
  • Heading 2 Text Size Mobile: 30px
  • Heading 2 Line Height: 1.2em

Divi Matching Portfolio and Projects Heading Size

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

  • Margin-Bottom: 0px

Divi Matching Portfolio and Projects Margin

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

Divi Matching Portfolio and Projects Duplicate and Move

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

Divi Matching Portfolio and Projects About Text

Images 3 and 4

Add a new row with two columns to the page.

Divi Matching Portfolio and Projects New Row 2 Columns

Then, add an image module to the left column.

Divi Matching Portfolio and Projects Insert Image Module

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

Divi Matching Portfolio and Projects Image 3 Dynamic

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

  • Force Fullwidth: Yes

Divi Matching Portfolio and Projects Image Fullwidth 3

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

Divi Matching Portfolio and Projects Image 4 Dynamic

Once again, enable Force Fullwidth in the Sizing settings.

Divi Matching Portfolio and Projects Image Fullwidth 4

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

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100vw

Divi Matching Portfolio and Projects Row Settings

Testimonial Layout

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

Divi Matching Portfolio and Projects New Row

Then, add the testimonial module.

Divi Matching Portfolio and Projects Add 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.

  • Author: Testimonial Name Dynamic Content
  • Job Title: Testimonial Job Dynamic Content
  • Company: Client Name Dynamic Content
  • Body: Testimonial Text Dynamic Content

Divi Matching Portfolio and Projects Testimonial Content

Delete the testimonial image.

Divi Matching Portfolio and Projects Remove Image

Move to the design tab and customize the quote icon.

  • Quote Icon Color: #000000
  • Quote Icon Background Color: rgba(255,255,255,0)

Divi Matching Portfolio and Projects Quote Icon

Next, modify the body font.

  • Body Font: Inter
  • Body Font Weight: Light
  • Body Text Color: #000000

Divi Matching Portfolio and Projects Body Font Testimonial

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

  • Body Text Size Desktop: 17px
  • Body Text Size Tablet: 16px
  • Body Text Size Mobile: 14px
  • Body Line Height: 1.8em

Divi Matching Portfolio and Projects Body Text Size Line Height

Next, customize the author text settings.

  • Author Font: Inter
  • Author Font Weight: Bold
  • Author Text Size Desktop: 17px
  • Author Text Size Tablet: 16px
  • Author Text Size Mobile: 14px

Divi Matching Portfolio and Projects Author Font

Then modify the font settings for the position text.

  • Position Font: Inter
  • Position Font Weight: Light
  • Position Text Size Desktop: 17px
  • Position Text Size Tablet: 16px
  • Position Text Size Mobile: 14px

Divi Matching Portfolio and Projects Position Font

Customize the company font settings as well.

  • Company Font: Inter
  • Company Font Weight: Light
  • Company Text Size Desktop: 17px
  • Company Text Size Tablet: 16px
  • Company Text Size Mobile: 14px

Divi Matching Portfolio and Projects Company Font

Finally, add a box shadow to the testimonial module.

  • Box Shadow: Below

Divi Matching Portfolio and Projects Box Shadow

Fullwidth Image

Add a fullwidth section to the page.

Divi Matching Portfolio and Projects Fullwidth Section

Then, add a fullwidth image module.

Divi Matching Portfolio and Projects Fullwidth Image Module

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

Divi Matching Portfolio and Projects Dynamic 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.

Divi Matching Portfolio and Projects Copy Section

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

Divi Matching Portfolio and Projects Paste Section

Open the section settings and change the background color.

  • Background: #333333

Divi Matching Portfolio and Projects Background Color

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

  • Heading 2 Text Color: #FFFFFF

Divi Matching Portfolio and Projects Change Heading Color

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

  • Text Text Color: #FFFFFF

Divi Matching Portfolio and Projects Change Text Color

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

Divi Matching Portfolio and Projects Copy Section 2

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

Divi Matching Portfolio and Projects Paste Section 2

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

  • Title: Shop My Latest Prints
  • Button: Shop Now

Divi Matching Portfolio and Projects Modify Section Text

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

Divi Matching Portfolio and Projects Column 2 Settings

Change the background color.

  • Background: #ff804f

Divi Matching Portfolio and Projects Column 2 Background

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.

  • Background Image: Print-designer-10.png

Divi Matching Portfolio and Projects Add Background Image

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.

Divi Matching Portfolio and Projects Copy Footer

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

Divi Matching Portfolio and Projects Paste Footer

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.

Divi Matching Portfolio and Projects Project Page Final Design

Divi Matching Portfolio and Projects Project Page Mobile Final Design

Final Result

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

Portfolio Page

Divi Matching Portfolio and Projects Portfolio Page Final Design

Divi Matching Portfolio and Projects Portfolio Mobile Final Design

Project Page

Divi Matching Portfolio and Projects Project Page Final Design

Divi Matching Portfolio and Projects Project Page Mobile Final Design

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!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! 👇

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow 👇

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How 👇

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Get a Free Alteration Shop Layout Pack for Divi

Get a Free Alteration Shop Layout Pack for Divi

Posted on February 6, 2023 in Divi Resources

Hey Divi Nation! Thanks for joining us for the next installment of our weekly Divi Design Initiative; where each week, we give away a brand new Layout Pack for Divi. This time around, the design team has created a beautiful alteration shop Layout Pack that’ll help you get your next Alteration...

View Full Post
Divi Product Highlight: Header Layout Pack

Divi Product Highlight: Header Layout Pack

Posted on February 5, 2023 in Divi Resources

The header is one of the first elements to load for any Divi website you create. This means the header often makes the first impression anyone sees for a website, making header design a crucial part of every website. Fortunately, you don’t have to create your header from scratch. There are lots...

View Full Post

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today