In the previous part of the dynamic web portfolio series, I showed you how to create a listing grid where we added our portfolio projects and showcase them in a loop/slider.

But our projects are not yet displayed on the single project page. So when you click on the view project button nothing displays.

So in this section of our tutorial, I’m going to show you how to create a custom dynamic single post template to showcase your projects. The template will have a title, a short description of the project, an image, a gallery, etc

For this, we’re going to need Elementor Pro.

Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.

Create a Dynamic Post Template using Elementor Pro

Let’s start by creating a template;

Go to your website dashboard, under Elementor > Templates > Theme Builder > Single Post > Add New (1:17:13)

Give your template a name; Portfolio single, and when you click Create Template it’ll open up in the Elementor editor. 

Click the (+) icon to add a new single-column section, select the section and in the Edit Section area on the left, go to Layout and set the Content Width to Full Width. Under Height, select Minimum Height and set it to 75 VH.

Under Style > Background Type, choose and add a background image from your Media Library. Position your image in the centre, Attachment; Fixed, No repeat and Size; Cover

On the Background Overlay option, add a black background and give it an Opacity of 0.8 (1:18:32)

Go to your Widgets area and drag the Post Title widget to your section.

Go to the Settings icon at the bottom (⚙), under Preview settings and select Portfolio for the Preview dynamic content as portfolio, and on All, select one of your posts. When you apply and preview, the title of the post you’ve added under All, appears (1:19:06)

Select your widget and under Content > Alignment align it to the centre

Under Style, give it a Text colour of white, and on the Typography, option give it a font; Amatic SC with Size 75px.

Back in your Widgets area, drag a Text Editor widget below your post. Under Content click on the dynamic tag and select Custom Field under Jet Engine. 

Under Field, select Project Type and  give it Amiko Font (1:20:05)

Go back to the Widgets area and drag the Lottie widget to your canvas.

Under Content > Source, select External URL, then go to lottiefiles.com and select an animation, copy its URL and paste it under External URL.

Go to Settings and enable the Loop option.

Under Style, go to CSS Filters and select a colour for your icon (1:20:39)

And with this, your first hero section is done. 

Go to your Navigator on the right and rename it to ‘Portfolio hero’.

Duplicate this section by right-clicking on it, select duplicate, rename it to ‘Content’ then delete the content features from it.

Under Style > Background Type, add a background color (gray). Go to Background Overlay and add an image, give it  Opacity of 0.08.

Select the section and under Layout > Content width, select Boxed.

Add an Inner section widget from your Widgets area, and duplicate the inner section.

Add an image widget to the first inner section, select the image widget and under Content > Image, click the dynamic tag and select featured image, give it Full under Image Size.

Select the inner section and under Advanced > Margin, unlink the values and add -150px to the top, and remove all the padding.

Go to the second inner section;

Select the column and under Advanced, give it Padding of 50px on all sides.

Under Style, give it a Background Color of white.

Duplicate the column, then under Layout > Column Width, give the first column 30% and the second one 70%.

From the Widgets area, add a Heading widget to the first column, under Content > Title, click the dynamic tag and select Client under JetEngine > custom field. 

Down on Advanced, add Client for Before.

Go to Style and set the Text colour to blue, add Amatic SC for the Font with Size 45px.

Add a Text Editor widget and under Content on the Dynamic tag  > JetEngine > Custom field, select Project description.

Under Style, give it Text colour black, and under Typography choose your font. 

Back in your Widgets area, add a Gallery widget, then under Content > Type, click on the dynamic tag and select JetEngine Gallery and select Gallery under Field. Add 2 Columns, add 20 for the spacing and on the Link option select Media File, and Medium under Image Size.

When you’re done, Update/Save as a draft and preview your page.

Back in your Elementor editor, go to the Widgets area and add a Button widget.

In the Edit Button area, on the Dynamic tag select homepage for the Custom field, align it to the centre and then select Large for Size.

Under Style, set blue colour for the button on Normal and orange on Hover, and give it Padding of 15px on the top and bottom and 65 px left and right.

Go to the grid/loop that you created in the last part of this tutorial series and copy the icon list (1:29:04), paste it below the button.

Select the icon list and under Layout > Items, duplicate the Cost item then select Duration under the Custom field.

Under the Advanced settings, add Duration: <strong> under Before, and add Weeks under After. You can also add a clock icon for this.

Duplicate the Duration item, on the wrench icon select Plugins under Field, then under the Advanced settings add Plugins: <strong> for Before, and add a different icon for it (1:30:41)

Tip:

You can reposition the items to appear the way you want them to, just by dragging any item.

Go back to the Widgets area and drag a Heading widget to just below the icon list.

Under Content > Title, type “Make an Inquiry”. 

Then under Style, change the Text colour to white and Font to Amatic SC.

Add a Form widget below the heading.

Under Content, disable the Label option.

Under Style, add a Border Radius of 10px on all sides.

Go to the Buttons option, set the button background colour to orange on Normal and blue on Hover.

There are also some additional settings that you can edit to your preference, for example;

Under Content > Actions After Submit, you can Add action to Collect submissions and Email. 

Under the Email option, you can add an email where you want the form info to be sent. 

On the From Name option, you can add the name field to show the name of the person sending the email, you can get this from Form Fields > Name, copy the Shortcode then paste it back under Actions after submit > Email > From Name.

Under Meta Data, you can choose which data you want to collect when someone sends you the form for example you can get the date, the page URL, etc.

Select the column then under Style add grey background-colour

Select the whole inner section and go to Advanced > Padding, add 25px on all sides, then under Style give it a white background colour.

When you’re done, Save it as a draft and then preview it.

Add a Horizontal Listing Grid (Loop)

Back in your editor, go to the Navigator on the right, select the section and duplicate it, rename it to “Related Content”.

Select the inner section and under Advanced remove the margin, delete all the content but the heading, rename the heading to ‘Similar Projects’ under Content > Title.

Go to the Widgets area and drag the Listing Grid widget to the section. 

Under Content > General > Listing, select the Portfolio loop.

Enable the Scroll Slider option.

Under Posts Query, Terms Query, and Custom Query you can filter which posts to show in the listing grid widget.

Select the inner section then under Style > Border and add a Border Radius of 70px on all sides.

Delete all the columns you don’t need, then select the column containing the inner section, give it Padding of 50px.

Back under Content > Columns Number, change it to 2; to show 2 columns instead of 3. When you’re done, preview.

Back in your Navigator, duplicate the section and rename it to  “Get a quote”. Delete the listing grid widget from it, then select the inner section and under Style > Background Type, give it the blue colour.

Select the column, remove the background colour then give the Title Text colour white.

Duplicate the column with the title, then delete the title/heading widget from it.

Add a form widget in its place, select the form and under Style > Typography, give it font size of 50 px.

Select the first column and under Content > Title, add “Get A <br> Custom <br> Quote”.

Under Style > Typography, increase the Size to 100px

Select the inner section and under Advanced > Padding, add 80px.

You can go ahead and customize your form to your preference.

When you’re done, click the Publish button, in the publish settings select Portfolio on Include, then click Add Condition and Save and close.

And now when you go to your preview page and click on View Project, it opens up the project page.

You can also add an entrance animation to your sections by selecting the section and going to Advanced > Motion Effects > Entrance Animation, and then selecting Fade in.

In closing

That’s how you can create a Custom Dynamic Post Template with Elementor Pro.

In the next part of this series, I’ll be showing you how to create a custom listing archive page with Elementor Pro.

For any questions or comments about this or any other tutorial, let me know in the comments section below. Don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.