Dynamic Web Portfolio Series (6/9): Create a Listing Grid in Jet Engine

In this part of the dynamic web portfolio series, I’m going to show you how you can create a listing grid in Jet Engine and showcase it on your page.

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.

To do this, you need to first create more projects using the steps I showed you in part 4 under the add content section. Just go to Portfolio > Add New then feed in the details of your projects. 

You can add as many projects as you want.

LNvxXmXePvhhRJ0htYykc005h5pGVihLxpG4rLvQsKd1WKBWyN6I1WdOewDmUThyHkL8eSDIBhOlaYuN6n5nOqQbnKfIKTu8Yl5UD2iIhNTRtqOvHUKqmRbWh QNXJNrCcNHna9XLgXXEi11lQ
fNZLB6Coq0Ouo5HoX0vfkfYguywnwof7dMr1zoR EdoU1OOltJnZcLy 9Le6X8SmcFPVSMBGq jgIRMlUyAX9rSEelkFVyp0l xhcYlRMv32 TwffiJeuRf59Aipo1UFbqrA1q9x3e9Ts MXjg

Create a Homepage for your Listing Grid in Jet Engine

After adding your projects go to Pages > All pages > Add New, name it ‘Home’ click Publish then Edit with Elementor.

In the Elementor editor, add a new single-column section, go to Layout in the edit section area on the left and under the Height option, give your section a Minimum Height of 80 VH.

With your section still selected, go to Style > Background Type and add a Color (grey).

Still under Style, go to Background Overlay, select the Image option and insert an image from your Media Library. 

Under Position select centre centre, then select fixed under Attachment, under Repeat select no repeat, under Size select cover, and give it Opacity of 0.08 (1:06:38).

LNxdD1f q4f5Xag NoDylHOsNsHHJfJWZIUoNppYV3RKJGV2wdM02N9 8aANHFUp3HDv DKcf4PVZxXZDZ hzepIULZukzbgtmtPv1Svt89u J SGQQzsKkQ2qAf BxCqDRfMKnd asmi nh g

Go to the Widgets area and drag a Heading widget to your section. In the Edit Heading area, under Content > Title, add Recent Projects, select H2 under HTML Tag, then align it in the centre.

Go to Style;

Give it blue for Text colour,  give it a font (Amatic SC )under Typography, Size 65px and Weight 700 (1:07:21)

g kUggSvF QTXRjCaVUZLgrv874dICnjGQkax0BnjnT0rtM4PVJfSUPEtIseCcCiH11Epz4jPVKeYwOWYU X2q2 Q5Wy

Back to your Widgets, drag the Listing Grid widget to just below your heading (1:07:27)

bt3VC03zlivKFwHTcCPaEcpra4gKs3Iufl dtIMFqKSK6QqA1ODbTVaUTw5HWmRBADeCB4rXhYhKmBJA6CVxpFh YB5rs16OQ9IE W7GvHxcAZEZY23x9JbfcwXCB lXw3ESIpydIfPVeW6vAA

Under Content > Listing select Portfolio loop, Columns number; 3 , Posts number; 6.

Enable the Slider, Navigation dots and Autoplay and Infinite loop options (01:08:21)

adding a Listing Grid in Jet Engine

On the Slider settings go to Dots Styles > Color, set it to white on Normal, blue on Active and orange on Hover

MRI2Em3DdvLtjfPZ0m6Y9URJrHFfKkVxkB6k2xpe6JgyoTyZxBxZpptfwz2I2NHEukqABYBOKtRySYoeHclAYDxjy9jaH z2gfpyumu H3rPl1IPgZoKrz4cdylDKoHdli1VCpz69H7WY5p nw

When you’re done, click the Update button then go back to your dashboard to set your homepage as the static page before previewing it. 

To do this go to Settings > Reading, under Static Page select your homepage then save changes (1:09:24)

Go to your home page, and reload it to preview your slider.

Back in your Elementor editor, select your section and go to Advanced > Margin to remove the margin then update.

Tip:

If a particular project does not have one of the field’s details, for example here, my Pizza Movers project does not have a theme (1:10:28), don’t leave it blank, you can show it as “Not applicable” or “Not required”.

To do this;

Go back to your Elementor editor and select your icon list widget, under Content > Theme, click on the wrench icon on the Custom Field option then go to Advanced > Fallback, add ‘Not required” 

UUPMxFVMPubdMOf1Oggq0FKoAGO5YhG7OZFM2OBkKSvuy3 iB5J e Z B06KM27svczAU cglao395kU7mnKlVwv4 CXUoZdbd7JkweLclzpKUFMeWtLtPBL7kIdp7OLb6NF2RCZoRpkb6E97Q

Do the same on the Software option; for some projects which may not require software.

When you’re done, update your page.

Let’s make some additional customizations to make our slider look even better;

Under Advanced > Padding, add 100px to the top and bottom.

Select your heading and under Style > Typography, increase the font size to 75px.

On the Slider option under Content, go to Slides to scroll and set it to 2. 

When you’re done click the Update button, then go back to your homepage, reload and preview.

Link to your Archive Page

Copy the button widget in the icon list and paste it below the slider, then in the Edit Button are on the right, you can make changes to your button under Style

The next step is to link this button to your archive page, that’s the portfolio page.

Do this under JetEngine > Post types, copy the post type slug (1:13:49), in your browser, open a new tab and type in your page URL forward-slash(/) your archive page (go-tuts.com/portfolio).

ScXLVsr9eYbTc8NSvrSkxv441RIwFT7sDuOJQHSDUwi8gB tXnJcW0pZdqA4 j08XG5KHkq4Ws08MbBh1Rso8ixoX4aKAk5zf4t1C 5UPw0 JpSmfWb2pDHI5R8am8z IqNwL8UKQ9uAc hbg

Add Portfolio to Menu

To add the portfolio page to the menu, copy the above URL then go to Appearance > Menus, add a new menu and give it a name; Main Menu, under Menu Settings select Primary.

Go to the Add menu items option and click on Custom links, under Link, paste the portfolio URL then add Portfolio under Link text and click Add to menu.

Go to the Pages and on View all, select the Home page and add it to the menu too.

IrlFll lKj8QcHTm9psJu7AmEiuutboMfDtuuPlofIQRYxFPpgmz0RpuaVX7LqFr8Y08m491xh0 YnSblTZBmZ0kM15Nm GcAD6MH0X2wmKkLUjeEkkPZMhtD CY4xirc6hMeV1 ZQKN5kQ

When you reload your page, you’ll find you have those two items on your menu.

Back on the new button you pasted, go to the Edit Button area and under Content > Link, paste the portfolio URL.

Update and preview your page.

In conclusion

That’s how you create a listing grid in Jet Engine.

However, on your preview page when you click on the View Project button, nothing shows up. This leads us to the next part of this series, where i’ll be showing you how to create a Dynamic Post Template 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. . .

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)
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