Dynamic Web Portfolio Series (8/9): Create a Custom Listing Archive Page with Elementor Pro

In this part of the dynamic web portfolio series, I’m going to show you how to create a custom listing archive page with Elementor Pro. This archive page is where we’ll be showcasing all our projects.

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.

Let’s get started.

On your dashboard go to Templates > Theme builder > Archive, create a new archive called Portfolio Archive.

Creating a Custom Listing Archive Page with Elementor Pro

In your Elementor editor, go to the Navigator and copy the hero section (1:43:50), and paste it into your new archive template.

DCLPVk8bJp1iGcQ3HFBkeyEsUjjsCosvxy6RRK1JNywfSEFoE8xZ8k3IC21ssb9CYRkLmGBFtj3r

Go to the Widgets area and drag a heading widget, under Content > Title, add ‘Checkout My Latest Projects’, copy the styling from the ‘sports rise’ heading and paste it on your new heading, then delete the first heading.

Drag a text widget below the heading, then under Content add the description for your project. Copy the styling from the existing text and paste it into the new text, then delete the first text editor widget.

mHmMbx7iBswAMMxCvezWO EzDuN6g0v CnPfaxJ2XDJb64GVlmJr7D7CdgTufqBOBtEi USaqCDtI7Dx6zfwH57UldFb6 XMr7h2 0iKgk6L88 cU00RlOFkRiW9hM8j U mm6XNgsVvD0RdVg

Back in your single page template, copy the Content section via the Navigator, then come back and paste it into the navigator of your archive page. 

Still in the navigator, select the second inner column. Go to the first inner section and delete the featured image.

Drag a Listing grid widget to your section, under Content > Listing select the Portfolio loop and set the Columns Number to 3.

Add a Listing Grid for Loop Listing for the Archive Page

qm HLXBoQwPqrz7C5fdLDTnhm1W6SFQ0HFVmcao1OwjJlpAR90dhIG FuAwRq2zP2TLJh

Tip:

Jet Engine doesn’t have Pagination so you can’t add page numbers. To be able to load more options you need to enable the Load more option, and you can enable it to be either by click or use infinite scroll.

fP1OLazDgxsAv7ceAXPQGtfl8AYDqE i7yGIvQYMnNTXIGa32h3LI4zpgYgMvl3buNDuIGnNmYiFiejsZ4vZxepVYXZqmlZTvGpzTi2 49DLD Ju4NXss7HKMmAiBSOumGGb2O2B1Q0hOyUhNQ

When you enable the infinite scroll option, no matter how many projects you have, your client can just keep scrolling and will find them.

Select the column and go to Style > Background type, give it grey with some transparency, and under Advanced > Padding, give it 50px on all sides.

Back in your single page template, copy the Quote section and come paste it into your archive template page.

Under Advanced > Padding,  add 50px on all sides.

When you’re done, go to the Publish button, go to Display Conditions and on Include select the Portfolio archive. 

Click Add condition again and on Include select Category then Save and Close.

jIyEB w 6l8jXNbyWaRsMbz1QquWiuHCfEquj wGaNjzyqrt90BwYp IBW0lKY0RQQXusGxHtVW2NVgSJFOMAD2cmBUDeZ2Jx0rdOBUfrAApfg

This way when someone goes to any category in the portfolio, for example, branding, they’ll use this same template layout.

O3gS93 xM1uQu2FP INm29u S3AnQ37rLbM3rbBYzi8Qcawke9CLSCXfhiMdGOJs a9nEHnZLZeBrJ05s4PAuFjgyTYb3Sh0SzAqQL4iWqYZtuBPvOQGnM uDhb82RbF9gwPnj4lyjWrvBovXw

That’s how you create a custom listing archive page with Elementor pro.

This marks the end of the second last part of our dynamic web portfolio series. In the final part, I’m going to show you how to create a header, footer and off-canvas menu in Elementor.

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

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of 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