Dynamic Web Portfolio Series (7/9): Create a Custom Dynamic Post Template with Elementor Pro

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.

htHIykvN8UGGCLw5TmLTReMS KGiT7m4S584shQouRYQ0GUWGUxj1qMVtUoQ5YIRXXOfEKNHjISxQwAPTKwEUVbf BYxDxSDT1f GlnJ87ZMTB5z27LKbkgozy hYhS54A oJ8doRuw00Jd4Rg

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)

Dynamic Post Template with Elementor Pro

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)

Aa 7Xqk4DWC7cPQB1sRWH0ochYRWB9BU9lidVmaQpl6iIZIr33gQV XtcM25crKxV

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)

YJL4NaUTZWaeethU1KRv12gdgxvZS5bHAu8vnozFjNV4kRS ANo i M4f9QPPgscqcYULh5KAXj6EgkG99k PtHByhJP16lys4lGsm91NIUkVa2DcdHCVX

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)

ELoEA oThQU1nViPRAVkDSzWZNleIYgiBVpLC2xJeJSMoelYChC46VcuevTc2X4E423HwYs5AiD2i Zt n6OeBucuR ItZWk DZlIjHJt7Q4AO0epXG9bVDu1XZoK165NfDfUyevCyVl MD9Wg

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)

h9CzBwhD R5vKoZBa1yCLQOxMlmpz19vy5HTJ6GVB7aseH7Dq3eqvm lxxreArJo S02UiTA0alR4pZvB1bSFhRHB8zUdk6fnB3C2EGKFbl1HgWEFoVTeh6sHb7 QCimU2SRCBku bCjovk3VA

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.

L sTTOZ FsyVn bpj9T9XfLIzeiIKeXCnirZaDYfLAFrqepYkpdJW9zpE44sp4k9Pxx4oMNFSZ0nklx

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.

O9KBqUQZLYYx9WyfMnzGg9Yp3L UFpfSPK78O9Gpv9S

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.

B1RILznjh1lFWQhccJ0U8jQEeHpS4HHD3ENmw VDUrp8fix5vjhfgSwlWeUyIWjMFVXrm4wWNyTL U3S4hx1PyxVPTq40i1td6BF 6jOZyUi9P8gMFapcBEkym7CSs1zxafoJhomFN6D68 kyw

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.

hjbqtlNTEIJtvLHsb5L4EAzqcJA2ahllII1BM UrhOzeUioapLIiLmjBl4kIpKYkrU8TrBVkxE6 mz0Tlj20 ZjrQswl5gPTg t3vfwYbkapSNjdvAP1y F0D31e Zj2 sSedihuPe27uV4iOQ

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.

AAbv32QzUtSVh0 kBtCOoemxY3rk FK RSF y358I1UI4PgvD4qKi0zhX

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.

wW1Ra3ONrK

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.

L2JdjvZufyZfyHFpKt bhliOzcfsF zKc zmnjylD4auvRfWTh0KIRK

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)

VvGBPvfaAiryrw998O8HgkTdVY1nRo23EOaa0xei VxBKF 2In yEcuU31xBqXu s EHCkW3nNjEMfUVUsGe0kyXgb0WnDIpwgGk3rxW4 NUpXINgN4iavWw8ujDEhRaAnpWZ8bJCs0RYc1 nA

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.

rX0AFqfWd BJIVlBU5ayW47KiZRNx9 4rh5H9LgQq28XkGYm1j2Iz S sze8Cvg3gyreDXZo qlJwhYpB3 Lq8F sxWlwSHfqCuyTuTfyH5lyUeV0nz9mU9I2qJh4Pg HNISC2b7pnAuTV8QqQ

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.

IIBYCZRu3ITcPG3YqLocxEo0 NBsQdK2dYKw6wH5ADEv2F9gHkE3C0MauQ7HGZertUXKeBZNWRQ7edMxAwo9D3YBqB5xisK DheKxMWmqr5j97r70zhIehqFl OThJIHtJ519UqwZr8Rd vU3Q

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.

6UQDxOACOwZaxnPPMWyifAw2G DNIA3I0mJo0OTNvdvVQhZsx1bfjc41Q xDeSCSHCnI

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”.

l

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.

XsKMol P5e9XeYgq9mfYVPCs9 qaWA ESplCpdtZdDwx1cQRcw5SbBzlO76 i UmaCbHvQHujvgwl0 nNxiHmR2CT8PXqNdkQr5jDhQdpl DHvGBWNdrRWM2kKs83 aSC5E9kzesa34nz1crg

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.

DjzQ5rJI4Vn EoFnx21Ezo7WjMe9N5MT0p7vLmF84SqA6CeQxn4DwUfSbD3BllEJZkxHor4FA4m2YCaEW4GZBXkmi zysiZ4zRqArpB4efe s8PkhSBv XB3UwTV wnaYU Em9mrw2KwXsyDw

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.

pZQStBHq6WLrZOVVFs SBz1IQs6OwlnpWaIHjjT JU1wIIqRM4vYRu2RMKSVnQD6EcjF28Pkq 17qLsTaL3 KVY48wFrW6FosB5vLNVZDEtsS3ahzGj e Qdg MFN1GHaOvduuUf84paXD LSQ

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.

XopJk4Hgf9Is vsPOsCAGf IXheKMzzHSIYOyR5EmBCuGiIiahL02zztxG8wtWpTGLEonPErGbiDwIxxQmecVT6c1 6svql7gyajftVs6AUkJSzNyJVDjpdKlkktoddZhrkSUz1QQoNcemYLGw

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.

sktyRnTe4Vni55udsMXQjDKceHk4y4STxfTXQF9fJynBPY6v9XHIoqLwoz0FU0EVkNbkSm4RLKGwxtq9zbmClbchBqlzHJLqM5k0OTy mS33BA pYij07lGrBrXZe94ld94a05iKCieAR8dyIQ

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.

tC0UzO

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

eIehfO169HWDJ7Dcc5vwrqTjbO4XsaaX9mbkFcGkuWqLxlKEWEUUznPk DT4VPIjq3nIKs9 lnEePXa69z8lL07DUPXS4929hyJ owWTdV1LmtFSg5Y tHLSWdxKCplg l rHLQEGwdL sNWnA

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.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

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

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users