How to Create a Dynamic Portfolio Project Template with Divi & ACF

Last Updated on September 16, 2022 by 9 Comments

How to Create a Dynamic Portfolio Project Template with Divi & ACF
Blog / Divi Resources / How to Create a Dynamic Portfolio Project Template with Divi & ACF

Looking for a way to streamline the way you create portfolio items on your website? If so, you’ll love this post. In this tutorial, we’ll show you how to create a dynamic portfolio project template with Divi’s Theme Builder and the ACF plugin. Building a portfolio project template will allow you to design the template body once and have it apply to all the portfolio items you add in the future as well. The template design we’ve created matches all kinds of creative professions, but it’s only the tip of the iceberg. You can add as many fields as you want and use those inside your template. You’ll be able to download the JSON file of the design we’ll recreate for free as well!

Let’s get to it.

Preview

Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.

Desktop

project template

Mobile

project template

Download The Dynamic Portfolio Project Template for FREE

Important: you’ll have to manually add dynamic content to each module after you set up the ACF fields and upload the template JSON file to the Theme Builder.

To lay your hands on the free dynamic portfolio project template, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

1. Install ACF & Setup Project Fields

Install & Activate ACF

Start by installing the free Advanced Custom Fields plugin on your WordPress website. After installing it, make sure you activate it as well.

project template

Set up Fields Group

Once you’ve installed and activated the plugin, it’s time to start creating the custom fields. Go to your plugin settings and add a new field group.

project template

Modify the location of your field group. We want it to show up on our projects only.

  • Post Type – is equal to – Project

project template

Add Fields

Continue by adding a new field for each one of the items mentioned below:

  • Problem
    • Field Label: Problem
    • Field Type: Text Area
  • Solution
    • Field Label: Solution
    • Field Type: Text Area
  • Testimonial
    • Field Label: Testimonial
    • Field Type: Text
  • Contact Person
    • Field Label: Contact Person
    • Field Type: Text
  • Contact Person Image
    • Field Label: Contact Person Image
    • Field Type: Image
  • Contact Person Job Title
    • Field Label: Contact Person Job Title
    • Field Type: Text
  • Client Logo
    • Field Label: Client Logo
    • Field Type: Image
  • Client Website
    • Field Label: Client Website
    • Field Type: Url
  • Project Duration
    • Field Label: Project Duration
    • Field Type: Range
    • Append: weeks

Know that you’re free to add as many fields as you want, depending on the project template you want to create. To recreate the exact design that was shown in the preview of this post, you’ll need all the fields mentioned above.

project template

2. Create New Project

Add Portfolio Project Title & Description

Once you’ve set up the field group and all of its fields, it’s time to create a sample project. Go to your WordPress dashboard, add a new project and enter a title and description.

project template

Upload Featured Image

Then, upload a featured image of your choice.

project template

Fill in All Custom Fields

Continue by filling in all the different custom fields you’ve added in the first part of the tutorial.

project template

project template

3. Create New Template

Go to Divi Theme Builder & Create New Template

Time to start building the template! Go to the Divi Theme Builder and add a new template.

project template

Use On

Apply the template to all your projects.

  • Use On: All Projects

project template

4. Start Building Template Body

Continue by starting to build the custom body of the template.

project template

Section #1

Background Color

Inside the template editor, you’ll notice a section. Open that section and add a black background color.

  • Background Color: #000000

project template

Spacing

Add some custom top and bottom padding next.

  • Top Padding: 250px
  • Bottom Padding: 250px

project template

Border

Add some bottom left and right border radius too.

  • Bottom Left: 8vw
  • Bottom Right: 8vw

project template

Add Row #1

Column Structure

Continue by adding a first row to the section using the following column structure:

project template

Add Text Module #1 to Column

Add Content

Then, add a Text Module and place some content in the content box.

  • Body: Project Duration:

project template

Text Settings

Move on to the module’s design tab and change the text settings as follows:

  • Text Font: Montserrat
  • Text Color: #a0a0a0
  • Text Size: 1.2rem

project template

Add Text Module #2 to Column

Dynamic Content

Add another Text Module to the column and select the project duration dynamic content.

  • Dynamic Content: Project Duration
  • After: weeks

project template

project template

Text Settings

Change the module’s text settings next.

  • Text Font: Lora
  • Text Color: #ffffff
  • Text Size: 1.5rem

project template

Add Text Module #3 to Column

Dynamic Content

Add another Text Module and select the post/archive title dynamic content.

  • Dynamic Content: Post/Archive Title
  • Before: <H1>
  • After: </H1>

project template

project template

H1 Text Settings

Style the H1 text settings of the module.

  • Heading Font: Montserrat
  • Heading Text Color: #ffffff
  • Heading Text Size: 6rem (Desktop), 3rem (Tablet & Phone)

project template

Spacing

Complete the module’s settings by adding some top and bottom margin.

  • Top Margin: 100px
  • Bottom Margin: 100px

project template

Add Post Content Module

Text Settings

The next and last module we need in the column is a Post Content Module. This will show the description of your project. Change the module’s text settings as follows:

  • Text Font: Lora
  • Text Color: #ffffff
  • Text Size: 1.5rem (Desktop), 0.9rem
  • Text Line Height: 2em

project template

Add Row #2

Column Structure

Add another row to the section using the following column structure:

project template

Add Image Module to Column 1

Dynamic Content

Add an Image Module to column 1 and select the client logo dynamic content.

  • Dynamic Content: Client Logo

project template

Add Text Module to Column 2

Add Content

Then, add a Text Module to column 2 and enter some copy of your choice.

project template

Link Dynamic Content

Link the module to the client website by selecting the client website dynamic content in the link settings.

  • Dynamic Content: Client Website

project template

Text Settings

Change the module’s text settings next.

  • Text Font: Montserrat
  • Text Color: #ffffff
  • Text Size: 1.5rem
  • Text Line Height: 1em

project template

Spacing

Add some custom bottom padding too.

  • Bottom Padding: 50px

project template

Border

And complete the module’s settings by adding a bottom border.

  • Bottom Border Width: 1px
  • Bottom Border Color: #ffc300

project template

Add Section #2

Spacing

On to the next section! Remove all default top and bottom padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

project template

Add Row

Column Structure

Continue by adding a new row using the following column structure:

project template

Spacing

Open the row settings and remove all default top bottom padding.

  • Top Padding: 0px
  • Bottom Padding: 0px

project template

Add Image Module to Column

Dynamic Content

The only module we need in this row is an Image Module. Connect the image to the featured image of the project.

  • Dynamic Content: Featured Image

project template

Border

Add some bottom left and right border radius too.

  • Bottom Left: 8vw
  • Bottom Right: 8vw

project template

Add Section #3

Spacing

Add another regular section with some custom top and bottom padding.

  • Top Padding: 250px
  • Bottom Padding: 250px

project template

Add Row #1

Column Structure

Add a new row to the section using the following column structure:

project template

Add Text Module to Column 1

Add H2 Content

Add a Text Module to column 1 and insert some H2 content of your choice.

project template

H2 Text Settings

Change the H2 text settings as follows:

  • Heading 2 Font: Montserrat
  • Heading 2 Font Weight: Bold
  • Heading 2 Text Size: 2rem

project template

Add Text Module to Column 2

Dynamic Content

Move on to the second column, add a Text Module and use the problem dynamic content.

  • Dynamic Content: Problem

project template

Text Settings

Then, change the module’s text settings:

  • Text Font: Lora
  • Text Size: 1.5rem (Desktop), 0.9vw (Tablet & Phone)
  • Text Line Height: 2em

project template

Clone Row

Once you’ve completed the row, go ahead and clone it entirely.

project template

Change Copy of Text Module in Column 1

Change the copy of the column 1 Text Module of the duplicate row.

project template

Change Dynamic Content of Text Module in Column 2

Modify the dynamic content of the Text Module in column 2 of the duplicate row as well.

  • Dynamic Content: Solution

project template

Add Button Module to Column 2 of Duplicate Row

Add Copy

Continue by adding a Button Module to column 2 of the duplicate row. Add some copy of your choice.

project template

Button Settings

Move on to the module’s design tab and change the button settings as follows:

  • Use Custom Styles For Button: Yes
  • Button Text Size: 1.5rem
  • Button Text Color: #000000
  • Button Border Radius: 0px

project template

  • Button Font: Montserrat

project template

Spacing

Complete the module’s settings by adding some top margin.

  • Top Margin: 100px

project template

Add Section #4

Background Color

On to the next and last section! Add a black background color.

  • Background Color: #000000

project template

Border

Add some top left and right border radius to the section too.

  • Top Left: 8vw
  • Top Right: 8vw

project template

Add Row

Column Structure

Continue by adding a new row to the section using the following column structure:

project template

Add Testimonial Module to Column

Dynamic Content

Add a Testimonial Module to the row and select some dynamic content for the different elements inside the module.

  • Author: Contact Person
  • Job Title: Contact Person Job Title
  • Body: Testimonial
  • Image: Contact Person Image

project template

project template

Elements

Disable the quote icon next.

  • Show Quote Icon: No

project template

Background Color

Then, change the module’s background color into black.

  • Background Color: #000000

project template

Text Settings

Move on the module’s design tab and change the text color.

  • Text Color: Light

project template

Body Text Settings

Modify the body text settings next.

  • Body Font: Montserrat
  • Body Text Size: 2rem (Desktop), 1.5rem (Tablet & Phone)

project template

Author Text Settings

Change the author text settings too.

  • Author Font: Lora
  • Author Text Size: 1.4rem (Desktop), 0.9rem (Tablet & Phone)

project template

Position Text Settings

And complete the module’s settings by changing the position text settings accordingly:

  • Position Font: Lora
  • Position Text Color: #a8a8a8
  • Position Text Size: 1.4rem (Desktop), 0.9rem (Tablet & Phone)

project template

4. Save Theme Builder Changes & View Result

Once you’ve completed the template, save all Divi Theme Builder changes and view the result on your project!

project template

project template

Preview

Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.

Desktop

project template

Mobile

project template

Final Thoughts

In this post, we’ve shown you how to create a beautiful portfolio project template using the Divi Theme Builder and the ACF plugin. This is a great way to streamline the way you display projects on your website. Once you assign the template to all your projects, it’ll automatically apply to future portfolio items you add. You were able to download the template JSON file of this design for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.

If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.

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

How To Migrate Your Website To Divi 5 (Public Alpha)

How To Migrate Your Website To Divi 5 (Public Alpha)

Posted on October 9, 2024 in Divi Resources

Divi 5 Public Alpha is available, so you’re probably excited to explore its new features and improvements. Transitioning from Divi 4 to Divi 5 involves a few important steps. This post will help you migrate smoothly from Divi 4 to Divi 5 Public Alpha, allowing you to take full advantage of Divi...

View Full Post
New Starter Site For Stylists (Quick Install)

New Starter Site For Stylists (Quick Install)

Posted on October 7, 2024 in Divi Resources

Divi empowers you to build the best websites possible, and now, Divi Quick Sites takes website creation to a whole new level. This revolutionary tool lets anyone, regardless of skill level, generate a complete website in under two minutes! Divi Quick Sites provides everything you need to launch...

View Full Post

9 Comments

  1. How to add a dynamic image slider? is this possible?

  2. Awesome, this is perfect. I need to be using ACF more. Thank you!

  3. Hopefully WordPress doesn’t manipulate the editor anymore

  4. The display of dynamic data needs to somehow include conditional logic to be able to not show it if a field does not contain data.

  5. very helpful for my website.
    thank you 🙂

  6. Fantastic and detailed instructions. Got the idea how to play around with the settings and content. Thank you

  7. Really good but I’d like to know how to get the ACF fields into the blog module as ‘elements’. Is it possible to do or is there a way to duplicate the output from a blog module using other modules? Cheers!

  8. Real nice blog post, Donjete. Thx.
    Divi and ACF are really interesting.

  9. nice looking for sure.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today