Dynamic Web Portfolio Series (1/9): Creating Custom Dynamic Websites in WordPress using Elementor and Jet Engine

If you have been on the lookout to get started creating custom dynamic websites in WordPress without coding, in this tutorial, I’ll be taking you on your first journey to start creating dynamic websites in WordPress. 

We’ll be creating a dynamic web portfolio using Elementor Pro and Jet Engine from Crocoblock.

To get this done we’re going to use custom post types (CPTs), Meta Fields, and Custom Taxonomies among others. 

I’ll show you how to create projects and add custom data to your projects dynamically using Elementor’s powerful dynamic tags alongside the beauty of Jet Engine that gives us the power to add custom data to your WordPress websites. Let’s look at the kind of portfolio we’ll be creating.

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.

What We’ll Be Creating

In this tutorial, I’ll be showing you how to create a dynamic portfolio with a loop listing that summarizes the projects you have, it will have a featured image, the client’s name, the project details, the theme and software used, and the project duration (03:01), and all this information will be dynamic; it is only entered into the backend of the website.

custom loop created with Jet Engine for dynamic websites in wordpress

I’ll show you how you can add a slider on your homepage and make some features like the featured image, client name or button clickable, or even make the whole card clickable.

You’ll learn to create a portfolio archive page, and you’ll also be able to create a single post page that shows the details of a specific project (04:03); with a featured image/thumbnail, client’s name, project details, and a gallery that showcases your work.

VccB xsZeqj3tOXwvbrkYcrzye7bpgAVbe8ac44rlIAoTqUPdiRZGK1rCa5LYbpknOu8pC8Z w 1C6aTLquzJidv1IKAjya8D9CSX42b9gCy3XyCZWJIx5hXmDKxBtO LmFEdg2gcZfea7cAlg

I’ll show you how to add a URL to your project or site so that your visitors can be able to click on it and view that specific project.

And I’ll show you how to add a basic contact form from Elementor (04:51)

r jH8eL2Xqf 9EofPIXOcHdqdvjukGEYztVeNSVwKrpsJArXkjtAA9Qp75SDfFvl7cVNFZMYDMBj r0Ij2S854X2RKH53cKyo4j5D TcZuGuezE0a9uQJFpJIb67Sknm13T3FhE5Z7z9o luQ

Later I’ll show you how to add another slider with dynamic information that can showcase similar/related projects to the one your visitor is viewing on your website (05:03)

2 uw96gEVNxvI5ibXN0KiaBjv9CQGhcs4A02HNbI x gAgyYBJD3ErCY0V65CLq9oslH4BmqQp3JlXRFUGs vK6ZITMTDA9R9dloVS7R45w8hLgAFT CmmML

And I’ll also show you how to add a form that will enable you to collect information from your client, and you’ll be able to respond to your client’s requests (05:32)

O WcQ5cSrE9aek4 hMNNkrNnoiHSsltGYPuHU0d8mSA6I1vVO8 SFQk4M2BeCZoUQquwnaiPMg EKZQr2DsykmT 2ZtYuv6Y 1a7Lil pWGfDttCxFQZh2q aw3RTCzKodhG11IB6R1A UznLQ

And finally, I’ll show you how to create a beautiful layout from scratch, with a toggle button for an off-canvas menu, a form and different sections including one with animated headers, testimonials, etc (06:08)

BrSZ96xTn4uwAbXTX1ERG5XsgwJK6Dya36cnLtpoxV ihYHQANu7OsSpDxhV IBk

What You’ll Need

For this tutorial, you’re going to need these plugins:

Elementor, Elementor Pro, and Jet Engine.

Jet Engine will enable you to create custom layouts and import dynamic data into your website.

To install the plugins, log into your WordPress website and go to Plugins > Add New, install and activate your required plugins (06:48).

wq3fDAqK H8Lo52druzZYtf608CLzLSnxO4ujXr92gqubG6GGNeoUfg065E2zYsQuJzQnp8BdX8iH4QzWoILO41VKA6MqGaAhs9v4DiirJxk9oP1O9wrtow4mBwMoH7c 2bHpKmfxTtS F5jOA

Now that you have a picture of what we’ll be creating in this tutorial and how we’re going to create it, we are going to get started doing just that in the next part of this series.

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.

1 thought on “Dynamic Web Portfolio Series (1/9): Creating Custom Dynamic Websites in WordPress using Elementor and Jet Engine”

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