Dynamic WordPress Website Tutorial with JetEngine and Elementor Pro

today I'm gonna be taking you through the basics of using jet engine to create a more dynamic WordPress website if you're a beginner and you have no skills or understanding of how this works then this video is going to be perfect for you we're going to take a look at jet engine elemental pro and how we can combine those two together to create a much more dynamic versatile website - pour see this is wptouch the channel where I have you create more powerful WordPress websites if this is your first time on the channel please consider subscribing smashing that bear icon below to be notified every time we add new content okay so let's just jump over into the dashboard I'm going to show you the plugins we're going to use and I'll give you a brief overview of what jet engine is and what it does so let's take a quick look at what we're actually going to create during this video as you can see we're currently looking at the properties page if we scroll down we've got a list of all the properties that we can choose from if we click to go in any of those properties we can take a look at the properties all inside our custom set up inside our custom template if you also take a look on the section below you can see we've got various different custom fields that we've included that are not part of your normal WordPress so things like the price the location custom galleries specific to this particular property all those things are laid out we've also got across the top the ability to fine tune or choose way of what category we want to look at some example you may only want to look at penthouses or we may only want to look at houses or we can do that we can click on penthouse and that'll only show us the penthouses if we go into the houses that'll filter it out and only show us the houses so this video is gonna demonstrate not only how to create custom templates meta fields and so on it's also going to introduce you to taxonomy and this is something that's very very useful for organizing and categorizing the content that you want to create as part of your website so let me just take you over now into the dashboard I'm gonna give you a quick overview of what jet engine is and how we can actually start to use it let's quickly take a look at the plugins that we're going to be using throughout this video now I've got a couple install already that you don't need to install they're just personal preference of me to make the whole process of creating this video just a little bit quicker and smoother so all we really need to have is elemental the free version elemental Pro so we can tap in to the theme building fund that we need a jet engine and jet engine as we're going to cover in this video is the way that we can create these custom posts so as long as you've got those installed we're ready to go and start creating our first setup now if you're new to working with tools like jet engine to create more dynamic websites it can seem kind of overwhelming all the different terminology that's being thrown around maybe one of those things you just can't get your head around so I'm gonna quickly go over and just explain some of the things that we're going to be using if we come on to the jet engine section on the left hand side you can see we've got various different settings in this video we're gonna take a look at a couple of these but they're the Col functions that we need to start being able to create our own custom post types and so on so let's just break these terms down what exactly is a post type well if you consider using WordPress you've got posts and those posts can contain anything like video content text content and so on so they are just a post type then you look at pages and effectively they're the same kind of thing they're just a more customized post type that has slightly less features so with tools like advanced custom fields and jet engine and so on we can create our own custom post types and then we can assign their own custom meta fields and what exactly is a meta field on a meta field is basically again if we use the analogy of the posts you've got the title you've got the content you've got the featured image and all those kinds of things they are basically matter fields so the terminology can be kind of confusing but the theory behind it is pretty simple and straightforward now on top of that we've also got what are called taxonomy z' now this is a term that you may or may not be familiar with and all it really means is it gives us a way to organize our content into simple groups so again if we go back to posts as an example if you used to working with WordPress you will know you have tags and you have categories and you can assign those to individual or multiple posts so both tags and categories attacks on amis inside WordPress so now you kind of have a grasp of what those things are hopefully when we take a look at jet-engine and we started to create post types meta boxes types on amis and so on it'll just take a little bit that mystery or the confusion out of it so let's take a look first of all of what we have inside jet-engine and what we are going to concentrate in this first video we're gonna take a look at post types we're going to take a look at taxonomy and we're going to take a look at listings now you may be thinking why we not touch it on meta boxes well meta boxes is how we can assign custom meta feels like I say like the title and so on to an existing post for example the wordpress posts we want to do something slightly different we want to create a custom post type we want to control every aspect of our new post type so for our example we're going to be taking a look at creating a custom post type all based around properties with that in mind we start creating our first step which is go to the process of creating our new post type so to create our post type we're going to come over to jet-engine and we're gonna just simply choose post types that will then take us in and allow us to do one of two things we can either create a custom post type with jet engine or we can adjust and setup things inside the built in post types that we already have within WordPress if I click on that this will show you all the different post types that you currently have available things like your posts your pages and depending upon what kind of software you've got installed we'll have this like my templates custom fonts and so on we want to focus on jet engine for this example so we're going to make sure that that's the option is selected and as you can see currently we have no post types enabled so we're gonna do is we're gonna come up we're gonna click on add new once we've done that we can now go through with the process of creating our custom post type now this looks kind of daunting because it looks like there's gonna be lots of options things like the general settings and labels and terms about slug and so on so what exactly do all these things mean well again let me take you through and show you what's important and what we can choose to change add or insert if we want to but they are basically optional so that's not offers to vote with the general settings section we've got post type name and we've got post type slug now the post type name is basically what you want to name it so it makes sense to you so for this example we're going to call this properties because we're dealing with properties if we come and click underneath you can see an automatic pre fills out that post type slug now let me just explain what a slug is if you don't really know all it really means is whenever you go to a page or a category or a section inside WordPress it's going to have you mein name something like WP tatsuko Dodge UK forward slash and then I'll have something after it well in this case if we wanted to look at the properties it would be forward slash properties so the slug is just basically a nice simple clean way of differentiating each of the different sections the different posts custom post types and so on now we come back to this a little later on when we create a menu structure we want to access our custom archive page to display our properties so I say don't worry too much about that now it will automatically fill it in but if you want to take a little more control over that you can change it just need to make sure that you adopt the naming convention of making sure that anywhere you want to put a space you can't put that you have to put either an underscore or to put a separate ugly little minus sign you can see it tells us that right next to where it says post type slug so that's just something to bear in mind if you try to put something in and you want spaces you have to separate within the underscore or with a dash so next up we've got labels now labels is one of those things that is effectively totally optional you think see we've got things like singular name add new add new item what if we wanted to we can make it a little bit more personalized so we instead of say in singular name or add new we could say add new property or add a property whatever you kind of want but like I say these are purely optional you don't have to put anything in here if you don't want to use up to you so you can look through those you can have a little play about try them out insert different values in there and see if it actually makes you understand exactly what we're talking about there well I guess a purely optional let's close that down advanced settings now this is one of those things that for the most part you could leave the settings as they are however there's a couple of things that we need to do if we want to make this work the way that we want it to in this example now most of the values are fairly self-explanatory and you've also got a little help underneath it so it's worthwhile to take a little time taking a look at these and if you want to test some of these out to see the effect they have then by all means do the only thing that's going to happen is you'll make a change it doesn't work the way you expect it to it doesn't do what you want you could simply come back in and revert that change let's scroll down you can see we've got things like register query VAR oh all quite complicated side of things leave them as they are the only things we need to worry about other things like has archived we need to make sure that is enabled because we want to be able to create our custom archive and then we've got hierarchical now all that really means is can we have a structure in other words can we have parent and can we have child value so you could have bungalows for example or houses and then underneath there you could have different types of houses or you could have apartments then you could have things a penthouse apartments and growth floor apartments it's just a way of having multiple levels to structure the way your data is actually going to be stored inside the database I generally tend to use hierarchical if we're going to have slightly more complex kinds of sites like we'd have with this we could have multiple different levels of actual sectioning of all the different content menu position we're going to set that to be position one and all that really means is ways it going to be displayed on the left hand side of the screen menu icon well we can simply come in and we can choose a different icon so we're gonna do a properties let's choose some there's a bit more in keeping with that so we'll just choose properties and then see it says supports as you can see we've already got some values in there you've got title and we've got editor so what exactly do they mean well if you remember back to earlier on when I explained the kind of way that's custom post types and post types and so on work I said if you look at things like the post section we've got things like title we've got editor and we've got a featured image and so on these are the default meta fields that a post type will have so these are built in to WordPress itself so we can take advantage of those without having to recreate them in our custom posts so title is as its name would suggest is the title the editor is where you'd normally put in the body content for any of the posts you may create now we can add extra sort of features that we want inside us we can leverage the power of what WordPress already has if we click you can see that opens up a list of options that we can choose or all the different things we've got available as you can see title and editor are already selected what we're going to do is we're going to come down and we're gonna say we want the thumbnail the featured image so now this means that if we add no custom fields to our new post type we'll have the title we'll have the editor and we'll have the thumbnail or featured image so we'll have those in there so that's great we've got those already set up so the next thing you do now is come into our meta fields and this is where we can start adding in our custom meta in for or custom fields 6 it found that out and you can see we got the option to say new meta field let's click to create a new meta field and let's take a look at the options we've got now again this may seem a little bit daunting to start off with but take your time go through it see what the different types of fields actually show and this is going to give you a good understanding the basics of it anyway so the first thing gonna do is gonna give the label so the label is just basically the name that we want the person to see when they're actually going to fill this in on I'm a custom post type it's just there to give them information about what they've got to put in there the first thing to do is we're gonna call this property price underneath that we've got name stoke ID if we click inside there you see it automatically pre-fills that I've based upon the label that we've given it and also like I said when we come into naming any of these meta fields you can't put a space so it automatically puts in at that - to make sure that we know there's no spaces in there by accident next we have object type and this is basically what kind of object what kind of field are we going to create we click to expand you can see we got field we've got tab accordion and endpoint for this example we're just gonna use field I'm not gonna go into any detail of the other three we'll take a look at that in a future more advanced video for now I want to keep this really simple as a nice beginners guide then we've got the field type in other words what kind of data or information do we want the end user to input and what are we allowing them to input so we click you can see we've got a whole range of different types of fields that we can use text date time and so on so forth even though we're going to use a numeric value in this we just need to select text because there's no actual numeric or number value as part of a field type the text and the number are kind of just lumped into one so let's just choose text description is one of those things that's purely optional if you want to tell the end-user what you want them to put in there if there's something a little bit sort of you know they'd be unsure they could make a mistake however when it comes to property price I think it's fairly self-explanatory what they have to put in field width as its name suggests is how why do we want this to display inside the actual editor for the post then we've got character limit default value and is it required well we're going to leave those values as they are and we're going to say yes this is required we need to have them to put in that numeric value for the price shrink that down shrink that down I'm gonna create another meta field so let's say new meta field and we're gonna do the same thing again however this time we're going to call this location you see once I click inside the name ID it automatic field is perfectly fine a field type of text again is fine so we leave all those things we're just gonna say is required we're going to add one more meta field and we're just gonna call this one gallery and from there galleries fine we're coming to the field type or leave that as is but the field type so we're gonna come down and we're gonna say we want this to be gallery now this is gonna allow us to upload multiple images at the same time which is a nice way of be able to create those custom galleries like we saw on the individual property page and again we're gonna leave all those values as they are so that's how I met a field setup we've got one more option now which is called admin columns now if you're wondering what this does is all it really allows us to do is to insert additional columns into the admin section for these new posts we're gonna create now let me just save this as it is and I'll show you what we've got to start off with and then we'll come back in and add some columns so it kind of makes a bit more sense before I get stuck in doing exactly what we want to do inside the admin column section so let's say add post type once that's finished you see now on the top left-hand corner we've now got our properties and we've got properties and add new so let's just jump into the property section this would list all the properties we currently have and as you can see we don't have anything in there but the only information we've got for the actual new properties is going to be the title the name of it and the date that it was inserted so it's not really giving us much information so this is where the beauty of working with jet engine and coming into the post types where we can come in and we can easy edit and add in custom admin columns let's just do that let's add in our first new admin column so we're gonna click gonna give it a title and we're going to call this featured image next up we've got to choose what kind of data are we going to reference inside this admin column you can see we've got meta Valley we've got post terms and we've got custom callback first of all we're gonna say custom callback because we're going to do is we want to put the feature image in there so I have no idea what I would actually use for this so I can easily call upon this selector existing callbacks click on there and you can see we've got a selection of different options what we want is this final one which says render image tag web post thumbnail or image from meta in other words it's just simply going to use the featured image you're going to click on that we can choose the thumbnail so set set field thumbnail is fine we could say size which is going to be the pixel value for this particular image everything's good and they will say apply I don't see you've got column orders we're gonna set this to be column order number two prefix suffix do we want appending a minute we can do that we want to and we can also make it sort of all however I don't want to do any of those things we are going to add another new field is because they add new once we've done that next one we're going to call property location so in the corner property location next we've got the type we're gonna use meta value this time we're gonna reference one of the fields we just create one of our custom fields and to do that all we do is scroll back up to our custom fields you can see we've got these three we've got location so what we're gonna do is click to expand that out you can see the name ID is location that's what we need to worry about it's going to scroll down field name location column order we're gonna set that to be three and we're gonna make this sortable so we can sort based upon that it then says is this a numeric value well it's not gonna be a numeric value because this is actually going to be using a location so we're all good to go on name suppose we done that let's just save this again to update our post type come back to our properties and go into the property section and from there you can see now we've got title featured image property location which is selectable so we can filter that and finally date so currently we have no content in there so we'll come back a little later on put some content in and you'll see then how this actually flashes about now that we've created the basics of our custom post type with jet engine we're now ready to move on and start creating our custom taxonomies if you remember back at the beginning of this video explain what a taxonomy was and all it is it's a way of us allowing us to easily group our content together now because we're working with properties in this example we're going to create a property types taxonomy here we can simply create the different types of property will be listing so once you've come into the dashboard over the jet engine we simply choose taxonomy x' and it'll bring us into this section where we can go in and list any other taxonomy as we've previously created or we can come in and create a new one so we're gonna do just that at the top you see we have add new so I'm gonna click on add new and that'll take us into the settings that allow us to create our taxonomy now you should notice that quite a few different features inside you look very similar to where we created our post type and they operate in a very similar fashion so the first thing we can see we've got is the taxonomy name then the slug and then we have a new entry called post type so let's fill this first section in first so the first thing we'll do is give this taxonomy a name so I'm gonna come in and we're going to type in property types once we click underneath into the taxonomy slug you'll see it pre fills that information out for us which is perfect and then the post type option so we click on there you can see it opens up a list of a lot of options that we can choose from now these will be different depending upon the kind of tools that you have inside your copy of WordPress but you will see some common things like posts pages media revisions and so on however what we want to do is we want to choose the custom post type that we've created so if we look at this list you can see we go down we've got properties which is the custom post that we created we'll select that and that's the first thing we need to do now if we want to associate this with more than one post type we could do that by simply clicking and adding a second a third and fourth and so on however we're going to keep this really simple we only want to assign this particular taxonomy to the property's custom post type next up let's expand the labels out and much the same as I said we created our post type these are purely optional you don't have to fill in any of the values inside this section but you can if you want to change anything inside there and put your own values in so up to you purely optional let's close that down then we've got the Advanced Settings click and up open that up and you can see we've got again a lot of options look very similar to the post types and because we've kind of created a taxonomy that works alongside a post type a lot of these options are exactly the same so things like it want to show it in the admin UI is it available in the admin menu which is this section at the top so you can choose anything you want on there that you think is relevant to what you are creating however again what we want to do is set this hierarchical option so we can create a hierarchy structure of custom taxonomies let's use that option if we want to create a description we could do that we can also come in and create custom meta fields now normally meta fields would normally be associated with custom post types and things along those lines however if you wanted to create an archive page that had some extra information so it could be a description along with maybe an image you want to use inside there you could create your own custom meta feels and then assign it to the taxonomy in exactly the same way you would have done that with the post types and we will take a look at that in a future video where I cover things in a lot more detail I will take a sort of use case and we'll build something out using jet engine for now for this bit of beginners example we're going to leave that as it is and that's the end of the options we need to set up so we're gonna simply come up to the top choose add taxonomy let that save and once we've done that if we go to our properties you can see we now have property types which is our taxonomy and it's been associated with the properties so we could have the posts for example we don't see that entry come to pages again we don't see that custom taxonomy entry so it's only been associated with the properties custom post type so now that we've created that taxonomy let's put some information in and take a look at how it works we're gonna come to the properties option and into property types once we're in there you can see if you've ever used normal taxonomy x' inside wordpress like i say your tags or your categories of your posts you'll see this looks exactly the same however if we created some additional meta fields they will also be listed on this left-hand section and allow us to fill out any data that we associated with it for this example we're going to keep this really straightforward and we're gonna put in houses the category will put apartments a category and we'll put in flats and add our category now because we've set hierarchical as an option you can see we also have the parent category option available to us if we've set this not to be hierarchical we wouldn't see this option so with that in place we've now created our three different custom taxonomies flats apartments and houses and if we come into the properties now and add new we'll find that we've got this new entry on the right-hand side called property types because this has been associated with our properties custom post type we can also then associate it with the property types start to categorize all of our data so let's go ahead and pre fill some data in for our properties so we start to create our archive in single post templates we're gonna have some data to work with so inside the property is we're gonna add new and we're just gonna call this ground apartment we'll drop in some filler text into the description will to choose apartments as our property type we're sitting gonna come in then to our set featured image and we're gonna choose one from this so we'll just choose this one set up a featured image and then we can put in our custom data so a property price we're gonna set this as something like three hundred and fifty thousand location London however you could put the full location inside your full address if you wanted to I'm just keeping this really simple choose our media and then we can just load in any images we want to associate with this as part of a gallery choose our media and you can see there's our custom gallery all set up so all the data that we need for this particular apartment has now been added so we'll hit publish on me once we've done that when I come back and take a look at our properties listing and we can see that we've got our custom columns inside here as well so our featured image being displayed our property location has been displayed alongside the default title and date so I'm gonna go ahead now add a couple more properties in using exactly the same technique and then we're gonna take a look at how we start to build the archive page to display these actual listings there we go there's our three properties all ready to be styled up inside their custom archive and inside the custom single post templates so that's the next thing we're going to take a look at now that we're ready to create those template files as part of our theme what we need to do is go into the dashboard come over to templates and choose theme builder and then a list of any of the predefined layers that we've created will be listed inside here you can see I've already gone ahead and create the default header and the default footer for this layer and I've just simply used a templates that are part of Elementor Pro just for speed so ready to create there's two different kinds of templates we need in this section we're gonna concentrate on the archive so let's click to create an archive once you click archive you'll see it now takes us through because we have nothing else in there we're simply gonna create a new archive we're gonna choose a name for this and we're just going to call this default property archive other we go click on create template that will then take us through into the element or editor and we can choose from any of the predefined layers if you want to use those as a starting point or we can start completely and ugly from fresh and that's what we are going to do so to close this down just we come into the normal editor and as you can see there's the header there's the footer that I've created as part of this template setup so what we're going to do is we're gonna come in and we're gonna say we want to add in a new section so gonna click we're gonna choose a simple one row one column click to add a little bit of space above and below so we're just gonna add some padding above and below and there we go come back over to our widgets and you can see because we've chosen an archive for our particular template template we've got a couple of options at the top on the left hand side that only associate themselves with the archive the title the archive post and the author box what we're going to do first of all is we simply drag in this archive posts option you can see now what that does is it automatically pulls in what it thinks is the right information and for this example is just basically you normal posts and the hello world post this install as part of WordPress by default and that's not what we want so we need to change that and tell it what content we want to reference in our example the properties so when I come down to the little cog icon in the bottom left hand corner and click on settings and from there you see we have an option that says preview settings we can click on there and from there we can choose what we want to use as our preview now you can see it currently says recent posts we don't want that we want to use the properties so what we need to do is come down and choose property archive then click on apply on preview and after a second or two we'll see it'll load in and it'll show us the actual content that we want to view now you can see it pulls in the featured image the name and some other information well we can still fine tune this a little further and get more what we want out of this so let's click to activate this and we take a look on the left hand sighs we've got a normal section where we can go through and create and customize and do all those kinds of good things that we can do with any of the widgets inside element or elemental Pro first I'm going to do is choose a different skin our skin is just basically a design so you can see we've currently have three options classic cards and full content we're gonna choose the cards option and then we'll give it a little more of a fresh modern look next up we can choose the number of columns we want to display whether we want to show the image or not if you want to use masonry so it if you've got different heights it'll compensate for all that we'll leave those at the default values we are going to change the image size because you could probably notice that it's not the greatest-looking quality image let's just choose a slightly larger version and we all have a nice quality image to see from there we can adjust the image ratio if you want to so we can get this to look exactly how we want and we can also come down in an enable/disable style and control every other element so why I'll do is I'm going to take off some of the things that I don't want on here I don't want comments I don't want the date title is perfectly fine and so is excerpt however we don't want the read more option don't want the badge and we don't want the avatar so we end up with a nice simple clean layout you then got things like pagination which is enabled by default but you can come in and you can style that a little differently so depending upon the number of properties you go the list that will dictate as and when you'll see the pagination options we could go through a stylist in any other way if we wanted to but I'm not going to worry about that and I'll leave that as is now when actually me to do is going to hit on publish and that will allow us to set up the conditions for when this particular template is going to be used just click on publish that'll take us through now into choosing the condition so we click on add condition and you can see it currently says include all archives now if you consider that an archive template would be used for our custom post type of properties but also things like the posts and any other custom post types are created we don't want that we want this to be specific to just our properties to do that all we need to do is change this condition so it says all archives you click and you'll see we have a lot of different options depending upon the type of template that you're creating and the types of plugins and the content you have as part of your website you may see some different things inside you however we want as you can see we've got post archived and we've also got property archives so we're going to simply choose properties archive and it'll only assign it to this specific setup on our site so anytime we look at the properties archive this is the template it'll use any other archives will use the standard default template if we wanted to we can add a second condition in there and we can also do things like include or exclude so we can fine-tune to make sure we get exactly the conditions to use this particular template that mean exactly to the criteria that we want let's get rid of that this is all we need to do we hit save and close and that's now setup the basics we've gone ahead and we've created that archive template now if we wanted to we could go in add some extra information into here design it to style it any way we want for this example we're going to leave it as it is so that's how we create the archive templates so how do we go about actually referencing that archive template now so let's come out of Elementor exit to our dashboard and let's go in first of all it's a jet engine and take a look at our post types now as you can see this is the slug for our prototypes which is properties this is what we need to reference where we want to actually access that particular template so we're going to do is I'm going to copy that from thee we're gonna come over into our Piron section and into menus and from there this is our basic main menu that we're going to use so we're gonna create a custom link so if you don't see that inside here all you need to do is go to the screen options at the top and enable anything that you want from there so underneath the custom link the first thing to do is put in the URL so we know what the slug is we know its properties so what I do is I gonna put a forward slash paste in properties and then I'm gonna put in another forward slash and the reason that I do this is because we may be developing a website on one domain and then we might want to migrate it somewhere else well by doing this we don't care what the domain is we're saying that whatever the domain is this will be forwarded by properties and that will then be used to link through to that particular archive template hope that makes sense so now we're gonna just put in the text we want to use and we'll just say add to menu let me go that's inside our menu so we're gonna set this is our primary menu and we're gonna say save menu and now that we've done that we can take look at our site and we can see that we'd have that new entry in our menu structure which we can then link through to the archive that'll show us all of our particular properties so in the home page of our test site this just basically isn't set up with anything but you can see that our navigation at the top with our new properties entry we click on that that will take us over now and show us our new custom archive with the three different properties listed inside there for us if we click on one of these we can go through and we'll see that we get taken through to what looks like a very basic site with no extra information no images none of the data that we've put in so let's rectify that now but going through and creating that single post template so now we're back in our dashboard and we need to go through and create that single post template so I'm going to do is come in two templates again and tell the theme builder from there we're going to choose single and now we're going to say add new single and this allows us to create our single post template so you can see we've got single at the top select the post type now this because we can create custom post types and they can be various different types of post types we need to tell it what we want this single post template to assign to click on the properties of the option that we want we don't want post pages or the for or for the choose properties and then we're going to put in the name for this so the call this default property single create our template and again that will load up the element or editor where we can go through and we can close this down and start building this out our own way now if we take a look at the left-hand side you can see we've got different options to where we were working with the archived template and this is because we're now creating a single post template and therefore the options that are associated with it by default are different so these eight current options allow us to do a range of different things so the first thing to do is going to create a single section inside here click where it can do the same thing again gonna select it come to advanced and we're just going to put some spacing above and below so there we go next we're gonna come back to our widgets and we're going to say we want to put the featured image inside this we can see drive that over and drop that in there and this will now reference the featured image for any of the posts that are clicked on and we're taken over to this single post template so this is just showing us filler information pulled from our particular data to our custom post type being properties it's just pulling in one of those entries so we can see what we're working with when we're flashing this out so that's our property there's our featured image so we've done the first part of it so the next I'm going to do is come in and we're going to create another section and this time we're going to create a two-column section and inside there we're gonna drag in some more widgets so gonna come back with a widget section come over to at this time we want to pull into the post title so I'm gonna drag and drop that they give it a second so when you see that loads that data in gonna come back out we're gonna say gonna pull the post content in so that's the main content that we pulled in now we pulled in all the basic elements that we have there's a part of a normal post type we can now go through and reference the custom data that we've set up now this is done slightly differently because we don't have any widgets that aren't specific to the custom data that we've put in we need to create something a little different so let me just show you what I'm talking about the next we're gonna do is put the gallery in below the description so we're gonna come to the pro elements and choose the gallery option drive that widget to where we want it and we now have all the normal controls that are part of Elementor pro now most of the widgets inside elemental pro will give us dynamic options so you can see we've got dynamic for where we want to choose the images so we're gonna do is when a click on Nate and you can see this now gives us a range of different options from where we can get the data to populate this gallery what we want to do is come down underneath the jet engine section and choose jet engine gallery gonna click on me and you see that nothing actually happens because all we've done so far is tell it that we want to reference a jet engine gallery we haven't told it what jet engine gallery you want to use so we click on this little wrench icon click to expand that out you can see we got field as an option we click on there that will show us any of the fields that are associated with galleries apartment shared engine inside our custom post type now I will say we only created one but there could be times where you want a reference or create multiple different galleries for different purposes inside one single custom post time the procedure is exactly the same so if you had multiple ones you would just simply create another gallery widget and then choose the different gallery you want for this we've only got the one so we're going to select gallery and after a second or so you'll see it now pulls in some data based upon the images that we've uploaded with this sample now we can go ahead and fine-tune the layout so we wanted to we can change this to be three columns we can change the quality of the images we can change the aspect ratio of the images we can change what the link for the image itself goes to so in other words you could make this something that you can just scroll through the gallery and clicking on it will do absolutely nothing or you can have it open up like a lightbox gallery or you can have it a custom URL entirely up to you so you could go through and style this however you wanted to I'm not gonna worry about the styling side of things I just wanted to demonstrate how this is done so we're gonna do is we're gonna simply come back over drop in a heading inside there and we're just going to put in property gallery so we've got some a title on this so people know what this is all related so we can come back and style this a little later when we're ready okay so we've gone ahead we've pulled in some of the data we now need to pull in the data to do with how much this property is and the location for where it's based so we're going to do is gonna come back over to our widgets on the left hand side and we could if we wanted to use some of these these basic widgets or the pro widgets that are part of Elementor however if we scroll right the way down to the bottom we've got extra elements that are listed underneath the listing elements and these are specific to jet engine and they open up additional options on formatting and how we control the data and how it's going to be displayed so we're gonna tap in and start using some of those so let's start by adding in the price for this particular property we're gonna grab this dynamic field drag and drop that over to the right hand column you see that pulls in what it thinks we may want to use if we took a look on the left hand side we've now got the option for source and then the object field note the one what it says a post term user data that's gonna pull in in this example the title and if we wanted to we could put in the title the date the content or the excerpt however we don't want to use that we want to use some metadata so in the choose meditate as the option that no changes to member field underneath and we can choose the meta thing we want to reference from here or we could also just type it in manually but let's keep it simple and just say we want to put in property price that now pulls in the price and as you can see it just pulls in the number so it doesn't really look particularly good so this is where we've got those extra options that are part of the dynamic field and if we take a look as we move down you can see we've got things like hide value of empty a fallback value but what we're looking at filter field output and the customized field output let's just choose the filter first of all and this opens up the callback option now that sounds a little bit complicated but what it really means is we can format the way we want the data that we're pulling in from this custom field in certain different ways let's click and open that up and you can see we've got things like format date format number get poached page link only URL and so on what we want to do is format the number so we gonna click on format number as you can see now that pre formats that using the default values which is a decimal point and then we've got a comma and then the number of decimal points or places that we want you want to use through a miss normal that is so you can see at the moment it says 750,000 point zero zero well we don't need those because we want to create something that's just going to deal with thousands we don't want those pence kinds of things at the end let's just set that to zero and you'll see now that pulls up 75 with or 750,000 however we still don't really know what that even means is it dollars pounds yen it could be anything well this is where the next option for the customized field output comes in now click on there and you can see where it does it it just shows us a field options we've got a percentage sign followed by an S which is basically just this value now we can put anything we want before or after this we can format it if we want to and then we can style and control everything inside this little area so we do it is we're going to put price space and we're gonna put the pound sign so you can see now we now know this is the price is 750 thousand all just by using this filter field output and the customized field output so that's the first part of that done now this goes through and put in the location of this particular property so we can do is we can come onto here we can just duplicate this to make it allows quick and easy meditate is perfectly fine let's just change that meta field change that to location now obviously the price and everything doesn't relate to that anymore so we're gonna do is gonna come down set this and get rid of that completely and we're gonna get rid of this customized field outputs data we don't want price we just want location put a full colon in there and you see now we've got that set up now you have more custom fields you can just repeat this procedure formatting it anywhere you want to putting anything you want in the field format for the output it's just repetitive doing the same thing over and over again but like I say this is just a basic overview to show you how you do these things I'm gonna quickly go and format this just to make it look a little neater before we do let's just set up the condition for this just so we know this going to work as a single post so again we're gonna do is come down to the publish option from there we've got the option now to go through and set up any conditions we want now because we're dealing with a single post template as opposed to an archive template we're going to have different options available so you can see we've got two stages to this it says include properties and it says all so we can do it we can click on there and we could choose anything we want from there so it might be properties in a property type it could be in child property types could be a whole range of different things and again same as we could do with the archive we can create multiple different conditions for when this template will or will not be used let's keep it really simple and just say properties then an eighth way says all if we wanted to assign different layers to different properties we could simply start typing in the name of the property so for example if we just type in apartment you can see that pause in chrome Department because we've got a post type called bad or post call that sorry so you can see we can filter this down or we can be as generic as we want to so this is perfectly fine include all properties we'll say save and close we've now set up the conditions to use this to display our properties so another quickly just going through and style this and I'm going to show you this in action so you can see exactly how it all works so jump back over into the test site as you can see of adjusted the styling a little bit and we could take a look at any of these properties we click to go through and we now have this is our custom layout all set up with our property gallery you can see we can click through all the text is styled on there we've got the information about the price the location and so on if we find that this image is a little bit on the wrong side you can easily come back in and at the moment we just set that to be full I will update that come back over and refresh this I will find now that our image is nice full width if we come back out to our properties again you can see we can choose a different property come in and you see there's all the details updated for that specific property alongside the gallery like I say all of these things are custom designed those you've already seen jet engine has a lot of functionality for creating custom post types tax on a reason and so on however if we take a look at our properties listing what we've done is effectively just pull in part of element or pros layout and this is fine if you have information like this where you just want an image a title maybe the author and so on but what if we wanted to do something like include the data to do with how much this property was or where it's located or something along those lines well how would we go about doing that well jet engine gives us the ability to create custom listings and this is something that I just want to explain how it works and give you an overview now if you consider a listing to be one of these items so if we've got three listings inside here so this first item this beachfront studio we've we've got the image the title and we've got the description is a listing and that's why they kind of call it inside jet engine now these three are part of what's called a loop so in other words all the properties will be displayed six at a time 12 at a time whatever you set your archive page of the display but she each entry is a list item and then the number of those is a loop hope that makes sense what jet engine allows us to do is create custom listing layouts so let's take a look at how we do that I'm not gonna go into a great detail about this because we'll cover this in its own dedicated video a little later down the line I just want to give you a brief overview of how we can utilize that let's come back into a dashboard code the jet engine and you can see we have an option called listings if we click in me this will take us through and show us any listings that we currently have where they're associated the names and so on so we're gonna do is we're gonna create a new one so they say add new and you can see now it says well what do you want to do once it's going to associate yourself with so you can see we've got posts terms and users so if we want to we could use terms which are things like taxonomy is use us which is his name suggest is a user inside your wordpress dashboard we're going to keep this two posts then it says from post type click on it and again you can see we've got posts pages we also properties which is our custom post type that's what we want to use so we're going to select that then we're gonna give this a listing item name so we're just gonna call this property listing then finally listing view you can see you've got elemental or blocks in guttenberg because jet engine will works alongside guttenberg it's not just restricted to working with Elementor so we'll set elemental because that's we're gonna work with then we say create a listing item once you've done that that'll take us over into elemental like you'd normally expect and we can now start designing that particular listing item there's a couple of things we can do to make this life easier so you come back to your properties you can see they're quite a small section where we've got the set up into three so let's kind of replicate that let's go to the setting section underneath there we've got listing settings and a click and you see it says right where would you want to put your data from and how big do you want the preview to be and you want to make it clickable so these are just little bonuses that we can use to make the whole process of creating these lists is just a lot easier let's go ahead and configure this to make sure we've got a nice optimal working environment misting source posts is perfectly fine and as you can see properties is also set up because this is kind of what we chose when we set this set to start off with preview width this is what comes in useful now the layer that were working with is roughly around eleven hundred and forty pixels wide so I'm gonna set this to something like three hundred and eighty pixels so it'll give me a good indication of a kind of width that we'd have don't want to make this clickable while we're gonna worry about that this is just for the preview purposes so now I've done that I can come back into my widgets now if I wanted to I could use some of the basic widgets we have as part of element or element or pro or we can come at the bottom and take a look at using these listing elements that are part of jet-engine let's just use those there now the image we're gonna just drag that and drop that in there post thumbnail is perfectly fine but we could if we wanted to use a different custom field image size we can set that's what we want now full is gonna be a little bit too big for what we're doing so we could say medium we could take a look is that good enough no so let's just say we want medium large that's better is it a linked image we're gonna say yes we wanted to be linked and the permalink is fine and all that means is a permalink is just effectively it's gonna be the link that's going to be you for that particular post so whichever one you click on will take you over to view the details for that particular property again you could use a custom meta field if you wanted to now I'm not gonna go through all the different settings we have inside you we're gonna set this to be centered we could drop a fallback image in there if you wanted to tweak a set like a placeholder image it since I live to you how you want to work with that so that's fine we're gonna leave the image there let me come back over again we're gonna scroll down to the bottom until we get to those dynamic fields drag and drop that inside there you can see it pulls in what we want which is the title for this we could then go ahead and style it filter it to whatever we want with it now come back out we're going to do exactly the same things we're gonna just drag another dynamic field inside there drop that underneath and this time we're going to set this to be the price choose metadata the meta field is going to be property price and again we can do like we did before we can filter the field output set our call back inside there to format the number set up decimal places to be 0 I'll customize this to say price and we'll put the pound sign in there and then we'll just quickly duplicate that and we'll just say that that's going to be the location so we'll change that to location scroll down disable these sorry we need a customized field so we're going to just change that now to location and there we go so we've created our basic layer so let's just select this block and we're gonna do is we're just gonna drag but something around it just with separates it off you'll see a little bit of a box shadow will create that I'm not worried about styling this I just want to demonstrate how it basically works and we're just gonna choose this and just drop in a little bit of extra spacing so we put 20 padding in there that's fine so we'll hit publish on me and that's now created that for us however we take it just jump back over to our tests I can refresh this page nothing has changed so how do we go about changing that well that's very easy let's just come out of the listing section exit to our dashboard and go back to our templates in our theme builder what's been so they will acknowledge our property archive and will click on edit with Elementor once that's loaded in all we need to do is come up to this post loop on its archive loop we're going to that from there and we're simply going to come over now we scroll down to the bottom and you see we've got listing grid as part of our listing elements which is part of jet engine drag and drop that into there and you see it says please select a listing to show so we have listing set to nothing so in a click on there we're going to choose a property listing it's going to click on that and you see there's our properties so now we can go through and configure anything that we want on here so we can set this is an archive template the number of columns whatever we wanted to do to make sure it's laid out the way that we want we've also got things then like post queries so we can come in and filter these posts however we want we have a lot more control but like I say we're going to go through this in its own dedicated video further on down the line we'll take a look at how we can use this things in more detail for now just knowing that if you want to create something a little bit more unique you can tap in and start using these listing options as part of jet engine so that's how we can go and take jet engine elemental pro and wordpress and start building much more feature-rich wordpress websites now if this is where your appetite for the kinds of things you can do when you want to learn more check out the links you can see in the corner right now they're going to give you much more information on not only jet engine but also elemental pro on how we can use other dynamic tools like advanced custom fields and pods so you can take a look at all the options available and make the best decision for you and your workflow well if you can accomplish questions or feedback or anything you might see covered with regards to jet engine drop those suggestions or comments in the comment section below I'd love to get a conversation started and find out what kinds of things you'd like to see covered in future videos well all the applicable links for this and everything we cover on the channel in the description below and my little posse this has been WP tested until next time take care [Music]

Channel: WPTuts

Views: 60,021

Keywords: dynamic wordpress website tutorial, dynamic wordpress website, wordpress website tutorial, dynamic wordpress, dynamic wordpress page, how to make a wordpress website, dynamic, dynamic website in wordpress, wordpress tutorial for beginners, crocoblock tutorial, how to create dynamic website in wordpress step by step, jet engine wordpress, crocoblock, crocoblock elementor, crocoblock jet engine, custom post type, wptuts, wptuts jet engine

Id: g7hMrmaOv9Q

Length: 51min 1sec (3061 seconds)

Published: Tue Nov 12 2019