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.
In your Elementor editor, go to the Navigator and copy the hero section (1:43:50), and paste it into your new archive template.
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.
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
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.
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.
This way when someone goes to any category in the portfolio, for example, branding, they’ll use this same template layout.
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.
