How to Create Matching Portfolio & Projects with Divi

by | Jan 10, 2023 | Etcetera | 0 comments

If you’re an inventive or run a service-based trade, you could wish to create a portfolio site to exhibit your revel in and show your initiatives. Having an internet portfolio mean you can be came upon via doable shoppers and will determine your credibility. You’ll use undertaking pages to exhibit your procedure and the guidelines at the back of your paintings, serving to guests believe what it may well be love to paintings with you.

On this instructional, we will be able to display you the right way to create an identical portfolio and undertaking web page with Divi. We will be able to use dynamic content material for the design of the portfolio web page to be able to briefly and simply upload new initiatives on your portfolio with no need to design a undertaking web page each and every time. We’ll spotlight the use of the tough Divi Filterable Portfolio Module as neatly!

Let’s get began!

Sneak Peek

Here’s a preview of what we will be able to design

Portfolio Web page

Divi Matching Portfolio and Projects Portfolio Page Final Design

Divi Matching Portfolio and Projects Portfolio Mobile Final Design

Undertaking Web page

Divi Matching Portfolio and Projects Project Page Final Design

Divi Matching Portfolio and Projects Project Page Mobile Final Design

What You Want to Get Began

Ahead of we start, install and activate the Divi Theme and make sure to have the newest model of Divi to your site.

Now, you’re ready to start out!

The way to Create Matching Portfolio & Tasks with Divi

Set Up Complicated Customized Fields Plugin

For this design, we’re going to be the use of dynamic content material to create a template for our undertaking pages. Via the use of dynamic content material in a template, you’ll be able to create and replace fully-designed undertaking pages via filling out the customized fields related to the undertaking. You’ll use the integrated customized fields serve as in WordPress to do that, however it has some obstacles. For this design we would like more than one pictures to dynamically populate, so we’re going to use the Complicated Customized Fields Plugin to perform this. This plugin is unfastened at the WordPress plugin listing and lets in us so as to add tough customized fields to the undertaking pages.

From the WordPress dashboard, navigate to the Plugins settings and click on Upload New. Then seek for the Advanced Custom Fields Plugin, set up, and turn on.

Divi Matching Portfolio and Projects Advanced Custom Fields

Upload Customized Fields

As soon as the plugin has been put in and activated, open the Complicated Customized Fields settings and upload a brand new Box Team. Upload a name, then set the site laws and set the sphere crew as energetic.

  • Name: Undertaking
  • Location Regulations: Display this box crew if Put up Kind is the same as Undertaking
  • Lively: Sure

Divi Matching Portfolio and Projects Edit Field Group

Subsequent, upload the customized fields via clicking the blue Upload Box button. For this instructional, we will be able to handiest regulate the sphere label and kind for each and every box. The primary box would be the shopper identify.

  • Box Label: Consumer Title
  • Box Kind: Textual content

Divi Matching Portfolio and Projects Add Field

Subsequent, upload the next fields.

  • Box Label: Undertaking Yr
  • Box Kind: Quantity
  • Box Label: Deliverables
  • Box Kind: Textual content
  • Box Label: Undertaking Description
  • Box Kind: Textual content House
  • Box Label: Symbol 1
  • Box Kind: Symbol
  • Box Label: Symbol 2
  • Box Kind: Symbol
  • Box Label: About Textual content
  • Box Kind: Textual content House
  • Box Label: Symbol 3
  • Box Kind: Symbol
  • Box Label: Symbol 4
  • Box Kind: Symbol
  • Box Label: Testimonial Textual content
  • Box Kind: Textual content House
  • Box Label: Testimonial Title
  • Box Kind: Textual content
  • Box Label: Testimonial Process
  • Box Kind: Textual content
  • Box Label: Symbol 5
  • Box Kind: Symbol

Divi Matching Portfolio and Projects All Fields

Whenever you put up and save the customized fields, upload a brand new undertaking or edit an current one. You will have to see the customized fields towards the ground of the modifying web page. For this portfolio and undertaking structure, fill out each and every of the customized fields and add a featured symbol to the undertaking. If you wish to upload a filterable portfolio, be sure the posts are categorised as neatly.

Design Portfolio Web page

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

Get started With a Premade Format

Let’s get started via the use of a premade structure from the Divi library. For this design, we will be able to use the Print Fashion designer Touchdown Web page from the Print Designer Layout Pack.

See also  How A lot Do Content material Creators Make? [Average Salary in 2022]

Upload a brand new web page on your site and provides it a name, then make a choice the strategy to Use Divi Builder.

Divi Matching Portfolio and Projects Use Builder

We will be able to use a premade structure from the Divi library for this situation, so make a choice Browse Layouts.

Divi Matching Portfolio and Projects Premade Layout

Seek for and make a choice the Print Fashion designer Touchdown Web page.

Divi Matching Portfolio and Projects Search Layout

Choose Use This Format so as to add the structure on your web page.

Divi Matching Portfolio and Projects Use Layout

Now we’re in a position to construct our design.

Upload the Filterable Portfolio Module

Upload a brand new common segment underneath the picture of the table, above the orange “My Newest Prints” segment.

Divi Matching Portfolio and Projects New Regular Section

Upload a unmarried row.

Divi Matching Portfolio and Projects Insert Row

Then, upload the filterable portfolio module to the row.

Divi Matching Portfolio and Projects Portfolio Module

Open the segment settings and upload a background colour.

  • Background: #eae8de

Divi Matching Portfolio and Projects Background Color

Subsequent, open the filterable portfolio module settings. Underneath Content material, set the put up rely to six.

  • Put up Rely: 6

Divi Matching Portfolio and Projects Post Count

Underneath Parts, disable the name and classes.

  • Display Name: No
  • Display Classes: No
  • Display Pagination: Sure

Divi Matching Portfolio and Projects Show Pagination

Then, transfer to the design tab and open the Format settings. Choose the Grid structure.

  • Format: Grid

Divi Matching Portfolio and Projects Grid Layout

Underneath Overlay, customise the choices as follows:

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

Divi Matching Portfolio and Projects Hover Overlay

Subsequent, upload a picture field shadow.

  • Symbol Field Shadow: Under

Divi Matching Portfolio and Projects Box Shadow

Now regulate the filter out standards font settings.

  • Filter out Standards Font: Inter
  • Filter out Standards Font Weight: Mild
  • Filter out Standards Textual content Colour: #000000

Divi Matching Portfolio and Projects Filter Criteria Text

In spite of everything, regulate the pagination font settings.

  • Pagination Font: Inter
  • Pagination Font Weight: Mild
  • Pagination Textual content Colour: #000000

Divi Matching Portfolio and Projects Pagination Text

We wish the energetic portfolio filter out and the energetic web page colour to be a unique colour than the remainder of the textual content. Transfer over to the complex tab and upload the next CSS.

Underneath the Lively Portfolio Filter out CSS segment upload the next:

colour: #C89A5A !essential;

Divi Matching Portfolio and Projects Custom CSS

In spite of everything, upload the next to the Pagination Lively Web page CSS:

colour: #C89A5A !essential;

Divi Matching Portfolio and Projects Custom CSS 2

Portfolio Web page Ultimate Design

Now here’s the general design for the portfolio segment.

Divi Matching Portfolio and Projects Portfolio Section Final Design

Divi Matching Portfolio and Projects Portfolio Section Mobile Final Design

Design Undertaking Template

Use the Theme Builder

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

Divi Matching Portfolio and Projects Theme Builder

Subsequent, set the template to use to all undertaking pages.

Divi Matching Portfolio and Projects Template Settings

Click on “Upload Customized Frame”, then make a choice “Construct Customized Frame”.

Divi Matching Portfolio and Projects Custom Body

Header Design

First, upload a fullwidth segment to the web page.

Divi Matching Portfolio and Projects FW Section

Then, upload a fullwidth header module.

Divi Matching Portfolio and Projects FW Header Module

Open the header settings. We wish the name of this web page to dynamically populate in accordance with the name of the undertaking. Subsequent to Name, click on the dynamic content material icon.

Divi Matching Portfolio and Projects Use Dynamic Content

Then, set the Name to “Posts/Archive Name.” Now the name will dynamically populate.

Divi Matching Portfolio and Projects Select-Dynamic-Content

Take away the textual content from the Button #1 and Frame sections and take away the background colour.

Divi Matching Portfolio and Projects Background-Color-1

Subsequent, we wish to upload a dynamic background symbol. Transfer to the background symbol tab and click on the dynamic content material icon. Set the background symbol to “Featured Symbol”. This fashion, the featured symbol for the undertaking put up will seem on the most sensible of our undertaking web page.

Divi Matching Portfolio and Projects Background Image

Transfer over to the design tab and open the structure settings. Set the alignment to focused and make the header fullscreen.

Divi Matching Portfolio and Projects Alignment

Then, regulate the name font settings.

  • Name Font: Inter
  • Name Font Weight: Daring
  • Name Textual content Colour: #FFFFFF

Divi Matching Portfolio and Projects Title Font

Use the responsive settings to set other textual content sizes for various display screen sizes. Moreover, set the road peak.

  • Name Textual content Measurement on Desktop: 90px
  • Name Textual content Measurement on Pill: 60px
  • Name Textual content Measurement on Cell: 40px
  • Name Line Top: 1.1em

Divi Matching Portfolio and Projects Header Title Text Size

Underneath the Overlay settings, upload an overlay.

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

Divi Matching Portfolio and Projects Background Overlay

Now transfer the fullwidth segment to the highest of the web page.

Divi Matching Portfolio and Projects Move Section

Undertaking Description Design

Open the segment settings for the empty common segment at the web page and set a background colour.

  • Background: #dfdcd2

Divi Matching Portfolio and Projects Section Background

Then upload a row with two columns.

Divi Matching Portfolio and Projects Row Layout

Upload a textual content module to the column at the left.

Divi Matching Portfolio and Projects Add Text Module

Exchange the frame content material with dynamic content material. For this module, we will be able to upload the Undertaking Yr.

Divi Matching Portfolio and Projects Add Project Year Dynamic

Transfer to the design tab and open the Textual content font settings. Customise the font as follows.

  • Textual content Font: Inter
  • Textual content Font Weight: Mild
  • Textual content Textual content Colour: #000000
See also  How to Design a Checkout Process Navigation Menu in Divi

Divi Matching Portfolio and Projects Year Text

Subsequent, set the textual content measurement and line peak. Use the responsive choices to set a smaller textual content measurement on pill and cellular.

  • Textual content Textual content Measurement Desktop: 24px
  • Textual content Textual content Measurement Pill: 20px
  • Textual content Textual content Measurement Cell: 18px
  • Textual content Line Top: 1em

Divi Matching Portfolio and Projects Year Text Size

In spite of everything, transfer to the Spacing segment and upload a backside margin.

  • Margin Backside: 10px

Divi Matching Portfolio and Projects Margin Bottom

Now reproduction the Undertaking Yr textual content module.

Divi Matching Portfolio and Projects Duplicate Module

Open the duplicated module settings and substitute the Undertaking Yr dynamic content material with the Consumer Title dynamic content material.

Divi Matching Portfolio and Projects Client Name

Repeat the similar steps and copy the Consumer Title textual content module. Then, substitute the Consumer Title dynamic content material with the Deliverables dynamic content material.

Divi Matching Portfolio and Projects Body Deliverables

Subsequent, upload a brand new textual content module underneath the Deliverables module.

Divi Matching Portfolio and Projects Insert Text Module

Exchange the content material with the Undertaking Description dynamic content material.

Divi Matching Portfolio and Projects Description

Open the Textual content choices below the Design tab and customise the font:

  • Textual content Font: Inter
  • Textual content Font Weight: Mild
  • Textual content Colour: #000000

Divi Matching Portfolio and Projects Text Font

Then set the textual content measurement and line peak. As soon as once more, use the responsive choices to set other textual content sizes for various monitors.

  • Textual content Measurement Desktop: 17px
  • Textual content Measurement Pill: 16px
  • Textual content Measurement Cell: 14px
  • Textual content Line Top: 1.8em

Divi Matching Portfolio and Projects Text Size
In spite of everything, upload a picture module to the suitable column.

Divi Matching Portfolio and Projects Image Module

The picture may also be dynamically populated. Choose the dynamic content material icon and make a choice Symbol 1 from our customized fields.

Divi Matching Portfolio and Projects Image 1

About Phase Design

Now let’s transfer directly to the About segment. Upload a brand new common segment to the web page.

Divi Matching Portfolio and Projects Regular Section

Open the segment settings and upload a background colour.

  • Background: #eae8de

Divi Matching Portfolio and Projects Set Background

Upload a row with two columns.

Divi Matching Portfolio and Projects Insert Row Layout

Subsequent, upload a picture to the left column.

Divi Matching Portfolio and Projects Add Image

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

Divi Matching Portfolio and Projects Dynamic Image 2

Subsequent, upload a textual content module to the suitable column.

Divi Matching Portfolio and Projects Text Module New

Upload the frame textual content.

  • Heading 2: “About”

Divi Matching Portfolio and Projects About Text

Underneath the design tab, regulate the heading textual content kinds.

  • Heading 2 Font: Inter
  • Heading 2 Font Weight: Mild
  • Heading 2 Textual content Colour: #000000

Divi Matching Portfolio and Projects Text Settings

Subsequent, regulate the textual content measurement the use of the responsive choices, and upload the road peak.

  • Heading 2 Textual content Measurement Desktop: 60px
  • Heading 2 Textual content Measurement Pill: 36px
  • Heading 2 Textual content Measurement Cell: 30px
  • Heading 2 Line Top: 1.2em

Divi Matching Portfolio and Projects Heading Size

In spite of everything, open the Sizing settings and take away the ground margin.

  • Margin-Backside: 0px

Divi Matching Portfolio and Projects Margin

Replica the Undertaking Description textual content module from the segment above, then drag it to underneath the About textual content module.

Divi Matching Portfolio and Projects Duplicate and Move

Open the duplicated module settings and substitute the dynamic content material with the About Textual content.

Divi Matching Portfolio and Projects About Text

Pictures 3 and four

Upload a brand new row with two columns to the web page.

Divi Matching Portfolio and Projects New Row 2 Columns

Then, upload a picture module to the left column.

Divi Matching Portfolio and Projects Insert Image Module

The use of the dynamic content material settings, set this symbol module to the Symbol 3 customized box.

Divi Matching Portfolio and Projects Image 3 Dynamic

Underneath the Sizing settings within the Design tab, allow Power Fullwidth.

  • Power Fullwidth: Sure

Divi Matching Portfolio and Projects Image Fullwidth 3

Repeat those steps in the suitable column and upload a picture module. Use the dynamic content material settings to set this symbol to Symbol 4.

Divi Matching Portfolio and Projects Image 4 Dynamic

As soon as once more, allow Power Fullwidth within the Sizing settings.

Divi Matching Portfolio and Projects Image Fullwidth 4

Subsequent, open the row settings and open the Sizing settings below the Design tab. Customise the sizing settings as follows:

  • Use Customized Gutter Width: Sure
  • Gutter Width: 1
  • Width: 100%
  • Max Width: 100vw

Divi Matching Portfolio and Projects Row Settings

Testimonial Format

Upload a brand new row with a unmarried column to the web page.

Divi Matching Portfolio and Projects New Row

Then, upload the testimonial module.

Divi Matching Portfolio and Projects Add Testimonial Module

We will be able to use dynamic content material on this module as neatly. Open the testimonial module environment and upload the next dynamic content material to the fields.

  • Creator: Testimonial Title Dynamic Content material
  • Process Name: Testimonial Process Dynamic Content material
  • Corporate: Consumer Title Dynamic Content material
  • Frame: Testimonial Textual content Dynamic Content material

Divi Matching Portfolio and Projects Testimonial Content

Delete the testimonial symbol.

Divi Matching Portfolio and Projects Remove Image

Transfer to the design tab and customise the quote icon.

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

Divi Matching Portfolio and Projects Quote Icon

Subsequent, regulate the frame font.

  • Frame Font: Inter
  • Frame Font Weight: Mild
  • Frame Textual content Colour: #000000

Divi Matching Portfolio and Projects Body Font Testimonial

Customise the frame textual content measurement the use of responsive choices and modify the frame line peak.

  • Frame Textual content Measurement Desktop: 17px
  • Frame Textual content Measurement Pill: 16px
  • Frame Textual content Measurement Cell: 14px
  • Frame Line Top: 1.8em
See also  The right way to Upload a Dynamic Copyright 12 months to Your Divi Footer (Robotically Up to date)

Divi Matching Portfolio and Projects Body Text Size Line Height

Subsequent, customise the creator textual content settings.

  • Creator Font: Inter
  • Creator Font Weight: Daring
  • Creator Textual content Measurement Desktop: 17px
  • Creator Textual content Measurement Pill: 16px
  • Creator Textual content Measurement Cell: 14px

Divi Matching Portfolio and Projects Author Font

Then regulate the font settings for the placement textual content.

  • Place Font: Inter
  • Place Font Weight: Mild
  • Place Textual content Measurement Desktop: 17px
  • Place Textual content Measurement Pill: 16px
  • Place Textual content Measurement Cell: 14px

Divi Matching Portfolio and Projects Position Font

Customise the corporate font settings as neatly.

  • Corporate Font: Inter
  • Corporate Font Weight: Mild
  • Corporate Textual content Measurement Desktop: 17px
  • Corporate Textual content Measurement Pill: 16px
  • Corporate Textual content Measurement Cell: 14px

Divi Matching Portfolio and Projects Company Font

In spite of everything, upload a field shadow to the testimonial module.

  • Field Shadow: Under

Divi Matching Portfolio and Projects Box Shadow

Fullwidth Symbol

Upload a fullwidth segment to the web page.

Divi Matching Portfolio and Projects Fullwidth Section

Then, upload a fullwidth symbol module.

Divi Matching Portfolio and Projects Fullwidth Image Module

The use of the dynamic content material settings, set this symbol module to Symbol 5.

Divi Matching Portfolio and Projects Dynamic Image 5

Name to Motion Sections

Now our dynamic content material has been laid out. There are a few call-to-action sections that we will be able to replica and regulate from the portfolio web page. In a unique tab, open the portfolio web page within the visible builder, then scroll to the ground of the web page.

Reproduction the “Customized Designs & Commissions” segment.

Divi Matching Portfolio and Projects Copy Section

Transfer again to the undertaking web page template and paste the “Customized Designs & Commissions” segment underneath the present content material.

Divi Matching Portfolio and Projects Paste Section

Open the segment settings and alter the background colour.

  • Background: #333333

Divi Matching Portfolio and Projects Background Color

Open the settings for the “Customized Designs & Commissions” textual content module and alter the Heading 2 textual content colour.

  • Heading 2 Textual content Colour: #FFFFFF

Divi Matching Portfolio and Projects Change Heading Color

Then, open the module settings for the frame textual content and alter the textual content colour.

  • Textual content Textual content Colour: #FFFFFF

Divi Matching Portfolio and Projects Change Text Color

Subsequent, transfer again to the portfolio web page. Reproduction the “Loose Matting on Orders of four or Extra Prints” segment.

Divi Matching Portfolio and Projects Copy Section 2

Then, paste the “Loose Matting” segment to the ground of the Undertaking template web page.

Divi Matching Portfolio and Projects Paste Section 2

Open the Name To Motion module settings and alter the textual content.

  • Name: Store My Newest Prints
  • Button: Store 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

Trade the background colour.

  • Background: #ff804f

Divi Matching Portfolio and Projects Column 2 Background

Then, upload a background symbol. This symbol of summary traces will have to be for your media library so long as you used the print clothier touchdown web page structure pack to design the portfolio web page.

  • Background Symbol: Print-designer-10.png

Divi Matching Portfolio and Projects Add Background Image

Footer Phase

We will be able to additionally replica the footer segment from the portfolio web page to make use of at the undertaking template. Transfer to the tab with the portfolio web page and duplicate the “Subscribe for Drop Updates” footer segment.

Divi Matching Portfolio and Projects Copy Footer

Then after all, paste the footer segment to the ground of the undertaking template web page.

Divi Matching Portfolio and Projects Paste Footer

Undertaking Web page Ultimate Design

This is the finished design for the undertaking web page. The template is carried out to probably the most initiatives and is populated with dynamic content material.

Divi Matching Portfolio and Projects Project Page Final Design

Divi Matching Portfolio and Projects Project Page Mobile Final Design

Ultimate Consequence

Now let’s check out our matching portfolio and undertaking pages.

Portfolio Web page

Divi Matching Portfolio and Projects Portfolio Page Final Design

Divi Matching Portfolio and Projects Portfolio Mobile Final Design

Undertaking Web page

Divi Matching Portfolio and Projects Project Page Final Design

Divi Matching Portfolio and Projects Project Page Mobile Final Design

Ultimate Ideas

Via the use of dynamic content material for your designs, you’ll be able to simply create templates that will let you briefly upload new pages and content material on your site with no need to design the web page structure each and every time. This works nice for portfolio and undertaking content material, however you’ll be able to use the similar ideas to create any roughly web page template you prefer to! For some other portfolio instructional, take a look at this newsletter to be told how to create a scrollable portfolio navigation list. Do you employ dynamic content material or templates to your site? We would really like to listen to from you within the feedback!

The put up How to Create Matching Portfolio & Projects with Divi seemed first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more

0 Comments

Submit a Comment

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