The way to Create Matching Portfolio & Initiatives with Divi

by | Jan 10, 2023 | Etcetera | 0 comments

In the event you’re an inventive or run a service-based business, chances are high that you’ll need to create a portfolio internet web page to show off your revel in and display your tasks. Having a web based portfolio will let you be came upon via potential shoppers and can determine your credibility. You’ll use problem pages to show your process and the ideas in the back of your art work, helping visitors consider what it might be like to art work with you.

In this tutorial, we will show you create an similar portfolio and problem internet web page with Divi. We will use dynamic content material subject material for the design of the portfolio internet web page so as to quickly and easily add new tasks to your portfolio without a wish to design a problem internet web page each time. We’ll highlight using the tough Divi Filterable Portfolio Module as well!

Let’s get started!

Sneak Peek

Right here’s a preview of what we will design

Portfolio Internet web page

Divi Matching Portfolio and Projects Portfolio Page Final Design

Divi Matching Portfolio and Projects Portfolio Mobile Final Design

Problem Internet web 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

Quicker than we start, set up and turn on the Divi Theme and also you will have to without a doubt have the newest style of Divi to your internet web page.

Now, you’re in a position to begin out!

How to Create Matching Portfolio & Projects with Divi

Set Up Advanced Custom designed Fields Plugin

For this design, we’re going to be using dynamic content material subject material to create a template for our problem pages. By the use of using dynamic content material subject material in a template, you’ll create and change fully-designed problem pages via filling out the custom designed fields associated with the problem. You’ll use the built-in custom designed fields function in WordPress to take a look at this, then again it has some obstacles. For this design we want a couple of pictures to dynamically populate, so we’re going to make use of the Advanced Custom designed Fields Plugin to accomplish this. This plugin is free on the WordPress plugin record and we could in us so to upload tough custom designed fields to the problem pages.

From the WordPress dashboard, navigate to the Plugins settings and click on on Add New. Then search for the Complex Customized Fields Plugin, arrange, and activate.

Divi Matching Portfolio and Projects Advanced Custom Fields

Add Custom designed Fields

As quickly because the plugin has been installed and activated, open the Advanced Custom designed Fields settings and add a brand spanking new Field Group of workers. Add a reputation, then set the web page regulations and set the sector crew as lively.

  • Establish: Problem
  • Location Regulations: Show this field crew if Submit Sort is equal to Problem
  • Full of life: Positive

Divi Matching Portfolio and Projects Edit Field Group

Next, add the custom designed fields via clicking the blue Add Field button. For this tutorial, we will most straightforward adjust the sector label and kind for each field. The main field will be the client name.

  • Field Label: Client Identify
  • Field Sort: Text

Divi Matching Portfolio and Projects Add Field

Next, add the following fields.

  • Field Label: Problem 12 months
  • Field Sort: Amount
  • Field Label: Deliverables
  • Field Sort: Text
  • Field Label: Problem Description
  • Field Sort: Text Space
  • Field Label: Image 1
  • Field Sort: Image
  • Field Label: Image 2
  • Field Sort: Image
  • Field Label: About Text
  • Field Sort: Text Space
  • Field Label: Image 3
  • Field Sort: Image
  • Field Label: Image 4
  • Field Sort: Image
  • Field Label: Testimonial Text
  • Field Sort: Text Space
  • Field Label: Testimonial Identify
  • Field Sort: Text
  • Field Label: Testimonial Procedure
  • Field Sort: Text
  • Field Label: Image 5
  • Field Sort: Image

Divi Matching Portfolio and Projects All Fields

While you submit and save the custom designed fields, add a brand spanking new problem or edit an provide one. You should see the custom designed fields against the bottom of the improving internet web page. For this portfolio and problem construction, fill out each of the custom designed fields and upload a featured image to the problem. If you want to add a filterable portfolio, be certain that the posts are labeled as well.

Design Portfolio Internet web page

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

Get began With a Premade Construction

Let’s get began via using a premade construction from the Divi library. For this design, we will use the Print Clothier Landing Internet web page from the Print Dressmaker Structure Pack.

See also  Learn how to Make a Google Advert Touchdown Web page in WordPress (The Simple Method)

Add a brand spanking new internet web page to your internet web page and gives it a reputation, then make a choice the way to Use Divi Builder.

Divi Matching Portfolio and Projects Use Builder

We will use a premade construction from the Divi library for this example, so make a choice Browse Layouts.

Divi Matching Portfolio and Projects Premade Layout

Search for and make a choice the Print Clothier Landing Internet web page.

Divi Matching Portfolio and Projects Search Layout

Choose Use This Construction so to upload the construction to your internet web page.

Divi Matching Portfolio and Projects Use Layout

Now we’re able to build our design.

Add the Filterable Portfolio Module

Add a brand spanking new not unusual phase below the image of the desk, above the orange “My Latest Prints” phase.

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 phase settings and add a background color.

  • Background: #eae8de

Divi Matching Portfolio and Projects Background Color

Next, open the filterable portfolio module settings. Underneath Content material subject material, set the put up depend to 6.

  • Submit Depend: 6

Divi Matching Portfolio and Projects Post Count

Underneath Portions, disable the identify and categories.

  • Show Establish: No
  • Show Categories: No
  • Show Pagination: Positive

Divi Matching Portfolio and Projects Show Pagination

Then, switch to the design tab and open the Construction settings. Choose the Grid construction.

  • Construction: Grid

Divi Matching Portfolio and Projects Grid Layout

Underneath Overlay, customize the selections 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: Underneath

Divi Matching Portfolio and Projects Box Shadow

Now adjust the clear out requirements font settings.

  • Filter Requirements Font: Inter
  • Filter Requirements Font Weight: Delicate
  • Filter Requirements Text Color: #000000

Divi Matching Portfolio and Projects Filter Criteria Text

Finally, adjust the pagination font settings.

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

Divi Matching Portfolio and Projects Pagination Text

We would really like the lively portfolio clear out and the lively internet web page color to be a unique color than the rest of the text. Switch over to the complicated tab and add the following CSS.

Underneath the Full of life Portfolio Filter CSS phase add the following:

color: #C89A5A !very important;

Divi Matching Portfolio and Projects Custom CSS

Finally, add the following to the Pagination Full of life Internet web page CSS:

color: #C89A5A !very important;

Divi Matching Portfolio and Projects Custom CSS 2

Portfolio Internet web page Final Design

Now that is the whole design for the portfolio phase.

Divi Matching Portfolio and Projects Portfolio Section Final Design

Divi Matching Portfolio and Projects Portfolio Section Mobile Final Design

Design Problem Template

Use the Theme Builder

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

Divi Matching Portfolio and Projects Theme Builder

Next, set the template to make use of to all problem pages.

Divi Matching Portfolio and Projects Template Settings

Click on on “Add Custom designed Body”, then make a choice “Assemble Custom designed Body”.

Divi Matching Portfolio and Projects Custom Body

Header Design

First, add a fullwidth phase to the internet web 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 would really like the identify of this internet web page to dynamically populate in keeping with the identify of the problem. Next to Establish, click on at the dynamic content material subject material icon.

Divi Matching Portfolio and Projects Use Dynamic Content

Then, set the Establish to “Posts/Archive Establish.” Now the identify 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 need to add a dynamic background image. Switch to the background image tab and click on at the dynamic content material subject material icon. Set the background image to “Featured Image”. This way, the featured image for the problem put up will appear on the most productive of our problem internet web page.

Divi Matching Portfolio and Projects Background Image

Switch over to the design tab and open the construction settings. Set the alignment to targeted and make the header fullscreen.

Divi Matching Portfolio and Projects Alignment

Then, adjust the identify font settings.

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

Divi Matching Portfolio and Projects Title Font

Use the responsive settings to set different text sizes for more than a few show sizes. Additionally, set the street height.

  • Establish Text Measurement on Desktop: 90px
  • Establish Text Measurement on Tablet: 60px
  • Establish Text Measurement on Cell: 40px
  • Establish Line Height: 1.1em

Divi Matching Portfolio and Projects Header Title Text Size

Underneath the Overlay settings, add an overlay.

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

Divi Matching Portfolio and Projects Background Overlay

Now switch the fullwidth phase to the best possible of the internet web page.

Divi Matching Portfolio and Projects Move Section

Problem Description Design

Open the phase settings for the empty not unusual phase on the internet web 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

Change the body content material subject material with dynamic content material subject material. For this module, we will add the Problem 12 months.

See also  13 Very best WordPress 404 Error Web page Design Examples

Divi Matching Portfolio and Projects Add Project Year Dynamic

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

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

Divi Matching Portfolio and Projects Year Text

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

  • Text Text Measurement Desktop: 24px
  • Text Text Measurement Tablet: 20px
  • Text Text Measurement Cell: 18px
  • Text Line Height: 1em

Divi Matching Portfolio and Projects Year Text Size

Finally, switch to the Spacing phase and add a bottom margin.

  • Margin Bottom: 10px

Divi Matching Portfolio and Projects Margin Bottom

Now reproduction the Problem 12 months text module.

Divi Matching Portfolio and Projects Duplicate Module

Open the duplicated module settings and alternate the Problem 12 months dynamic content material subject material with the Client Identify dynamic content material subject material.

Divi Matching Portfolio and Projects Client Name

Repeat the identical steps and copy the Client Identify text module. Then, alternate the Client Identify dynamic content material subject material with the Deliverables dynamic content material subject material.

Divi Matching Portfolio and Projects Body Deliverables

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

Divi Matching Portfolio and Projects Insert Text Module

Change the content material subject material with the Problem Description dynamic content material subject material.

Divi Matching Portfolio and Projects Description

Open the Text alternatives underneath the Design tab and customize the font:

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

Divi Matching Portfolio and Projects Text Font

Then set the text measurement and line height. Once another time, use the responsive alternatives to set different text sizes for more than a few screens.

  • Text Measurement Desktop: 17px
  • Text Measurement Tablet: 16px
  • Text Measurement Cell: 14px
  • Text Line Height: 1.8em

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

Divi Matching Portfolio and Projects Image Module

The image can be dynamically populated. Choose the dynamic content material subject material icon and make a choice Image 1 from our custom designed fields.

Divi Matching Portfolio and Projects Image 1

About Section Design

Now let’s switch immediately to the About phase. Add a brand spanking new not unusual phase to the internet web page.

Divi Matching Portfolio and Projects Regular Section

Open the phase 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

Choose the dynamic content material subject material icon and make a choice Image 2.

Divi Matching Portfolio and Projects Dynamic Image 2

Next, add a text module to the suitable column.

Divi Matching Portfolio and Projects Text Module New

Add the body text.

  • Heading 2: “About”

Divi Matching Portfolio and Projects About Text

Underneath the design tab, adjust the heading text sorts.

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

Divi Matching Portfolio and Projects Text Settings

Next, adjust the text measurement using the responsive alternatives, and add the street height.

  • Heading 2 Text Measurement Desktop: 60px
  • Heading 2 Text Measurement Tablet: 36px
  • Heading 2 Text Measurement Cell: 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

Copy the Problem Description text module from the phase above, then drag it to below the About text module.

Divi Matching Portfolio and Projects Duplicate and Move

Open the duplicated module settings and alternate the dynamic content material subject material with the About Text.

Divi Matching Portfolio and Projects About Text

Images 3 and 4

Add a brand spanking new row with two columns to the internet web 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 material subject material settings, set this image module to the Image 3 custom designed field.

Divi Matching Portfolio and Projects Image 3 Dynamic

Underneath the Sizing settings throughout the Design tab, permit Energy Fullwidth.

  • Energy Fullwidth: Positive

Divi Matching Portfolio and Projects Image Fullwidth 3

Repeat the ones steps in the suitable column and add an image module. Use the dynamic content material subject material settings to set this image to Image 4.

Divi Matching Portfolio and Projects Image 4 Dynamic

Once another time, permit Energy Fullwidth throughout the Sizing settings.

Divi Matching Portfolio and Projects Image Fullwidth 4

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

  • Use Custom designed Gutter Width: Positive
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100vw

Divi Matching Portfolio and Projects Row Settings

Testimonial Construction

Add a brand spanking new row with a single column to the internet web 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 material subject material in this module as well. Open the testimonial module setting and add the following dynamic content material subject material to the fields.

  • Author: Testimonial Identify Dynamic Content material subject material
  • Procedure Establish: Testimonial Procedure Dynamic Content material subject material
  • Company: Client Identify Dynamic Content material subject material
  • Body: Testimonial Text Dynamic Content material subject material

Divi Matching Portfolio and Projects Testimonial Content

Delete the testimonial image.

Divi Matching Portfolio and Projects Remove Image

Switch 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, adjust the body font.

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

Divi Matching Portfolio and Projects Body Font Testimonial

Customize the body text measurement using responsive alternatives and regulate the body line height.

  • Body Text Measurement Desktop: 17px
  • Body Text Measurement Tablet: 16px
  • Body Text Measurement Cell: 14px
  • Body Line Height: 1.8em
See also  Use the WordPress Website online Tagline Block

Divi Matching Portfolio and Projects Body Text Size Line Height

Next, customize the writer text settings.

  • Author Font: Inter
  • Author Font Weight: Bold
  • Author Text Measurement Desktop: 17px
  • Author Text Measurement Tablet: 16px
  • Author Text Measurement Cell: 14px

Divi Matching Portfolio and Projects Author Font

Then adjust the font settings for the position text.

  • Position Font: Inter
  • Position Font Weight: Delicate
  • Position Text Measurement Desktop: 17px
  • Position Text Measurement Tablet: 16px
  • Position Text Measurement Cell: 14px

Divi Matching Portfolio and Projects Position Font

Customize the company font settings as well.

  • Company Font: Inter
  • Company Font Weight: Delicate
  • Company Text Measurement Desktop: 17px
  • Company Text Measurement Tablet: 16px
  • Company Text Measurement Cell: 14px

Divi Matching Portfolio and Projects Company Font

Finally, add a box shadow to the testimonial module.

  • Box Shadow: Underneath

Divi Matching Portfolio and Projects Box Shadow

Fullwidth Image

Add a fullwidth phase to the internet web 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 material subject material settings, set this image module to Image 5.

Divi Matching Portfolio and Projects Dynamic Image 5

Title to Movement Sections

Now our dynamic content material subject material has been laid out. There are a couple of call-to-action sections that we will copy and change from the portfolio internet web page. In a unique tab, open the portfolio internet web page throughout the visual builder, then scroll to the bottom of the internet web page.

Copy the “Custom designed Designs & Commissions” phase.

Divi Matching Portfolio and Projects Copy Section

Switch once more to the problem internet web page template and paste the “Custom designed Designs & Commissions” phase below the prevailing content material subject material.

Divi Matching Portfolio and Projects Paste Section

Open the phase settings and change the background color.

  • Background: #333333

Divi Matching Portfolio and Projects Background Color

Open the settings for the “Custom designed 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, switch once more to the portfolio internet web page. Copy the “Unfastened Matting on Orders of 4 or Further Prints” phase.

Divi Matching Portfolio and Projects Copy Section 2

Then, paste the “Unfastened Matting” phase to the bottom of the Problem template internet web page.

Divi Matching Portfolio and Projects Paste Section 2

Open the Title To Movement module settings and change the text.

  • Establish: Retailer My Latest Prints
  • Button: Retailer 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

Industry the background color.

  • Background: #ff804f

Divi Matching Portfolio and Projects Column 2 Background

Then, add a background image. This image of abstract traces should be on your media library as long as you used the print model clothier landing internet web page construction pack to design the portfolio internet web page.

  • Background Image: Print-designer-10.png

Divi Matching Portfolio and Projects Add Background Image

Footer Section

We will moreover copy the footer phase from the portfolio internet web page to use on the problem template. Switch to the tab with the portfolio internet web page and copy the “Subscribe for Drop Updates” footer phase.

Divi Matching Portfolio and Projects Copy Footer

Then finally, paste the footer phase to the bottom of the problem template internet web page.

Divi Matching Portfolio and Projects Paste Footer

Problem Internet web page Final Design

Right here’s the completed design for the problem internet web page. The template is performed to some of the the most important tasks and is populated with dynamic content material subject material.

Divi Matching Portfolio and Projects Project Page Final Design

Divi Matching Portfolio and Projects Project Page Mobile Final Design

Final End result

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

Portfolio Internet web page

Divi Matching Portfolio and Projects Portfolio Page Final Design

Divi Matching Portfolio and Projects Portfolio Mobile Final Design

Problem Internet web page

Divi Matching Portfolio and Projects Project Page Final Design

Divi Matching Portfolio and Projects Project Page Mobile Final Design

Final Concepts

By the use of using dynamic content material subject material on your designs, you’ll merely create templates that can help you quickly add new pages and content material subject material to your internet web page without a wish to design the internet web page construction each time. This works great for portfolio and problem content material subject material, then again you’ll use the identical regulations to create any more or less internet web page template you desire to! For another portfolio tutorial, check out this text to learn create a scrollable portfolio navigation checklist. Do you use dynamic content material subject material or templates to your internet web page? We might truly like to hear from you throughout the comments!

The put up The way to Create Matching Portfolio & Initiatives with Divi gave the impression first on Chic Subject matters Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *