After learning how to create custom taxonomies and terms using Jet Engine in the last part of the dynamic web portfolio series, in this section, I’m going to show you how to create a loop listing in Jet Engine.
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 Your Loop Listing Item
On your dashboard go to JetEngine > Listing > Add New, under Listing Source, select Posts, select the Portfolio for the From post type, under Listing item name add Portfolio Loop, and select Elementor under Listing view, then click the Create Listing Item button (49:02)
Customize Your Listing Item
In the Elementor editor window that opens up, click the (+) icon to add a new section with 1 column. In the Edit Section area on the left, go to Layout > Width and set it to 380 pixels. Under Advanced > Margin, add 50 pixels on top and bottom.
Go to your Widgets area and drag the Image widget to your section (50:46)
Select the image widget and in the Edit Image area on the left, go to Content > Choose Image, click on the Dynamic tags icon and select Custom image (50:54)
Under Image Size select Full, then go to Settings (use the wrench icon (🔧)) and select Post thumbnail under Field (51:13)
If the thumbnail doesn’t show up, go to Settings at the bottom (⚙), under Listing Settings make sure Posts is selected as the Listing Source, and under Post type make sure Portfolio is selected.
Back to the Widgets area, drag a Heading widget below the thumbnail. Select the heading and in the Edit Heading area on the left, go to Content > Title, click on the Dynamic Tags icon then select Custom Field under Jet Engine. Select Client under Field (51:58)
Under Advanced, add ‘Client : <strong>’ for Before (<strong> is to make the client name bold).
Go to Style, select blue for the Text color, under Typography choose a font with Size 35 pixels and 700 for Weight (53:22)
Back in your Widgets area, drag an Icon List widget to your section. In the Edit Icon List area, go to Content > Layout > Items, under List Item #1 > Text, click on the Dynamic Tags icon and select Custom Field under Jet Engine, then select Project Type under Field.
Under Advanced > Before, add ‘Project Type: <strong>’.
Delete list items 2 and 3 (54:38)
Duplicate List Item #1, then under Custom Field select Theme and under Advanced > Before, add ‘Theme: <strong>’.
Duplicate List Item #2, then under Custom Field select Software and under Advanced > Before, add ‘Software: <strong>’.
Duplicate List Item #3, then under Custom Field select Cost and under Advanced > Before, add ‘Cost: <strong>’.
Click on each list item and under Icon, select and insert an icon for it from the Icon Library.
Go to Style > Icon > Color, give the icons orange. Then under Text > Typography, select a font, reduce the font Size to 14 pixels with Weight of 400 (56:55)
Back in your Widgets, find the Button widget and drag it to your canvas.
Under Content > Button > Text, add ‘View Project’. On the Link option, click the Dynamic Tag icon and go to JetEngine > Custom Field and under Field select Homepage.
Under Style, add blue for the Background Color, then on Hover add orange. Select your font under Typography and set the Text color to white (58:06)
Under Content > Button > Alignment, align your button to the left.
From your Widgets area, drag the Inner Section widget to just above your thumbnail/image, right click on the inner section and duplicate it then delete the extra 2 columns from the 2 inner sections (59:05)
Go to your image/thumbnail and drag it to the first inner section. Under Advanced remove all the paddings and margins.
Drag the rest of the content (the heading, icon list and button) to the second inner section.
Select the inner section with the content and under Advanced > Padding, give it 25 pixels on all sides.
Under Style, give the section a Background color of white.
Select the main column, under Style > Border > Box Shadow, add a color (blue) and add a Blur of 3.
On Hover, set Border Type to solid, with a Width of 1 pixel on all sides (1:01:40)
With this, our listing loop is done, with a featured image that’s linked to the pot thumbnail and a button that’s linking to the portfolio homepage.
Make your Listing Item Clickable
If you want to make the whole card (listing loop) clickable, go to the Settings /gear icon (⚙) at the bottom, under Listing Settings, enable the Make Listing Item Clickable option (1:02:17)
When you’re done with all your edits, click the Update button.
In closing
That’s how you can create your listing item (loop) using Jet Engine.
In the next part of our web portfolio series, we’re going to add more projects to the portfolio and create a listing grid (archive) to showcase the projects.
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.
