Create a Listing Website WordPress & JetEngine | Real Estate Website in WordPress Elementor

welcome to new masterclass tutorial this time i'll be taking you through the process of building a real estate listing website using jet engine jet smart builders jet search and elementor pro now even though i'll be using a real estate business as the backdrop for this master class the most important takeaway are the tools and the skills that i'll be covering once you work through the topics covered you should be able to take those skills and apply them to pretty much any other type of listing website using wordpress and the tools we've covered now before we get started though there is an important point i do need to raise this is not a beginner's tutorial i will be assuming a certain level of prior knowledge if you're new to the world of dynamic websites using the tools i'll be covering today you may want to go over my introduction tutorials to get more comfortable with the technology before diving into this particular masterclass tutorial i'll drop links to those as well as a lot of other invaluable resources in the description below so check those out okay let's get started by taking a look at exactly what we'd be building in today's master class so here's our key starting point this is what you would expect in a typical kind of real estate website however techniques can be transferred to pretty much any kind of website but what we're going to be covering today first of all let's work our way from the top down first off we have a full ajax search so we started turning for a apartment for example you can see we now get a really nice looking search we can click and we can take a look at that particular property or we can skip through if we have longer lists so we have a really nice looking filter at the top then we have all these options to sub filter any of our listings out so for example we can choose between the different types of properties so we can say we're only interested in apartments and you can see that updates in real time if we want to change that based upon our location we can do that inside there as well you can see we end up with just one property or we can step back out of that now these are dependent upon each other so let me just show you what i'm talking about if i choose condominium you can see dublin and london if i choose an apartment you can see dublin and london inside there however if i choose a house you can see the only option inside there is cardiff so these are taking a look at the information the properties that are listed inside there and then when we choose the property type that will subfilter the property location so i'll show you how to set all of that up i know that's a really popular thing we've also filtered based upon prices and as you can see we've got a range of different prices but if we say well 1.5 minutes just a little bit too rich for our pocket right now let's just filter these between 250 and 785 and you can see now we just get those in that particular range so we have a lot of different options these are stackable so you could say you're interested apartments in that price range and you can see that filters it down again so really cool to see we have all these filters based upon various different criteria inside there now this particular section inside you is an injected advert for the particular listing your properties i'm not going to show you how to do that in this particular video because i've already covered that in this same template setup i'll link to that in the description below so you can check that out if you want to know how to do that but we are going to take a look at how to build these listings we're going to take a look at how to build this filter the ajax at the top for our search we're also going to come in and take a look at a property so let's just say we like this relaxing apartment if we go in you can see we now have all the info across the top the name it's a new build the location we can share this through various different social media platforms we've got the price we've got a gallery of images which we can click and open up we can step through those you can see we also have information about the property and some key info the number of bedrooms bathrooms and so on and i'll show you how to do all that the description all the kinds of things you'd expect to see if we take a look on the right hand side we can see this is the agent that's actually selling this property so we can find out some pertinent information the name of the agent the telephone number we can even send them an email directly saying that we're interested in this property and that property information will be transferred into the email automatically you don't have to do anything you can drop your name your email and so on inside there and you can even select the type of inquiry that you're aiming for whether you're a buyer a tenant or something along those lines and then you can send your message and they'll get an email with all the relevant details we can also click on the actual agent themselves to see what other properties they may be selling so we can click and you can see this now gives us a brief bio over this particular agent we can find out if they've got any reviews and ratings we can find their contact details the areas they cover their position inside the agency that they work for we can also then see all of the different properties they have listed under their specific account if you want to take a look at the agents themselves we can click on agents and this will give us an agent listing we also take a look at applying some filters to these agents just haven't done that in this particular demo setup we can now find out all the different agents again the same information we just saw but if we want to view their listings we can click on that and now we can see that page we can find any reviews that are associated with that particular agent and all the properties associated with them you can also see that each of these individual listings have some relevant information the type of property so it's a for sale a new build and so on some information about the name of it photograph the price and we can also drop in these icons to say like the number of bedrooms number of bathrooms and so on you can set as many of those up as you want inside your design so i'm going to show you how to do all of that as well so by the time we work through everything inside you you should have a really solid understanding of how to integrate various different parts of jet engine jet smart filters and jet search as well as jet review together to create something truly unique and something that goes way beyond what you can do with just wordpress alone now we've seen what we're building let's briefly look over the tools you'll be using to build it all links to everything are listed in the description if you want to find out more or grab yourself a license for any of the tools now for what is a pretty comprehensive website we're not using that many tools elementor on elementor pro because obviously we're building inside elemental we're using the pro version because i want to have access to the theme builder jet engine it's going to be the backbone of all the data we're going to be working with inside this particular website jet reviews because we want to apply the reviews to the agents obviously this is an optional step you don't need to include something like this jet search and jet smart filters because that's how we're going to do the ajax search and the whole filtering which you'd need on a site like this finally we're going to be using oh boy steroids for elementor one of these i'm using this because it makes the whole process of laying things out in columns so much easier but there's so much more you can do with that particular plug-in so i would recommend checking that out to see the kind of things you can do totally free plug-in that's what we're going to be using to do all the sort of like the end side of things and for the design side of things we're simply going to be using the hello theme from elementor because it's basically just a blank theme and allows us to create everything that we want to from scratch jet engine recently released a new update that includes a real time saving feature called glossaries now glossaries are basically a centralized location for repetitive lists of data for example if you want to use a list of property types in your custom post types or your forms you can now leverage the power of glossaries and only have to input that information once and then you can reference it in all of the above scenarios now better still if you need to amend or add to the list of data you can add or edit your glossary items and that will flow down to everything referencing that particular glossary it's a real time saver so let's start by building out the glossaries we'll be using in today's masterclass to do that we'll simply come to jet engine and choose the first entry which is jet engine and you should see glossaries listed on the left hand side if you don't see that you're probably going to need to make sure you've got an updated version of jet engine installed with that being done let's go into glossaries and we can now start go through the process of setting our glossaries up so the first thing we're going to do is add a new glossary and we're just going to give this a name and this is going to be the features and this is just basically a list of features that each individual property may have things like air conditioning you know those kinds of things so once we've set up the name for this which is going to be a group of glossary items we're going to start by adding a new field in and each of these field is basically just a list item inside our collection of features so for this example we'll start off with air conditioning and this is the field value but then you've got the label which is what will be shown to the user in the front end so the first part the field value is what's stored in the database the second part is the value we're going to see on the front end of the site now these can be the same or they can be different doesn't really matter and then you can actually set up how you want to output this when you create the template and actually output the glossary information so if you want to see more about glossaries i'll put a link in the description to the jet engine a to z video that i'm going to release in soon via the the croco block website so check that out if you want to see more about how to use these the final item is is checked in other words is this item going to be checked by default in this example we don't want to do that we're going to leave that as it is so that's all we need to do so now i can go through and add in several more for different features that we've got for the property i'm not going to bore you by doing this in front of you i'll just quickly do it and then we'll come back and move on okay so there's all the features that i wanted to add in as you can see it's just repeating the same thing over and over again so that's our first glossary setup i'm going to go through and create a couple more glossaries now and i'll quickly go over those after i've set them all up just to explain what they're there for and why i've created them okay so here's all the glossaries i wanted to set up the property type just basically allows us to use this inside the listing and it kind of replicates what you'll see as part of the taxonomies then got the property status which allows us to specify if it's things like for sale for rent a new build an investment property and so on the agent service areas in other words where do the agents actually cover inside their business whether it was the locations that they cover and we've got the agent specialities so you can see we've got different things like property management real estate development and so on and then finally we have the agent position which is whether things like client managers senior sales negotiators those kinds of things this just makes the whole process easier and allows us to quickly create very very rich listings without the need to kind of go in and keep replicating the same data and over and over again that's the benefit of using glossaries next on the agenda is setting up the post types for our real estate website to access the post types all we need to do is come into jet engine and choose post types and we're going to create our first post type so we'll say add new and this is going to be the post type for property so we're going to choose property being the post type name and a slug which we're going to put in to be properties don't worry about checking this box we're going to leave that as it is we're going to leave the labels as they are you can change those if you want to but we're going to just let it fall back to the default options advanced settings we're going to just make sure everything's configured the way that we want inside here so we do want to make sure this is a public option we want to make sure that it's not excluded from a search so all these options can kind of stay as they are we're not going to worry anything inside there making sure that has archive is selected otherwise you won't be able to create the archive as a template file which is the last thing we want to sort of miss out on and we're gonna just specify that this is hierarchical the menu position we'll just drop that in position two and we're gonna do is we're gonna change the icon to have something a bit more in keeping so we're gonna look for this little house symbol and that kind of makes a lot more sense the last thing we kind of need to do in this section is to say that we want this to support the featured image as well so by default is supporting the title which will be the name of the property the editor which will be the content and we're just going to select the option for thumbnail featured image which will be as its name suggests the featured image for this particular property next up we're going to go in and start creating the meta fields that we want so click on create new meta field and then we can go through and set everything up so the first one is going to be the property id now this is going to be this is going to be the unique identifier for each of the properties so this is more of an internal thing than anything to do with the database itself so property id that's perfectly fine the field is going to be a normal field we'll just set as text because it's going to be a combination of text and numeric information and that's the first field let's go to our second field and this is going to be the property status so this is going to be grabbing information from one of the glossaries we've just created so first of all let's just drop the label inside there the name id is perfectly fine we're going to come down this needs to be a select field type so we're going to just choose the option for select once we do that we can now say we want to get the options from a glossary check that option now we need to do is choose the actual glossary we want to use so this example it's going to be the property status and that's pretty much all we need to do there we don't want to allow multiple values to be selected but you could do if you wanted to if that was relevant next up let's just add our next field in which in this example is going to be our property type so we're going to just do the same again label property type name id is going to be pre-filled out field is fine field type is going to be check box we're going to just select option for glossary as before select our glossary which is going to be property type and just make sure everything else is fine that looks good to me so we're going to come in and we're going to say add another field in you kind of get where i'm coming from with this so what i'm going to do is i'm going to quickly go through the rest of these so you don't have to sit here and watch me doing one after the other [Music] okay before we save or update this let me just quickly go through a couple of the different fields that you probably may not be aware of first of all we're going to take a look at this features one which as you know is taken from the glossary which is just the features that the property has things like air conditioning those kinds of things so we've got that from a glossary so what you've seen me do at the beginning of this section however i've said to save this as an array because we could have multiple values inside here so we need to make sure that we set this to save as an array that's the only thing you need to know about on that one and then the image gallery is just basically an image gallery and it just operates slightly differently so we can set that up to allow us to upload multiple images and we can choose value formats and different things like that so you can see we can do media id all those kinds of things but we're going to leave that as it is for now and we're just going to say update or create this particular post type we'll now go ahead and set up the taxonomies we'll be using to group all of our properties together so once again we're going to be using another one of jet engines features and this is the taxonomy option which is accessible from the jet engine menu in the bottom left hand corner so this one is going to be the option for our property type and property location so the first thing we're going to do is just choose to create a new taxonomy we're going to set this up to be our property type let a pre-fill out the next option and this time we're just going to link this to our property custom post type so what we're basically saying is that the property custom post type has a new taxonomy called property type just a great way of allowing us to sort of list things together next up we're going to come into the advanced settings and make sure everything is configured the way that we want so we need to do is just check everything is enabled you can see all these options are perfectly fine what we do want to make sure we have enabled is hierarchical now more case of from a usability point of view than from a function point of view it just means that you can easily select any of the different property types when you add a new property without having to know what the names of them are and then start typing things in for me this is just a much more useful way of working we'll add this taxonomy then we're going to come back out we're going to create a second one so again we're going to come into taxonomies and from there we're just going to choose the option to add a new option and we're going to just add in property location post type again we're going to link this to our property custom post type we're going to come into our advanced settings and just make sure that hierarchical is set inside you as well add our taxonomy and we are done with the taxonomy so now if we take a look at the property section on the left hand side we've got property add new and we've got our two custom taxonomies property location and property type so we hop into the property location for example we can start adding in locations for where our properties are actually going to be residing so let's add a couple of options in let's just say we want some properties in new york we'll add that in we'll add something in miami add that in and we'll just add another option in for in this example los angeles okay so that's added those in so we'll add those next that we want to we can add our property type options in so we're just literally going to mimic exactly what we did in that glossary so apartment we've got loft apartments we've got a house and we finally got a condominium or condo there we go add that in and we'll just say we are done next up we need to create the custom post type to hold the information for our sales agents so i don't know agents or custom post type is basically exactly the same as we did when we added the properties in so we're gonna add an agent inside there labels we're going to leave those as they are hop into advanced settings just make sure everything is set up the way we want focusing primarily on making sure it has archive set inside there as well and if we want to we can change this icon over and we'll choose this option same again we're going to make sure this has thumbnail associated with it and now we can just go ahead and start adding in our meta fields so we're just going to go ahead and do the same thing like we've done before so we're going to start off in this example with agent license this is going to be a field and this is just going to be a sort of the id number for their particular license so it could be kind of checked out as it were you know you kind of get the idea so i'm going to quickly go through all of these again nothing's going to be any different to what you've already seen we're going to use some glossaries we're going to insert some basic text some numbers things like that or what you've already seen me do [Music] okay so there's all the metafield values inserted in there we're going to add our custom post type and we are done so we can check our custom post types and you can see we've got agent and we've got property all set up and all the details and values inserted into each of those custom post types if there's one area that trips up a lot of people it's setting up relationships between different post types in this section i'm going to show you how to set up the relationship between the agents who could have multiple properties associated with them and the properties themselves so let's take a look at doing all that right now so next on the agenda now is to set that relationship up to do that we're going to come into relations in jet engine and we're going to create our relationship so i say add new and this is where a lot of people get confused so the first thing you're going to do is give this a name and i would say give it a descriptive name so this example is agent property relationship so i know this is the relationship between the agent and a property or properties so then we've got to set up the parent and the child now the agent is the one that can have multiple properties associated with it in this particular setup in this scenario so we need to set the parent to be agent which means that the child posts are going to be the property once you've done that we can then choose the relationship type and we have three to choose from one to one one to many and many to many now in this example one agent can have multiple properties but for this scenario we're not having one property can have multiple agents so that just means the whole process a little simpler so this means it's one agent to many properties so we'll choose one too many and then we just need to leave it at that we don't need to worry about doing anything inside the parent relation and if we expand the advanced settings out we can basically just leave these two options set up this just allows us to have a kind of two-way relationship so in other words we can assign the agent to a property when we create that using the properties custom post type or conversely we can do the opposite way around we can create a new agent and then we can add what properties we want they've already been created to that agent so it just means we can go either editing the agent to add properties or add the property via the agent hope that makes sense you'll see what i mean when we take a look at actually adding in a property and i'll give you an example of how it works with that being said there's our relationship done and dusted we can hit add relation and that's the relationship set up no more complex now so now that we've done everything for the the relationship and we set everything up this is how a property looks you can see we've got the standard wordpress title content and also a featured image however we've also got this section at the bottom which in this example is called settings however this is where our property id or property status all those custom fields we've created are listed inside you we're going to come back to those a little later once we start adding some properties in but what i wanted to just show you quickly is the related agent so this is a property so the related agent allows us to choose the agent that will be selling this particular property if we hop over out of this and we just go into an agent and we just say we wanted to add a new agent for example we'll see again this gives us all those custom fields and we've got select property this time which would allow us then to find the property or properties associated with this particular agent so this is what i want to just show you that two-way link between properties and agents and how we can add either or depending upon which section we go into whether we're an agent or whether in a property section like i say i hope this makes sense that how this kind of works and i will show you when we create our first property and or agent how we link them together now before we move to start fleshing out our real estate website we need to have some initial data inserted so we can use that to build the templates needed with actual real-world data so let's take a look at doing that next so adding in a property really straightforward we're going to come into our property section and we're simply going to choose the option for add new and inside there we're going to just fill out some basic information now for ease i'm just going to simply use some pre-fill out kind of false data just so you can kind of see how everything works but i'll take you through insert in the information for one and then we'll take a look at how we can just add in some more okay so first we're gonna do let's just put this new york heights we'll just drop in some basic filler text inside there it doesn't really matter too much what we're gonna say we'll make sure that our property is set in the right location so we'll choose property location and we're going to set that for this example to be new york property type we're going to set this to be an apartment and then we're going to just scroll down i'm going to fill these out we'll come back and set the featured image and so on in a moment so property id we're just going to call this one doesn't really matter so property status this is for sale it's an apartment so we're just going to mimic the property type with the property type which is our taxonomy price well it's going to be an expensive one this isn't it 500 000 i'm sure it'll be a lot more expensive than that and we'll just call this city view new york i have no idea if there's a place in new york called city view but i'm sure there is four bedrooms four bathrooms two garages we're gonna call this 15 000 square feet so i have no idea how big that would really be and we're going to say this was built in 2010 our features we're just going to choose from here so we're going to say it's got air conditioning it's got a dryer laundry swimming pool lawn balcony security system and central heating why not let's go to town choose media so i'm just going to choose some images i've already pre-uploaded it's not too important what they are so we'll choose this this this this this this that'll do choose our media so that's all our custom information sort of set out on the right hand side now let's just set our featured image so we're just going to choose an image on there we'll choose this one i think this looks really nice now the option that we can't actually do anything with right now is because we don't have any agents created so we can't choose an agent right now but we can add an agent and we can then associate them with this property so let's do that we're going to publish this we'll just get rid of this annoying thing on gutenberg and there we go there's our property all set up so let's just hop back out of this now and you can see there's our first item so what i'm going to do now is just simply come over to the agents and we're going to add a new agent in so as you can see this operates in a very similar fashion we've just seen with adding properties our custom fields are underneath and the relevant information on the right hand side so let's do the same thing again this time this is going to be samuel palmer we're going to add a little bio in for him we'll drop his agent license in and we're just going to say his agent license number is that tax number again just making these things that might not even be relevant so it's service areas well obviously new york cause that's where this particular property is let's say he covers new york and we'll say covers los angeles specialities property management real estate appraising and retail leasing and email we're just going to put in email at estate dot com doesn't really matter what we're putting it phone number there we go he's got a phone number and his mobile number and his website we'll just put in website dot com now what position is this particular individual we've got all those options available to choose from in there so we're gonna say he's a senior sales agent and as you can remember these are taken from the glossary which is a new feature inside jet engine so it just makes the whole process easy and the nice thing with working with glossaries is if we want to add another position or change the details of eddie's positions we can simply just go into our glossaries make the change make the addition the update and then be reflected throughout our entire site so pretty cool okay so here's the basic info let's just hop on now to the agent side on the right hand side let's set up a featured image which is going to be in this example this is going to be samuel so we'll upload his image and we'll just give him some alt text and we'll just say let's set that as the featured image and there we go so now any related properties let's just start typing in new york and you see there's our new york heights which is our custom property we've just created we'll select that and that's now been associated with him so we'll publish this agent what we're going to do now is we're going to hop back over to our properties and i'll just show you then how that's been added in so if we go back to our properties and we take a look at new york heights you can see if we scroll down you can see there's our selected agent and samuel palmer has now been associated with this particular property it's as easy as that you can see that two-way link is all set up and working okay so what i'm gonna do now is i'm gonna quickly go through and add a few more properties in and a couple more agents in follow the exact same principle that i've just shown you right now we'll have some more data to work with we start building our listings a key aspect to working with dynamic data in jet engine is setting up the listings that will be used to display each one of our listing items items like our properties and sales agents we'll start things off by setting up the properties listing to get started with listings all we need to do is come to jet engine and choose the option for listings and now we can start creating things so the first thing we're going to do is our property listing so let's just select that listing source post is perfectly fine we're going to deal with the post in this example post type we're going to just choose this to be a property i'm going to give this a name of property listing i'm going to use elementor to edit this you could obviously use blocks if you wanted to through gutenberg we'll create our listing and once that's created we're now ready to start building out how we want to style things out now you can get as simple or as complex as you want to with these we're going to keep it straightforward but the skills you'll see in this section are easy to expand upon and just repeat what i show you to add as much data and information as you want to now first have to make our lives just a little easier let's set this environment up so it shows what we want to show and lays it out the way we want to so to do that we're going to come to the settings option the bottom left open that up and go into the listing settings and this allows us to configure a few different things listing source we can change that to posts terms users and so on post is perfectly fine in this example the post type property again is perfectly fine this example but you can see all of our options are inside they want to work with agents and so on we can set the templates up through that leave that as property we're going to set the width to be 450 pixels because that's going to be close to what we'd expect to see in a typical listing layout and it just allows us to design things in a little bit of an easier fashion make the list item clickable this is something we want to do in this example because we want to allow the user to click the image and so on to go and take a look at the actual property itself so we can check that box then it gives us the option to say well what's the link source permalink in this example is perfectly fine so we'll leave that and we'll just leave everything else as it is all those default values are perfectly fine so with that being said now we can start building the various different elements out to build up our actual listing layout so let's start off by dropping the image in at the top so we're gonna do is we're gonna just search for dynamic and we're gonna use the dynamic image which is part of jet engine now you could if you wanted to use the normal elementor image and then just set that up to use the featured image however we just get a little bit more control over how things work using the jet engine options so that's what we're gonna do for this particular setup okay so let's work through the options on the left hand side image size full it's gonna be a little bit big for what we need so we're gonna come in and say we'll try medium large no loss of quality but it should save us a little bit of load in time linked image we're going to select that option so the image becomes a link and you can see the permalink is the same as we just saw when we set the settings up and that's perfectly fine we scroll on through if you want to set any other options up like the alignment and so on you can do that inside here as well and you can even drop in a fallback image just in case no image is uploaded up to you if you want to do that once you've done that the next option we want to go through now is to set up some of the other things so let's come back into our widgets let's just do a search for dynamic again and this time we're going to grab the option for dynamic field we'll drop that into our design and you can see this now says the source is going to be post term user or object which in this example is fine we're just going to be using the default wordpress title for this which is the name of our property and title is perfectly fine so we can leave that set up as it is next thing we want to do is we want to drop in the price we're going to do the same thing again we should do a search for dynamic dynamic field is perfectly fine and we'll drop that underneath and we'll come back to styling these a little later so don't worry too much right now so we need to change this now because the price is a custom field setup through jet engine so to do that we just change the source to metadata because we're dealing with a meta field and then we can choose the meta field drop down underneath and choose the option that we want so under property you can see there's our price we'll choose that and that pulls that data in it doesn't look very good right now though as you can see it just pulls in the number with no formatting or anything this is one of the reasons why the jet engine options gives us so much flexibility if we come down to the options for filter field output and select that we can choose an option for callback and the callback just basically means how do we want to handle the data that we're outputting at the moment you can see it's now just for grade this out because it doesn't really know what we want to use so let's expand the callback option and what we want to do is choose the format number we'll select that and that opens up a lot more options you can see our numbers come back which is perfectly fine so we're going to do is we're going to set the decimal places to be zero in this example because we're dealing with thousands and tens of thousands and so on so we don't need decimal place on there so that's looking better however we're still not where we want to be next up we're going to use the customized field output we'll select that and this gives us this little macro this sort of percentage sign and s and that's just the macro to output this meta field data this example the number but what we can do is we can put things before and after this to expand upon it so we're going to do is we're just going to simply put in the pound sign for this example and you can see now that makes a lot more sense we've got 340 000 we know it's a monetary value so that's how easy it is to do that next on our list we want to add in some information about things like the number of beds bathrooms and those kinds of things so we're going to do the same again search for dynamic we're going to drag in the dynamic field we'll drop that underneath and we're going to do is just change this to metadata because it's a custom field open this up and the first thing we're going to choose is the bedrooms option and you see that just pulls in the number three which is okay and you can use the the different options i've just shown you however if we open up the customize field output because we're using elementor and we've got that setup to work with font awesome we can use font awesome icons inside here so all we need to do is hop over to font awesome do a search for the icon that we want click on the icon and once we do that it'll give us various different ways of selecting it so you can see we've got the different types we've got these little codes the unicode and so on what we want though is this just little bit of code i'm gonna copy that html from there to copy it and we've got what we want now so we're gonna head back over into our page and we're gonna just simply drop this in and you see once we do that there's our icon we're gonna add these spaces or do any formatting we can do that inside here as well so really easy to do and now you can simply go ahead and style this the way that you want we'll come back to that in a moment though we won't worry about it right now trying to do it to make life easier is i'm just going to simply duplicate this one and we're going to change a few parameters on here so the first thing i'm going to do is change it from bedrooms and we're going to just set this to be bathrooms and we're going to do is we're going to hop back over into font awesome we're going to search for bath and we'll see what comes up on there if we get something we quite like there we go this one will do that's perfectly fine all we can do is we can just take that little bit of code and once we can jump back into here and we can just simply take this out and replace it with our new little bit of code and there we go so now we've got a bath icon and a bed icon so you could repeat this as many times as you wanted to to lay everything out how you want so now we've got some of the basics in there there's one more thing i want to show you before we move on to formatting this and laying things out to make it look much nicer than it does right now we're going to create one more dynamic field so again same thing we're just going to search for dynamic drag and drop this but we're going to put this right underneath our image because we're going to place what we have inside you once we change it to float over our image we're going to use this to sort of put in the property status for example whether it's a new build they say retail or rental property those kinds of things so we're going to do is change this over to metadata and we're going to just change the option over until we find property status and you see this is for sale so before we move this around let's just put a bit of style in so it just makes the whole process of seeing how it all looks a little bit easier so first things first i want to make sure that the html tag is set as either a div or a span it just makes positioning things just a little easier moving forward once you've done that we're going to hop over to the style section and we're going to just set up some of the colors now i would recommend you probably set up global colors as part of your design i haven't done that in this example because this is something that i'm sure you're more than accustomed to doing and i'll add some colors as we go through okay so the first thing we want to do is set a background color on this we're going to change the background type and we're just going to choose a color so we've got no global color setup so let's just add some colors that i want to use i'm going to start by adding this orange in so we just paste this orange color there we go we're going to add that in so we're just going to call this orange and we'll create that color so now we've got a background color on this obviously you want to change the typography and the fonts and so on and the colors of that so we're going to change the color over and we're going to set this to be white and again we're going to set this to be a global color always good to have black and white as global colors and we'll just set that to be white create that color now things are starting to look a little bit more interesting so next thing we want to do is just change the styling of the font itself so i'm going to do is come into the typography we'll set this to be something we'll try about 12 pixels maybe 14 that looks a bit small and we're going to just come in and we're going to set this to be a little bit heavier and we're also going to set this to be uppercase okay so that's looking okay maybe size 13. so let's put just a little bit of breathing room around this so underneath the style options and the field we're going to come into the padding we'll try something like three that looks okay actually maybe even two okay that looks pretty good so now we've styled it the way that we want we just now need to go ahead and position this way we want to actually display it to do that we're going to hop over into the advanced section we're going to come right the way down until we get to positioning now by default this is set to be default for width and position but we need to change that we're going to change this to be inline and you see that kind of just closes it up and it just moves it from being just a sort of entire row section gives us a bit more flexibility over how we can set things up inside you and now we're going to do is we're going to set the position to be absolute so when you choose absolute you can see that pushes that right up to the top left hand side of the container that we have for this particular listing item so now we can just position that as we want to by using the offset options we've got a vertical and a horizontal offset and we can also set this up to be different on desktop and those kinds of different things mobile tablets and so on now i'm not going to worry about showing you all these kinds of things i'm going to show you one example of how we can do this somewhere in the region of about 14 well maybe a 20 on there and we'll do it the same there so that looks pretty good that's looking the way i want while we're at it we're just going to select this entire section and we're going to do is we're going to change this over this entire block i should say if i can grab now sometimes you'll see you get this weird little effect because we've got this sort of absolute positioned element we can't grab this so if you get that kind of problem just use the navigator just come through until you find the item that you want you can see this allows us to select everything we're going to select the section which is the entire area and we're going to come to the column gap and set that to be no gap so we get that right the way to full width so now we're getting somewhere let's just push this over the right hand side now we need to deal with the styling and the positioning of all these different items and this is where we're going to be using the uboy plugin which i say completely free just makes our life just a little easier so we're going to do is we're going to select the price to start off with once we've selected that we're going to come over to advanced and we're going to come right the way down to widget stalker open that up and we're going to enable this and what this allows it to do it allows us to use either the flexbox model or a units model now flexbox is very useful but for this example we're going to stick to units so we're going to select the first one and we're going to do is we're going to basically make these three different icons so these three different elements line up with each other so the first one we're going to set to have a value to allow us to have space over the other side so we're going to set this to be something like widget width i'm going to say 60 percent and you can see this little green box now shows us that this is only taking up 60 width we can adjust that if we want to later we're going to come to the next widget we're going to select that go to advanced right the way down to widget stalker and enable this set this to be units and we're going to set the max width or the width on this to be 20 you can see that now brings that up in line and we can do exactly the same thing now for the third and final one so again into advanced into widget stalker enable this units 20 and now everything is all lined up now you might want to close the spacing up make them a little bit smaller it's entirely up to you and you can do this kind of thing by using some of the built-in options inside elementor but the uboy just allows us to do this a lot quicker and easier and i think it just makes the whole process a little bit more visual a little bit quicker to deal with okay we're almost there now for this first listing so we're going to do is we're going to select the entire section and we're going to come over to the style option and we're going to give this a little bit of a border radius and a little bit of a drop shadow just so it stands off the background nicely so first of all we're going to come into our border we're going to set this to be a border radius of eight we're going to work on an eight pixel model now you're not only going to see anything because there's no way you're seeing this there's no difference between the background colors however if we just want to drop in a drop shadow we can select this and what we can do is we can just fine tune this to what we want so we're going to set our horizontal value to be five vertical we're going to be set into four for this example instead of blur of about six because i want this to be quite subtle and we're going to set our spread to be about -7 now you can possibly see it but we're going to make this even more subtle by just reducing the opacity of the shadow and there we go so next up we're going to come up and choose our image because even though we put some rounded edges on this you won't see that because the image sits on top of the actual section so we're going to just come into the image making sure that's the selected item and we're simply going to come over into our style option and we're going to put a border radius and unlink these we're going to say top of eight and we're going to say right of eight and that'll just do with the top left and the top right options inside there so we're almost where we want to be we just need to apply a little bit of spacing to these items and then just a little bit of styling to make them look just a little nicer so let's just select our title going to come into advance first of all let's give this a bit of space uncheck these we're going to set 20 pixels left and right just to push it in to make it look nicer we're going to then just change the font styling on there a little bit because this is a title and it needs to be a little bit more heavy weight set this to be something like h4 for example probably a little too big in this case but we can style this individually anyway so we're going to come in we're going to set this to something like let's try 20. actually it's got a bit smaller than that okay that looks pretty good we're going to set our weight to be something like 500. that's okay i kind of like the look of that i'm going to repeat exactly the same procedure now for these other options underneath okay so go ahead apply the final little bit of style into everything inside you and we've now created our first listing so we can update this or save it whichever you kind of have to do and that's our first listing done and dusted let's put our newly created properties listing template to good use on our properties archive template so we're gonna build that properties archive next let's hop over into templates into theme builder and inside there we're gonna create our first archive so we're just gonna call this default property archive and we'll create the template we're going to put the basics in place to start off with so we're going to ignore any of these pre-built ones we're going to start from scratch and you can see i've already created a header and footer so don't worry too much about what's going on there these are just template ones and you could change these for whatever you kind of wanted to okay so what we're going to do is we're going to create a section at the top which is going to have an image in there and a sort of what this page is about you know so title and then we'll take a look at creating the listings and some sorts and so on so let's just add in a new single section we're going to select that we're going to just come over to the height and we're going to set a minimum height on there we'll try something like about 600 doesn't matter too much we can change any of these values afterwards anyway hop into style and we're going to choose a background image we're going to find something that looks quite nice let's just choose something like this select that image there we go position that we'll do center center for example we don't want any repeat on there and we'd want it to cover what i would suggest then we're going to do is we're going to come to background overlay and we're going to add an overlay on here so we're going to come in and we're going to just set a color we'll choose well actually it's just create just plain black for this example actually what we're going to do is we're going to set it to be a sort of bluey black somewhere around the just have a little bit of blue in there again we'll just add this to our global colors and we're just going to call this blue black and we'll create okay so there's our colors we're just going to make this a little bit more solid somewhere around there and we'll just grab a heading drop that inside there center it we'll set this to be h1 and we're just going to say this is something like find your perfect home doesn't really matter too much what we're going to put in there and we'll just quickly style this so our color we're going to set this to be our global white a typography we're going to just set this to be about 400 uppercase and we'll just push the size up just a little bit maybe somewhere around 48 that'll look good okay so there's our basic head-in section underneath this we are going to drop in a search and filter setup but we're not going to do that right now we're going to come back to that its own dedicated section so we'll add that in a little later what i'm going to focus on right now though is just adding in the listing to do that we're going to simply come over and we're going to do a search for listing and you see there's our listing grades we're going to drag and drop that into our page we're going to select it and make a bit of room so let's just say we'll put 50 pixels margin above and below so what we need to do now is select what listing we want to use we'll open this up and we'll just do a search for property and you see there's our property listing we've only got one at the moment but as we add more we'll see more options inside you so select that and what that does now is that will pull in all the different properties and you can see now what that's doing is that's using the layout we just created through the listing so everything is laid out the way we want now it's a bit squashed up at the moment because i'm on a quite small screen here just to demonstrate things but if i sort of close that up you can see everything looks pretty good and if we want to we can't easily make the page a larger layout so we can select this section come to our layout and we're going to just say we want this to be 1400 for example and then we squash this down we're going to get a bigger display and obviously with more modern browsers that's quite a realistic starting point it's up to you how you want to lay things out i leave it set to that looks pretty cool okay so that's how easy it is to drop the listings inside there and we'll just select the listing again and make sure everything is laid out as we want column number you can see we can set the various different values inside you and three for this example is fine and we can obviously go through and set things up on mobile and tablet this tutorial isn't about setting up mobile and tablet setup i'm sure you can do that yourselves to fine-tune the design if you want to you can then control exactly what is going to be displayed now obviously you want to show just the publish but you have all options if you wanted to inside there i'm gonna scroll down and we're gonna say we want this to lazy load so we can just reduce the weight of this page as we have more properties and you might want to sort of up the post number seven like 12. so when you add more items in you'll have more properties i'll just quickly fine-tune a couple of the other options on here as well so we're going to say we want equal column heights just to make sure everything lines up nice and tidy we're going to say load more i'm going to say infinite scrolls as you scroll down and we're going to leave it at that we don't need to worry about post queries and terms and things along those lines because we're just having this as a listing but if you wanted to use these get a little bit more creative you might want to sort of set the home page for example on archive page to have featured images lots of different things you can do inside here we'll leave it set at that though so that's the first part we've now got our property listing now i also want to allow people to sort these in various different orders we'll start off with a really simple example based upon price but you could if you wanted to expand this to various different kinds of sorts and again this is just something that we've got built into jet engine jet search just smart filters those kinds of things so we're going to do is we're going to do a search for sorting and you see there's our sorting filter we'll pop that into the area above our actual properties and what we can do now is we can come into our sorting list and you can see there's some pre-designed ones inside you we're going to get rid of all of those and we're going to build our own from scratch so we're going to do is we're going to keep this really quite simple to start off with we're going to set it up so we've got the ability to sort things from lowest to highest and from highest to lowest we'll expand that out i'm going to change this title and that's just basically what you're going to see inside the drop down select what you want to order by well we're going to expand this out and we're going to say we want to use a meta key numeric because it's a it's a number we set up to do for the value of the property so we're going to choose that option and we're going to put the key in for that custom field which in this example is price now if you're ever unsure what that meta key is you can simply hop over into jet engine into your custom post type and then all of your meta fields are listed here and you can see next to them next to the name will show you what the actual meta field name is so for example we're dealing with the price you can see price is the better field so we open this up the name id is price all in lower case so if you ever get stuck just reference back to that and it's going to make your life a lot easier copy and paste if you want to to avoid any kind of errors with capitalization spaces and so on okay so prices find in there this example we want to set this to ascending and that's our first one so we're going to do is we're going to duplicate this now and we're going to change this second option to be the opposite way around this time so we're going to just change this to be descending i'm going to change the label inside there for the title and there we go so now what we've got is we've got a very simple sort that allows us to sort it by highest price to lowest price or lowest price the highest priced so we're going to do is we're just going to just select this and we're going to do like we've done before we're going to come into advanced we're going to come down to widget stalker and we're going to enable the widget stalker set this to be using units and we're going to set it to be 50 percent even though on the left hand side we're going to do is we're going to come back up here we're going to drag a heading in above this and we're just going to set this up to be a title so people know exactly what they're looking at so we'll say this is our properties h2 is fine let's just quickly style this just set things up on here and let's just say something like 24 pixels for example and we'll make this just a little lighter something like that okay so what we're going to do now is just the same thing again so we're going to come back to our widget stalker enable this set it to be units set this to be 50 percent and now we've got things lined up all we need to do now is select the second option where we've got our sort and we're going to come into style and we're going to just make sure that everything is set up the way we want so we'll set our alignment to be right and we want to adjust the size of this we can do that so you can see we can adjust the width to make it just a little bit bigger so let's just say something like 300 pixels that look a bit better there we go if you want to style things and adjust the labels and all those kinds of things and buttons and all that kind of stuff you can do that inside you i'm not going to worry too much about it though right now so now we've configured everything we just need to go ahead and make sure that this is going to work the way we want it to so we're going to come back over into our edit sorting filter option expand the content option and choose what this filter is for drop that option down and we're going to say this is jet engine because this is where the date is coming from ajax is perfectly fine so this will just update when you make a change to it and you can see apply on value change but you could if you wanted to drop in a button after it show apply button in this example we don't want to for this particular label we're just going to simply drop in the sort properties and we're going to say yep label block is fine inside there sort everything looks good just hop back over here i'm going to go back to our label and we're going to make sure that's right aligned as well and we're also going to come into the typography and we're just going to put a little bit of spacing underneath it so we've got letter spacing drop that down a bit so it's not quite so in your face there we go and that's it done we've now created our listing we've applied sorting to it we've also gone ahead and set up our header and we're all ready now to test this out so let's just publish this page we need to add a condition to this now that to say where and when this is going to be used as an archive so we're going to add our condition we're going to open this up and expand it and we're going to look for the property archive section and we've got the first option inside there is property archive now the way this works is everything that sits below that unless you change it will also inherit this template for most cases that would be fine but if you wanted to change it to have a different template for various different setups like the property type and so on you can do that for this example we're going to set it to be property archive and we're going to say save and close that's the archive created so now we've created the archive let's add that into our navigation so we can reference it and then let's test it out let's exit to our dashboard and from there we're going to come in to our appearance and into menus if you haven't already got a menu created just create a simple standard menu and i just call this main menu and you can see home is set inside there and the display location is set to primary so now we need to reference and include the new archive but how do we go about doing it because well it's not actually available anywhere inside you you see posts for example and we've got pages and agents and property but nothing to do with the actual listing for the archive so how do we go about actually setting that up it's actually a lot easier than you may think but i know this is one of those areas that a lot of people stumble upon because it's not really that clear so we're going to do is we're going to come back out of this and we're going to hop into our post types our custom post text we created with jet engine there's our agent and our property and there's the slug for each of those agent and properties so what i'm going to do is i'm going to copy the properties slug i'm going to pop back over into our menus and we're going to add in a custom link so we're going to open this up we're simply going to drop in the link that we've just selected but we're going to encase that with forward slashes so we're going to put in like so and what this means is that it doesn't matter what domain it's on this will work regardless if you wanted to put your full domain inside there you could do that so you could put www.mydomain.com forward properties forward slash would work perfectly fine as well the link we're just going to put properties let's say say all properties and we'll just add that to our menu so there's our custom menu so we'll add that inside there so now we hop back over into our test site we're on the home page where there currently is nothing but you'll see there's our all properties option in our menu we'll click on that and that will take us through and you can now see there's our properties everything listed inside they're all six that we currently have you can see they're all random in their pricing structure they're in the order that i added them in so what i can do now is i can come up to sort and say i want to look at the highest to lowest and there's our 15 million pound miami views right the way down to our 340 thousand pound mana view alternately you can just simply choose the other option and that'll reverse it so pretty cool our archive template needs to lead somewhere and in this example it's our property single template so let's take a look at building that next back in the template section this time we're going to just use the option for single post i'm going to create our new template so this is going to be a single property template and we'll create our template from there and then we can start building things inside our templates the first thing i want to do is just close this down because we're going to start completely from scratch we're going to hop over into the settings section for this particular page and go into our styles i'm going to set our background color now i've done this on some of the other templates as well i just didn't show it on camera but all it is is just to apply this really really pale kind of color to the background which i can then use and put white boxes over the top because it just makes it stand out a little nicer okay that being said we're now ready to start adding things inside here so we're going to just choose the option for a two column section and this is we're going to put things like the name of the apartment the price those kinds of useful things so we'll select this make sure we've got it selected and add a bit of spacing around it so for this example we'll just do 50 above and below actually might be a bit too much let's just do 20. okay that looks good okay so with that selected let's just come back to our layout and make sure everything is now going to sit in the right position so we're going to make sure that this is set to vertical align of top because i want everything to align on the top section now we can go ahead and start adding all the items in so let's just come into our widgets and we're going to do a search for dynamic gonna grab the dynamic field drag and drop that inside there and we're going to change this to make sure it's right now you can see it's putting in hello world which is just the default filler uh sort of post that you have so we need to change that now to know that it's working with the right info so we're going to come down to our settings in the bottom left come to our preview settings change the dynamic content to be previewed to property and for this example we'll just do a search for new york or something new york heights there we go apply and preview and that'll refresh the page and you can see there's the right information so now the preview information that we're going to be using will actually be a property as opposed to a default wordpress post again this is one of those things that when you're new to working with this kind of thing it can be confusing how you build things when you're not actually seeing the information that's relevant to the post type you're working with okay so we'll worry about styling these things a little later the next thing you want to do is to just sort of specify what kind of property this is so we're going to do the same thing again we'll duplicate this so we'll just right click and duplicate make sure this is selected and we're going to change this to metadata because we're going to grab one of our custom meta fields change our metadata over and we're going to use the option for property status so we can see whether this is for sale you know investment property those kinds of things we're going to duplicate that another time and this third one is going to be for the address so again we're going to scroll it down until we find the property information we'll grab the address info inside there next up on the right hand side we want to put some sharing icons and we want to put the price and then we'll take a look at applying some other styling to this to make it all look much nicer than it does right now so with that being said let's just select the first option and we're just going to do a search for share buttons and there you go there's our share button we're going to drag that over to this side now that looks particularly ugly but we'll worry about styling those in a moment but we will align those to the right hand side and we're going to do is we're going to just duplicate this a fourth time drag that over to the right hand side and we're going to just change this metadata is perfectly fine but we want to put the price in this time and there we go there's our pricing information and again we want to align this correctly so we'll hop over to our styles set this to be aligned to the right so there's the basic info next thing i'm going to do now like i say is go ahead and style this to make it look a little bit nicer now to make this section a lot quicker i'm not going to bore you by showing you how i set up all the styling for all this i'm going to do that behind the scenes and we'll come back and we move on then to building out the next sections okay so there's the styling applied to the header section everything good on there so the next thing to do now is start creating everything else so we're going to just add in a two column section and we're going to set this up to be like so and we're just going to select all this i'm going to set this to be 1200 pixels even though i did 1400 earlier on changing over to 1200 now i think it looks better okay so what we're going to have is the left hand section is going to have the information about the property the right hand section a little later on is going to have the ability to contact the agent that's selling the property let me just demonstrate that this is what we're going to be working towards so this is the main section we're going to start with right now and later on we're going to come back to this because we're going to build this out through some templating options so this is the first focal point of dealing with the template let's hop back into our design so we're going to do is we want to drop in the featured image for this particular property first of all so again we're just going to do a search for dynamic grab in the dynamic image drop that inside there and post thumbnail is perfectly fine and you can see it pulls in an image for us which is great next on our list we want to add the gallery of images in which is one of our custom fields so we're going to grab the gallery option drop that underneath and then we can do is we can choose exactly where this date is going to come from so we're going to use the option for dynamic tags select that and you can see we have jet engine gallery as an option we'll choose that we'll click the little wrench icon there and we'll select the gallery we want to work with which in this case is the property image gallery we only have one right now so we'll select that and what that'll do is that'll start to pull through the images for us and there you go there's our images so now we can configure this how we want now because we don't know if this would be landscape portrait square and so on what we can do is we can just simply come into the option for grid and set this to be masonry we can set the columns in this example i want to stick this to three we want to adjust the spacing which we're going to do say that's about 15 pixels that's perfectly fine and then you can choose what size images do you want to display so you can choose from any of the pre-built layouts and depending upon how big you choose to have these images and kind of control exactly how good quality they are and what to choose from here you can also choose what link you want to do now media file i would generally choose to be the option gives us the ability then to easily work with a nice light box effect and if you want to apply an overlay or control the way this all looks you can do exactly that from inside here other than that we're going to leave that as it is that's perfectly fine so looking at the finished product the next thing we want to do is drop in this section for the overview which is going to include the property id the details about the property the number of bedrooms bathrooms and again we're going to be using icons like we've done before so let's just hop back into the template we're working with what we're going to do is we're going to come in and choose an inner section so we want to have just a little control over styling and so on so we're going to drag and drop that underneath our gallery and you see we've got two columns inside there we don't need two columns we're going to just get rid of one of these just delete that completely so we just end up with the one inside there now let's just apply a little bit of styling to this we're gonna make sure it's selected we're gonna just hop over into the style option we're gonna set the background color to be our global white color you see that gives us a nice white box there and we're just going to add in 20 pixels of padding inside there so we get this nice kind of boxed effect do we work with okay so next thing i want to do is just simply grab a heading so we're going to drop that heading inside there we're just going to change this to overview we'll set this to be h3 and we're going to quickly just set up some styling so we're going to say the typography we're going to use primary color we're going to use the secondary color and we're just going to tweak this a little bit so before we do let's just make sure h3 yep and we're just going to adjust this to make it just a little bit lighter weight so we'll set that to 300 and we're going to reduce the size this to say maybe 24 something like that that looks okay oh she's making that 400. okay so this is the first part next thing you want to do is select this and we're going to use that option inside our advanced for the widget stalker and we're going to do like we did before this time we're going to set this to be 50 width and that means that we can line up this with the property id which is going to be the next option we're going to drop in so let's just choose dynamic we want to choose a dynamic field which is part of jet engine and we're going to do inside there is we're going to change this over now so we've got the right information so change this to metadata we're going to choose property id which is the unique identifier that we created as a custom field once we've done that we just need to customize the actual output otherwise it makes no sense to anybody what's going on so what we're going to do is we're going to customize this there's our little macro we're going to drop in the property id and put a space and also you can see i've just used the normal html tags to make that property id just a little bit bolder so it stands out a little better so that's pretty cool now what we need to do is come over to advanced like we did before down to the widget stalker and set this to be 50 so it floats on the right hand side there we go and we can just find a commit to style and we can just align this to the right hand side so that's made that look a lot nicer next up we're just going to drop in a separator just to give us a little divider area between there drop that underneath now you can see this now sits underneath the box and what i want to do is i want this to be inside this inner section now it's a bit awkward sometimes when it comes to elementor to try to get things where you want especially when you're using this to kind of float your information left and right so the easiest way like we saw before is to bring the navigator up and then you can use the navigator to position things where you actually want them now we'll set that inside there and now we can just fine tune that to get exactly what we want so 100 is perfectly fine we're going to set this to be let's go for dotted coming to our style we're going to just adjust this to make it a little lighter so it's a little less in your face there we go all we can do is we can just simply come into our style option and close our gap up there we go that looks much nicer so next up we're going to add in some more of those custom fields so i'm going to just repeat the process and i'm going to go through every single one i'll show you the first two and then i'm just going to simply go and repeat that process for the remainder of this particular section so the first thing we're going to do is we're going to come back up do a search for dynamic dynamic field drop that underneath our little line and this is now bringing in the default values but we need to change this this is going to be the type of property that we're dealing with so we're going to just choose the option for metadata and from there we're now going to choose our property type which is a multi-select option you can see that gives us an error but don't worry we can deal with that quite easily we're going to come to filter field output and from the callback option we're going to come down and we're going to choose the option checked value list or checkbox field value so check checkbox field values gives us any of those checkboxes now obviously we're only going to have one in this example but you can see that allows us to put that in there and the next thing we're going to do is customize this field output i'm going to just drop in some information so the first thing i want to do is kind of make things bold so we're going to just type in the strong html code i'm gonna go after our little symbol our little macro we're gonna close that up so we're gonna close the strong side of things then we're gonna put a line break in which is four slash br wrapped in our normal prices and then we're going to put in property type and you see that now tells us the apartment is the property type so we can see exactly what that's like so that's really straightforward the next thing we want to do is come over to advanced and under there we're going to use the widget stalker again and this is where we can just control exactly how wide this is going to be to allow us to get all of the icons we want inside there so let's enable it set to be units and we're going to set this one to be just 25 and there we go so we've done the first one the next one we're going to do is along the same kind of lines and then like i say i'm just going to get on and do the rest so we're going to do is we're going to add in another dynamic field we'll drop that underneath there so the next thing i'm going to do now is set this to be things like the bedrooms the bathrooms and so on so we're going to just choose metadata we're going to choose for the first one it's going to be bedrooms once we've done that we're going to come down to customize the field output and we can do is now we can just use that normal kind of information we've got to put in the font awesome icon so i'm going to just quickly paste in the little block of code that i've just copied and let me just explain what's going on here you can see most importantly we've got the little macro which is that percentage sign in the s we've got a font awesome icon like we've seen before so exactly the same as i've showed you where we've copied anything from you you just literally copied this little line item once you've done that we wrapped it in strong tags for the icon and the number and then the bedrooms underneath is just separated by a line break nothing anything complex in there at all you can simply pause the video if you want to here and copy exactly what i've done if you want to replicate this for yourself finally all we need to do now is hop over to the advanced section into our widget stalker enable that set it to units and then we're going to set this to maybe 10 percent and there we go that's added that in maybe 15 just to give us a little bit of space there we go so now i'm going to repeat this process a couple of times with some different icons with the same kinds of data for bathrooms garages and so on and then we're going to move on okay so there we go there's all of those next set of options inserted in so the next thing we want to do now is go ahead and get the description of the property in place so first things first let's just set up a title inside you so we're going to just grab a normal heading drop that underneath there now again you can see this is pushing it outside which is one of the quirks of trying to get everything lined up so we'll just use the navigator to get that we want we're also going to duplicate the divider and set that after our header i'm going to change the heading inside there we'll set that to be something like h4 and we're going to do is we're going to set this to be description okay let's just quickly style that as well just so we know actually let's just copy the styling from there so copy that paste the styling there we go that'll do we'll just remove that wedges to occur from there okay and finally we'll just make it a little bit smaller as well excuse me being picky but part of what i do okay so finally we're just going to go in and add a little bit of space above that so maybe 20 pixels above so the next thing we're going to do is just grab the data to drop underneath there that'll have the description of the property itself and to do that we're going to come back out we're just going to do dynamic drag our dynamic field into position change that over to have content inside there and everything is now set up and good to go so that's the key information about the property all set up all right let's just make this a little bit wider maybe something like 25 and 75 percent that's a bit better it gives us a bit more breathing space to make the design look a little nicer okay so that's the key part now we want to drop in the features and the location information inside you so let's just close this up we're going to come back up and we're going to just pull in another inner section we'll drop that underneath we're going to get rid of one of those columns and we're going to just add a bit of space above this so we're going to just put in a margin of say 30 pixels there and 30 pixels top and bottom link those together and we're going to just do the same 20 pixels of spacing around there and we're going to just change the background color to be our global white so now everything is kind of consistent with what we're doing above so we kind of get these nice blocks that allow us to see what we're doing okay so let's make our life just a little bit easier like we've done before let's just duplicate this divider and let's just duplicate this heading and then we can just reposition those then in our new section so let's expand that out and we're just going to grab those and put them where we want them so put that down there let's just drag down a little bit so we can see what we're doing there we go it gets a little bit finicky when you start to get more complex designs that's part of the fun okay so our feature section is now ready let's just go and do a search for our dynamic fields drop that underneath there again position it where we want it okay so what we need to do now is change this over to metadata and this is going to show our features and this is one of those little things i'm going to show you something that's really useful if you're working with just repeating items just to make things look nice and again one of those things the jet engine just makes super easy to do so the meta field metadata is fine we're going to change this over now and we want to find the option for features so let's just find that inside there there we go which if you remember was just a checkbox and again we get this error because it doesn't know how to output the data but as always we can simply change that by filtering the field output and changing the callback this is pretty cool if we do the option for checked values list what that'll do is it'll create a list of all of those values that's already quite cool so it now replaces the array with the values that will actually be an output however we can also set this to go into multiple columns it says set that to be two columns so it looks a little bit cooler and also let's give it an icon to say well these are all the items the features it's gone let's do a search for check and there's our check mark so we'll say yep we'll use that we'll insert that into there and if we want to we can change the color of this as well so we can style everything inside there but you can see now we've now got a nice looking checkbox list that says all the different features that this particular property has pretty cool so we're going to do one more thing that we're going to add the location at the bottom using the same technique we've just covered so just to make life easy let's duplicate this entire section so all our padding and everything's in place we're going to get rid of this dynamic data delete that from there and we're going to change this to location and finally we're just going to drag in a map so we're just going to do a search for map we'll drag that underneath there and all we need to do now is use the dynamic tags to reference our jet engine custom field and then we're going to choose the custom field which is the address and we'll check that option and there we go so we've now added in a map now it might not show up at the moment because the address is a little bit sort of made up big fictitious but you know you kind of get the idea and now obviously i can set things like the zoom level that i want the height of the map and so on so zoom level about 14 height well we could just adjust that to make it look a little bit better let's just say about 450 pixels there we go that's pretty cool okay so other than the agent information which you need to add in on the right hand side a little later once we've created that template this is the basics of our entire single post template created so now we need to go ahead publish this and set up the condition for when and where this is going to be used so let's add our condition we don't want to apply this to all singular so we expand that out we're going to find property and we're just going to choose the option for property and then you can see we can filter this down to various different types of properties but we're going to leave this set to all so this template now will be used as the default property template for all of our properties let's hit save and close on there so that's our template created so let's hop back over now to our test site where we've got our listing so we refresh this to make sure everything is in right place so there's all our properties and now if we take a look at mana view for example click to go into there we're now going to go through and this is our custom layout you can see there's our gallery we can click on our images we can scroll through inside there we can scroll down there's our description there's our features our location map everything is in place and working the way we wanted it to next on the checklist is the listing template for our sales agents let's get stuck in and build that one next so we're back into the listing section now of jet engine and we're going to create our listing for our agent so we're going to choose the option for agent and need the post type and we're just going to call this agent listing and we'll create our new listing item okay so let's just insert a simple layout so we're going to set this option for two columns okay so let's start building everything out so we're going to do is come back in to our widgets and search for a dynamic image drop that inside there and post thumbnail is perfectly fine in this example and then we're going to do is we're going to come over and start adding the content on the right hand side so the first thing you want to do is add in the name of this individual agent so again dynamic widgets and we're going to do dynamic field we'll drop that into there you see it pulls the name in which is perfectly fine we'll just set that to be something like h3 so it picks up a little bit more styling maybe h4 in this example okay so next up we want to pull in some more dynamic data and you're going to find this is kind of just a repetitive kind of thing we're just going to pull in all the relevant key data so for this example we want to find out the position they're actually undertaking so make the data to change this now we're going to find the information for the agent and we're going to do is we're going to just put in the agent position you see brittany's a client manager so what i'm going to do is i'm just going to simply drag in the relevant information and then we're going to move on to the styling side of things i don't want to bore you with just going through the same routine that i've done before which is aligning things left and right pulling the data in and so on so let me just do that off camera and then we can move on from here before i do go ahead and just start everything else i want to show you one more thing to do with glossaries which is incredibly useful so what we're going to do is we're going to just do a search for our dynamic fields i'm going to drop that into the right hand section making sure that it goes at the right place if it doesn't which it hasn't i'm going to quickly adjust that through my navigator okay so this section we're going to change this over to metadata and we want this to sort of reference information from our services area which is a glossary so we're going to select the relevant field which is going to be the service areas and you see we get that error message like we saw before however if we come down to the callback option enable the filter field output open this up now you can't see this unfortunately because it is literally right at the bottom of my screen but the very very final item inside there says get labels from glossary data we're going to select that that continues to give us a different error this time because we need to tell it what glossary we actually want to reference so you can see we get this new entry we're going to just choose the option for agent service areas and you can see that now pulls the relevant data in for us so now what you can do is you can easily go ahead and set a delimiter you want inside there so you want to separate things by commas or slashes whatever you kind of want to do you can do that we can also use the areas the customize field output and we'll just put areas covered and you see that now pulls in our list in a nice clean and simple fashion and again you can apply any styling you want inside you so i just wanted to sort of show you that because i kind of think this is an important thing if you're not used to working with glossaries as part of the new feature in jet engine okay so let me just show you what i'm doing here just so you can kind of see what i've done with this and how i've laid things out because i'm sure i'll probably get questions on this so what we're going to do is we're simply going to duplicate this so all the first one is is simply a heading so i'm going to duplicate that and reposition it so it's sitting there i just applied some negative margin to this to make sure everything sits a little closer and that's pretty basically it the next thing i've done is apply a dynamic field so we've already seen how to do this how to duplicate that and reposition that and all i've done with that is the same thing again when it comes to the negative margin and i've also for the mobile and the mobile number there the two different fields we've just seen i've also used the option for widget stalker and set those to 50 so what i need to do now is change the content of these for example to email and the second one for the dynamic data that's going to be just the email option inside there and that's it it is literally just repeating the same thing with some negative margins some dividers and so on to give us this kind of listing layout i'm sure there's lots of other ways you could do it but this is a nice simple clean flexible way of doing it referencing the dynamic data so the final thing we need to do is add in an option for viewing all of the listings for this particular agent so to do that we're going to drop in a dynamic link let's just search for that we're going to do a search for dynamic and again this is another one of those widgets to do with jet engine we're going to drop that where we want it now you'll probably find that when you start messing about with these they don't always go where you want and like i said this is where the navigator comes in super handy let's just make a little bit of space for this particular widget so we're just going to come into our advanced we're going to add a little bit of margin on this at the top maybe let's try 10. that'll do that looks pretty good hop over to our style option and we're going to align this to the right hand side actually under content set this to the right hand side there we go and just change this to be the right kind of thing so permalink is perfectly fine because i've got a link through to the permalink for the single post that will be the single post template for our agents hope that makes sense and then we're just going to say view listing there we go so what this is going to do is this will take us over to the detail page about this individual agent and the view listings is just simply going to give us a list of all the properties that agent actually has listed under them so let me just show you what i'm talking about this is the sort of finished result there's our view listings so we're looking at brittany watkins we click to go and take a look there's the bio for brittany all the details include the reviews and if you scroll down this will have all of the properties currently listed under that particular agent and that's all that link is going to do when we create the single post template for our agent so let's just save our listing in my case it's updates i've already saved as i've gone through but there's our listing completed any other style you want to do you could do that here right now okay so that's the listing side of things done as with our properties listing we need to build an archive template for our sales agents so let's do that right now so we're back in our theme builder and we're going to create our new archive so we're just going to select archive as the option and we're just going to create a new one so we'll add new this is going to be default agent archive create our template and as we've done before we'll just ignore all the default options that elementor gives us and we're going to create this from scratch so like before we're going to create a really simple layout two columns add a little bit of space above and below i'm going to drop a heading in to the left and the right hand column so i'm going to drag a heading inside there and we're going to do set this to be agents and we'll set that to be something like h4 we'll duplicate that and we'll just put that on the right hand side and we'll just say filter agents so we can apply a filter inside there if we want to okay so next thing i'm going to do is just find our listing so we're going to search for listing there's our listing grade we're going to drag that underneath our agents drop that inside there now we just need to select things so we're going to do a search for agent there's our agent listing we're going to set this now to be just one column and you see that's brought in our listings as we'd expect and now if we want to we can assign any other items inside you we can set up what data if we want to sort of set published and so on the number of posts those kinds of things entirely up to you we'll do lazy load we'll also do load more and we'll just say infinite scroll and that should be pretty much the entire thing so we can publish that now we'll add a condition and we don't want again to have this for all archives we only want this specific to our agent archives we're going to scroll through until we find agent archive there it is we'll select that option and we'll say save and close and that's our agents so the next thing we need to do is just quickly add this to our menu structure like we did before it's going to come over to appearance into menus and like i've showed you before if you're unsure what the actual code you're going to use for this is head over to jet engine into your post types there's your post type slug which is just agents we'll copy that from there again like i say so we don't make any mistakes hop back in and that we did before with the all properties we're going to create a custom link we're going to do a forward slash drop in agent and another forward slash and then we're just going to say view agents and that's our menu there we go we'll just save our menu and now let's just take a look just to check everything's working so this is our test site we'll refresh this there's our view agents item and click on there and that takes us through and there's our agents so we've done that section now we can move on while our sales agent single template is next and shares some common features with the likes of our single property template it has some more advanced relationship features that i'll dig into and explain in this section okay so let's create our template now so we're going to go to single post and we're going to create a new template so this is going to be default agent single create our template and once we've done that we're going to just bypass any of the pre-designed layouts as always get rid of that completely and we're going to start something completely fresh now to make my life a little bit easier the layout for this is basically going to be predominantly the same as what we just created for the agent listing so i've already copied that so i'm going to simply paste that design inside you and that just speeds up the process so we're going to do now is i'm going to add a bit of space above and below this so we'll put 50 above and below so there's the basic info now i can get rid of this view listing because that's not relevant in this example we're going to delete that from there but this just makes this part of it just a little bit quicker and easier and while i'm at it i also realized i missed out the little divider so i'm going to duplicate that i'm going to drop the divider at the end of that design there we go so that's the first part the next thing i'm going to do now is add some more information in to do with this particular agent so we've got the bio and things like that and we'll come back a little later and also include reviews so what you can do now is you can go ahead and start adding in any more information you want so we can just do a search for dynamic and we'll just drag a dynamic field inside there again like i said we get a little bit of a quirky thing going on so let's just drop that wherever that's good and we're going to just change this over now to search for the agent inside there and say post content as you can see it's kind of pulled in the wrong data that's because we just haven't told this template what we want to use to output the data on here so we're going to come down into the bottom left-hand corner in the settings like before into our preview settings and make sure this is set up to look at agent this time and we'll just do a search for britney there's british details apply and we should then find that will update and refresh the page and pull in all our relevant data including now our bio so let's just refresh that from where we just copied things over earlier on so that's that side of things done we're going to select this option and we're just going to come in to customize the output and we're just going to put in the shortcode the html code for strong we're going to put bio inside there and we're going to close that out with strong again just so it gives us a nice bit of styling so now we get the bio for this particular person and that's looking pretty cool okay so we'll worry about the reviews a little later but the next thing i want to do is something that is a little bit more advanced and that's where we need to link this particular agent to their properties so this is where that relationship we set up earlier on actually comes into play because obviously we've associated certain properties with different agents so britney has her collection of properties and then an example samuel has his selection of properties so i'm going to show you how we do that next so let's just add a new section in underneath and this is going to be where we'll see all those properties so we're going to select this we're just going to make sure that everything looks the way we want it to and we're going to grab a listing so we're going to go to our widgets we're going to search for listing and drag and drop that inside there and we're going to do is we're going to reference our property so we're going to do property listings because this is the kind of design that we set up originally if you remember so that's now put in the properties but this is putting all the properties in so we don't know who they're related to or anything else so that's not going to work for us so we need to do is set up some kind of filter that specifies only the properties linked to the particular agent we're currently looking at are visible so how do we do that what we need to do is come into some of our options where we can go ahead and we can just set up a post query we're going to use one of the macros that jet engine has now there's a lot of macros and they can be kind of complicated but i just want to show you exactly how this works i'll show you where you can get more information about those when you're ready to sort of go a little bit deeper into what you can do okay so let's expand this out a little bit just so we've got a bit more real estate to work with when it comes to creating this query let's add a new item in what we're going to do is select the type of parameter the type of query we want to work with for this example is post and author parameters because we want to deal with posts that are associated with a particular agent so we're going to select that option and then you get all these different things which can look kind of daunting but we don't really need to deal with most of these we only realistically need to put one value inside you and that's where we put in this include posts by ids now if i hop over and show you the macros this is going to give you a load of information and you can see the macros are all made up with a very similar style you've got the little percentage mark that opens and closes the macro you have the first part of the macro in this example the related children form then you have a pipe sign so you may not be able to see this very well on the screen right now and then you have what you wanted to do so you can see this is saying related children from post type slug so there's the first part so we're going to do is we're going to copy that from there because this is the one we want to use we're going to hop back over into our setup we're going to simply paste that into there now you can see that gives us no data found because well it doesn't really know where to look for them because what you find is this post type slug if we come back over here the second part of this macro is a kind of placeholder we've got to replace that with where we're looking for this information so if you remember when we set the relationship up the agent was the parent and the properties with the children so what we need to do now is tell it the custom post type we want to reference so we come back into our jet engine there's the post type slugs for both of our custom post types so property is the child so we're going to just select that copy it come back over and where it says post type slug we're going to get rid of that making sure we don't delete the pipe or the percentage mark and we're simply going to paste in properties and now you can see that pulls up the properties that are related to this specific agent hope that makes sense this can be kind of confusing but hopefully what you can see is once you kind of get an understanding of the parent and child relationship and also how you use this macro to reference the relevant properties in this example or the children child whatever you want to call it hopefully that'll make a bit of sense i would recommend taking your time to read through this macros guide to get an understanding of it and then test it out a couple of times just to get your head around it if you want a dedicated video on how to do all of this there's a link in the description below that will take you through where i've dedicated an entire tutorial just to work in with these okay so with that being said we've now created that setup we can now publish this we just need to set up where we want this to actually be referenced to so again we're going to add a condition in change this over we're going to come down and we want to choose agent and we're going to set this to all in other words this template will be used for the agents and every single agent so we'll save and close that and i'm going to quickly just apply some more styling to this just to tidy things up a little bit but then we're going to test this out i'm going to show you exactly how all of this works okay so let's just take a quick look now we're back onto our agents listing page and let's take a look at brittany's listing so we'll open that up there's the bio all the contact details etc we scroll down there's britney's currently listed properties and if we come back out of this we're going to take a look at samuels we'll find that samuel has different properties associated with him and you can see there's all his properties and if we click to go and take a look we'll then jump through to our custom template we created earlier all linked up for us so you can see things are starting to fall into place now and we've covered a heck of a lot of different bases like i say when you're dealing with relationships that's one of the key things that people do stumble upon so hopefully this is just giving you an idea of how you can start to use these inside your projects to get a little bit more complex to linking things through to each other it's time to continue digging into how to use relationships by building and linking our agent property sales contact form let's take a look at how to do that now so next up on our list is this contact section over on the right hand side that's going to be based upon the agent for any given property so there has to be some dynamic values included in this for the email address and so on so to do that we're going to be using another list in this part of jet engine so we're going to come back into our jet engine setup come to jet engine and choose listings and from there we're going to create a new listing so let's just add new posts in we're going to come in and choose agent from there set listing type and this is going to be agent quick contact i'm going to say create listing item okay so once we've done that we're then going to start referencing the relevant data and start building this format so like we did before we're working with listings we're going to come to our settings in the bottom section come to our listing settings and what we're going to do is we're going to set this to have a width of 350 pixels just to give us a good starting point now it's also worth being in mind do not make the listing item clickable if you do you're going to cause yourself a few problems so don't do that because this is going to mean the form won't work because this entire listing becomes a clickable object that would take us through to the permalink we don't want that to happen but we can however set the image of the particular agent to go through and take a look at their listing items and make that clickable don't fall into the trap of making the wrong item clickable okay so with that being said we can now start pulling in the relevant data first thing you want to do is just come in and do dynamic and we want a dynamic image we'll drop that inside there post thumbnail is perfectly fine you can see that now pulls the image of britney in which is good and we're going to set that to be centered next up we're just going to simply grab the name of the agent and the telephone number so if you wanted to contact them quickly you could do just that so like we've done before just simple dynamic data fields drop that underneath there and we're going to do is we're going to just choose the information to be metadata well actually not to like this one it's going to be posted with the title which is their name we're simply going to come over to the advanced options down to our widget stalker enable that and set that to be unit and 50 just so we can align things up nice and neat and tidy so let's just duplicate that and we're going to change this then to metadata i'm going to change this to the agent's phone number and there's the telephone what we're going to do is going to come down to customize the field output i'm simply going to put in tell colon there we go and finally we'll just align that to the right hand side so everything lines up nice and neat so there we go there's the first part things we can adjust paddings and spacing and so on but like before i'll do that off camera so you don't have to watch it okay so the next thing you want to do is grab the normal form element that's part of elementor so let's just grab that there's our forms there we go let's drop that underneath there there's our form now we can just change a few parameters on here name email we also want to add phone ins let's just duplicate this and just change the details this is going to be a telephone number set that on there change this to phone change the placeholder to phone and hop over to advanced and we're going to set this to be phone as well there we go and message is perfectly fine we're going to add one more item underneath which is going to be a select field and this allows us to just choose what kind of information we are actually requesting so first of all let's just set everything up inside here so let's just put in the name for this or the label for this is inquiry type and all you need to do if you've never used a typical select field inside the former jet engine in elemental you simply just separate each element by putting on its own line so now we've set everything up inside there that's what we want now we can do a couple of other things before we move on we need to grab the agent's email address and currently we don't have that so how do we do it well we can use hidden fields and this is one of the beauties of working with forms we can add a new item we're going to set this to be hidden and from there we can say right label well it doesn't really matter what label we print we'll just put agent email in just so that'll pass through onto the form and if we hop over to advanced we can set a few things up inside here so the default value is currently empty but we can use dynamic tags so let's just click on that i'm going to do is we're going to find the relevant information so we're going to scroll through until we find jet engine we're going to choose a custom field and then we're going to select the custom field and we're going to go up to the agent information and find the email so that will now be stored as a value inside the form even though we can't see it it'll be stored gonna give it an agent underscore email as an id just so it passes over we want to use it and we'll just reposition that out of the way so that's really all there is to the first part of this the third and final thing we're going to do is add another item in and this is going to be an acceptance item so this means that they've got to confirm that they're happy with us having that information and thinking through terms of use page and that kind of thing up to you how you'd want to set this up but it's quite easy we're going to choose the option for acceptance the label is just going to be in this example acceptance even though we won't see the labels it is required we want to make sure that they absolutely confirm they're happy with it and then we can put the acceptance text there and i'll just drop that in there with a little href that'll link through to what would be my privacy policy and like i say this is something that all they see is like you can see this little check box so that's everything we need in place now we can set things up so we don't want the labels to display inside here that's cool buttons is perfectly fine we're going to change that and we're going to save this to be send message there we go so that will send the message actions after submit well we want this to go to email and we'll leave those values as they are in there so we'll say the email and you can see we can choose where this email goes to those kinds of things so we want this to go through to the agent's email address not a standard email address because obviously each individual property listing will have a different agent associated with it so you want the form to be sent through to the right agent so how do we do that well this is where we go back to our form fields and this is why we put that agent email as a hidden field because now we can use that in our form so let's go to advanced let's just grab the short code for this it's our short code for that specific field we're going to copy that from there we're going to come back down to our email and we're going to do is we're going to just delete that default email and we're going to simply paste in the email address which is going to be that hidden id field that has the agent's email details inside it i hope that makes sense and again i've got a dedicated tutorial to show you exactly how to do all this kind of thing i'll link to that in the description as well okay so we want to change the subject to send this a bit more in keeping so when the agent gets the email it makes a bit of sense to them so we'll just put that inside there and now we can just make sure everything else is configured as we want to so the from email well we can set that to whatever you kind of want you could have a default email address that comes from the actual website itself that's fine uh from name we're just gonna say my real estate site okay so the reply to we're going to just change that to email field because obviously you want to reply to the person that sent the email not to any other random email address and this is where we're going to use the metadata information underneath we're going to remove the things like the credit and the remote ip we don't want that or the user agent but we are going to leave the page url inside there because this then will pass over the link to the page for this specific property so then when the email goes through to the agent they can just simply click on that go straight to see which property has been talked about and have access to everything they want inside there so that's that side of things so all that's left to do now is just quickly go ahead and style everything inside here and i'll do that and then we'll see how we can insert this into our template and then we'll double check that everything is working and test things out okay so let's just simply go back into our templates now and we're going to open the single property template up and edit that with elementor and we can now drop in that listing so once that's loaded in we're going to come over to this right hand column select inside there do a search for our listing drag and drop that over onto the right hand side select the listing we want which is going to be agent quick contact and that will pull things up inside this we're going to set this to display one item and one item so that will put that information in there but how do we know if it's the right person that's been associated with things well this is where we start to use those macros again so let's take a look we'll make sure that the listing is selected and then on the left hand side we're going to come down to our post query like we did before let's just expand this out a little bit so we can see a bit better what we're doing we're going to do is we're going to grab another option so this time we're going to choose again post and author parameters and we're going to be using a different macro this time so let me just drop the macro inside there and then we're gonna explain things so related parents from an agent so let's hop back over to our guide so there's our second macro our related parents from post-type slug so like we saw in the first one which was the related children from in other words the children in that example was going to be the properties associated with the agent this time we're doing the reverse we're saying what's the parent that's associated with this specific property and as you can see we've got the post type slug which is the same as we saw above and that's what needs to be replaced and in this example it's going to be agent because that's the parent so that's exactly what we've done here related parents from agent that's it that's all we need to do so once we've done that we've applied the macro to this we can simply update our page and then we can go and test this out to make sure it's showing the correct agent for these particular properties so we're back on our property listing you can see there's all our properties so let's take a look at the first manner view and you can see that's one of brittany's properties so we come back out of there and we'll try a different property this time we'll say the miami views and you can see that's one of samuels come back out we'll come down and take a look at the second mana view which again is another one of samuel's so now we can see that this is pulling in the correct data next thing i want to do is just make sure that our contact form is working and sending through the relevant email to the correct end user agent okay so next up let's just test the email system out to make sure that everything is working there so we'll just do this and we'll just put in some fake details my phone number a message and we'll say i'm a buyer looking for that we'll send our message and the form has been sent successfully now obviously with any kind of form you set up when it comes to elementor you could send this to a different page if you wanted to lots of different ways in which you can handle the end result but that's that side of things then as you can hear the email has just come in so let's just take a little look now at exactly what we see on that email okay so there's the email that's come in and you see all my details are on there including the url directly to the page everything is included now there's lots more you could do with this kind of setup this is just really scratchy the surface but it's a nice quick and easy way of having that immediate contact for someone that's interested in a property or a product or whatever it is you're kind of building your site on so pretty cool to see now things are shaping up nicely so let's put our creativity to good use by designing and building our page so let's add a new page in and we're just going to name this home page and we'll just publish this and then we'll edit this with elementor now there's still a couple of things we need to flesh out we need to build out the filter system we need to build the search system so we're going to put the kind of placeholder data into place right now and then we'll take a look at adding those extra features building those and adding them to the relevant templates and pages so first of all let's get rid of this annoying home page at the top let's just come into our settings and hide the title on there so that's that side of things done we're going to add in a single row column section and this is kind of going to be our hero section for our site so we're going to select that and we're going to set this to be well we'll come in and we'll set a height and we'll set a minimum height and let's go for something like 600. obviously you can get creative and do what you want with this kind of thing next up we're going to put a background image in there to give us a nice sense of focus so we're going to jump over to style come into background and we're going to select a nice background image let's find something that i think looks pretty cool let's just say i like the look of this one we'll insert that into there we'll set this to be center center we're going to set this to have no repeat and we're going to set it to cover okay so that looks pretty good next thing you want to do is just drop a background overlay on there to make it a little less in your face and we'll have some space then to give some separation to the search and any kind of text we want to place on there so background we're going to set this to black and what we're going to do is just tweak this a little bit there we go somewhere around there that's our blue black i believe so that's that side of things done next up we want to put in just a title so we're going to just drop a heading inside there set that to be centered set to be h1 we're going to do is just put a nice kind of call to action an aspirational quote of find your dream home and then we can just set the styling on this so color we want this to be white so it stands out from there come into our typography and we're just going to bump the size of this up until we get somewhere around about the 60 pixel mark set this to about actually let's go for something quite slim like that and we'll set this to be uppercase okay so there's your aspirational quote underneath that is going to be where our search is and then underneath there is going to be our filter setup but for now we're going to leave those as they are and let's just add the next section in which is going to be the section for our actual property listings so again like we did before let's just drop a heading inside there make some space on this we'll set 50 above and below we'll set this to be centered so we'll just select our text and we're going to do is we're just going to tell people exactly what they can do which is discover our latest properties we'll center that inside there font size everything looks perfectly fine on there that looks pretty good we won't worry too much about that and then we'll put a sort of subsection underneath the drop that underneath set that to be something like h5 and we'll just put some lower mid some text and send to that finally let's just move that up a little bit and we'll just say maybe -10 that looks pretty good like look at that okay so next thing you want to do is drop in our list in and this is just going to kind of display a range of our most recent properties but you could set this up to list anything you want you could have featured properties with a checkbox and then filter based upon that so many different things you can do okay so let's just do a search now for a listing we'll drag and drop our listing underneath and we'll select our listing so we'll just call this property there's our property listing and three columns is like we did before what we're going to do is just select this section come back up set this to be 1200 wide and we'll grab our second section and do the same on there just to give us a little bit more real estate as it were pardon the pun okay so there's our properties inside there everything's looking the way we want and if you want to set up like any parameters things like lazy loading the number of properties and so on you can do all of that inside here i'm going to leave this set to be just showing six properties though that's perfectly fine and dandy for this example obviously you get a lot more creative with this but that is the basics of our home page done so let's just update this page we're going to do then is we're going to hop over into the settings for our entire site and set this as our home page so we're going to come down into the settings section into reading and from there we're going to say a static page is our home page and choose home page and save those changes now we can just take a look at this on our test site there we go looking pretty cool everything is set up there's our images there's our properties we can click and go through the property so everything is kind of falling into place now we've got all the property listings set up the agent properties the listings for the agents and so on now it's time to get the key component of any listing website the ability to search and filter the data we've added we'll start with an ajax search function and then we'll move on to building several different types of filters now before we get started and start setting up our searches and filters let's just quickly go and take a look at the settings for our smart filters so inside here we can do a couple of different things we can choose the index the settings the general settings and so on now you can see by default under general settings you've got all of these different options on the different kinds of searches and filters and all those kinds of things most of which in this example we're simply not using it doesn't matter whether you enable or disable these from a performance point of view really it's more to do with an ease of use when you're designing and setting things up so we're going to disable everything that's not relevant to us we're not dealing with products we're not dealing with woocommerce we leave the elementor options we're going to get rid of the calendar we'll build it and that final rule builder that just means that we've only got three kind of sources which just makes things a little bit easier indexer settings if you come in there you can use indexed filters if you want to i've already covered this i believe in a different tutorial so i'm not going to go over too much over that and if you're using the url structure you can set that up to be plain or permalink and this is just how your url structure is actually going to be displayed now unless you are using the sort of option to click a button and have the normal filter you're not using the ajax option this won't really do anything because when you're using ajax nothing shows up by the url but if you want to use the normal sort of clicker button and you want to have the ability to share that permalink then the permanent option is going to give you a better kind of way of laying things out a little bit neater and tidier just wanted to sort of show you those things so with that out of the way let's just jump over into our smart filters and let's take a look at setting up our first one which is our property search says add new we're going to give this the name of property search so it makes some sense to us and we're going to give it a label of property search and an active filter label of property search these are just kind of referenced in various different places next up you've got your filter settings in other words what kind of filter is this going to be and just smart filters and jet search kind of treat everything as a filter whether it's a search or a filter so once you understand that it'll stop any confusion if you're looking for the search options so filter type we're going to select from there and we're going to just come down and choose search the placeholder search is fine or you could say search properties just to make it a little bit more obvious exactly what they're going to be doing so search properties and then you can choose search by and you can see we can have a default wordpress search or by custom field query variable but we're going to leave this to be a default wordpress search for this example and we're going to hit publish that's our search filter basically set up so now what we can do is we can go back to our home page so to combine our pages open our home page edit this with elementor and then we can drop our search icon inside there to make things look a little bit cooler so let's just do a search for search on that pan again and what we want is the ajax search so we're going to grab that option i'm going to drag that underneath our heading section and that's going to put our ajax search in so now we can go ahead and set things up the way that we want so we can configure this style it do all those kinds of things so we're going to do is we're going to say we want responsive from mobile or responsive form on mobile that's that side of things then we can come into our search query if you want to and you can choose what sources you want so inside here we're going to set this up to be only for property we don't want it to search anything else you can set terms and things like that if you want to search in custom fields you can add extra custom fields inside you so combo separated custom field keys list so you could do things like your price and so on so you say price uh let's have a little look let's hop over into jet engine and see what other fields we can reference you can search for things like bedrooms bathrooms garage those kinds of things but for this example we're going to keep this fairly simple so we'll just say price bedrooms for example you know those kinds of things so it allows you to filter through a range of different things but we're going to use the filters because that's going to be more where we're going to go through and set things up to do what we want we can filter things down the search is kind of more cursory and not something i'm going to worry too much about however you can see we've got a ton of different options we can configure so you've got things like your results area you can configure this the thumbnail placeholder show product price show product rating all these kinds of things so i would say really get stuck in and have a play about with those to see exactly how everything works i showed better after you can specify where it's going to be and so on i'm not going to worry about those sides of things i am going to quickly just go ahead and style this and then we're going to move on to creating the more fun thing which is the filters okay so there's all the styling and everything set up now if you'd like to see a more detailed thorough tutorial on how to use the search function jet search let me know in the comment section below and i'll create something specific that if enough people are interested like i say there are so many options inside you that it would take an entire tutorial for me to go through everything and show you so i just kind of covered the real basics just so you can at least get a search up and running in this particular example so let's say let me know in the comments if you were interested in something like that okay so let's just quickly test our new search out so let's just do a search for new york for example and there's our property and you can see this shows us the thumbnail of the property the name of it and a little brief synopsis of the content but we included things like bedroom and we included things like price and so on so how would we go about actually just getting that to display well let me just hop back over into our search section make sure it's selected and underneath the content section we'll come into the custom fields area and we can show meta data before or after the title or meta before after the content up to you how you want to deliver it we're going to choose this option i'm going to say well we say before after doesn't really matter we'll go for that so then you can just drop in the items you want to reference so let's just expand this out so the key is basically what we've got inside jet engine and our custom post type so things like our price address and so on so for this example we'll just put price in there which is what we want then we're going to put price in for the label and then we can use the value format and we can just put the price or pound sign inside there we could then add another item if we wanted to and this time we'll just say bedrooms and we'll put the label of bedrooms and believe it is that to be honest and you can keep on adding if you want to and we'll update this now we'll hop back over to our test page and refresh this and we'll do another search now for that new york property and you can see there's new york heights the price fifty thousand bedrooms four so you can see we can add this data inside there if you want this to be in line so you can see the price and the 50 000 or 500 000 is not quite we want to be you can simply come in here take out the label side of things and we could just drop price inside here and we'll just update this and that then should put all that on the same line so it's just refresh do a search for new and you see there's our price 50 000 and so on so that's how you can add in the metadata to get feature rich ajax results for your searches so that's pretty cool to see now let's move on to those filters okay so the filter set that i'm sure most people are interested in finding out is what's called a hierarchical or dependent filter set in other words if we come back over to our test site which i've finished the original one just to show you the demo site if we take a look our property type and property location these are kind of dependent upon each other so once i choose property type and say for example house then the value in the next one the property location will change so you can see this is showing cardiff if we choose apartment this will show dublin and london so this is the first kind of filter that we're going to look at creating so let's just add a new filter and we're just going to call this property hierarchy just because it kind of makes sense to me but you can call it whatever you kind of want and we're just going to call this for the labels and so on hierarchy for each doesn't matter we're not going to show those anyway the filter type in this example is going to be a select option is it hierarchical yes it is so this just basically says these are going to be related to each other and then we're going to put the filter hierarchy in so this is going to be where we start off in this example property type then the second one is probably location and if you want to add a third item in a fourth item you can do as long as that hierarchy makes sense so what we're going to do first of all is add a new level in and this one is going to first of all be our property type so we're going to add a label of property type we'll put the placeholder in and we're going to put in any just for the placeholder and then the taxonomy we're going to grab that from and this is the thing these are all coming from taxonomies so we're going to just open that up and we're going to come down and say property type add another level and this one's going to be the property location so this is the second level of our dependent options any is going to be the placeholder again and we're going to do it this time is change the taxonomy and this time it's going to be property location that's it that's all we need to do if you want to add a third level you just use another taxonomy and add that into the next level and so on and so forth so that's that side of things completed we can publish that filter and before we go ahead and insert this into the design let's create the other couple of filters we're going to be using just to kind of flesh out what we have here which is the property price the number of bedrooms the square foot and so on and you could stack these up for a number of garages all those kinds of things but let's keep it simple straight forward and learn the techniques and then you can expand this as when you're ready okay so let's add a new filter and this one is going to be our property price so as before let's just give this a name filter label and filter active filter are going to be the same property price what kind of filter type is this well if we look at our example it's a slider option so what we're going to do is we're going to just choose a range which allows us to set a range of values you can set your value prefix because we're dealing with money here we're going to put the pound sign in front of that but if you want to you can do you know suffixes and prefixes and all those kinds of things we're going to put the thousand separator which is going to be the comma in this example decimal places irrelevant number of decimals we're going to make sure that's set to zero our minimum value we're going to set to something like i don't know 250 000 i don't know maximum value we're going to set to something like 2 million and then you can set your steps so you can set this up we're going to set this in like 5 000 pound increments so that's that side of things done the next thing we need to do is choose the query variable now if you're unsure what your query variable is we're set in a range slider for the property price so if we hop over into our post types price we open that up there's the name id for that particular field that we're going to use to filter against so we'll copy that head back over and just simply paste that inside there and that's the golden rule with this you're saying what kind of filter it is even though you're putting the data in manually in this example for the range from the 250 000 to 2 million you're still filtering against data that's inside your database from a custom field value custom field name in this example is price so that's all you're really doing in there with the query variable so without saying things done we'll publish that option and now we're going to add in another smart filter so we're going to add a new one in this time we're going to add in the option for the bedrooms so same as before we're going to give this a name filter label active this one again is going to be a range so no different there value prefixes we don't need to worry about anything like that or a thousand separators and so on minimum value because obviously every property is going to have at least one bedroom unless it's commercial point we're not actually covering that in this tutorial and a maximum value well we're going to say there's no more than 10 bedrooms and a step of one that's perfectly fine so a query variable again if we hop back over into our post types take a look there's our bedrooms there's our name stroke id we'll copy that from there head back over paste that into our query variable that's that side of things done publish that one i'm going to do one more so let's just add one more filtering so let's just add new and this time we're going to do square foot for the amount of area inside these properties so same again name filter label active blah blah blah you should be using it by now i'm going to come to range again so i'm going to put in the suffix is going to be square foot and what we're going to do then is we're going to say minimum value of 0 well actually that makes no sense minimum value of 1 000 and a maximum value in this example of 20 000 i'm sure you can get bigger and we'll set the step value of a hundred and finally we just want the query variable so we'll just hop back over find the square foot option for the size of the property open that up grab that name id or back in there drop that into our query variable and hit publish and that's all of our filters set up so if we take a look now we've got five different filters including our search so let's take a look now at how we actually go and put that into our setup and then we can copy and paste that into the various different pages that need to reference this particular filter set so we'll start off working on our home page doesn't really matter where you start it's not particularly relevant so don't worry too much about that okay so we need to do is just open up our navigator a second and we're going to add a new section in so let's just add a new section one column one row and we're going to simply drag that into position so that needs to go around above there there we go there's our setup so we need to do now is go ahead and start putting in the relevant pieces of filtering information so let's go ahead and do our hierarchical search so this is a select so we're going to do a search for select we'll drag and drop that into there and now we can choose what select filter we want so we're going to start typing in hierarchy and there we go property hierarchy we'll select that option and you can see that now inserts it into there for us so now we can go ahead and configure this how we want so the first thing is select this filter for expand that and you can see now our list which i showed you in the settings of jet smart filters and jet search is a lot shorter and a lot smaller so we know this is going to be using jet engine information so we'll select that leave it set as ajax value change is fine so this will update whenever you change your value so it's just dynamically updating the info on screen no buttons need to be clicked show filter label we're going to say yes we want to put that inside there because then it makes a little bit more sense to the end user so with that being done we can now go ahead and configure things so let's just hop over to our style setup we're going to set things inside here so positions we're going to set the select width to be 400 pixels that's perfectly fine we can go through and select all the different parameters inside here so you can figure configure this however you want to labels for example let's just make those a little bit dark actually let's leave those for a moment because we're going to style the entire thing first of all anyway so let's just hop into the group filters option and in there we're going to set this to be in a line and you can see that now sets those out to be in a line i'm going to set these to be 300 pixels let's just adjust that again so there we go so we're just basically setting these on screen there we go but 410 will do us perfectly fine and then we can adjust things like the horizontal space those kinds of cool things in vertical space so that's that side of things all done so before we move on to adding the extra filters in let's just make this look a little bit neater and tighter so let's select the entire section we're going to come up to advanced and we're going to just add in like 50 pixels of margin that padding sorry let's set a background color on there just to make it look a little bit cooler so we'll set the background color and we'll go for something like let's go for our blue black that's cool i like that we're going to put a border around this and we're going to save on a solid border i'm going to set our border to be white no border radius or anything that looks pretty cool and let's just close this down a little bit so we can see what we're working with and now we're going to push that up so it kind of sits over our header section so let's just do that by using some negative margins we'll set this let's try about negative 150 probably a little bit too much let's say 120 because we're going to put some extra filters under here anyway so now we can just go ahead and quickly adjust this so our labels for example they need to be white so let's just change that color on there to be white just the typography to make these just a little bit heavier i'm going to adjust the line height to give us a bit of breathing space there we go that looks pretty cool that's good okay so next up let's drop in the next filters we want to apply so let's just come back over the next type of filter is going to be a range filter so we're going to just do a search for range and you can see there's our range filter we'll drag and drop that underneath what we're going to do now is just choose what filter we want so we're going to just do a search for price there you go there's our property price select filter for jet engine because that's where the data is coming from show filter label so people know what the heck they're actually looking at and then we can go through and start styling things so again like we did before we can just simply come in and set up all our styling for the various different things so point side everything looks particularly good on there we're gonna come into for example our values we need to set those to be white so people can see them here's our values and it's also make those just a little bit heavier save a 400 let's just go for 500. there we go we'll set those to be able to the left hand side i'm going to go to our label and the same kind of thing there so we're going to set this to be white and adjust the font on there to be 500 and we'll adjust the line height to give us a bit of breathing space around there that looks pretty good okay so the next thing we want to do is just drop into advanced and we're going to use our widget stalker again and we're going to set this to be using units and 33 so we can now stack three of these next to each other very very quickly and easily so i'm going to do that i'm going to add in the next two using exactly the same principle that i've just shown you on this and then we can test everything out there we go everything is now in place and i could see that i need to probably push this up just a little bit more so let's just select this section let's come back into our navigation so let's just open up the navigator and select our section there we go let's just make this about 140 let's try that is that going to work that looks pretty good let's go with that so we'll update that so we've now created our filter set on our home page so let's just test this out to make sure everything is working as we'd expect okay so we're on our test site there's our filter and everything all in place as you can see there's all our six properties obviously we've only got six to test out so let's just say we want to test things out like with for example the property type we're gonna say we're interested in apartments and you see that now filters it down to two different apartments we take a look at the property location they're only available in new york let's try something like house for example we see that we've got two houses and if we just open the property available you'll see that we've got los angeles and miami so we choose los angeles you can see that filters it down to just that property however we come back to any we have those two properties so now we could say we're in any properties that are sub 1 million so we can just drop that down to say from there as you can see now we're just getting the one million pound house we can click and go and take a look at that one and everything else as we've said that previously is all in place so you can see we've got the filter set up we can fine tune and tweak this add extra options in there if we want to but now we want to have that in all the different locations so we go to all properties for example we need to have that filter inside there so let's just go back over here we're going to just open up our navigator we're going to choose our section we're going to copy that so now we can come out of this and head back over into our templates and we can just use that inside our templates come back in our theme builder and we're going to come into our property archive which is there we go where's he going property archive let's edit that with elemental once we're inside there we can just simply drop in that filter so we'll just say we'll paste that inside there let's just come to the bottom paste that there's our filter we can now just position that where we want that's our filter in place we'll just update that and we'll just pop over to our test site refresh that template and there's our filters all set up so again we can just filter this out so this is all our properties we can say we're interested in loft apartments and you see there's our loft apartment so pretty cool everything is all working the way we want it to so that's how we set up our filters how we can apply them to the various different parts of our site and how we can make a really powerful filter and search setup throughout our entire site for all the data that we're added in custom and otherwise now we all want to know if a sales agent is good and having the ability to check out reviews is a great way to implement just that so let's see how we can use jet reviews to do that right now so the last thing on our list to do is to add the reviews in for the agent so people can see how good they are and apply feedback if they want to to do that we're going to be using jet reviews so we're going to come into jet reviews and we're going to say we want to add in a new review type so let's go to review types we're going to add new and from there we're just going to call this agent reviews and add a field in and this field is just basically going to be the review field so we're just going to open this up we're going to put in the rating and that's basically it you can set the kind of rating steps you want so i'm going to do one to 100 i'm going to do one to five so they can have a one to five star rating and we're going to say add type and that's really really simple setup well that's all we really need for this example so that's our review type configured we now need to go and just add that into first of all allow them to be added and also to allow them to actually be viewed before we can do that we need to actually say where this review is going to be associated in other words we want it to only apply to the agents and then also who can actually leave reviews so for example we're going to come into the option for settings and under settings we're going to come into the post types and you can see we've got posts pages landing pages and our custom post house which is agent and property we're only interested in agent everything else is turned off anyway so we're going to come into agent and we're going to say use the review for this post type so we want that to happen which review type do you want to use we've just created that review we'll open that up and there's our agent reviews allowed roles who can actually leave a review so we've got this setup for administrators and so on but we're going to set this to also be allowed for guests obviously you'd put more k into how you'd set this up and who can leave sort of reviews and things like that but i just want to show you how easy it is to use this but you can also still put in verification and authentication before any reviews are posted so you avoid any junk and spam okay so review author verification just choose guest user on this that means that any guest has to be sort of confirmed first comment author verifications in other words if you allow comments on there this also has to be approved by an admin and then we've got the new review approval absolutely we don't want anybody to start putting junk on there and the other options allow comments if you don't want that you can just have a review and no comments it's up to you and we're going to just check these options and just basically avoid having spam so we have to confirm anything before it goes put onto the site so with that being done that's all been set up and configured we now need to go and do two things add the review option to the agents and also put the listing item of the star ratings underneath the agent details now all that information is going to be placed into one of the templates we created earlier which is the default agent single post so we need to find that there we go default agent single we'll edit that with elementor and that will give us all the information to bio and all those kinds of details we saw earlier so the first thing we want to do is to put in the ability to leave a review so let's just put in a heading first of all so we'll just drop that underneath the bio we'll set this to be something like h6 it's not overly important and we're just going to say agent reviews and what we're going to do is we just make that a little bit more bold something like that and that'll do that's pretty good okay so what we can do now is we can just grab the reviews option so we're gonna do a search and we'll search for reviews and what we're looking for is the reviews listing so we'll drag that underneath our heading and that will insert the reviews so we just need to set up some basic information so the rate in layout stars is perfectly fine the input we're going to set that to be stars as well review rating type is details because we're not going to work on an average and reviews per page we're going to set that to be five for example so now you can come in and you can configure the icons and do what you want inside there you can do the same thing for labels and you can set your styles for your colors and so on so i'm going to leave all those as they are for now only thing i'm going to do is make sure we select the widget come into advanced and we're going to put a little bit of space around this and we're going to set a background color just so it makes it look just a little bit separated from the rest of our design so let's just quickly apply the colors we want to use inside there and we're just going to adjust the opacity on this bear with me there we go let's just adjust that down so it's quite subtle on there and there we go we're just going to update that page so that's inserted the ability now to leave reviews next thing we want to do is actually show those reviews in stars so how do we do that well we need to add the star rating so let's just do that next let's search for star rating there we go i'm going to drag that we're gonna put that underneath the details so we're gonna drop that inside there now that's not going where i want let me just pull that down one more section there we go okay so now we need to just set this up and configure it correctly so the rating scale 0 to 5 is perfectly fine because we're working 0 to 5 stars next up the rating where does that date are going to come from well this is something we need to choose so we're going to use the dynamic tags and from there we're going to come down to jet reviews and you can see average rating we're going to select that option and basically that's all we need to do there you can change the icons if you want you can use stars you could use buildings you could do whatever you actually wanted to you come into your style settings and you can just configure things inside this if you want to change colors so we might say we want this to be in orange for example well we can do that and that's basically it so we update this template and now we can test this out by hopping over and taking a look at the actual page itself okay so we're on to britney's page you can see there's the stars all grayed out because currently there is no rating associated with it and there's our agent reviews so i'm going to write the review i'm just going to put in the wow awesome i'll just say brittany rocks and i'm gonna give it five out of five stars that's great i'm gonna submit that review and see your review must be approved by a moderator so we've got that in setup inside there so we don't have to worry about junk and spam you come back into our dashboard and go and take a look inside our jet reviews we can see inside there we've got one review and you can see we go to agent there's our one review if we go to all reviews we'll see there's the review given the rating who it's for the date and you can see it's approve edit or delete what we're going to say approve because obviously we want to make sure this is approved we'll come back over we'll refresh the page now and we'll see there's my review and you can see but you know gets a five-star rating as simple as that that's all there is to it but it's a great way of providing impact and information based upon in this example an agent and you can leave comments and all those kinds of things so pretty cool to see how you can add this in the purely option if you wanted to do it but i think it's a nice little touch we've set up a pretty comprehensive listing website and we have one more job to do before wrapping things up let's add in the ability to let our site visitors choose the property type they want to view and then have a nice looking template to actually show them the details so to wrap up let's just have a look at what we've gone ahead and created because we've covered a heck of a lot in this tutorial so this is our homepage where we've got our ajax based search we've got our full filtering system on there we've got a custom listing for our properties we've got all the relevant details we want to display we can click to come and take a look at the actual property itself and have even more information inside there including icon lists all the details you want the location and so on we can find out who exactly is actually selling this property we can also send them a message directly about the property we can take a look at the agents if you want to and you can see there's the information about the agents we can click to go and view the listings find out their star ratings they buy out the properties that they're actually selling and then we can click and go and take a look at the properties themselves all pretty cool the final thing i just want to quickly show you is how you can easily go and add in another level of menu structure to allow you to filter through and see only the properties that are based upon that particular property type for example condos flats those kinds of things so i'm into the menu structure and the first thing we want to do is create a custom link and this is just going to be the sort of placeholder the parent for all the different types of properties so we're going to put the hash symbol in there so it becomes a null link and we're going to do is we're going to say property type we'll add that to our menu structure and we'll just take that up and put that above view agents so now we can do is we're going to go into the property types and there's all our property types we'll select all of those add those to our menu structure and we'll just indent those underneath property types so just quickly do that and there we go save our menu structure and we'll just hop back over then into our test site refresh this and once that's refreshed and finished let's say that again let's just test that out there we go there's our property types you can see this apartment house loft department and so on so we go and take a look at apartment you can see this takes us into a template that isn't the template that we actually want to see so we just need to quickly create another template now that'll list our properties in the right way so let's just create a new template so again this is going to be an archive so we'll select archive and we're going to do is we'll add new archives fine and we're just going to call this default property type archive create our template and what we'll do then once we've created our template is i already copied the header section so i'm going to just paste that in for speed so paste that inside there and obviously you can add in the filters and those kinds of things and the sorts and those kinds of cool things i'm not going to worry about that too much i just want to quickly show you how you can do this so we're going to do listing i'm going to drop that inside there we'll just expand this out just give us a little bit of space above and below select our listing and from there we're going to choose listing and we're going to do property there you go so property listing so we need to do now is just quickly configure anything else we want on here so we'll just set this to be lazy load equal column height load more i'm going to say infinite scroll is perfectly fine but you'll notice that this is still showing all of the properties which isn't what we want we want this to just show the property under the specified property type to do that is really really easy but easily overlooked all you need to do it says use as archive template enable that and you can see it kind of takes out the information you expect to see and just kind of pre-fills it out with just some text that's a post that's perfectly fine all we need to do is save the condition so save your template add a condition in and we're going to just set this up to be property type underneath property archive and we're going to set this to be all so in other words this is going to be the template that's going to be used just for the property type and it's going to show every one of the property types that's all you got to do save and close update or save whatever you need to do and we can do is we can hop over to the test site and take a look at this in action so onto our homepage and there's our property types underneath there there's our apartment house and so on so let's try loft apartment and we'll go to that and you can see that's just showing us only the loft apartment come back into apartments and you can see that now shows us all the apartments the same goes if we come in and we choose house it'll show us all the houses and then like before we can click and go through and take a look now obviously there's so much more you can do with this you can apply a different filter sets to this if you wanted to so you can filter based upon price and those kind of things but not the property type because obviously you're looking at a property section but i'm not going to just repeat what i've already shown you you can enable that set things up yourself hopefully what you can do though is you can take all the skills and knowledge you've covered in this video and you can then start to apply those to flesh this out even further okay it's fair to say this has been a monster of a master class but if you're still hungry for more we'll take a look at the playlist that's on screen right now to dive deeper into what can be done with jet engine as always all of the applicable links are in the description below and if you found this video useful i'd really appreciate it if you could give it a thumbs up and also consider subscribing and hitting the bell icon but if you didn't find value well feel free to hit the thumbs down button twice as that works pretty well too many sportsy this is wp tets and until next time take care

Channel: WPTuts

Views: 26,355

Rating: 4.927393 out of 5

Keywords: WPTuts, real estate listing website wordpress, real estate listing website, real estate listing wordpress, how to write a real estate listing, real estate, real estate website, real estate website wordpress, real estate wordpress website, how to make a real estate website with wordpress, how to make a real estate website with wordpress free, how to make real estate website in wordpress, wordpress real estate website, wordpress real estate website tutorial

Id: EBj7nmSxbuk

Length: 139min 14sec (8354 seconds)

Published: Thu Apr 15 2021