Beginners Guide to Dynamic Content Elementor Pro & Meta Box

so what exactly is metabox in its simplest terms metabox is a wordpress plugin that offers a relatively easy way of creating custom post types adding meta fields and then you can apply these either to existing post types or to your custom ones as well as a whole host of other options now some of these options are built into the core plugin and others can be added through a collection of add-ons now while you can use metabox a standalone option to add all manner of powerful and useful features to an existing wordpress website it also integrates with many popular page builders in this video we'll be focusing on using it with elementor pro and combining that with metabox to see how to get up and running with some of the key features that are offered now this video is squarely aimed at the new users of metabox and new uses of dynamic data inside tools like metabox and elementor pro now before i kick things off it is worth noting that at the time i've recorded this video which is april 2021 metabox is running a special lifetime deal over on appsumo now links to this are in the description below if you'd like to grab this lifetime deal and get started okay so let's just get the ball rolling and take a look at how everything has to work okay so let's start off by taking a look at the most important thing which is the tools we're going to be using for today's tutorial obviously we need to have metabox installed so we've got metabox which is the free plugin and then we've got metabox core which is the kind of core extension package which is where we can have access to the extra features if and when you want to use them next up we've got elementor pro because we need to have access to the dynamic data so we have that installed elementor or six we need that elementor custom skin now this is just an extra step i'm going to show you you don't have to use this just gives you the ability to be able to create your custom loop listing layouts i'll show you that and if you want to learn more about elementor custom skin or ellie custom skin then you can check out the dedicated tutorial on that i'll put a link in the description below so if you want to check it out take a look for an appearance point of view we just got a simple install of the hello theme which is the elementor theme which is basically just a blank theme that allows us to have a lot more control over how things are set up okay so with that being said what exactly do we need to do first of all well let's go and hop into the metabox section and take a look at what we have inside there to get you kind of up to speed with the plug-in itself before we move on and start building things okay so this is kind of like the overview that tells you you know getting started linked to the online generator if you wanted to use that post and taxonomies some information on how to get started with those it's kind of a good starting point the extensions this is where you can see the different extensions you can have now depending upon what plan you have you will have less or more of these options available to you and these are kind of like integral plug-ins that are part of the meta box tool set that expands what you can do and the nice thing i like about this is it's very modular so if you don't need to use things like conditional logic or setting pages and things you don't need to install them you can just ignore those and then cut down on the overhead of setting things up and using everything so you can see there's quite a lot inside you if you want to view all of the extensions you can hop over and take a look at all of those there's a range of different free ones available to you which are quite useful now you'll notice that part of this is we've got free extensions for things like elementor beaver builder and so on so we've got direct integration into these tools if we want to use it we will be using the elemental integrator and i'll explain that in a little bit when we move into elementor okay so that's kind of an overview then if you want to check these out you don't have to come back to the dashboard you can simply come down to the extensions option in the bottom left hand side and this is going to show you what you have access to like i say it depends upon the actual setup the license you have and all those kinds of things and if you bought this from appsumo the single license entry will give you everything you can see on screen but you are going to need to go up to tier 2 i believe to get access to things like the meta box views blocks custom table and so on so take a look at those in a different video if you're interested in those kinds of things so you can see everything we have inside here we can filter these down in the same way as you can do on the front end of the site and as you can see the elementor integrator is already connected up inside here so we can click on that if we want to and you'll see that'll take us over give us more information about it we can download it from you it'll tell us how to use it all those kinds of useful things the other thing that i do like about the way that metabox is set up is when you activate or deactivate any of these different sort of add-ons they don't show up inside your plug-in section of wordpress which means that it really does streamline what you see and what you don't see so if you want to enable or disable anything inside you you can simply just check on it and that'll remove it and you can see we get little warning notifications on some of these extensions to say that we need to have a particular feature installed to be able to get access to it for example in this case if we were using beaver fema we need to have that installed otherwise we can't activate this you can see it's unavailable to us same goes for the fastest wp integrator and yoast seo so that's how we can use those things and if we want to disable anything we just uncheck it and simply hit the save option at the bottom i'm going to leave everything inside there because this is pretty much what you're going to see when you install metabox okay so what do we have down the left-hand side things are broken down into how you probably expect them if you're used to working with most tools inside wordpress especially when it comes to working with meta fields you've got things like post types taxonomies custom fields relationships if you've got the option selected again settings pages if you've got the option selected templates extension and your license details so what we're going to do is we're going to go through a typical simple project i'm going to hop into post types first of all and this is where we can create our custom post time so the first you want to do is create a new post time so we're going to say add new and from there we've got basically five different options now if you're coming from a background of working with advanced custom fields you'll know that a lot of what we're going to do we'll combine multiple different tools for example custom post type ui acf those kinds of things in this example we basically have all of those built directly into metabox which makes it a one-stop solution if you come from pods however this probably feels a lot more familiar so what do we have your general your labels your advanced your support your taxonomies so we're going to go through and create something so the first thing you want to do we're just going to call this properties this is the plural version single enable property and you see the slug is automatically generated now if you don't want to use that you can change that to whatever you want just make sure you separate any spaces with either an underscore or a dash next on our list we've got the labels option and this is where you can change any of the labels that are used inside the dashboard of wordpress again if you're coming from the something like custom post type ui all this is going to feel familiar same goes for jet engine same goes for pods if you want to change these you can do but you can leave the defaults if you want to as well which is what we're going to do hop into advanced and this is where we can control various different aspects of how this displays in the dashboard how it displays inside the database those kinds of useful things want to drop in a description you can do that at the top want to make this public again you can do that at the top so what do we have hierarchical do you want to use a hierarchy inside your custom post type do you want to exclude this from your search all these kinds of things should be self-explanatory i don't need to go through all of these because in all honesty i can say most of them are pretty self-explanatory what we're going to do though is take a look at the menu position after we can position where we want this inside our dashboard on the left-hand side which is pretty cool to see we leave that as it is there we can choose the icon we want to use so we're going to use this house icon because we're going to deal with properties and then we can choose what capability type do we want this to act like a post do we want to have it act like a page or do we want to have it customized we're going to leave it as post because it is simply a custom post type now this is an important one has archive a lot of people find a problem when they're working with dynamic content and using tools like acf and metabox and so on that when they come to create the template the archive inside elementor pro there's no option to associate that with the cut the sort of conditions and the reason being is this probably isn't checked so make sure this is always checked if you want to have a custom archive that you can set up and build through something like elementor pro that is inside there so that's cool we can change the custom archive slug if we want to we can also have a custom rewrite slug all these things are entirely up to you if you want to change them and the same goes for things like your permalink structure i would generally recommend if you're new to this you don't know what you're doing leave those basic options as they are and don't worry about them you've got one thing that's worth looking at the bottom though delete with user whether to move post to trash when deleting a user so in other words if a post a property in this example has been deleted or the use has been deleted i should say that all the posts get deleted with it up to you whether you want to enable or disable that that's something that could obviously cause problems if you set it incorrectly supports this is basically where we can choose what basic options from the normal wordpress post type we can use inside our custom posted that might sound confusing but the basic principle is you've got all these default fields which you're probably used to if you're working with wordpress your title your editor excerpt author thumbnail or featured image those kinds of things default is we've got title editor and thumbnail and generally that's probably all you're going to really want but if you need more all you need to do is check to enable any of these and that's it if you want to you can always come back in and you can edit any of these post types you create with metabox and enable or disable anything if you find you want to add it or remove it later on then we've got taxonomies now at the moment we haven't created any taxonomies so all this listed here are the default ones we'd have as part of a standard copy of wordpress and if you had something like woocommerce installed you'd see extra options inside you when we create taxonomies a little later then you'll see if we wanted to they would also be listed inside here however we've done everything we need we've got two options if you don't want to use a page builder and you simply want to grab the php code to drop into your functions php file or use a tool you know to actually insert this into your code you could use get php code and that will give you all the information all we're going to do is we're going to simply hit publish because we're going to use this with elementor pro anyway so there's our custom post type now if we take a look on the left hand side you can see we've got a new entry called properties and inside there we've got all properties and add them so operating in much the same way as you'd expect with a normal custom post type so all pretty straightforward so far let's take a look now at taxonomies so looking at the taxonomies we'll add new inside here and we're going to give this a plural name so we're going to call this property types we'll just copy that from there just to speed things up property type and you can see everything else is filled out for us same thing goes with the labels all those options are inside here in exactly the same way as we have when we create in a post type hop into advanced and this is where you can set up the various different parameters again it's worth taking a little time just to look through this just to get yourself familiar with it read the little notes next to it and see anything you need to enable or disable for me i generally set my taxonomies as hierarchical even if i don't want to use a hierarchy inside there and the key reason for this is it just makes working with taxonomies inside the editor itself of wordpress a lot easier you don't have to type anything in because you simply get checkboxes if you leave that unchecked you will end up with just an empty field that you have to start typing in and if you don't know what it is you're looking for it can kind of be a bit of a nightmare to try to pinpoint what you want so we're going to enable that just for an ease of use side of things now if we scroll on through there's a couple of other things that are quite useful inside you you can see we've got things like show admin column do you want this particular taxonomy to show up as an admin column generally that's quite useful so we're going to say yes we want that do you want to show it inside the quick edit do you want this to be something that from the actual listing of the properties that they can just click to edit or bulk edit and these options or this particular taxonomy option will be listed inside there as well again from a usability point of view this is something that can make life just a lot easier for the end user so we're going to enable all those options you can see we've also got things then like if we want to control our permalink structure for example we want to have a public structure like blog or posts or news or something like that we can enable that and get a little bit more control over those kinds of things and the same goes for a hierarchical url do you want to have a rewrite tag or not again if you're not sure leave it as it is then finally we've got sort at the bottom where this taxonomy should be remembered that so you should remember the order in which terms are added to the objects i'm going to leave that as it is unchecked and we're going to hop over to post types and we're going to link this new taxonomy to our property so we're going to uncheck post we're going to check property and that's now been linked to it so we'll publish that and that's that side of things completed now if we take a look at our properties we've got a new section called property types and inside there we can start adding the property types so let's do that we're going to say this is apartment we'll add that inside there we'll say house add that inside there and we'll just say flat and add that inside there so now we've created a taxonomy and added some values into that taxonomy okay so we're definitely on our way now to creating our custom post type and setting everything up next thing we want to do is create some meta fields and associate those with our custom post type to do that all we're going to do is come over to the meta box entry and from there we're going to choose the option for custom fields this is where we're going to control all the custom fields how we're going to link those through those kinds of things now we are going to keep this really really simple just want to get you sort of started with how this works so we're going to do is we're going to say add new field group and field group is just a collection of meta fields now we're going to add in we're going to call this property details and now we've got two options we've got fields and we've got settings start off with let's go to the fields first thing to do is go and add our first field inside here so like i said we're going to keep this super simple first we're going to do is we're going to find the option to insert some numeric data because we're going to add in the price of this particular property so we'll choose number once we choose that we now open up all the options for this particular type of custom meta field first things first the label well number doesn't make any sense we're going to call this price actually it's called this property price just so it makes labeling things just easier says property price you can see the type is set to number but if we want to retrospectively change that we can if we've made a mistake we can change this to any of the options that are available we leave it as number though that's perfectly fine your label description and input description totally optional and you can see most of these will have little help symbols for the side of it so if you're ever unsure what any of these do you can just hover over and find out what it does for you anything with a little red asterisk to the side of it we'll just say that is something that is has to be inserted you have to have that property id value inside you but most other things are purely optional next up we've got the minimum and maximum values if you want to apply those and then you can set your step value if you want to we're going to leave this something they can actually input themselves directly so i'm not going to worry about that default values placeholders size of input text box or input box these are sort of styling kinds of things if you want to put placeholder text in this you can kind of tell people what needs to go in you could do that for this i think is pretty self-explanatory is this required absolutely not much point in our property listing without a price you can disable it you can set it to read only so if you wanted to have a field inside you that only had a predefined value but you wanted the end user to see it you could set this to read only clonable as his name suggests you could clone this next step you want to show this in the admin column which can be kind of useful so we're going to say yes we want for the pricing name that now opens up even more options for us column position we can choose we want this to be after before or replace and then we can sort of drop in what we actually want it to be before after or replace so we're going to say this goes after the title now the title as we already know is going to be one the default wordpress fields that's going to be in this example the name of the property column title we're just going to put in price and we'll put the actual pound sign to say this is what it's for column content before and after as its name would suggest if you want to put content before after that you can do you can also make this sortable which in this example would make sense because we're dealing with numeric values on house prices so it makes it easy to sort these on ascending or descending and you want to make them searchable and filterable up to you i'm going to leave those disabled and then you've got your columns how many columns do you want this to actually span over and you can see we've got a range of different things we're going to say it's going to be one column we'll try that if you want to add a tooltip in you can enable that and you can put in whatever tool tip information on the position that you want we'll disable access again this is pretty self-explanatory come up to the advanced section you can see we've got some more options inside you like validation custom settings and conditional logic and so on i'll leave those for another day because i think these are above and beyond the sort of beginner's guide that i'm kind of doing in this video okay so there's our first field so we can do now is we can simply come in and add another field in so let's add a second field in and this one is going to be for the location so for this one we're just going to simply use a simple field and we just want to use text there we go we'll just choose text as the option inside there id which is going to call this first of all let's actually do the label it's going to call this property location and we'll just set the id that's perfectly fine we'll set that as probably location as well so property underscore location okay no spaces type text perfectly fine so you can see we can set anything up inside you if we want to most of this doesn't need anything because again i think this is pretty self-explanatory we don't want to show this in the admin column because i don't think it makes a lot of sense and we can choose the number of columns that tooltips and so on okay so we've set what we want up the basics what we're going to do now is simply come back up we're going to the set in section because we need to now associate this with our post type so this is where we can set those kinds of things up first of all we've got the location so post type and you can see it's linked it up by default to post which we don't want disable that we can click and what we want we want to link this to our property so now these custom fields are going to be linked to the property custom post type that we've created if you want to add things like location rules and toggle rules and conditional logic you can do those and again these are things that i don't want to cover in this because i think they could be on the basics would you want to position this you can put it either after the content or you can put it on the side we'll leave it after content because it's a bit more information and we can set the priority so we if we have multiple different field groups we can set the priority for these and that will condition where they'll show up inside the hierarchy of the custom meta fields okay so you can check the style inside here you can collapse it by default you can set tab styles all those kinds of useful things however we're going to leave it as it is and we're simply going to hit update and that now is our custom field setup all configured and linked up to our property custom post type so let's come up to our properties now and let's go to all properties and now you can see there's our title and there's our date which are default fields that we have inside any kind of listing with wordpress but we have our property type which is our custom post type listed inside here as well also our custom taxonomy and we have the price field which is a custom field that we've just set up now we can come in and we can say add new and we take a look you can see this looks very much the same as a normal wordpress gutenberg editing section title content all your things on the right hand side like featured image and so on but we have some extra options we have property types which is our custom taxonomy and there's our taxonomies apartment flat and house you can add more inside you in the normal way that you would with wordpress and if we scroll down a little bit you can see at the bottom we've got our custom meta fields for property price and property location okay so let's add our first property in we're just going to call this edinburgh heights doesn't really matter what we call it we're going to drop in some filler text inside there we'll just come over and add the property type we're going to say this is an apartment and we'll add a featured image i've already uploaded a couple of images we can use inside so we're going to say we'll use this one okay set a featured image so nothing there that you haven't already seen tens of thousands of times using wordpress however let's just use these new options at the bottom so property price we're going to set this at 490 000 and the property location will just put in edinburgh united kingdom okay so now we'll just publish this and confirm that and there's our first property with our custom meta fields inserted so we hop back out of this now you can see there's edinburgh heights you can see there's our price there's the property type and the date now i'm just going to add a couple more properties using exactly the same technique that i've just shown you just so we've got some more to work with and then we move on to the next stage okay so there's our couple of properties all set up prices everything set inside there so now we've created our meta boxes created our taxonomies and built everything how do we actually now get this to display on any kind of pages inside elementor well it's very easy we're going to create a couple of templates we're going to start off first of all with the archive side of things so we're coming to elementor we're going to come into the template section into theme builder and we're going to create a new archive so we're going to call this archive and we're just going to add new and we're going to call this property archive create a template and if you want to you can use one of the predefined kind of layers as a starting point for this example though we're going to get rid of that and build everything from scratch let's add a new section in let's add a little bit of space around this so it doesn't look quite so ugly we'll just set 50 pixels above and below and for ease we're just going to work with some of the built-in options we're going to drag this posts option in and what this will do is now this will just show us what it thinks is right in this example it thinks you're going to use one of the default posts obviously that isn't the case so we can do is we can scroll down to the query section expand that out and we can change the source from posts and you'll see there's properties which is our new custom post type so that's now working inside elementor pro we can choose that option and that now pulls up our three properties obviously if you had more properties more would be listed now you can go ahead and you can include by if you want to you can sort these in different orders we can add some pagination inside here as well we'll say we'll have something like numbers and previous and so on page limit you won't see anything because at the moment when we have three items but now we can go ahead if we want to come into the layout and we can change this over to cards for example and we can just remove anything we don't want so things like the dates and comments we don't want those inside there we don't want to worry about having options like the avatar so you can see you can quickly and easily create a nice looking archive page so we'll publish this and we're going to add a condition in now the condition is basically where do we want to use this particular template at the moment you see the default is all archives but if we expand that we have a lot more options we want to work with just the properties archive because we set a custom query up inside you we don't want to assign it to anything else so we're going to just come down to property archive choose that option and say save and close so that now has become the default archive only for our properties so that's the first part of this done now we can come back out of this and we can start creating our single post where we can pull in some of the dynamic data we've just added in through metabox so same again we're going to come back to our theme builder inside our theme builder this time we're just going to choose the option for single post and we're going to add a new single post and we're just going to call this default single property create our template and again we'll have options to choose some of the predefined layouts which we're going to ignore for this example we'll just add in a new section and again we'll do the same thing we'll just add a little bit of space around this so just to make it look a little bit more professional and now we can start building out the different parts of our actual page layer now you can see we've got single down the left-hand side and these are all the default single sections that we can use the widgets we can use to build out our single template so let's start off by saying we want to use a featured image we'll drag and drop that inside there and you can see nothing is showing up only because we haven't told it what data we want to use to work inside our template to make our lives easier when we see how this all works so we can do that by coming down to the little settings icon the bottom left from there we can choose the preview settings we're going to change this now to property which is our custom post type and then if we want to we can just choose something inside here so we can start typing find out where edinburgh heights apply at the preview and we should find once this loads back in we'll see there's our featured image for that particular property so now we've got a nice visual way of being able to build our template out using the dynamic data that we've got as part of our custom post time so we'll start off with our featured image and we can select this and you can see we can change the values over inside shares we'll set this to be higher quality if we've got a higher quality version and you can set captions and links and things like that okay so that's the first part next we want to do we want to just grab the post title which is going to be the name of the property itself so we'll drag that inside there now this doesn't look great because at the moment i'm using a smaller image than we actually have displayed so we can just set this to full for example that'll give us a better quality one okay so there's our edinburgh heights which is the name of this particular property and you can style this to your heart's content i'm not going to worry about that because this is more a case of showing you how to use metabox in elementor and it is to show you how to style everything i'm sure you're more than comfortable doing that okay let's grab the actual content now so grab our post content and drop that under there and there's our post content for this particular property so these are the normal default wordpress features there's nothing about this this custom post type orientated however we've got the price and we've got the location and they are custom meta fields that we've created with metabox now we can pull that data in so let's just say underneath the edinburgh heights and before this we want to drop in the price and the location we can do that simply by coming back out of this and we can use either text editor or heading to turn up to you for this example i'll use a heading and drop that underneath there we'll set this to something like h6 so it has not as much weight but it's still important because obviously prices and things like that are going to be important data now if you've never used elementor pro before you've never linked that up to dynamic data you'll see in lots of different locations you get this little database icon which relates to dynamic tags if we click on that you can see there's lots and lots of information from providing you have the elementor pro or the elementor widget add-on added into meta box you'll start to see meta box related information inside you so under post you can see a meta box field underneath archive meta box field site meta box field and if we scroll down you can see we might have different options in different places so depending upon the kind of widget you're working with and where the data can come from all those values will have metabox options so now if we choose underneath post metabox field we'll select that now we can choose what field we want to reference click on there and you can see anything we've got inside you property price and property location underneath our property custom post type are now listed and available to us to access and use these inside our template it doesn't have to be a template though you can use these inside pages if you want to lots of different options when it comes to working with elementor and dynamic data so i'm going to do is we're going to pull in the property price we'll select that option and you'll see there's our price and now we can do is we can come into advanced and we can say before this we want to put in property price put a colon inside there and we'll just then put at the end of this the pound sign so we know exactly what values we're working with and there's our property price so what we can do is we can repeat that process now for the next piece of information which is the custom field for our location so we do the same again we simply come up we'll choose the option for a heading drag and drop that into our setup come in change that to h6 choose the dynamic tags option choose meta box field expand the field option out and choose property location come into advanced and we're just going to put inside here location and the colon and the space and then we'll find there's our data pulled in from our custom meta field so now we've set the template up let's publish this and then we can apply the condition we want to use so we'll add a condition and again you can see it comes up and tries to use this as the global setup for all singular posts we don't want that we're gonna expand that out gonna look for property and we're just gonna choose properties once we set that we're gonna leave this set to also any property inside our properties custom post type we'll use this template with save and close and we've now set everything up so now we can go ahead and test this out now before we go ahead and test this page out i want to add it into my navigation but the thing is what causes a lot of people a lot of problems is well what link do i use so if we open up the screen options you see inside here we have things like properties and property type and if we open those up and we add those in you see we've got property and inside there we've got each of our individual properties if you open up property types there's anything that's got content associated with it which is our taxonomy so it's apartments and houses and those kinds of things there's nothing inside you that allows us to know what we're going to use to actually add the link in to list all of our properties using the archive page template we've just created so let me just show you how easy it is to deal with you're not going to find anything inside the menu section so i've created my menu i'm just going to quickly save this so at least i don't have to come back and do this again we're going to do is come back to our meta boxes and to our post types now whenever you create custom post types using a tool like meta box or custom post type ui lots of different tools allow you to create them you'll have some basic information and one of the most important pieces is the slug and this is generally automatically created for you so when we set up our post type you can remember we put in the singular and the plural names and that automatically created the property in this example slug so we're going to do is we're going to copy that from there and this is basically what we're going to use for the link so we can do now is we can come back into our site and we're going to come to our home page and we're simply going to come to the top to our address bar and we're going to put in exactly what we just copied which in this example is property we put a forward slash at the beginning and the end of that and we'll hit enter and that will take us through and now show us the archive page template that we're using for these listings for the properties so now we know that works and everything is correct what you can do is you can simply copy this full address come back into your dashboard back into appearance and menus and inside there we can now create a custom link we'll put the link that we just copied inside there and we'll just put in properties you could if you wanted to if you were working on a development environment and your domain might change you could easily just get rid of all of this and just simply have the forward slash property forward slash and that becomes a link then it doesn't matter what domain it's going to be the same link no matter where it is on the site we'll add that to our menu we'll reposition to where we want and we'll just save our menu so now we come back in and refresh this page we'll find this our properties option if we just switch back to home for example and then click on properties that takes us into our archive and you can see that is now listed at the top inside the url and everything is working the way that you want i just wanted to show you that because this is one of those things that does cause a lot of people a lot of confusion when they start working with custom post types on how do you get the link and how do you do anything with it okay so with that being said and that being covered we're looking at our archive page we've created and now you can see there's our three properties if we click in city views for example that takes us through now into the custom single post template with our property price and the location alongside the featured image the title or the name of the property itself and the description of the property if we come back out of this and go back to properties again and we choose a different one so for example we'll go to bay view you'll see the data inside there is now showing up to do with bay view and this is the great thing about dynamic content we can create templates that are assigned to all the different properties for this we can create custom post types and meta fields and taxonomies and we can get really creative on how this all works okay so that's pretty cool but one other thing i want to show you is this is great but none of this is of any real use if you want to show people how to get access to the price the location and any other kind of custom metadata we can't do that inside elementor pro itself so we need to use a plug-in to do that we're going to be using the free elementor custom skin plug-in now elementor custom skin is a free plug-in you can have a pro version but you don't need it for what we're going to cover in this video and what elemental custom skin or early custom skins is more often referred to does it allows us to create custom loop layouts now what the heck does that even mean let's head back to our properties page each individual item you can see here which features the featured image the title the short content and the read more each one of these is a loop item so we're going to create the template that allows us to build one of these for ourself including any dynamic data that we want inside there and then we can assign that to become the template inside our loop to show exactly what we want might sound confusing but once you see it in action it's not as complex as it sounds so once the elemental custom skin is installed we have a new item inside the theme builder for word for elementor which is the loop item gonna click inside there and we're gonna create a new loop and we're just gonna call this property loop and we'll just create our template so once we open up elementor we can now close this down and we can start building our own custom loop now don't worry about any template settings inside here don't worry about the header being displayed in the footer and the title all of that's going to be completely ignored all we're going to use is what's inside this area so we're going to do is we're going to add in a new section and inside there we're going to pull in the different pieces that we want come back into our normal widget selector and you can see all the single options are available to us in the same way they were inside the single post template so we're going to do the same kind of thing again now grab that featured image drop that inside there and just make sure everything is set up correctly so we can come down to our settings section preview settings and do the same again so we'll set this to be property and we'll just use edinburgh again so we'll search for that and we'll apply and preview that and then we've got some pre-filled data so we can see that we can use again don't worry about the size of this because this is going to be much smaller when you create your layout but you can create a layer in multiple different ways we're going to kind of keep it very similar to what we've already seen so we're going to do is the same as we did before we're going to drop post title inside there that's perfectly fine but we're going to add in some custom data so like we did before we're going to just grab a heading drop that underneath there set this to something like h6 and what we're going to do is we're going to link the dynamic data again so metabox field grab the field property price and set our dynamic information before it so we'll just put price colon pound sign there's our price and we're going to just for ease we're going to select that we're going to duplicate it so we'll just duplicate that so we don't go through the process again and we'll just change the data inside here from property price to property location change this and we'll just put in location call on a space and if we want to we can add any more data inside here we can style this any way that we want so if we want to apply some drop shadows all those kinds of things outlines we can select this section and we can just simply come into our styling options we'll apply a simple solid border we'll have one pixel we'll make this really really light gray so it's not too imposing and we'll set a border radius of 8 pixels around there as well you're probably gonna see that inside here but once everything is all loaded up it'll look great advanced we'll put 15 pixels of padding around that that gives us a little bit more sort of separation between the various different elements now obviously you can set anything you want up inside you if we select the image for example we can set this to be linked so we'll choose link and we'll just say custom url and then we're going to do is we're going to click on the little dynamic tags option and we're just going to tell that we want this to go to the post url in other words the url of this individual post which in this case is going to be edinburgh heights you could also if you wanted to simply just drag and drop a button inside so if you wanted to put a button to allow people to click and go through to that relevant property you can click on there you can set your custom link up by using the dynamic tags again and again we just use post url you can just say view property you can get as creative as you want with it to be honest let's just spell that correctly there we go so we'll just publish this we're not going to worry about setting any conditions we're just going to say save and close so next on our list is to tell elementor to use our custom loop to do that we're going to head back over to our theme builder we're going to open up the archive page we created earlier so there's our property archive we'll edit this with elementor once we open up elementor we're going to select our listing grid our post grid and at the top you can see it says skin now cards is what we chose to make it look like this but we can change that we have a new option now called custom this is specific to elementor custom skin once we choose that that now allows us to choose what loop template we want to use and there's our property loop template which we've just created we'll select that and now you can see that pulls in our custom design inside there so we've now got our dynamic data looked pretty ugly admittedly but you can see how everything is in place if we just update this page now and we just hop back over into our website we'll refresh this and you can see now we can click take a look at any of our properties so we can see there's bay view go back city view come back out edinburgh heights so now we could just easily come back in style all this to make it look nice and pro add any more custom fields that we might want to create inside these templates and we now have access to working with dynamic metadata created and built through metabox inside elementor pro so now we've seen how to get started with the basics of elementor pro and combining that with metabox hopefully this has give you an insight into what you can do if you enjoyed the video why not give it a thumbs up videos help me out however if you didn't find value in the video feel free to hit the thumbs down button twice as that works pretty well too my name is paul c this is wp tetson until next time take care

Channel: WPTuts

Views: 9,725

Keywords: WPTuts, dynamic content elementor, dynamic content elementor pro, dynamic content for elementor plugin, dynamic content wordpress, elementor dynamic content, wordpress dynamic content, wordpress elementor dynamic content, elementor acf, elementor pro, elementor tutorial, elementor wordpress

Id: CnPmFonskso

Length: 37min 53sec (2273 seconds)

Published: Mon Apr 12 2021