Get My Free WordPress Beginner Toolkit

I’ll instantly send you my WordPress Beginner Toolkit (PDF) that comes along with all that you need to know as you start your WordPress web design  journey. Intermediate and advanced WordPress users have found it helpful too.

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

Dynamic-Portfolio2

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.

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)

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)

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)

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)

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

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

Leave a Comment

Your email address will not be published.

Reccomended Tools

Get Web Hosting from the best as recommended by WordPress.org

Elementor is the WordPress most popular page builder with over 10 million active users

Featured In

Wordcamp_Logo
OneYoungWorld_white
New York Mag

Disclaimer: Some of the links on this website are affiliate links and I receive a commission if you make a purchase using them at NO extra cost to you. That way, I’m able to keep this website running

© 2022 GO Tech UG