Dynamic Web Portfolio Series (5/9): Create a Loop Listing in Jet Engine

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)

loop listing item in jet engine

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)

CRVMZZuTQkvprxB6Z5 21iZUggBabfmTM9 gKKRBwDxIawvnd zpJSHDY48sKrKBrv0SQcq8OvOqIUJVFwuZmIGYn4kxUGj8

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)

E8cpV1lvneimJSk n6eZ2l9fm19TwxO9A5B4P84D6zfpE1VWtvPhS0Y3NiPiCF0C LtyHq7xnbP3XxvZDkaysYv

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)

ngVwn6gbl1kPOeOFBxI6gFkO6qvz4BQ8GUTBmsgIgawiSDvaY3QHyMhQjP4tdcyhBo11RHLDEky2qv0GIuXWMVz8s7ZVo768h7dKZ 4 sEr9aZ9KvsXpPFgfwb geu 0giZy rP9nJrhP6mRdA

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)

Sz rPot88ul0GpP6dp82PnMG7Yzx56CwQGzlzFWQNrLbMJVYp38ZV 80CaVa83byI9 D agQ8Ijys0bbpk7WQa5Evoa Yp hwoufIm0hAgbi5jN1lzAyir1kDRZZlYPLlN1I0UcVdgNSA8koUw

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)

X0mVmX7YjZ7HziqUQWmy3Tm cVjgQ fCk4U8kZVdCdtjl1CuJh5pyKf7BOUqGOkI6yAW11 LVZWJzz7tN8B BrBSY25RARqY7n Ifc87AgsGu4ZKjIBZU8NkrygCg8BrK9XnqvZG29GK1yv7dg

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)

pGnypENUi6fGMAJ LfVkODgHwkUHJUeMeT1xueQH0yT4uo8AMzJ505XTweZlIeMYrs8zJv34Y55 sIpBG2q8W 8IeNhq8 0UfZPYHsAY14raqIv9

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.

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