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

Problem Internet web page

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.

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

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

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

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.

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.

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

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

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

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.

Add a single row.

Then, add the filterable portfolio module to the row.

Open the phase settings and add a background color.

• Background: #eae8de

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

• Submit Depend: 6

Underneath Portions, disable the identify and categories.

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

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

• Construction: Grid

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

Next, add an image box shadow.

• Image Box Shadow: Underneath

Now adjust the clear out requirements font settings.

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

Finally, adjust the pagination font settings.

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

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;

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

color: #C89A5A !very important;

Portfolio Internet web page Final Design

Now that is the whole design for the portfolio phase.

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.

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

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

Header Design

First, add a fullwidth phase to the internet web page.

Then, add a fullwidth 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.

Then, set the Establish to “Posts/Archive Establish.” Now the identify will dynamically populate.

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

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.

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

Then, adjust the identify font settings.

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

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

Underneath the Overlay settings, add an overlay.

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

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

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

Then add a row with two columns.

Add a text module to the column on the left.

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

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

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

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

• Margin Bottom: 10px

Now reproduction the Problem 12 months text 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.

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.

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

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

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

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

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

Finally, add an image module to the suitable column.

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.

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.

Open the phase settings and add a background color.

• Background: #eae8de

Add a row with two columns.

Next, add an image to the left column.

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

Next, add a text module to the suitable column.

Add the body text.

• Heading 2: “About”

Underneath the design tab, adjust the heading text sorts.

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

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

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

• Margin-Bottom: 0px

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

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

Images 3 and 4

Add a brand spanking new row with two columns to the internet web page.

Then, add an image module to the left column.

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

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

• Energy Fullwidth: Positive

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.

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

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

Testimonial Construction

Add a brand spanking new row with a single column to the internet web page.

Then, add the 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

Delete the testimonial image.

Switch to the design tab and customize the quote icon.

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

Next, adjust the body font.

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

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

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

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

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

Finally, add a box shadow to the testimonial module.

• Box Shadow: Underneath

Fullwidth Image

Add a fullwidth phase to the internet web page.

Then, add a fullwidth image module.

Using the dynamic content material subject material settings, set this image module to 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.

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.

Open the phase settings and change the background color.

• Background: #333333

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

• Heading 2 Text Color: #FFFFFF

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

• Text Text Color: #FFFFFF

Next, switch once more to the portfolio internet web page. Copy the “Unfastened Matting on Orders of 4 or Further Prints” phase.

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

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

• Establish: Retailer My Latest Prints
• Button: Retailer Now

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

Industry the background color.

• Background: #ff804f

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

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.

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

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.

Final End result

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

Portfolio Internet web page

Problem Internet web page

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