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.
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).
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)
Back to your Widgets, drag the Listing Grid widget to just below your heading (1:07:27)
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)
On the Slider settings go to Dots Styles > Color, set it to white on Normal, blue on Active and orange on Hover.
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”
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).
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.
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.
