Create a Listing Website WordPress & JetEngine

in this video i'm going to take you through each of the steps required to build an entire wordpress website with a truly unique design and feature set using elementor pro and some of the croco block plugins to build a great looking listing type website now while this example demonstrates the techniques using recipes you could just as easily use the skills to build a property listing website or a business listing site the most important takeaway here today are the skills and not the chosen topic firstly i'll show you exactly what we'll be building and then we'll take a look at the tools we'll be using as always all the links to everything i cover will be in the description below so be sure to check those out once you finish this tutorial oh and to make things just a little easier there are full time stamps listed below so you can jump around as you see fit okay so let's take a look now at what we're going to be building in today's tutorial so for today's deep dive this is the site we're going to be looking at creating we're going to cover all the design aspects as well as all the underlying features that are going to be included in it so we're going to take a look at how we can create the header through templates we're going to create the page layouts we're going to create the individual layers for each of these individual items we're also going to take a look at how we can add our own custom search we're going to take a look at how we can add all these cool filters and we can filter everything we want on the fly so very easy to use we can just come through filter all these out we can easily stack these on top of each other to build up our filters all looking pretty cool we're also going to take a look at the individual template used to create the individual pages for our recipes now even those recipes you can use any kind of content you want this is all about showing you the skills and then you can take those skills and develop them to do whatever you want to do for your custom website also to take a look at how we can create this repeater section over on the top right hand side we've got all the nutritional information so these are some basic features some some more advanced features but all the skills you're going to learn today are really going to be super useful to help you get a lot more out of wordpress and a lot of the jet products now we've seen what we're going to be creating let's take a look at the tools we're going to be using to create it we're going to be using elementor and elementor pro so we want to be able to access all of the templating system that we have as part of elementor pro but if you wanted to you could use jet theme core that kind of replaces a lot of what you can do inside the pro version of elementor so if you wanted to use that you could do that if you'd like me to create some content on how to use jet theme code with the free version of elementor let me know in the comment section below i'm also going to be using jet engine so we can deal with all of our custom post types our taxonomies all those kinds of things jet search and jet smart filters so we can filter all of our data that's the key tools we're going to be using the nice thing is because we're using croco block and they all work together we are cutting down on the number of plugins we need to be able to create a site like this now on top of these plugins we're also going to be using the free hello theme for elementor because it's a great starting point they're just basically a blank theme that allows us to do some of the key things but also keep wordpress happy okay so the next thing you want to do is go ahead and start setting up our global styles for our entire site and to make life easy i've already created a file that allows you to install this template and you can use that to help you when you're styling your headers your body text your forms your images and all those kinds of things link is in the description below so let me show you how you install that first of all and then we'll see how we start to set up all those global colors so we'll come over into templates we're going to come into save templates and inside there we're just going to say import you can see it says choose file so i'm simply going to drag my file up onto there import that give it a second or so and you can see there's our theme style preview we edit that with elementor we can now just come in and start to use this as the basis for all of our styling and as you can see it is just literally the headings one through six you've got some body text you've got a form a button and you've got an image this just allows us to create various different styling options as defaults for these various different elements let's start by taking a look at how elementor's global styling can speed up the process of designing our entire site we need to go to the hamburger menu in the top left and choose site settings and this is where we have access to all of these global settings so first of all we have the global colors you can see we have four primary colors we're working with your primary your secondary your text and your accent so we can change these we can rename them we just can't delete them but we can add in additional colors and we can delete those additional colors we can't do that with the first four these are integral to the whole way that elementor works so we're going to do is we're going to change these colors first of all i've already saved a selection of colors i want to use i'm simply going to just insert the values into here so you can see once you insert that value you can see that now updates secondary and text is perfectly fine we're going to leave those as they are we're going to change the accent color though we're going to just change that from there and we're going to set this to be white i'm going to change up accent and i'm just going to name this white we'll do the same again we're going to add another color this time we're going to add in a black because it's always handy to have your black and white colors because there's various different times you may want to use these so we're just going to call this black and i've also created a couple more so i'm going to add the color in and we're going to do is we're just going to simply copy and paste these values over so i'm going to drop that inside there and we're going to rename this one this is the title bg background add one more in which is going to be used in various different parts of the site i'm going to do exactly the same drop that inside there and rename this call this tile border okay so we've now created our first set of global colors but you can see nothing's actually happening and that's because we're not actually referencing any of these just yet so let's come back out of here we've got our global fonts so now we can set up the various different typography that we want to use throughout our site for the four key areas again your primary secondary text and accent but you can also again add more inside you if you want to so you can create custom headings and all those kinds of things and very quickly apply that and you don't have to do it inside the site settings area you can do that inside the normal editor should you want to and we'll take a look at some of those things a little later in the tutorial so let's just set up some various different values the first thing i want to do for primary is we're going to use this for our headings so we're going to do a search for the font and we're going to select that and we're just going to leave any of the values except for the weight because then what you can do is you're going to assign these independently based upon various different things like your headers and so on and so forth line height we are going to change this so we're going to set this to m's make sure that's on there and we're going to set this to 1.2 if we need to tweak this at any point we can do and we can come back and make those changes inside you if we should need to next up we're going to do the secondary i'm going to do the same thing again so this is going to be doses again and you can set any other parameters inside your should you want to just take a little time to set everything up and then the third one we're going to do is the text which we're going to set up to a different font and this is going to be a font called bitter so i'm going to choose that from there we're going to set our line height to 1.7 ms okay so there's the key ones that we needed to set up now i want to set one more up which is going to be a custom one so we're going to say add a style and we're going to give this a name so we're going to click inside here first of all and we're just going to call this title meta text and we're going to change the values inside here as well so we're going to change this to nanito i'm going to choose nonito sounds for example and anything else we want to set up so we'll set our weight to 400 for example and our line height to 1.1 okay so we've created those but again still nothing is showing up inside you that's because we're not actually referencing these just yet so we can rectify that by hopping into the typography setup and this is where we can set up the key values the colors all the different things for the actual physical text on the page so for example the text color you can see we've got the traditional color picker which we can click and we can go and find a color or we can click on the little globe which allows us to choose any of the global values you've set up so we click on there and you can see there's all our colors so we want this to be primary for example and that will change all this a primary however for this this is going to be our body text color so we're going to change this to be text and that will set the value up inside there if you want to change any of these you can do you can come in you can reset this to clear it or you could create your own color for example you could go for something completely different and then you can click the plus and you can add that as a new global color so should you find you want to do this later on you can do it very easily however we're going to set this down to be the text color that's perfectly fine for this example paragraph spacing we can set that up inside you and again we have to choose the font so at the moment we've got the option to choose it manually or we can choose it from our global options so we click on our global options and we're going to set this to be primary and you see now everything changes to the primary however we want the headings to be different we want the body text to be the bitter font that we chose so we're going to choose typography and we're going to just choose the text option and see everything changes and that's perfectly fine in this example because we've all the options underneath now to control the link the headings one through six so what we can do now is we can say we want to set the color for the links so we're going to click on our global again and we're going to set that to our purple color typography we're going to leave that as it is because that will inherit what we set as the body so everything will inherit from the body down so we can change now the heading so again we can do the same thing we can choose our default color set that a primary choose our typography set that into primary so that'll pull up the alternative fonts type and then what we can do is we can tweak that by choosing the pencil icon and now we can set up the sizing so we can say that for example we want our main heading to be something like 42 and if we want to we can set that to be a heavier weight entirely up to us then anywhere that uses that font and that particular h1 tag will be set to this particular styling so it will inherit both the default global settings we set up and also the individual settings that we configure inside the h1 itself so now i'm going to repeat that through the h1 through to h6 i'm going to bore you i'll pause the video and we'll come back okay so there's our heading setup our body text setup so that's our text side of things all done and dusted so now we can move on we can start to configure other areas so things like buttons for example we can choose the button typography we're going to do is we're going to choose that global option like we said before we're going to set this to be text you can see that changes the font over now text shadow we're not going to worry about things like that color and typography we can change all those options inside here should we want to but we'll leave that set to text and not worry too much about that i'll change my text color and we'll just choose from our global colors again we'll set that to white this time background color but we're going to change that and we're going to choose our primary and you can see our buttons now reflect all those different settings so i'm not going to bore you by go through all of these but what you can see is that you can reference all the different elements and you can set up things like your typography your buttons how your images display your form fields all those kinds of really useful things now on top of those things we've also got extra options things like site identity background colors and those kinds of things so if we hop into the site identity this is where we can change the name and we can upload our logo and so on so let's just change this to love food website and we're going to get rid of our description thing on there we're going to drop in our site logo so we're just going to choose the plus and we'll upload the logo that i want to use for this example give it an alt tag and we'll just insert our media you can see there's our logo inserted and if you've got a favicon you can insert that inside here as well you can come back out of this and you can set things like your background color so if you want to set a background color for your entire site you can do just that really easily inside you so let's just say for example we want to set this to be a really pale gray we can choose that option we could choose one of our global colors or we could set up a unique color so you can see if we add that in you can see our background color changes so we could set a really really pale color should we want to entirely up to us once you've done that then you could just update this and you can also simply come into this click on our color chip click on plus and we could just set this change it from new global color to default site background and click on create so we've now created a color directly from a different location where we haven't done that inside our global colors but if we click on global colors there's our default site background used and we can access that and reference that anywhere throughout our entire site we've got options things like layout we can control the content with all those kinds of things so let's not worry too much about more on there all those settings can basically be left as they are other than the things i've just shown you now if we hit update we've committed those alterations to our site and we can start to utilize those so that's basically how we set up these global site settings so we can use them throughout our design and speed up the whole process of designing our site so first i'll list the templates of the headers and footers these will be listed on every single page your entire website so we're going to do is we're going to come into the theme builder and the templates and you can choose the new option to try it now we can take a look at the new way of working and this is the sort of new layout for working with the template builder or the theme builder as part of elementor so what you can do is you can click to add a new header in and once you do that that opens up the editor and we can start setting things up now you could build your header completely from scratch if you want to but for this example we're going to use a template and then we're going to edit that template because it's a quick and easy way of getting started so we'll insert that that will download all the template files you can see that now inserts it now one of the things that's kind of a little frustrating when you're working with elementor in this fashion with the theme builder is it doesn't give you the option to create the name for the template and that can just kind of get a bit confusing so what you can do is you can come into the settings section and you can see there's your title so we can change that and we're just going to call this default header you can see that now updates and we're good to go so now we can come in and we can select this section at the top which is where we've got our header set up and we've got a left section which is our logo got a main section which is our menu and we've got a phone number over on the right hand side so let's just see how we can change all these at the moment this is just set as an image so we're going to delete that from there and we're going to do is we're going to use the site logo widgets we'll drag and drop that up inside there and you can see that now pulls in our logo that we set up inside our theme style so that's pretty quick and easy next thing to do is make sure we've got the entire section selected and just tweak this a little bit because at the moment it's got a negative margin i don't want that to be in place so i'm going to select the advanced option and we're going to remove that negative margin and set that to be just zero that now pushes this down and allows us to see what's going on a little better now we can just start to style everything so we're going to come back over into the style section making sure we have the entire section selected we're going to choose the classic option to get rid of the gradient that's in there and you can see we have that same little icon for the global setting so we're going to do is we're going to just click on that we're going to choose our primary color and that now changes that and shows us the primary heading using our color scheme so pretty cool to see that next up we've got the menu area now we haven't created or configured a menu just yet so we'll come back to that in a moment so before we go ahead and sort the menu out let's just save this and set the parameters for this so we're going to click on publish and this will ask us then what conditions do you want to set up for where this template is going to be used would you click add a condition and then we're going to say entire site so that will be the default header throughout our entire site makes the whole process really easy okay so now we can click and we can just select the menu but you can see there's no menu available to us so we're going to press ctrl and e or command e if you're on a mac and we're going to do is we're just going to search for menu and you can see that allows us to find the menu section and we're going to jump over to the menus so we're going to do now is we're just going to name this main menu and we'll just leave the default options inside you just we've got some content we'll just remove these two useless pieces and we'll create our menu we're going to just set this to be the display location of primary and again we'll just hit save so we come back later we can add to this but for now this is all we need come back to our templates into our theme builder and there's our default header so we can edit this with elementor once we've done that we can then just make sure that everything is configured now you can see it's picked up our menu but if that's the wrong menu for any reason you can simply select it and then you can come over and you can change your menu from this top section on the left hand side and now if you want to you can go through and configure any of the options inside you the styling everything can be configured and again you can see we can choose from our custom options so we can choose from there we could say we want to set this to be primary for example or we can change this and be the text however you want to set this up it's entirely up to you if you want to create something completely custom you could do that inside you as well we're going to leave that as it is there with this global font for our text and we'll leave it like that for now we just need to hit the update option on there and then we've saved any of the changes we've made so now we can come back out of this exit to our dashboard and we're going to come back into our theme builder one more time we're going to choose footer as an option and you see this is the earlier version of being able to edit the template files you can come back into try now if you want to go back into that new theme builder or you can do it from inside you both will get you to the same point so add a new footer we're going to call this default footer and we'll create our template and again we could create this from scratch we could use a template to start off with however we want to work and for speed i'm just going to use a template so we're going to just use something simple like this insert that into our design if we make any changes to that we can make changes but we're going to leave it as it is for now we'll just hit publish add our condition like we did last time and again choose entire site we can hit save and close on there and that's everything done so if we want to view our live site this is what we have at the moment there's our header there's our footer we have no content because we haven't created any templates or added any content to the site just yet but that's the first two parts done that's our initial templates all set up ready to go now it's time to delve into the fun stuff by using jet engine to create our custom post type don't worry if you're new to this i'll break every step down for you and if you need more help then i have a full playlist full of goodies listed in the description below to help you out so we're going to create our custom post type first of all for our recipes let's hop over into jet engine and we're going to choose the option for post type inside there you can see we have a blank setup so we're going to choose add new and now we can just set everything up so the first thing we're going to do is just give this a name so recipe name is going to be recipe or the post type names for me recipe the slug is going to be the same just all lower case we're going to leave everything else as is there labels is not something we need to change but if you want to configure these and it's just basically what you'll see in the left hand side so when you come up things like elementor and you've got these different entries you can kind of control what your says underneath the recipe section i'm going to leave those as they are and let the default values work on there then we've got advanced settings so inside here we can configure anything we need now to make sure that everything is set at the way we need so all these options are basically going to be left as they are we don't really need to worry too much about those scrolling down you can see we have options to have an archive now you need to make sure that that is selected by default it will be but for any reason if it's not if you don't enable that you cannot create an archive and associate it with your custom post type so if you find any problem this is probably the reason why hierarchical we're going to leave that set as it is we don't want to worry about that we're going to change the icon on here to something that's just a little bit more in keeping with regards to the food so let's just take a little look we'll just put a carrot in there for example doesn't really matter too much and once we've done that we've got the supports option so this is basically saying what out of the normal wordpress post type features we're going to enable as well so in other words we've got the title and the editor we also want to put in the featured image so we click and we're going to choose thumbnail featured image so these are the three key fills that are part of wordpress itself and we're going to add on top of that with our custom options so moving on down you can see meta fields is the next thing we have available so we're going to click to add our custom meta fields in we're going to click to open that up and we're now going to just choose all the different fields that we want so the first thing i want to put inside here is going to be the preparation time for this particular recipe so we're going to drop that in for the label and the label is just basically what we'll see on the actual page itself inside the dashboard of wordpress with our custom post type so this is just a visual representation of what the content is going to be and you can write whatever you want inside there click underneath that will pre-fill out the name and the id if you want to change this you can do you just need to make sure that you don't have any spaces inside there and you always separate where a space would be with either an underscore or a dash so by default it's pulled in preparation time and for this example that's perfectly fine object type field is what we want but you do have extra options inside there if you need to take a look and then we're going to set the field type which is going to be in this example numeric so we're going to set this to be a number you can set your minimum and your maximum value any step values you can drop a description if you want to help people understand what this particular field is for when they input in data but in most cases this is going to be self-explanatory and if you want to add things like conditional logic for when this will show up or you want to set things like the field with you can do that inside here as well i'm not going to worry about those because they're more cosmetic than what we need in this example so we're going to add a second meta field in and this one is going to be for our cooking time so again we're going to drop in the title we'll click underneath it'll pre-fill up the name id we don't need to change that we're going to change this over to number for the field type leave all the other values as they are and we're going to add another field in so this time this is going to be what's called the yield in this example the yield is just basically how many portions are you going to get out of this particular recipe again we're going to leave that to be the name id that it pulls up we're going to leave this as text i'm going to leave everything else as it is we're going to keep on going and we're going to add in this time a description so this description is going to be a really short description of the recipe and we're going to use this on the actual card itself in other words the really short description so people can see and get a taste of what this is all about description is fine we're going to change this from text so we're going to set this to a text area so we can't do any styling or anything this is just to allow us to input basic text information we'll add another meta field in this is going to be for our ingredients and this is where we want people to be able to really get in and add a little bit more formatting and styling and so on so we're going to change this from text and we're going to choose the option for wysiwyg this gives them the ability to control things like bold and bulleted lists and things like that it's really useful another meta field this one's going to be for instructions and again this is going to be basically a replica of what we've just created so instructions set this to be a wysiwyg and that's all we want on there and add another meta field in you can kind of get to see where we're going with this it is basically just setting up the simple rules for each of these different kinds of fields and set in the type of field it's going to be so the label for this serves is going to be serves is perfectly fine i'm going to set again to be a number now it's worth when you're doing this kind of thing just given a little bit of thought do you want a filter against various different values so we want to filter again things like the number of people it will serve or the number of calories that are in a meal those kinds of things we need to set those to numeric just to make life a lot easier so we can use a simple slider so it's good to get an idea of the types of content you can create through meta fields making sure that kind of matches how you want people to filter and if you want people to filter so you'll see what i'm talking about when we get onto the filtering side of things with this entire tutorial so we're going to add another metal field and this is going to be calories per serving and again we're going to set this to be a number almost at the end now we're getting to the last part so this final one is going to be nutrition and this is a more complex field type so in a drop in nutrition name is perfectly fine we're going to change this over from text and we're going to create a repeater now if you don't know what a repeater is it's quite simple but can be quite difficult to understand when you're not used to the terminology you're not used to how things work when you create a custom post in other words a post type like we just created inside that post type are a list of meta fields like we've just created well if you consider a repeater is like a nested version of that so inside the repeater can have its own small collection of meta fields that sits inside your custom post type so it's like another level and because these allow you to keep on adding as many of these entries as you want to when you're in the dashboard of wordpress adding content it means that you don't have to worry if you don't create enough fields for this so in other words the nutrition could have a single value for example for sugar or fats or something but it could end up with 25 or 30 values we don't know and we don't want to have to make our lives more complicated so a repeater is a really good way of being able to work with this if you want a more detailed tutorial on how to do this using this basically the same setup as we're using now i'll put a link in the description below and i've created a dedicated video just to working with the repeater okay so we're going to add first of our nested fields in so we're going to add the first one in and this is going to be simply type in other words what type of nutrition are we talking about again you see pre fills out the the the name underneath and then the type what do we want to do test is perfectly fine so you can see it's exactly the same as creating a metal field there's just fewer options inside there because it's nested into our main custom post type i hope that makes sense now the repeater field and we're just going to call this value and this is where we're going to put the nutritional value in now because we're not working with just numbers we're going to be working with the actual value in other words it's going to be like milligrams grams those kinds of things we don't know what people are going to use we're going to leave this as a text field just to make life easy so that's going to be physically fine as a text field and then the final one we're going to do is the percentage of allowance because what we're doing with this is we're putting the actual uh nutrition we're putting the value and also what of your percentage daily allowance does this take up so we're going to do is we're going to add in our third and final nested repeater we're going to drop in percentage of allowance click underneath there and we're going to set this one to be a number okay so that's everything we need done if we scroll on down we can see we've got admin columns right at the bottom and the admin columns just basically allows you to add any of these fields we've just created into the custom post type listing where you can list all of the different entries inside this custom post type this example recipes i'm going to leave that blank for now but you could add in there if you wanted to so created our custom post type we're going to hit add post type and that will now create the post type and do everything else we need so you can see on the left hand side we now have recipe inserted into our dashboard we're now going to help with the organization of our newly created custom post type by adding in a custom taxonomy to group our recipes into logical sections we'll also be using this taxonomy to filter our recipes a little later in this video so to come over into taxonomies under jet engine choose the taxonomies option and now we can create our first taxonomy now taxonomies are really really useful for us because we can use these in various different ways we can use them to simply group different kinds of recipes together and a recipe could be in multiple different taxonomy groups for example it could be lunch it could be dinner it could be a starter it could be in multiple different things but the benefit of this is we can also use this for filtering which is what we will do a little later on so it's always good to consider do i want to use a taxonomy or do i want to create a custom meta field for various different ways of grouping information together have a little think about this before you start getting stuck in and creating your different custom post types and your taxonomies and so on just to give yourself the best chance of being able to create an easily filterable easy searchable and easily organizable amount of content using your custom post types so we're going to do is we're going to create a new taxonomy we're going to give this a name of recipe type and again we click underneath you can see this creates the slug automatically the post type now in other words what are we going to associate this taxonomy with if we click inside there all of the options we have available including anything we've created as well as a range of different things that are just built into wordpress excel such as posts pages media and so on but we want to associate this with our custom post type of recipe so we're going to choose that from the list now you can associate this with more than one different post type if you want to so you could make global taxonomies and associate those to various different things should you need to we're going to keep this simple and leave it just associated with the recipe the next thing we want to do is we're going to leave the labels as they are but again you can see there's all the same kinds of options we saw when we created our custom post type and if you want to change those you can do what we're interested in though is making sure that everything is configured correctly inside the advanced settings so we're going to come through just make sure everything is right and what we're going to choose is hierarchical now you don't need to choose this it just makes the whole process of being able to link your post with your taxonomy just a little bit easier because it gives us a list of check boxes as opposed to an empty box that we have to start typing in which can kind of be a bit confusing when you don't know what categories or taxonomies are even listed as part of the custom post type again i hope that makes sense but all i would say is generally it makes sense to put the hierarchical on when you create a taxonomy because it's from a usability point of view it's just better at our taxonomy and if we come up the recipe now you can see there's our recipe type so we've added our taxonomy into that and everything is now configured for our custom post type and our taxonomy to group things together now before we move on it makes sense to add some sample content so we can use that as a visual guide to help us with building the templates layout and so much more so let's do that next so i'm going to show you all the different options we have now inside our recipe and also our recipe types then i'm not going to bore you showing you how you can put all the data in because i'm pretty sure you could probably figure that one out without any problems whatsoever let's come over to the recipe into recipe type and let's take a look so this is no different to setting things up if you're using posts and categories or tags this all works in the same kind of way so we can do something like add breakfast in for example and we'll just say add new and there's our breakfast category add another one in desserts add category all sorted i did that one in there so i'm going to go and add in a pile of these and then we're going to come and take a look at what options we have in the recipe itself okay so there's our different recipe types all ready and inserted let's head over now to the recipe option and we can see what's in there so at the moment we've just got the title and the date nothing more let's add our first recipe in let's go past all this we don't need to worry about that okay so let's have a quick look there's the normal title and the content area because we enabled those as part of our custom post type and also the featured image on the right hand side then everything else below this is all custom so the preparation time cooking time yield description and so on and you can see the wysiwyg editor in various different places our nutrition information which is our repeater and also if we take a look at the recipe type all of the recipe types we just created so everything is now linked together and working the way you'd expect it to so i'm just going to simply fill it all these values in for one of these items and then we're going to take a look at how this all works okay so that's our first entry inserted all except the nutrition information as you can see it just works exactly the same as a normal post inside wordpress just with an extra pile of fields that are custom to this particular post type let's take a quick look at the nutrition to see the how that works you can see at the moment it's totally blank and we could leave it that way if we have no nutritional information available however we click on add item you can see there's the three fields that we inserted into our repeater so now we can just basically fill up the values inside here and we're just going to drop in a couple of different values just so you can see how it all works and we'll drop in 12 grams for example and we'll say that's 20 of you or 10 of your daily allowance we'll add another item in and this is where the beauty of these comes in is that you can easily keep on adding content just to make sure that you've got all the values you need and not have to worry about how many values there actually are okay so with that being said that being done we can keep on added if we need to but for this example we're going to hit publish and we're going to just say there we go that's published so now we have our first item inside you there's our healthy vegan deep pan pizza so i'm going to go ahead add a couple more recipes in just so we've got some extra options to work with when we're designing things and then we'll move on start to build out the templates that we need to actually start displaying all this information listings are at the core of jet engine and we're going to be creating two right now one to show each of our recipe details and also a simple layout to display our repeater feels nutritional information to do that we're going to do first of all we need to create the listing and to do this we need to come into jet engine and choose listings now the listings will be create the template for each one of these individual items the recipes how they be displayed on the sort of archive page and again this will become evident when i create this and show you how it all works so we're going to do is we're going to create that basic template and say add new posts is perfectly fine we're going to change the post type from we're going to change this to our custom post type of recipe we're going to give this a name and we're just going to call this recipe listing elementor is what we're going to use but you could use gutenberg if you're using that as opposed to elementor so that is an option if you want to use it and we say create listing item this will take us into elementor and we can start building everything out now what i like to do here is come down to the settings section and you can see we have an option called listing settings we're going to click on that we're going to change this listing source to post this perfectly fine post type recipe and we're going to set our preview width and i set this about 450. this because it just makes it easier when you're designing something because this is probably around about the size it's going to be seen inside our design do you want to make this listing clickable we're going to say yes we do the link source is going to be permalink and if you want to leave anything else in there you can do but i'm going to leave that as it is okay so now we can start building this up so the first thing you want to do is just put in a simple single row column don't worry about spacing and things like that at the moment it doesn't really matter too much because we're not going to see any of this around the page anyway we're just concentrating on this small area here okay so what we're going to do first of all is build up the various different parts of this so the first thing we're going to come in we're going to scroll right the way down until we get to the jet engine options and what we want is dynamic image we're going to drag and drop that into our row and post thumbnail is what's included there and that is perfectly fine post thumbnail is exactly what we want and now if you want to we can configure any of these items inside you we can say what size image you want to use well we'll use medium large we don't end up with a massive image being loaded we don't need to set the alignment to center we'll say linked image yes there's a permalink that's perfectly fine we don't want to set any of the values on there you can set a fallback image if you want if someone forgets to upload an image itself but generally you shouldn't have to worry too much about that side of things and then if you want to do any other options for styling and so on you can do that in the normal way so next up we need to start adding in some more data so we're going to come back to our widgets we're going to scroll down until we get to jet engine again and we're going to grab the dynamic field option drag and drop that underneath and you can see this now says the post term user object for the source which is perfectly fine in this example and it defaults to title which again is perfectly fine in this example so now we can just set up whatever styling we want on here at the moment it's using a div tag but what we can do is we can change this and we can set this to any of our different fonts so you see h1 through to h6 you can use a paragraph or a span on you or a div so if you want to start it in a certain way you might want to use a div or a span but for this example we're going to set this to be h3 that's perfectly fine do we want to do anything else nope looks pretty good as it is we might want to tweak the sizing and so on in a moment but the next we're going to do is we're going to drag and drop in some metadata so we're going to scroll down again until we get to that dynamic field option drag and drop that underneath and this time we don't want to use the source of post term we're going to change this to be post meta because we want to reference some of our custom metadata from our custom post type so we're going to choose metadata and it says what field you want to use and then all of our fields are there underneath our recipe so what we're going to do is first of all we're going to grab the preparation time and you can see that just basically puts in the value of 60 which doesn't really make a lot of sense to most of us so we can go ahead and configure how this all works so what we're going to do first of all is we're going to come down we're going to choose the option to customize field output when we do that we get this little symbol inside there which kind of might look a bit confusing to start off with but really all it is is that's a little macro that's a way that jet engine knows to output the content of this particular meta field but what we can do is we can add extra information before and after it and we can also style that with html so let's just say we know this is preparation time so we'll just put in preparation time and a colon and now that makes a lot more sense and we can go afterwards and we can just put mins in so now people can look at that and they can go okay now i know exactly what it is you're talking about it's the preparation time cool now to make that stand out a little bit better we can just wrap this in the strong html tags which we'll just put this into bold there we go so you can see now that makes a lot more sense preparation time 60 minutes cool pretty easy to do what we can do now is we can duplicate that if we want to before we do i want to set up just a little bit of styling on there so we're going to select this make sure it's active we're going to come back over and we're going to go into advanced and from there we're going to set up how we want to deal with this positioning wise so we're going to say we want this to be positioned and we're going to say we want this to be inline auto which what this means is that we can have anything that's below it on a larger display will move up and sit in line with this as opposed to sit one underneath the other which could get a little bit sort of look a little bit rubbish so now we've done that we're simply going to right click and we're going to just choose to copy this or we can right click and we can choose a duplicate it doesn't really matter and you can see this has picked up exactly the same styling all the same parameters and as you can see this sits on the same line so we're going to do is we're going to select the first item and we're going to come over to advanced we're going to uncheck the link for the padding and on the right hand side we're just going to set 10 pixels padding just to give us a little bit of breathing space we'll do exactly the same on the next one uncheck on the right hand side we'll put 10 pixels okay so now we've got two preparation times which makes no sense whatsoever so we just need to change the values on this we'll select it come back to content change the preparation time and we change this to cooking time we can change then inside the format and we'll just change that to cooking time and everything else is working as we'd expect it to we do it one more time we're going to duplicate this and we're going to change the values inside there and we're going to change this this time for calories per serving and we're going to just change the values as well so again calories the first part and we'll just put per serving at the end pretty cool pretty easy to do so now we've got all those laid out and if the size of the screen changes it'll compensate for those various different positions on those individual items so that's the first part of that done we're just going to drop in a simple divider underneath there and we're just going to quickly configure that we'll set that to about 20 percent solid is perfectly fine alignment left style and come in we're going to choose our primary color but we're going to adjust that and we're going to drop the opacity down on that to make it a little less in your face and we're also going to set the weight on this to something like 2 for example and we're going to adjust the gap in between as well just so it gives us a little bit of breathing space and it separates that then from the information we want to place below it speaking of the information below we're going to do exactly the same as we've just done we're going to grab a dynamic field drop that underneath our little divider if you find this doesn't work too well you can just position it and then you can just reorder these if you want to and you can if things makes easier just open up the the navigator and you can drag and drop from in there sometimes elementor could be a little bit finicky when it comes to moving things around okay so this is pulled in the title again which we know is incorrect in this example so what we're going to do is we're going to change that to metadata and this time we're going to just reference our description which is just a simple clean plain text field and there we go if you want to you can change this from div and i'm going to change this to p so it picks up the paragraph tag and for this example if you want to make it a bit smaller you could easily just come into the styling and adjust it from there and again you can choose any of the default values so we can choose our text color we can change our typography we can set this to the secondary value we can set the primary value what we probably want to do though is it's a text and there we go that's now pick that up but we can tweak that if we want to so we could say for this example we might only want this to be about 12 pixels in size up to you but i'll just reset that value on there and leave it with the default okay so now we've created most of this the next thing you want to do is drop in a link and then style it to look like a button it's pretty easy to do again we're going to come down to our jet options and this time we're going to choose a dynamic link drop that underneath there and you can see that just pulls in a read more link which is perfectly fine but we can change that if we want to the source permalink perfectly fine that's exactly what we wanted to do it's the permanent link for this particular individual recipe read more it's perfectly fine but if you want to change that you can change that inside the label you can change anything you want inside you to be honest but we're going to keep this straight forward just so you kind of see exactly how all of this works so let's hop over to our style option now you might be wondering why this isn't picking up that button styling we set up as part of the theme styles that's because this isn't a button it's just a link we're going to make it look like a button though so we need to do is just tweak a few things on here under the style setting typography we're going to just click and we're going to choose text if you want to we're going to come into our background i'm going to change that we're going to change the color and we're going to choose our primary color and again this is where the beauty of using our global colors comes in we don't have to guess or have a list of all these values we can just keep referencing them and if we change them we change them globally choose white for our text there you go so we're already looking more like a button and then we can come in we're going to unlink this and we're going to just set some values inside here so we're going to go for 15 30 15 and 30 again so now we look more like a button and we're simply going to come into the border radius and we're going to set 8 pixel border radius and if you want to change the size of the text you can do that so we're going to do is we're going to come back up to our text and make this just a little bit more in your face we're going to just come in and we're going to just click and we're going to change this all to be a little bit heavier and we're going to set this to be all uppercase so now that stands out more as a button okay so let's just update this page just to make sure we save all those changes and let's say if we want to make changes to any of this later on we can do so we might say well we want to make a little bit more space where this line is well let's just come in let's just add a little bit of margin at the top there let's just try 10 pixels that looks better pretty cool now the last thing i want to do is just style the container this is going to sit in just select the container once you've got the container selected we can now apply some styling so we're going to come over to style and inside here we're going to go into our border we're going to put a border radius because i want to round the corners off just a little bit so we're just going to set those again to eight so it matches the button now you won't see anything at the moment because there's no way of seeing the difference between the actual container anything behind it once we've done that though we're going to come into our box shadow and inside here we're going to just change the values you can see now it already looks a little bit more 3d should we say let's adjust the blur on here we're going to set this up to about 25 somewhere around there and i'm going to drop the opacity of the shadow because i want this just to be a lot more subtle than this okay so there we go so we've now created what we want to do next thing i want to do is just make sure that this looks a little better because you can see the spacing around this doesn't look particularly great so we're going to adjust that next now to do that we're just going to simply come into each of these elements i'm going to come into advanced and we're just going to put a little bit of padding on the left and right so i'm going to say 15 pixels maybe try that at 15 15. that looks better and we're going to do the same with all of these so what i can do is i can just simply come into left and right we'll just say 15 on left 15 on the right as well and then we're just going to copy this and we're going to paste that style on both of those just to speed up the process and we're going to do the same kind of thing on here as well so we want to put padding 15 right 15 left and finally we're going to do it on the text area so again i know this is kind of boring but it's one of those things these little tweaks make all the difference to stop everything just looking flush against the edges so for this one we're going to do 15 right 15 bottom and 15 left so it sits off the bottom of the container and we'll just hit update so now we've created the card that we're going to use for our listing so that's the first thing we can use this in lots of different places so it's really cool how we can use this so that's how the listing works inside jet engine and that's the first listing created let's just come back out of elementor and from there we're going to close this down back into our listings make sure we're inside there we're going to add new and what we're going to do is we're going to set all this up so at the moment this is saying posts but we're going to change this to be a repeater field because we're going to set the template up just for a repeater so choose that option it says from what we're going to say this is going to come from our recipe custom post type next on our list is the repeater source in other words with the repeater being created jet engine is perfectly fine but you do have other options then we've got the repeater field now this is where we're going to put in the name of the repeater so if you're unsure you can simply hop back over to your custom post type take a look at your repeater field and there's the name or the id again all lower case so we're going to copy that from there just to make sure we don't end up with any mistakes so copy that hop back over and we'll drop that inside there so i'm going to give this a name so we're just going to call this nutrition repeater just so we know where it is and then we're listing view we're going to use elementor to create this but again you can choose from gutenberg if you're using that create our listing item once we've done that we've got a really simple layer we're going to create simple two-column layout that's just going to contain the information from our custom post types so let's just add a new two column single row setup on here we'll just hop over to the left-hand side set our column gap to be no gap so we control all the spacing on you if we want anything and also we're going to just make sure that this is set to have a vertical align of middle to make sure anything we place inside you will sit in the middle of each of the cells okay so the first thing we need to do is create our first piece of meta information so again we're gonna come back to our widgets we're gonna scroll down until we find dynamic fields drag and drop that into here and you can see this pulls in what it thinks is right which is not in this case so we need to change that and choose the option for repeater field once you've done that it says what's the custom repeater field you want to use inside you so again if you don't remember you can simply hop back over and there's our three repeater fields the type the value and the percentage of allowance so we're going to do we expand type out first of all we'll select the name and we'll copy it we'll hop back over to our template and we're going to just come into the second area and we're just simply going to paste it inside there and you see that now pulls in in this example trans fat which is one of the values we have set up so now if we want to style this do anything we want to with it we can do but we'll leave that for a moment and we're going to do is we're going to simply duplicate this so we'll just right click duplicate and we're going to change this from type come back over and you can see our next option is value so again we'll do the same thing we'll copy that from there head back over change that field to value and you see that now pulls in 12 grams and we're going to do it a third and final time we're going to duplicate that push that over to the right hand side and we're going to select it come back in and we're going to grab our third and final repeater field grab the name copy that from the head back into here and change that over to our new value so we'll paste that inside there and you see there's our 120. so now we can just quickly go ahead and format anything we want so like we did before we're going to select this first dynamic field we're going to come into the advanced option and inside there we're going to come down to positioning and we're going to set this to be inline once we do that that now gives us the ability to bring this value for the 12 grams in this example into the same line so we're going to select that do the same thing again advanced come down to positioning choose inline and you can see that now goes up to where it needs to go so we'll just grab our trans fat again and we're just going to simply add a little bit of margin on the right hand side like we did before i think was five pixels that now makes a lot more sense so we can just leave those as they are and we can do the same thing on this value we don't need to worry about putting this in line because it's the only thing that's on this particular section however we do have a couple of things we want to do first of all we want to adjust the alignment this needs to go to the right hand side so we're going to say widget align and feel content align all over to the right hand side now we also want to put a percentage at the end of this so normally you'd think well you come in you go to customize your field output and you scroll down and you drop the percentage sign in there and when you do that the value disappears and we get a gray box why because we can't put a percentage in there because jet engine thinks that's part of a macro so how do we get around it well let's take that percentage off that last one we'll delete that from there and what we can do is we can use the html code for a percentage sign and drop that inside just let me show you what i'm talking about now this is a pretty cool little site and it gives you all of the different codes you can use to insert various different elements so things like percentages and so on as you can see we've got unicode hex code html code and so on what we want is this little html code so make sure whatever you copy you copy the entire thing including the semicolon at the end i'm gonna copy that from there we'll head back over and we'll now just come in and we'll paste that inside there once we do that you can see we now get 120 because it's not using the percentage sign it's using the html code for the percentage sign so if you ever struggle with this that's exactly how you use these symbols and avoid any problems whatsoever okay so we've created this the final thing i want to do is just simply select first of all this first column we're going to come into style and we're going to grab a border we're going to set a single solid border we're going to set the width to be one pixel at the bottom and we're going to use a really light value for this example we'll just use the title bg and we'll do exactly the same so we're just gonna right click on the column copy this and then we're gonna go over to our second column and like i say if you find this difficult you can use the navigator so we're going to just grab the second column right click and say paste style so that's now giving us that underline style and if you want to adjust that you can do make it lighter darker whenever you kind of want to do what we need to do now is just save or update this and we have created a second listing section so that's those basic templates done we've got the listings all set up so now we can start to use these in the various different main theme files we need to create as templates we're now ready to start working on the more creative stuff we're going to start with the archive template that will list all of our tasty recipes to do that we're going to come over into templates and we're going to choose the theme builder option and from there we're just going to choose archive we're going to create a new archive and we're going to give this a name of default recipe archive we'll create our template we're not going to use any of the pre-defined templates we're going to start this off completely from scratch so we're going to close that down we're going to do now is we're just going to build out some of the key elements of this so the first thing you want to do is put some kind of header onto the page itself so let's add a simple block inside this single row column and we're going to add extra bits and pieces as we go through this so don't worry too much we're going to come back and we're going to tweak various different elements on here so first of all we're going to do is we're going to set the height of this and we're going to set this to be something like i don't know maybe 400 pixels high somewhere around there doesn't need to be massive so we'll just choose this we'll say the height is going to be minimum height 400 pixels is fine hop over then to the style we're going to come into classic for our background and we're going to select the background image we're going to use this particular image we'll insert that inside there obviously it looks a little bit rubbish at the moment so we need to do is deal with that so position we're going to say bottom right because that's where most of the interest is in this image we can leave this to default but you could if you wanted to set it to scroll or fixed if you want to create a sort of parallax type effect repeat we're going to say no repeat and size we're going to say cover so now it already looks considerably better next thing we're going to do though is we're going to drop in a background overlay over the top of this just to make it a little less in your face and allow us to see the text and things that are going to go over the top of this so to do that we simply choose a color and we're going to just choose our black like i said at the beginning of the video it's always handy to have just a plain black to be able to use it whatever you want now you can adjust the opacity on here to taste i'm going to leave this set to about 50 or 5 because that kind of gives a good starting point so the next thing you want to do now is drop in the title for this this page and some other information and later on we'll come back and drop a search box inside you once we've created the search filter inside jet smart filters and jet search so with this all in place let's grab a heading and we're going to do is we're going to just grab a normal heading inside there we're going to set this to be h1 i'm going to do is we're going to apply a little bit of our own custom styling to this just to make it look a little bit more interesting because it is a kind of primary header on the page and then i'm going to show you how you can save that as a separate sort of style that you want to use so h1 is perfectly fine we're going to set this to be center aligned we're going to just change the text in a moment but for now we're just going to come into style and under style we're going to just configure how we want this to look first of all we want to change the color we're going to set that to white so it already looks better and you can see now why i put the sort of overlay because it makes the text just stand out a little nicer next up we're going to just tweak the typography so we're going to expand the typography option out and we're going to change the font size and we're going to set this to be 75 we're going to change the weight on this to be something like 600 and it already stands out a lot better we're going to change the line height to be we're going to try one m which is basically the height of one of those letters in between we might need to tweak that if things go into two lines but we can adjust that as we need to a little later now once we've set that up we probably want to use this on other parts of the site so what we can do is instead of having to try to remember all the different settings we're configuring inside here underneath the typography option we can just simply click on create new global font click the plus and we're just going to give this main we'll just call this main banner header style there we go we'll create that so now that's something we can reference again and again and again okay so we've styled everything but we need to make a few changes because this is an archive we don't really know what the name of the archive is going to be because it can change based upon the type of recipes you're looking at so you know vegan vegetarian dinner those kinds of things so we can reference this information and use some dynamic tricks to do this and make it a little bit more cool so what we're going to do is we're going to just change a few things on here we don't want to put in the title manually we want to use the dynamic tags option and we're going to change this over and we're going to choose the option for page title so we're going to scroll through until we find page title and there we go there's our page title so we've got the first part done and you see nothing's coming up at the moment so we need to do is click on this little wrench icon and from there we can now configure how this is going to look so we'll say show home title now nothing is going to show up at the moment because we don't have any filters applied to this but what it'll do is it'll pull up the name of the actual section we're looking at in this example the recipe type we'll also come into the advanced section and underneath the advanced section we're going to put some text before and after so the before is going to be find your perfect then the dynamic data for example vegetarian vegan dinner those kinds of things and we'll put in after that we'll just put in after recipe and you could put a fallback if you wanted to but i'm gonna leave that as it is for now okay so that's that first part done now because we're seeing no actual data on here it makes it a little bit difficult to kind of figure out what's going on so we can deal with that side of things by just coming down to the bottom left hand corner into the little cog icon into the preview settings and what we can do is we can change that from there we can say we want to use this as a recipe archive hit apply and preview and that will just pull up you can see find your perfect healthy vegan deep pan pizza recipe so it's not quite right at the moment but don't worry about that because like i say this is just using the basic info at the moment okay so we're going to drop in something else underneath here now we're just going to grab another heading put that underneath and we're just going to adjust this we'll set this to like heading 5 center align it i'm going to drop in just a little bit of text so i'm going to say search our database for blah blah blah so now we can do is let's set this to heading 4 actually we can now tweak that text as well so we can come into the style we can say we want to put the text color we'll set that to be white and if you want to make any changes you can do that here as well so what i'm going to do is i'm going to come into this and i'm going to just reduce the opacity so it isn't quite so bright and in your face okay so this is our header section set up for our archive we're going to drop like i say a search inside there a little later but for now we're just going to leave that as it is so the next thing you want to do is go ahead and build out now the content of our archive page and again we're going to be using some jet engine features for this so the first thing we want to do is create the layout for this so we're going to set this to column and i have the search or filters on the left hand side and the content on the right hand side so let's just select this come in and we're going to add try 50 pixels above and below actually let's go a little bit higher then let's go for 100 let's push the boat out okay and we're going to adjust this left-hand column we're going to set that to example for 20 percent actually make this 25 just was a little bigger okay so now we've done that the next thing we need to do is go ahead and just put some information inside you so the first thing you want to do is just grab the listing to place inside here that will show us the different recipes for this particular section to do that we come back go to our widgets scroll right the way down and we're going to just grab the listing option the listing grid drag and drop that inside there it says please select a listing to show but we're going to select this and we're just going to just search for recipe and there's our recipe listing once you do that you can see that now pulls in some recipes for us pretty cool nothing too complex about that and now we can easily change this over to get the stand that we want so two columns is perfectly fine and you can see now they've picked up that styling we just set up doesn't matter which recipe you're looking at each one of those has all the styling setup laid out the way we configured it inside that listing template so pretty cool to see how this all works so now you can go ahead and you can fine-tune any of the values on here so we're going to do is we're going to say use this as an archive template yes we're going to set that to be true you can do things like lazy load so depending upon the number of items on the page you can select that we're going to say equal column height and then if you want to set anything up like your post queries and so on you can do that inside here but for this example we don't really need to set anything up because we're just creating the template so with that being done we're going to leave the left hand side for now because we don't actually have any filters to place inside this we'll come back and edit these once we get the filter set up we do want to put a title inside you so we're going to just grab this and we're going to say we're going to put in the archive title drop that for there and give it a second and you see that now pulls that up that will change based upon the different section we're currently looking at so that's perfectly fine that's just kind of like a placeholder for this and we're also going to do is we're going to just come in and we're going to grab this option for a divider drop that inside there and again we're just going to tweak this so we'll set this to about 20 left solid is fine i'm going to set this to 2 we're going to adjust our gap on there to be one and we're going to change our color to be primary like so so now we've created our archive page so pretty cool let's hit publish and now we can set up the parameters or the display conditions for where this is going to be used let's choose add condition we don't want to set it to all archives though we want to set this to be recipe archives so any recipe archive will display this custom template we're also going to create a second one expand that out and we're going to change this i'm going to say recipe type is equal to all so whether it's the recipe archive or the recipe type and any recipe type this is the template that will be used hit save and close and we've created our first of our templates okay so things are starting to take shape now so let's just have a quick check to see how this page template looks i've already gone ahead and copied the link over for this and this is where we are right now so there's our custom header and we'll look at the dinner section at the moment and you can see find your perfect dinner recipe so it's picking up that section recipe dinner and you can see these are all the the meals that are underneath the dinner section so things are looking good so far now we've gone ahead and built the archive page to list all our recipes we need to move on to creating the template for the recipe itself so let's do that next so let's come into single post and from there we're going to add a new single post and we're just going to call this default recipe single just so we know exactly where it is we'll create our template and as before we'll start with a completely blank layout so we can build this entire thing up from scratch okay so first thing we're going to do is just set the basic layout to do that we're just going to add in a simple two-column section like so and we're going to just put the spacing above and below so like we did before we're going to drop in 100 pixels above and below now obviously you could create this in any way you want i'm just going to show you how you can put the various different elements in and how i've styled it but you can get as creative as you want to here okay so the left hand side is where we're going to put the actual recipe and all the information about the the time it takes to cook the ingredients all those kinds of things on the right hand side for this example we're going to have two different sections we're going to have the nutritional information and the repeater we set up underneath that we're just going to put in what would be used as a sort of sign up to a mailing list or something it's only going to be fictitious so you could fill this out and use this as you want to i'll just show you briefly how to add things like that in then you can just go off and get as creative as you want okay so how do we go about building everything pretty straightforward let's just start adding in the different elements we need to come back over to the left hand side now you have the option if you want to you can use the normal single post title post excerpt and all those kinds of things that are part of elementor pro but if you're not using elementor pro or you want to just leverage some of the extra features that you get as part of jet engine then you can come down and you can start to use their own widgets so things like the dynamic fields dynamic image and so on so let's do that let's grab the dynamic field first of all drag and drop that inside there and that's going to pull in what it considers to be the right info now you see this says default recipe single well that's not what we want so let's come down to the settings under preview settings let's just change this and say we want to use recipe and we'll just choose a recipe it doesn't really matter which one let's just do the chili soup i think it's the chili soup so let's just do that there we go and we'll apply and preview and then that will update and show us the data that we want to see in this case the title so now we can go ahead and we can style that like we've done before so as we've seen we can change this over we'll set this to be h1 because it's going to be the primary thing on the page and there's the title for our individual item one other thing i want to do is just set the styling on this font so i'm going to come into the typography we're going to leave everything on there except for the fact i want to come in and set the transform to be uppercase oh sorry to be capitalized so it puts a capital letter at the beginning of each of the words i think it just looks a little bit nicer okay next up we're going to drop in some meta information so again we're going to come back out of our widgets grab the options we'll say dynamic meta drag and drop that underneath here and that pulls in the date this was posted who posted it and the number of comments so now we can enable disable whatever we want to do so i'm not too bothered about the comments because let's just say we're not using comments in this example so we'll disable that and now we can just tweak and fine-tune the date and the author so we expand that out we can change and add icons if you want to so we can just click on there and we could just search for something like i don't know a clock or something would choose that as an option to say when it was posted and we'll just also search for a little person for the author option so you can get as creative as you really want to on here so what we're going to do is we're going to search the icon library and we're going to just search for user and we'll grab this symbol insert that and now you can style that and we'll cover that in a moment we'll just get everything onto the page and then we'll deal with all the styling options and things okay so there's those things next up let's come back into our widgets and this time we're going to drop in the image so dynamic image drag and drop that onto our design there's our featured image post thumbnail perfectly fine you can set any styling all those kinds of things on here as well so moving on down the page next one we want to do again is just dynamic meta information or dynamic information again so dynamic field drag and drop that in change that this time and we want to use the option for the content so there's our content as you can see that drops all that information in there so that's the first part of this this is the first part of our template pretty much done the next section is just a little bit more complex in the way it's laid out but not any more complex in how to build it so she's just building various different elements together to create something that just looks a little bit more visually interesting and grabs all the information about the preparation time the cooking time and those kinds of things next on the agenda is we're going to grab an image and we're going to post the actual author's image up onto our layer so i'm going to drag and drop that inside there choose the dynamic tags option and from there we're going to scroll down and you've got the option for author profile picture or user profile picture we want the author profile picture i'm going to set that to the center and we're quickly just going to hop over and we're going to set some things up so the border radius we're going to set that to be 100 percent all the way around to make it a nice circle we'll put a border on that and we'll just specify something like i don't know we'll just change that to let's just try something like four pixels and we'll set our color to be our primary color that looks pretty good okay so that's that side of things done next we want to put in the information about the preparation time and those kinds of things so it's time to hit up our widgets and this time we're going to grab an intersection and drop that below our image we're going to set this to be just one column so we're going to delete that second column and what we're going to do is just make sure everything looks good we're going to set this to have no gap so just select this intersection column gap no gap we're going to set the background on this to be our background color of our primary and there we go so now we're just going to drop a couple of elements inside here just to make things look pretty cool okay first things first let's just grab some dynamic content and we're going to grab this dynamic field drag and drop that inside there and we're just going to make sure everything looks good so first thing we're going to do is choose what goes in there so we're going to change this to metadata because we're going to grab some of our custom metadata from our custom post type and from there we're going to grab the option for preparation time to grab that you can see that now just puts the value now you probably can't see it very well so let's just change the styling on this set the color of this to be white so we can see what's going on and while we're at it we'll set the typography to be our text and we'll also just quickly tweak this and set this to be italic okay that's pretty good and finally we'll set that to be centered okay so it doesn't make a lot of sense because what does 15 even relate to so we can change that by coming back to our content scroll down customize field output and this is why it does make sense to use the jet engine widgets because they just give us more control so we're going to do is going to call this prep time colon and the space and then afterwards we're just going to put in mins so now there's our preparation time we can duplicate that and we'll just change that preparation time and we'll change the value and this is going to be cooking time and we'll do the same thing again change the prep time and the field format and just call this cooking time okay so that's those sections done we're going to drag and drop in a separator so we're going to drag this divider in between the two if i can get it in the section in the middle okay so that doesn't work very well so like i say this sometimes it just gets a bit finicky and it's where the navigator can kind of come in really handy so let's just take advantage of that as you can see it didn't drop that in there so we're going to do is we're going to come back over and we'll do the same thing again drag the divider over drop that somewhere in there there we go gone in this time okay with that in place let's just configure that we'll set that to be something like say 65 percent centered solid is perfectly fine and we're just going to quickly tweak the values inside here let's set this to white we're going to set the weight to adjust the gap there's next to nothing there like so and we're going to adjust the opacity of this so it's a little less evident and more of a subtle line inside there okay so that's that side of things done the next thing i want to do is just give this a little bit of spacing around it because it all looks just a little bit squashed up so let's just select this section i'm going to come into advanced and we're going to just put 25 pixels of pad in all around it so that already looks better but our image at the top is just kind of floating there so how can we deal with that side of things well what i want to do is i want to make this kind of look like it's overlapping onto this section here so let's do that the simplest way to deal with this is to work with some negative margins so we're going to do is make sure the inner section is selected and from there we're going to come to our advanced section unlink these two and we're going to set the top margin to around about minus 70. and you see that puts it into the right position but as we can see the image itself is now sitting underneath so we need to rectify that so select the image all we're going to do is we're going to hop over to advanced and inside there we can use the z index to control exactly how this is all going to display so we just need to set a higher value than what is being used for this in a section so i'm just going to come in and just set something like 99 that'll do does it really matter because we're not using it much anyway now you see what that does is it positions everything right but obviously we need to put some more space at the top of this section to push everything down otherwise it all looks a bit squashed up and a bit silly so let's rectify that we're going to grab this dynamic field in this column actually the i'll be fine we can do is we can grab the other section actually all we can do is we can change the margin so as the pattern on here so we're going to change this we're going to unlink them and on the top we're going to add in some extra padding so we're going to just say let's try 50. that looks okay let's try 60 see what that looks a bit better that looks better and i'm just going to quickly just adjust the values on these just to make sure everything just sits a little bit better so on this line we're going to just close that gap up a little bit more and do the same kind of thing a little bit of negative margin on the top say minus 20 that looks better under the same on this section so i'm going to do the same thing and link those try minus 20. actually let's go for minus let's try 30. that looks better okay so now things look a little bit better a little bit neater all lined up and we've got this sort of overlapping effects that looks pretty cool so next you want to do now is add the description the ingredients in the instruction section below this so we do the same thing again come back over i'm going to grab it in a section drop that underneath so say if it doesn't go where you want it to go which it doesn't as you can see a lot of the time we can just position it wherever we want and then we use the navigator to position things we'll close this intersection down and we'll drag that underneath that intersection and see that's now positioned where we want it to be let's delete that second column so we're just going to delete that and we're going to do like we did before we're going to select this entire section and we're going to set our column gap to be no gap so now we've dealt with that what i'll do now is just put an outline around this that kind of mimics the color that we have above it to kind of box all this off to do that we're just going to make sure this section is selected come over to our style and into border and from there we can now configure exactly how this is going to look so we're going to do is just set up all the values that we need to do that we're just going to set the border type to be solid we're going to change the color then to our primary color and we need to do now is just unlink these options and we're going to set 0 for the top we don't need one there we set 5 pixels for everything else so we now get this boxed section and that's what we're going to drop in the various different parts of our recipe so we'll do is we come back over up to our widgets gonna come down and we're gonna select the option for dynamic field drop that inside there and we can just configure this so we're gonna say this is gonna be metadata to change this going to be description and what we're going to do is we're going to put a bit of spacing around that just so it looks a lot nicer and neater easiest way to deal with that is make sure we've got this entire section selected and we're going to do is we're going to just put 25 pixels of padding all around it there we go that looks much better let's grab a heading and drop that above there and we're just going to call this description otherwise we have no idea what any of these blocks of information are all about we'll set that to something like let's try h4 maybe h5 yeah that looks pretty good and we're going to do is we're going to tweak that a little bit text color is perfectly fine we're just going to change the typography to be primary and we're just going to make sure that this is style just a little heavier so we're going to say we want this to be let's try 600 i'm going to say this is going to be uppercase that looks pretty good okay we need to do now is just grab another divider drop that into place and we're just going to tweak that like we've done before we'll leave that at 100 that's perfectly fine close the gap up change the color primary color and we're going to do is just lower the opacity on that and set that to be two okay that looks pretty good so now we can just literally go ahead and duplicate all these different elements then just change the values so we'll do the first of all we'll just duplicate this heading section we'll drag that underneath as you can see again it's a little bit finicky i mean gotta be honest elementor can make this a bit more difficult for us than it need be we're gonna change this to description uh sorry two ingredients and we'll just duplicate this and drag it down on the navigator because it's just so much easier we'll select that we'll change the metadata from description and choose ingredients and then we'll do the same again so we're just going to duplicate the divider we'll drag that duplicate down in the navigator we'll duplicate the ingredients and we'll drag that down in the navigator because again it's just easier and you can duplicate from over this side to be honest this dynamic field we can right click we can duplicate and we can just drag that down so there's various ways you can achieve the same end results so we just need to now change this title this is going to be instructions and finally we need to change the metadata inside here and we change that for instructions as well okay so there's our basic information everything is laid out the way that we want so that's the first main part of this done let's just publish this just to make sure we save it so we'll hit publish we'll add our condition and we're going to say is this all singular no we just want this to be for the recipes so we'll hit recipe all is perfectly fine hit save and close and that's the first part of this done we now need to put the repeater in the top right hand side so to do that is quite straightforward first i'm going to do is just grab a title so we're just going to come back over grab a heading drop that inside there so people can know exactly what's going on we'll set this to something like h5 and we'll change that to nutritional information okay so that's that inside there so the next we're going to do is insert our custom listing so like before we're going to search for listing we'll drag our listing grid inside there and drop that in there so again we've got a search for this so let's just type in nutrition there's our repeater drag and drop that inside there obviously it looks a little bit rubbish right now but that's because we just need to set the columns to be one and then everything is now a display in the way that we wanted to at the moment though we are missing one thing we don't know what this percentage relates to so ideally we need to put some kind of legend the easiest way of doing that in this example is going to be just to insert an intersection between the title and the actual information below we'll just select that and we'll just set this to have no column gap and we'll just get rid of the second column and we just have it like so and then we're going to do is we're just going to drop in some text so i'm just going to grab this we'll drop in just text editor drop that inside there we'll just set this to be percentage of daily allowance okay so that's set up we just need to go into styling we'll align this to the right hand side we'll set the text color and we'll set this to be the secondary color and we're going to do is we're going to set the typography and everything as well so typography we're going to set this to be secondary we're going to tweak this to make it quite small so we'll say it's like 12 and we're going to set the weight of this to be a little heavier maybe even go a little smaller maybe something like that that looks pretty good and if you want to adjust the spacing and things on there we can do that so we can add just a little bit of padding at the bottom of that so we'll uncheck the padding option and at the bottom we'll just say 10 pixels of padding for example okay so that's our information inserted in from our dynamic repeater and everything is basically set up now for our template if we want to add in this extra little section that i said about like to sort of sign up we'll take a look at doing that next but you don't really need to do this you can skip this bit if you want to and you're more interested in moving on to the next section okay so all we need to do is we're going to come over we're going to do another inner section drag and drop that over to the right hand side delete one of those columns so we'll just delete that from there and we're just going to use this now to create a sort of sign up section so it doesn't really matter too much we're going to select this make sure that we've got the column gap set to no gap and we can just drop in an image so we'll come back over grab an image drop that inside there and choose an image so we'll just grab this image of a burger doesn't really matter too much it's more how you do it than anything else and then we're just going to grab the form element drop that underneath there and we'll just select the entire thing go to style set a background color of white just to make sure that there might be a difference between the two and then we're going to go to border and we're just going to put a really slight drop shadow so but the same as before but 17 i'm gonna adjust this right the way down so it's quite subtle okay so now we've done that we're going to select the form and we're just going to quickly style that so we're going to take off those labels we're going to get rid of the message and what we're going to do is we're just going to add a little bit of spacing around that so we'll put some like 25 pixels of padding that'll do that looks pretty good and we're going to change the button so like we've done before we're just going to come to our buttons we're going to change our background color we're going to set that to burgundy even though it's already done text color we're going to set to white and we're going to do is we're going to come to the typography we'll set that to be secondary and we'll just adjust that as well we'll make it a little heavier and we're also going to transform that to uppercase and we're going to change that from the word send to make it a little bit more logical and change that to subscribe once i find the button there we go okay so you could fill that form out make it all set up the way that you want the only other thing i would probably do on here right now would be the fields and we're going to say the border color is going to be this light color we're going to just change that to make it considerably lighter i'm going to put border radius of 0 in and that looks pretty good to be honest we'll just leave it as it is there that looks okay we'll just select this entire section and we'll drop a little bit of spacing at the top put about a 50 pixel margin just to get some separation actually pretty let's make that 30. okay so now we've got that separated from this close the navigator down we can see what we're working with now what i'm going to do is just select this entire section we're going to go to layout we're going to adjust the column gap and make it something like wide just to give us a little bit more breathing space between the left and the right hand columns but other than that that's all done all done and dusted so we'll hit update on there and now we're going to go ahead and test this out just to make sure it all works the way we expect it to okay so let's test it out we're on one of our archives pages and let's take a look at the healthy vegan pizza click and you can see there's our nutritional information all the details there's our little sign up there's all the layouts the information the cooking time and so on description ingredients instructions all those things that we wanted included all set up working for us so the archive page is set up we've got the individual single post page setup let's move on to the next item in our list things are definitely starting to shape up and that leads us on to the most important page our entire website the home page so let's start designing that to tempt our site visitors to look just a little bit deeper so we're going to come into pages and we're going to add a new page in we're just going to call this home page and we'll just simply hit publish on there so now we're going to edit this with elementor and start building what we need so the first thing you want to do is get rid of this title so we're just going to select the little cog icon for the settings hide title and we are pretty much good to go next thing i want to do is just add in a single row column section we're going to put our hero image at the top which is going to include just a little bit of a sort of call to action and also a nice big search bar that we're going to add in a little later so we're going to select this we're going to come over to our height and we're going to say minimum height i'm going to set this to something like let's just say we'll try 600. we're going to come into our styles and we're going to go into our background choose an image and from there we're going to grab that burger image again and we'll select that and we're going to kind of do the same thing as we did before so bottom right attachment is fine repeat no repeat and we're going to set the size to be cover then we're going to drop into the background overlay set that color to be black from our predefined global colors and leave the opacity at five or point five so there's our section so the next thing you wanna do is drag and drop in our title now let's drag our title inside there drop that in there now if you remember we saved the styling that we used when we created that archive template so we're going to use that on here so the moment we've got this selected so we're going to come over and we're going to go into style on the typography we're going to click on the global option and then we're going to grab our main banner going to select that and you can see that's now pulled in the styling and everything so all we need to do is set the color set the alignment and we're done other than we need to put our own message in there but you get where i'm coming from so we're going to do is we're going to just put in something that makes more sense which is find your perfect recipe next up we're going to just grab and put in a subsection which tells people exactly what to do so we're going to grab that drop that underneath we're just going to paste in a little block of text we're going to align this and we're just going to configure a few things on here as well so the size i'm going to change that to be global white again typography we're going to set that to be primary so it knows it make sure it picks up the right styling and we're just going to make this just a little bit more transparent so on the color we're just going to drop that down a little bit just so it doesn't fight for your attention alongside the actual main heading like i said we'll come back in a little bit once we set the search up and we'll add that to our archive on our homepage but for now we're going to leave that there so that's our heading section all done let's just hit update to make sure we save those changes and next up we're going to come in and we're going to add in another two column section like we've done before i'm going to give this a bit of space we're going to give this a 100 top and bottom to give us a lot of nice white space gonna grab a heading to drop into the right hand side and we're also gonna grab another one of our little separator lines so let's just grab that our divider drop that inside there quickly style that up solid is fine all the usual things primary color set this to two get rid of any gap there we go and we'll fine tune that a little late let's actually make this a bit smaller let's make it like 20 just to make it look a little cooler there we go okay so that's the first part of it done next thing i want to do is drop in another listing so we're going to do the same thing again we're going to search for our listing grid drag and drop that into our design underneath our line and you can see it says again please select the listing to show so we're going to grab the listing and we're just going to do a search for recipe and we're going to use that same recipe listing we used before so this is the beauty of this we're not having to create another one because the layout is exactly the same set that to 2 wide this time and we're going to just grab this first column we're going to set that to be 25 and we're already looking pretty good okay so next thing i want to do is just change our heading and we're going to drop in something a little bit more in keeping to the kind of content that we're working with so let's just set that to be our latest tasty recipes i'm going to set that h2 is perfectly fine but let's just make it a little bit heavier weight so let's just say you want that to be 600 that looks pretty good so i like the look of all that okay so i'm liking the look of everything so far and we've got all the things that we need inside here now obviously if we want to fine-tune and tweak the way that this actual listing shows up we have lots of options like post queries term queries user queries and so on so we could if we wanted to easily come in here and start filtering this so we could create a taxonomy or tags or something like that that says this is a featured or something like that and then you could easily just use those post queries to filter out to just show those kinds of things now while we're on the subject of slightly more advanced ways of working if you'd like to see me take this tutorial to another level where we take a look at doing some of these more advanced things such as for example the ability to be able to upload your own posts from the front end so you could have contributors that would have access they could log in they could add their own posting and then you as an administrator would confirm that once you've received an email let me know in the comment section below the kinds of things you'd like to see and i'll take a look if enough people are interested in creating taking this to another level making it more comprehensive again but like i say for now we're going to just do the fundamental things we need to do to get this looking good okay so that's those side of things done we're going to leave all the filtering and everything out of it for now and we're going to tweak anything on here so like equal columns for example if you want to use that lazy loading random posts and so on up to you how you want to do it six posts in this example is perfectly fine so without being said we're going to simply hit update on here and that's our homepage pretty much done all we need to do now is go over into our settings and set this as our home page so we're going to come over into the settings we're going to come into reading and from there we're going to say we want to use a static page for our homepage and all that's left to do is change the home page to use our homepage there we go hit save changes and we are done so now if we come over and make sure we're on the homepage you can see there's our custom home page we've just created so all looking good if we click on one of these recipes we'll go into our single post template all looking pretty good now we've built the key pages for our site let's help our visitors find the perfect recipe from our collection by adding in some easy to use filters and a nice site search next so to do that we're going to come back into our dashboard and we're going to come down into smart filters and we're going to just go into the settings first of all just to make sure everything is configured the way that we want it to be now if you've never come into the settings there are quite a few useful options inside you when you're creating filters you can pick and choose from quite a lot of different sources for the filters or the way the filters interact with various different templates and page files we don't always use all of them so for example you can see jetblue products i'm not using woocommerce so i don't want to see those i'm going to uncheck anything to do with jet products i'm going to get rid of the jet engine calendar because i'm not using those so i'll just leave jet engine and anything to do with elementor just in case i want to use that in the future we hop over to the index settings you can see we can choose to use indexed filters which basically means it'll index the various amounts of content which should ultimately help speed up the filtering on larger sites so we'll enable that and i'm going to say because this is primarily just going to use recipes i only want to use the index filtering on the recipe's post type and then you've got the url settings structure so this is a new feature in the latest version of jet engine it allows you to change from having plain url links to a permalink which basically means you have a much nicer pretty link if you want to share a filtered or searched page with someone else so again we're just going to set this to be for the recipe side of things and that's the settings that's what we want to do no save on here because it's dynamically saved whenever you make a change okay so let's go back to the smart filters and let's take a look now at creating the first one so the first thing we're going to do is set up our search now you can see we've also got index filters at the top which you wouldn't have if you didn't enable that option and we'll just go back to that a little later once we've created some filters so let's add our first filter in and we're going to just call this recipe search just because that's exactly what we're going to do so recipe search i'll copy that from there and we're just going to paste that into the next two options for the filter label and the active filter label then the filter type we're going to change this over to be the option for search now you'll only see this if you have jet search install installed so if you only have jet smart filters you won't see this option inside you the placeholder is what we're going to see inside the search field so we're going to say search recipe and you can see it says default wordpress search that's perfectly fine we're going to leave that as it is that's all we really need to do to create a search so we'll publish that and we've now created our search so we're going to do is going to come back at this and we're just going to hit index let that index and the filters and now we can go ahead and insert the search into our templates so let's come into our template section into our theme builder and from there we're going to come into our default recipe archive we'll edit that and now we can drop in the search so let's just filter our widgets out and let's just type in search and what we want is the search filter which is the jet engine one and like i say you can always tell the jet engine ones they have the little sort of green icons they colored they just look a little different although it would still be nice to have the little croco block c in the corner just to make life a little easier let's drag that onto our header section and you can see that just pulls in a placeholder so first thing we need to do is select the actual search filter we just created so we'll just do recipe search there we go we say this filter is full what are we going to use to search against because this is a jet engine custom field or custom post type we need to change that and choose jet engine once you do that you can see that now sets everything up inside there so if you want to change this between ajax ajax on typing page reload or mixed for the the kind of apply method it's up to you i like the ajax option but some people prefer to have the actual search button you click on to complete the whole process okay so we're gonna change the apply filter we're going to actually delete that from there and we're going to search for an icon so we're just going to do a search for search which is a little bit better okay so that's that side of things done now we can style this out so we head over to style we're going to hit the option to have line so it'll line everything up now you see there's a little bit of a discrepancy here but we just need to kind of fine tune and finesse this to get it where we want it to be so first thing i want to do is we're going to set contents to be at the bottom like so and then we can just fine-tune the sort of margins and the padding and the various different parts of each of the input and the button just to get what we need so let's go to the input first of all inside here we're going to just set up a few things so first of all we're going to set the padding so we're going to set 15 pixels of padding all the way around gives a nice big search box we're going to set the option for border type this is kind of a weird thing you can't actually change things even though it'll show a border so we're going to say we're going to choose a border of solid and we're going to just set the border width to be 0. so we kind of say there's a border but we're going to disable it by having a zero value border radius we're going to set that to zero on there as well so that's the first part of it then now we just need to deal with the button to make that fall in line as well so again same thing choose the button this time we're going to set some styling so we're going to set the text color to be white we're going to choose the background color to be our primary purple color and we're going to set the border radius to be 0 the border type again solid we're going to set the border to be zero and we're going to set the padding to be 15. and as you can see that doesn't quite work out so we might need to tweak this a little bit just to make sure everything works the way we want so let's uncheck those values and link them we're going to do is we're going to just change the top and bottom so we'll just bring those down until things start to line up that should look about right and we should be pretty much golden on this we'll update that and that's our search so we can do now we don't duplicate this again is we're going to select it right click and choose copy and we're going to come out of this we're going to go to our home page and we're literally just going to paste the same thing in this we're going to go back to our dashboard going to go to our pages all pages open up our homepage with elementor and then we're just going to simply paste that into the header section so right click choose paste and there's our search function in our header hit update and that's that side of things sorted before we move on and do our filters let's just check that our search is all working so we're on our homepage you can see there's all our recipes currently and let's just do something like type in pizza hit enter and there's our pizza and nothing else so come back up we'll clear that search from there and we'll just enter and there's all our values back so our search is all working the way we expect it to so now we can go ahead and start creating our filters so let's go ahead and add another filter in so add a new smart filter this time we're going to call this recipe category filter and this is where we're going to search against our recipe types that we created which if you remember right the way back to beginning the video was our custom taxonomy which is there so we're going to do is we're going to use that so we're going to just say this is going to be the recipe category remove the word filter from those two just to keep it a little bit shorter and the filter type we're going to change this now to be a checkbox list because that's the easiest way to be able to filter out based upon the actual categories that we're using select our data source we're going to choose taxonomy because that's what we've created but you do have other options like manual input you could manually create the entries posts custom fields and so on taxonomies works perfectly for this example we don't want categories though for the taxonomy you want to change that for our recipe type which is the custom taxonomy we set up then you've got the relational operator in other words how do you want things to work do you want it to be union or intersection which just basically means do you want them to be if you select more than one entry do they add them together in other words you search or you filter for vegan and vegetarian or do you want the one to be exclusive over the other that's all it really kind of means now you can check anything else on here if you want to we don't need to we're just going to leave everything as it is and hit publish once you've done that we're going to come back out of here and we're going to add another filter in so next filter we want to put in is going to be our calories per serving so it allows us to filter based upon the calories so let's put the title inside there we'll drop the same in for the filter label and the active label this time though we're going to choose the option for range now range allows us to create a really nice simple slider range that allows a nice visual easy way to interact with the values that you might want to set okay so now where do we get this information from so you can see range is the filter type then we've got all these different boxes underneath of which we're going to leave everything as it is except for the very last one which is the get min max dynamically i'm going to say get from query meta key select that from there and then we're just going to simply use the query variable and the query variable in this example is going to be the name of the meta field that contains the values for the calories per serving have i lost you yet don't worry i'm going to explain exactly what i mean let's hop back over into our custom post type and let's take a look at all the different options we have and there's our calories per serving let's expand that out this is what we're searching or we're filtering against so we simply want to grab that value from there for the name and id head back over and we're simply going to drop that value inside there paste that inside there and that's it that's all we're going to do so all we're saying is that we're going to use a range slider we're going to get the values for the amount of calories and so on from the totals that we have as all of our records and we're going to query it against the calories per serving which is the meta field we set up previously i hope that makes sense it can get a bit confusing but the logic is pretty straightforward behind it i think we hit publish on there we're going to add one more filter in just to make life a little bit more complex for ourselves and this time it's going to be the cooking time so we're going to do is we're just going to add a new item in and we'll just select cooking time cooking time cooking time we're just going to add in mins at the end of that so it makes a little bit more sense i'm going to do the same thing again so this is going to be range again if you want to have a nice simple slider we're not going to set any values inside there we're going to say get the values from the query meta key and we're going to hop back over and we're going to grab the relevant key for this which is the cooking time so we expand that out there's our name id for the cooking time meta field copy that and simply paste that inside there come back up hit publish and we're done so that's how we create those filters now we just need to put those filters into our template into our home page test everything out make sure it all works so there's our three filters added to our search we're now ready to go ahead and include these into our design so what we're going to do is we're going to go over and work on the home page first because that's going to have actually slightly more filters inserted on it than the archive page is going to use so let's just head over to our pages and we're going to open up our home page we'll edit that with elementor like before and we're going to do is we're going to start building things out on the left hand side so this is where we're going to drop in all our filters so we're going to do like we've done before we're going to drag and drop a heading inside there i'm going to copy this line and duplicate that and we're going to just put that underneath there as well and we're going to just select this and we're going to set this to be a slightly smaller like a h4 for example and just to make things a little bit easier we're also going to drop this down a little bit so let's select this section and we're going to put some margins inside there i'm going to try about a hundred that looks pretty good that kind of brings it roughly in line with this section so it just looks a little bit nicer i'm going to change this now to filter recipes okay so that's put that inside this and now we can drop the filters in let's come back over and we're going to just do a search for the option that we want which in this example is going to be the checkbox filter drag and drop that where we want it in our stacking again you can see it's a bit of a finicky thing so let's just open up the navigator and we'll drop that down underneath the divider which is a bit of a pain but not the end of the world so next we're going to do now is go ahead and choose what filter is we want to use for this example it's the recipe categories so we're going to just type in recipe and there's our recipe category filter and there's all of our different light entries so our breakfast dessert dinner and so on everything we need inside there so we got some options now how we want to work with this first of all this filter is full again we just need to set this to work with jet engine so it knows the data that it's going to filter against is jet engine created data okay so now we can have a little bit of fun just making sure everything looks good the way we want it to the first thing i want to do is pull up the filter label so people know what they're filtering we'll choose that option and there we go there's our filter option you've got some additional settings if you want to search enabled more or less enable drop down enable scroll enabled i'm gonna leave all those as they are i don't really need to change anything on there so we're gonna do is we're gonna hop over to the style section and from there we can now just make sure everything looks pretty cool so space between we're going to adjust that we're going to tighten that up a little bit to about five looks pretty good and we're going to change the way the check box looks because i don't really like that at the moment i won't be square a little bit more in keeping with what we've got our design so we're going to just change a few things border type we're going to set that to be solid we're going to set the width on here to be two pixels and we're going to just change the color to be our purple primary color and then our border radius we're going to set to be a percentage and 100 on all sides so we now get a nice circle which looks pretty cool and we're just going to adjust the opacity on this just to make it a little less in your face next up we want to change the label where it says recipe category so we're going to come down and we're going to go into the label option and from there we're just going to tweak a few things so we're going to just adjust this we're going to make it just a little heavier like so i'm going to change our color to be the purple color i'm also going to add a little bit of padding or margin at the bottom of that so we've got a padding and the bottom we'll just add we'll try 10. that looks good i like the look of that i might want to change the size just a little bit as well bump that up a little bit maybe 18 looks pretty good maybe a bit too big let's go for something like actually 18 looks pretty good okay so that now is the first of our filters looks pretty cool let's add our next filter in so we're going to do a search for range i'm going to drag and drop our range filter in there and as before we just need to start searching for this so we're going to just do calories calories per serving you can see that pulls everything up so we're going to do now we're going to close this down on the right hand side to give a bit more room to work with and we can start to fine tune and configure this now as well first things first let's just say we want to show that filter label so people know exactly what's going on select our filter to be jet engine so it knows what to search against and let's just hop over into the style section and start configuring this first you want to do set the color change that to our primary color and that will allow us to change the line as it's being manipulated we can also come down to the background color and do the same on this we're going to select that set primary on there you see that puts the dots into the purple color so again it just means that we can see what's going on makes a bit more sense and we can now change things like the label and so on as hot to the label let's just change the typography to be text and we're going to just come into there we're going to set that to be 18 as well like we did with the last one 600 and we'll just quickly adjust the actual color to make that the purple we then link the values on there for the value section and we're going to just set 10 pixels at the top so it gives us a bit of space on there okay so that's the first one let's just duplicate that so we don't have to go through the process of styling everything again we'll select that we're going to change that from calories per serving and we're going to set this to be cooking time type search in for cooking there's our cooking time and everything else is now being set up for us styling everything i will put a little bit of extra space above this just to separate these out so we're going to just come in a bit of margin we'll try something like 10 on there that's good and i'll also put a little bit of space on the right hand side so we're going to say 10 on the right and we'll do the same above we'll just go with the margins and we'll put 10 on the right there as well just to give us a bit of breathing space down the right hand side we'll hit update on there and that's all our filters set up alongside our search for our home page now to make our lives even easier we're just going to select this column and right click we're going to copy it and we're going to then go over and just put that and edit that in our template for our archives let's exit to our dashboard exit right the way back into our templates into our theme builder from there we're going to open up the default archive with elementor once that's done we're going to simply drop that into our template so we're going to right click we're just going to say paste and then we're going to get rid of this version of it so we'll just delete that from there and we'll just set this to be 25 and there's our filters so the first thing i want to do is just remove this recipe category because it doesn't make sense when we're searching into a category itself so we'll just update that and we are pretty much done that's the filter side of things all sorted so what we have to do now is test this out so this is our homepage let's come down to our filters let's just say let's go for lunch so there's just the lunch items you can see there's four out of the six and we want to limit our calories on a diet this week so let's just drop that down like that 268 and there we go there's just our pizza so under lunch in under 168 calories we've got a slice of pizza pretty cool okay let's finish things up by adding all our recipe categories to our menu to let visitors delve into the goodies on offer so let's just do that by simply coming back into our dashboard we're going to go into appearance and into menus and from there we're just going to simply add this in so we're going to add recipes we're going to add a new item so we're going to add a custom field in custom link and we're just going to put in recipes which is the name of our custom post type so if you scroll back up or recipe i should say there's our recipe so we just need to make sure that's exactly what we have inside here and we'll put link text recipes we'll add that inside there and now we can do is we can commit the recipe types and we're gonna say we're gonna add all of these select them all add them to our menu and we're just gonna simply put those all underneath her recipes section save menu i'm to go back to our site refresh this and there's our new section new menu we can come in we can choose recipes and that'll show us all of our recipes or we can come in and we can say dinner for example and that will show us just our dinner recipes as you can see the title at the top changes to show dinner or if we come in and say let's try something like i don't know let's go for vegetarian you'll find your perfect vegetarian recipe and there we go there's our vegetarian recipe and we can adjust things based upon our filters there are so many ways in which we can expand on the skills you've learned in this video and if you'd like me to create a second part where we explore adding the ability for visitors to submit recipes and so much more let me know in the comment section below now as always all the applicable links are in the description and if you've made it this far to the video well why not give that thumbs up button a click it really does help me out if you enjoyed the video though also why not consider hitting that subscribe button and slap in the bell icon but if you didn't enjoy the video or find value in it or feel free to hit the thumbs down button twice as that works pretty well too my name is paul c this is wp tets and until next time take care

Channel: WPTuts

Views: 33,428

Rating: 4.9578452 out of 5

Keywords: WPTuts, crocoblock, crocoblock jet engine, real estate website, dynamic website, dynamic web page, dynamic website with elementor, dynamic website crocoblock, jet engine, listing website wordpress, listing website, directory listing website, how to create listing website in wordpress, wordpress website, create a website, how to make a directory website

Id: g9CsDwAIVZo

Length: 109min 22sec (6562 seconds)

Published: Sun Mar 07 2021