Elementor Custom Post Loops - Plugin Comparison

now when you want to go beyond the default post loops in elemental on wordpress you're going to need the right tools to create your vision in this video I have four of the best tools for WordPress and elemental to do just that I'll show you how each one of these works so you can see which you think is the right fit for you and the job in which you're trying to work well where is 4c and this is WP test the channel that helps you create more unique and dynamic WordPress websites okay so let's hop over now onto the computer and take a look at our first candidate so we're gonna kick this comparison off with jet engine now jet engine is part of the Crocker block suite but you can use it as a standalone plugin and you can use it to work alongside jet engine itself to create custom fields and custom post testers are or you can use it in conjunction with advanced custom fields however we can't just use it to create simple custom listings so what I do is come over to the dashboard and from there with jet engine install we need to come down and choose the option for listings now listings as you can see I've already created a few different types of listings and what we're kind of doing is we're creating an initial template design so what I'm gonna do is I'm gonna say I'm gonna come in to add new now from there we have some options we've got to choose so you can see it says what's the source for the listing in other words where do you want to pull the data from so we have options for posts terms users and repeater fields we're gonna keep this super simple and say posts next step from post type so if you created a custom post type you'll have additional options in here to the standard WordPress defaults if we click to expand that you can see posts pages and media are your typical wordpress post types then we've also got things like forms smart filters and properties these are more custom things or things that have installed as part of a plugin and then we've got my templates which is part of Elementor pro so what we're gonna do is we're gonna just choose properties because I've created this custom post at and the process is exactly the same no matter what kind of post type you choose so you choose properties we're gonna give this listing a name and we're just gonna call this loop test and from there with a final option which is the listing view in other words what tool do we want to use to create our listings and how we're going to use it moving forward I'd like to expand that if you have Elementor installed you can use elemental however if you wanted to use Gutenberg's blocks you could do that as well however we're gonna stick to elemental for all of these this comparison so choose elemental so we've set up the basics now we can say create listing item and that will then create a listing item set up ready for us to use elements or to create it now when you want to work with this because we're using the custom post type of properties then what we're going to do is we're going to scroll down until we get to the dynamic options that are part of the listing options or the listing element so you can see we've got a dynamic field dynamic image dynamic link and so on you don't have to use these if you chose a normal post type you could if you wanted to use the normal dynamic widgets you know things like your title your post title your post excerpt those kinds of things for maximum compatibility we're going to stick to these listing elements so the first thing we're going to do is just pull in the image the featured image for this particular property drag and drop that onto our page you can see that now pulls in a placeholder image and if we take a look at the left hand side we've got the source and this is where we can pick where we want to grab our data from so you can see post thumbnail is the default because we've dropped in the an image - it just considers the fact that we're probably going to be using the featured image so there's a nice little time-saving feature there but you can if you want to click from there and you can see we have some additional options we've got post thumbnail user avatar works only for use of listings and pages so it's not gonna work in this example or we have options so we click on there we'd have options to choose from and you see we also put custom repeater fields in so say custom fields let's put that back to thumbnail so if you wanted to use a custom meta field or repeat a key meta field you could drop those inside there so you have a nice level of integration into the dynamic content side of things when you're working with these dynamic widgets as part of jet engine so we're going to do is we're going to change this to medium because we don't want this to be absolutely massive unless you talk of a medium large it's good bit more scope on there now you have to remember whenever you're creating these kinds of loop layouts you are probably going to be working with a smaller section so in other words we're not really working with a full width layout you may be but chances are you probably won't be if you're working with an archive or something like that but you have completed you know control over how you want to set this up and how you want to size it style it and all those kinds of things moving on down we can link this image we can click to link it then we can choose what source we want so if you're using this on archive page it makes sense to have the image to be a link as you can see permalink is the default option that would be the permalink to in this example the property however if it's a post or a page it would go over to the permalink for the relevant type of post you can click to expand that out you can see we have additional options inside there for the link source so you may not want to use the permalink you may want to create a custom link field and then you may want to reference that so this could be an external link it could be anything you want video link those kinds of things so you can choose different link sources and again you can reference custom meta fields or repeater keys so if you created a custom metal field you could link it inside there then you have some basic things like how you want to deal with the link is it going to be opened in a new window so an external link you may want to say yes and so on and so forth alignment now pretty self-explanatory one of the nice things we have though when working with jet engine of the jet engine listings is we have some conditional logic inside you so if we didn't have a featured image loaded into a particular post or page you could specify that you want to hide this if it's empty you could also obviously set things that to be you know required fields to avoid that problem and you can also drop in a fallback image if you wanted to we then have a forked list of styling options advanced you know those kinds of things you'd expect to see as part of elemental let's come back into this and we're just going to scroll down again we're gonna grab some dynamic content swings a dynamic field we'll drag and drop that under there and you can see now we get some different context based information all working along the same lines so you have a lot of control over the data the type of data and also how you want to format and output that data this is the kind of thing you don't have in a lot of the other options when you're creating these custom listings or loop items so you can see the source is post term user and object we can open that up we can choose from metadata options or relations hierarchies if you're dealing with relationships you could do that inside sure well so with only that set to post a term user lot overlap because this is the title of this particular property and once you choose this option you will see the object feeling it allows you to pick from again another range of predefined objects so things like titles dates content excerpts and so on so you can format this in a ton of different ways one add an icon you can do that want to wrap it in different HTML tags you can do that so we'll say this is gonna be a h3 for example and then whatever stylings are being associated h3 will pull into that again you've got the hide if value is empty a fallback option but then we have some additional features that are very very useful and powerful we've got the filter field output that allows us to control how the data is going to be output and then finally the customized field output which allows us to add extra things in the HTML code things like that so filter in the field output if we click to expand that you can see we have callback options we click you can see and force you can't see this to the part on the screen but there are a ton of different options so let's just say you drop something in here and it was a link and you wanted to make it a link where you can specify just by using this and it would say you know it would create a link from there you could for my dates you could format numbers there's a ton of different things so that's a pretty powerful feature that you have as part of jet engine I'll disable that for now looks we are just dealing with title text then we've got the customers field output if we open that up we just get a very simple box which we can then see we've got this little shortcode that denotes this title that's got to be used but we could put anything before after it we can even use HTML inside sure as well so we'll just say property name and there you go we now have that added in at the beginning of it you can put it at the end you can do a lot of different things with this and again you've got all your styling and you Advanced Options let's take a look at one more option inside sure now we'll come back in we'll scroll down again and we'll say we want to grab some dynamic matter for example drop that underneath and you can see that pulls in the date the author and the comments however we can expand that and we can choose any of those options inside there we can drop icons in we can drop prefixes in we can add items we can make them in line or list items you have a ton of options and then underneath that you've got formatting options for each of those different settings so date settings for example you can choose the format you want you can set that to be a link and where you want that link to go or the settings comment settings and so on so you can get pretty creative with how you want to drop data inside you're just using the dynamic fields that are part of jet engine now before we move on to actually creating the final listing output there's one other thing I want to show you that is quite useful if we come down to the settings option in the bottom left-hand corner because we're working with jet engine we have another entry called listing settings click to open that up and we can now choose the listing source so you can see posts we can choose terms users repeat feels like we did at the beginning we created this the front post type and again we could change that from there if we wanted to but we also have the preview width so we could say while ever working with a three-wide grid on a 1400 pixel wide layout then you could say that you want to reuse a specific value allowing for space around the outside edge and so on and then you can set this up to whatever value you want so let's just say about 457 learned there and then we can see what this would look like and we could make sure then that any formatting we have is all going to work perfectly so you can see we have a problem at the moment with this title let's click on that come into a style for example we can just change the typography on there we'll make that a little smaller something like that we'll just set the weight on it and we can do then is we can adjust the line height to make sure that everything works okay so let's bump that up in size I just have a line height to make sure that when we overlap or the next line everything is going to look good so you can see we can adjust and tweak this and it's just quite a useful little setup so once we're finished with that we can simply hit publish and then we've created that listing element that listing item so with that done the next thing we need to do is create the page and drop in the listing widget so we can set this up and choose what listing lighter we want to create our archive pages listing pages and so on now that we created an individual listing item we now need to create the listing that outputs the data so you could like I say if you wanted to you could use this with your archive temple you can use it with standard pages however you want to work with it anything that works with Elementor you can pull this data in so for this example we're going to keep this super simple I'm just going to create a page or user page we'll edit this with Elementor and once you've done that we're going to pull in the listing widget so just going to search for listing and you see this is one of the dedicated jet-engine widgets so we're gonna drag and drop that onto our page we'll drop in a little bit of padding at the top and bottom just so we can allow a bit of space around this okay there we go so at the moment it says there's no listings to show that's because we haven't told it what template you want to use or anything else so at the top you can see we have listing and it says select open that up and this will show all of the listings that we've created so you can see there's the previous ones that I'd set up inside you but the one we've just now configured is the loop test so once I select that you can see that now pulls in the data using that template that we've just created so if we went back and edit that listing template these updates or these changes will be updated and reflected inside sure because we're just in that template file so once we drop this in you can see it immediately pulls in all the data using the styling that we've configured on there we then have a lot more options now on the left-hand side on how we want to deal with this specific listing we can adjust the columns so we could set this to 2 for example and you can see that because we've set up a flexible structure even though we've set a value for that width when we were designing things and we use the settings option that's just there for a visual representation it doesn't make any difference to the final output it's just there so you can get a gauge on how things are going to look so that's pretty cool we'll set that back to 3 you could then set this as an archive template if you wanted to we can adjust the status so we can control exactly what types of content will be displayed on here so you can see we can click and open that out we can have published future draft pending review and so on we then have the post number which is the overall number of posts that we displayed based upon the column so in other words we've got 3 by 3 because you set the post to 6 if we set that to be 5 you can see we'll have 3 by 2 and so on we then have the know found message so you can configure this is a masonry grid so if you have different scale images you could handle that by setting this to be a masonry grid you could also in turn force this to have equal column Heights to make sure that everything looks good load more if you want to load more so you don't have that sort of or you could have infinite scrolling kind of effects and those kind of things or you say load more and I don't put a button at the bottom if you have more to load through and you see they've got a load more element ID and so on custom post types there's a ton of options inside you and if you'd like me to cover this in a lot more detail then let me know in the comment section below and I'll be happy to take a look at creating more detailed content on this but what you also have underneath them which again is unique to the jet engine plug-in is you can query things you can query based upon posts terms users so you can query all this data that gets pulled up so if you open that up you can see get terms of posts from or we can select where we want to use those what terms you want to select our post on so if you use in terms for any of your custom post types or your normal posts you could filter based upon that and again you can order things you can order descrip descending ascending and so on include exclude hide items a ton of things we have widget visibility so you can see hide widget if in other words do you want to set a parameter on here if it's met it will be hidden if not it will show it you can see it says hi widget if and it says always show or we could say the query is empty so it'll hide it it's up to you just a nice simple conditional logic you can apply but finally if you wanted to you could convert this into a slider so you say enable slider and now we have a nice clean simple slider configured for us which we could then go through and configure any of the settings the styling and all those kinds of things so straight up the box jet engine has a ton of really useful really powerful features when you want to work with listings if you want to work with dynamic data all those kinds of things the cool thing is you don't even need to be using jet engine to create your custom data if you are using custom data you could easily use custom post type UI in advanced custom fields if you're more used to those and then you could just use jet engine to do the design aspect of things and output your data there's lots of options lots of different things you can do with this so that's the jet engine way of working let's now move on to the second door which we're going to take a look at so next up on our list is elemental custom skin there's a free version of this and a pro version of this I've got the pro version installed but I'm only going to be using the free version to do exactly what we're doing here so the provision has a couple of extra features in there but you don't realistically need those they're just some of those things that are quite nice to have if you want to have just a simpler way of working with some different aspects okay so we're gonna come back over into a wordpress site now the way we do this with elemental custom skin is a little different what we did with jet engine for this example I'm already set up some advanced custom fields and a custom post type or two so we're gonna use those as the basis of creating our loop and that's the difference is when it comes to element or custom skin or any custom skin it's referred to as a loop as opposed to jet engine which refers to it as a listing so once you've installed the elemental custom skin and you come into the template in the theme builder section of Elementor Pro you'll see we have an option called loop click on there and any loops that have already created will now be listed inside sure so we're gonna do is we're going to do the same as before we're gonna create a new loop so I'm gonna say add new you can see we have simpler options this time so we're gonna do is we're gonna call this test loop and we'll say create template and once you do that that'll open up elemental like it did before now we're take through first of all to the blocks library nor the template library and so on well there's nothing inside there we want to work with we're gonna close that down now what we have now is we have no special widgets that we can use that's part of Elementor custom skin we're only going to use the normal elemental Pro widgets so if we take a look we have single on the left hand side because this is a fair to be going to work in a similar kind of fashion to a single post template does that make sense so we can do is we can do it like we did before this time I'm gonna put in the featured image from this section and you can see that will drag and drop the featured image in now at the moment it doesn't know where that featured image is coming from and as you can see is pulled in a picture of bird my little dog but we don't want that we want the custom post type of vehicles so how do I get about that problem I'm going to do is going to come down to the settings and on the left hand corner click on me and choose the preview settings click to open an app it says preview dynamic content as we're gonna select that from there we're gonna come down to vehicle I'm gonna click on me it says what vehicle or vehicles do you want to take a look at so at the moment it says all but we're just going to type in something I know it's gonna be in there maybe not then so we'll just type in a letter ok there we go we'll say this mini JC Black Edition so we've got the vehicle as custom post type there's the post we're going to use for this demonstration purposes hit apply and preview and we should find then that will pull in the featured image for that particular vehicle our custom post type so there we go that's the first thing done that takes us back in now so we can do is we can drag and drop in any of these widget items so we can say we want the post title we'll drop that underneath there and you can see there's our mini JC black edition we can come back over we can say we want to drop in a different widget this time so we're gonna say this time we're going to pull in the post info we'll drop that underneath there and like we had when we dealt with jet engine you've got meditator author-date comments those kinds of things but these are the native elemental pro options so we can click to open that up and all the normal options we have are inside there including the ability to put in dynamic data and any of these kinds of things if we want to do use that so just say we don't want comments on there we can just click to get rid of it ok so that's pretty simple and straightforward we'd also do with those we can come back to this and we can say we want to put something custom inside sure we don't want to run away upon these options we have available we want to put something else in so this time we're going to come over and we're going to say we're going to pull in the text editor and drop that underneath thee this will just put in some predefined text we're gonna click on the dynamic tags option now if you're not used to dynamic tags when it comes to element or pro I'll put a link in the description for a video that'll tell you exactly how these all work and the benefits of using them now when you install elemental custom skin it adds in an extra widget into the dynamic tags and we're going to use that right now so we now click to open up the dynamic tags option and the new option we have is post summary which is gonna take the main content from our post and allow us to configure exactly how many words we want to pull in this is a nice way of just peakins people's interest and then letting them collect more so in a drag of the click the option for post summary and you will see that pulls in some filler data for me if I want to I can click on this little wrench icon next to post summary and from there I can configure things like how many words I want to use let's just say we wanted to set this to 30 you can see when we do that it'll update a show us 30 letter out of 30 words advanced we've got the option we go before after and fall back so all the normal things you'd expect to see so we've created our basic layer but at the moment none of this is selected to be able to go through and take a look at the individual vehicle to do that we need to manually configure this so we're gonna click on this image I'm gonna do is we're gonna set that to have a link so you can see it says link is set to none gonna click on there and we're gonna say we want to set this to a custom URL once you've done that that'll open up the new option so he wanted to put in a manual URL we could do that which obviously is not going to work in this example so we can do is we can click on this dynamic tags option again click on there and we can do is we can say we want to use that post URL which is the permalink for this specific vehicle if you wanted to you could use a post custom field if you created a custom field as part of your your meta field setup you know your custom field setter for these vehicles then you could put that in there and you could link that through so we kind of will reliant upon working with the default elemental Pro features in this instance where's Chet engine gave us a lot more control over how we could do things with a lot of its own built-in native features so on that front it is more powerful but it could be a little overkill for what you're trying to do and there are many other plugins that allow you to do various different things just using elemental ok so let's say post URL if you wanted to configure anything else on there we can click on the link option so we can set this to open in a new window much the same as we could do with jet engine I'd know follow and follow and so on so with all those things done and in place we can just hit publish this will then allow us to add a condition to it and with the more recent versions of elements or custom skin you can start to use conditions as part of it so if you wanted to use conditions to work with your loop items you can do for now I have no need to do that so we're just going to say save and close and we then created our custom loop item we can come out of this and we can go back and start to drop this into our page so let's take a look at how we do that next I created a new page and opened up Elementor ready for us to start dropping in our actual layout to do this we're going to choose the posts option and we can use the post option even on an archive page we can use the posts option there's we can customize various different aspects of it and again in the same way as jet engine you can use this tool on pages posts archives any kind of thing you want to it depends on just what your purpose is with it if we chose the archive option though you couldn't pull in the custom design that we've created the custom loop item we have to use the posts widget for that so let's just try it and drop this onto our page again like we did before let's just make a little bit of space above and below so we'll drop in 50 above 50 below and again like before you can see this is now starting to pull in some sample data what it thinks is the correct data obviously in this example it isn't the correct data so we need to deal with that so we're going to do is going to come first of all down to the query option so we will choose query but from there we're gonna say our source is not posts we want to use this set up for vehicles once you do that you can see that now we're pulling in vehicles but what you also notice is that this is using the default layout this is not the one that we've just created so let's see how we put that into place come back go to the layers tab and you see at the moment says skin is set to classic now if you've used the post widget before you probably switch between classic cards and phone content but we have a fourth option now with elemental custom skin installed which is custom click on them and that opens up a new section inside our layer options first thing a most important thing is select the template we want to use so just click and open that up any of the templates so we create the loop templates we've created will be listed in here much the same as the listings will listed inside jet-engine we're going to choose test loop which is the one I've just created once you do that you can see that now pulls in the data using our design now underneath this you can see we have a series of different so switches now these are to do with the pro version so I'm not gonna touch any of those but you can see what they do is they mimic some of the options we have in jet engine so we can choose masonry we can set things up to be the same height or we can show them in the slider if you need those features and you want to work with Elementor custom skin you're gonna have to grab yourself the pro version to get access to those very useful features but like I say I'm gonna leave those as they are gonna ignore those completely underneath no you can see we have columns in exactly the same way as we had with jet engine and again we can change those to whatever we want we can also adjust the post count the post per page you can see we can set that to 6 we can set it to any value we want so set that back to 3 so everything is set up inside there let's take a quick look at the other options now that are available to us working in this way query as I just shown you allows us to specify the source but we can also include by various different parameters we can sort them by their date by the past day month so on all those kinds of things now the advanced query options you can ignore that that's a separate plugin that's not included by default as normal you're only going to get these normal options by here if you want to exclude certain things you could do that and you can easily configure things to output exactly what you want finally we have pagination so if we had 12 records for example setting this to 6 you can see there's no way of taking a look at the next 6 items and so on we need to do is just enable the pagination and you can set up whatever you want to do there so you can set things up to be the page limits you can shorten the links you can set previous labels alignment and so on so forth so at the moment can't see anything because all the vehicles I've gotten inside there but obviously if we had more over there we'd see those pagination options so that's how we would use this alongside the built in functions as part of Elementor Pro to create our custom lists in shooting elemental custom skin so that's the second option we want to take a look at let's move on now to the next one next plug we're going to take a look at is dynamic content for elemental I would refer to this as the Swiss Army knives of working with ACF and dynamic content and so on and this kind of technique is no exception let me just show you what I mean gonna come over into the dashboard we're in the templates in the safe templates section what we're going to do is we're gonna say we want to add a new section in and we're just going to say at noon we're just going to call this dynamic and you'll know why so I say we put loop at the end just so I know what I'm talking about clear our template so all we know is we're going to use them the normal element or tools we're going to close out of this library and now we're gonna start creating the layout now you can build an LED in any kind of way that you want you're not limited to create it what I've shown you in this video what I'll show you this time I'm just using that for consistency you could do horizontal versions you could do vertical versions it's up to you you can get as creative as you really want to now let's just minimize these different panels just so we can see a little better because there are a lot of panels to do with dynamic content for elemental and I mean a lot of options now you don't need to use the dynamic content for elemental widgets you could if you wanted to use the normal elemental pro widgets and you could tie in the dynamic tags from there it's up to you however if you use the dynamic content for element or widgets you going to have a lot more native functionality built in so let's take a look what we have you can see we've got a ton of different options to what we are interested in is this dynamic content post section these are all the sort of widgets that are associated with post information like titles user fields content featured images and so on so first I'm going to do it like you've done before is drag and drop in the featured image we can choose the image size we're going to set this to be a medium large like we've done before we'll set it to be centered we'll set it to link to the post URL now what is it that you see nothing is showing up inside this all we need to do is come into the settings section and underneath the preview settings we're gonna click like we've done before we're just going to change this over now to know exactly what data we want to work with which is good we feel calls unlike before we're just gonna type in mini and we'll use that JC black edition and we'll say apply a preview will let that refresh and there you go this our mini already for us so this is the first part next step we'll just put in the title and drive and drop that underneath nothing too untoward there you can see it's exactly the same as we'd expect you have some additional options that are specific to the widgets that are part of dynamic content for LM but I'm not gonna go over those when we're dealing with things like this it's all pretty self-explanatory pretty basic stuff to be honest so we'll do the post matters again we'll drag and drop that inside there we're gonna change this over now we're gonna get rid of what's in there and we're gonna do a search for price there you go vehicle prices so you can see that now pulls in some dynamic content now this is an advanced custom fields field so it's a custom map per field and you can reference that very easily we can apply must have multiple post matters if we want to have more than one we have a ton of different options we can work with so we can expand that out choose the filter of currencies like I showed you Iran jumping to render mode for example and we can just do whatever we want in there so at the moment is set to auto and 28000 means nothing to anybody let's just change that over now to something else and we're gonna come down and we're gonna just choose custom now that gives us a normal text box so we could just reference the data inside you and you can see it just says a meta value so we're gonna put in the currency symbol at the beginning of that we'll just put in the pound sign there and you can see that'll update and show us 26,000 we can just put price if we want to in there we could format this you know we could do whatever we want inside you because it's basically just a text area so you can quickly and easily start to customize those kind of things so you can put in dynamic data if you want to dynamic tags again you've got options for your MP field meter and metadata and so on you can really go to town with what you can do here but I want to keep things fairly simple and straightforward let's just publish this and we'll say we've now created the layout that we want for our individual vehicle now we're going to take a look at how we assign this to our template or our page or post like we've done before the dynamic content for Elementor treats this as a view so if we do a search for views you'll see we have a dedicated widget specifically for that the drag and drop that into our design and again like you can see before it pulls in the default data that it thinks is the right information which isn't always the case it's going to default to the posts so we need to change that over to specify the right query to show exactly what we want to do that all we need to do is come to the from tab and change that from being posts and we'll change this over to vehicles we can also do things like set the state to us where we want to ignore sticky posts there's a ton of different things you can do inside here we'll take a look at that in a moment come back out of there though I don't know what this is using the default layout so we need to change this over to use our template to do that we're gonna come in to select and we have three options we've got fields which will just give us all the field names we have text and you can see we have template now this is probably the more complex out of all of the four we're going to take a look at in this comparison video but what you have is you can use it in its simpler form if you want to which is perfectly fine but if you want to get in and create more unique more in-depth more detailed more functional kinds of layouts then you can do that by using some of the other massive array of features that this has we're going to keep this really really simple though so we're gonna choose the template option then we need to choose what template we want to use so I'm just going to type in the name and then we'll select that so you can see there's our custom template all set up the only thing we need to do now specify how many columns we want to work in now this works differently it's not a simple clean interface where you just choose one two three four five we're gonna come into the skin option render as grid is fine but we're gonna set the column width so I'm going to just change that over to 33% and you see once we do that we'll now get our 3x3 grid layout so everything is set up inside there you do have multiple options of the render though you can choose grid you could choose table if you wanted to and you could have a table setup you can just choose list and that'll give you a list view so you see is a bulleted list which you could then format or your ordered list you know there's lots of different options you can even choose a slideshow if you wanted to and then you could configure that however you want so if you wanted to have for example navigation with arrows and dots you can do that we now get zeros and dots to be able to move around our section so put that back to grid leave it as it is you have like I say lots and lots of different options so you can filter criteria or set up custom filters on here you can set custom filters up you can group them by meta fields you can group them by various different items so you may want a group all of your BMW based cars together all your forward based cars all your Audi based cars together this is just scratching the surface of what can be done with this particular plugin but like I say it is a more complex plug-in a lot more detail involved in it to get probably what you get with the other plugins we're going to take a look at today but if you want to go beyond those this is probably going to be the answer for you next on our list is extras for elemental now I've had this plug-in for quite some time but I don't actually got around to testing it out any real kind of way so if you'd like to see more and this is this picture in just let me know in the comment section below and I'll take a look at see if I can come up with things that I think are gonna be worthwhile in check and I said I know there are a couple of features that are coming out in the next version which i think is two point three that will have a big impact for a lot of people so keep an eye on the channel and let me know if you want to see more about this particular plug-in but now we're going to take a look at how we use this to create those custom post listings so I'm gonna jump back over into our dashboard for WordPress we enter the template section again but this time I'm going to save templates so this is something that is part of the free version of Elementor because we're going to do is we're gonna create a section template so we can just create that layout like we've done previously we're gonna do it slightly differently this time so look at a section and from there we're just going to say add new section is fine and we're just gonna call this loop test two just to make sure create our template and once you do that we then go into element or we can close this down we don't need predefined blocks and now we will just start building the template you want to use no we have no special widgets that we're going to use for this you can see if we scroll on through we do have a lot actual widgets for extras for elemental we have a ton of different things inside there but nothing that we want to use to reference for creating this particular layout again we're going to go back to use in just the normal Elemental Pro options so we're going to do is we're just gonna say we're going to grab an image to start off with we'll drag and drop that in there this is again where we're going to use those dynamic tags so we're going to click on dynamic tags option and set this to be the featured image that will then pull in the future image and sometimes you don't necessarily get to see exactly what's going on some plugins have this kind of weird thing where it doesn't show you we're going to do is gonna come out to the settings again coming to our preview settings change this over and we want the vehicle as an option and then we're gonna click and we're just going to type in mini again in there and we'll say the mini JC Black Edition and hit apply preview and there we go that note just pulls in the image for us so we've got our our featured image inside there which we can now adjust this in any way we want so we can set the image size disk of a medium large on there if you want to you can come into the features image and you could drop a fallback in there if you want to this is part of working with those dynamic times is quite useful so come back over and this time we're going to drag and drop a heading in name now you can use if we do a search for post you can see we do have post title we could drag and drop that down underneath and that will pull in the name of this particular vehicle we could come back over we can come back into our widgets and we can just drop something else and we do a post again we can see we've got things like post info drag and drop that underneath there and again you can see it pulls in those same metadata so we can get rid of the comment section so you can build this up however you want to you can put in dynamic data like we've done with the featured image you can set these up pull in any data you want so for example you may want to pull in some dynamic content from your ACF custom field what we could do just that so let's come back out let's add a new item inside shoot it change this over to terms and from the attack solloway we're going to just choose the manufacturer and you can see that will pull in this example BMW so we can use these and paulien dynamic data and set these up in any kind of way that we want to we hit publish on this now so we've say we've finished with our template we're happy with that so the templates created next thing we need to do now like we've done before is create the page or the archive template or whatever we want to use to reference these loops and then set that up so the newly created page elementos open we're going to do a search for post and you'll see we've got this post extras which is part of the elemental extras widgets so we will drag and drop that into our page design and again you can see it just pulls in whatever thinks is the right data so we can come down we can query this if you want to and change this from posts and set this to be vehicles and then we get the right data in there but this is using their predefined layer in the same way as the posts widget as part of elemental Pro does we can change that though we can come back out so layout and we have the skin again like you see we've got classic inside there but we have carousel now as well much as soon as we have a jet engine and the pro version of elements our custom skin and so on but what we're interested in is the post skin you can see it says default but we want to change this to template choose template the next thing it says is please choose the template you want to use so gonna click on me we've called this test too so you just type in test there's our loop test - gonna click on that and once we done there we go that's pulled in our data and laid everything out for us again like I say we can always go back to that template edit things to make sure everything looks fine obviously the text looks a bit big it looks a bit messy at the moment but the demonstration on how to use it as opposed to how to configure the design and so on so all the same things are here we've got the columns we've got the posts per page we can change the grid layout of who want to we can set this to be default like it is right now or we could set it to be masonry if we had different aspect ratios and so for our images said about the default we could adjust our spacing so our column space in if we want to you can see we can bump that up we can drop it down nice and tight same with the row spacing so we can adjust this to get exactly what we want inside there we can also adjust the vertical on line which could be quite useful depending upon the layout that you have so you can set things to be top middle and you can see that will adjust things based upon the overall height of each one of these individual template setups we've got horizontal you've got vertical alignment you know we can adjust these any way we see fit query we've already seen that and that works in exactly the same way as it does inside elemental what we do have in here though is filters and this is one of those things that could be quite useful if we enable the filters if you've ever used the portfolio setup or the galleries for example as part of elements or pro you'll know you can filter things based upon taxonomy and those kinds of things well we do the same with this at the mall it says taxonomy is categories but we want to change that we're gonna change this to manufacturers which is one of our our custom taxonomies associated with our custom post type vehicles click on that you see that now pulls in all of the different taxonomy x' the vehicle manufacturer taxonomy x' and pushed those at the top we can now click and we can filter our data based upon those filters at the top so that's pretty nice I think we've got things say we can actually terms we can set a default term if you want to we can order ascending show the post count show the old filter if we want to hide that it'll only show then the manufacturers you know you can set this up however you want to work with it we can set an infinite scroll if we want to so instead of having pagination you could have this when you go to the bottom of the page or close to the bottom it'll keep on loading in more vehicles more posts whatever you kind of have in there one after the other alternately you can set pagination like you did when we had you know using the post option as part of WordPress a part of Elementor Pro and again we've got the option to configure this and you know set things up there's a lot more options inside here advanced just basically gives us a message if it doesn't find any data inside there so that's how we can use elemental extras and how we can set things up inside there to create our custom loops and also do things like apply filters in first kroll those kinds of quite cool things now that you've seen the four plugins in action which one was your favorite are you using one of these already if you are let me know which one you use in and if you kind of think this would make you consider swap into an alternative I'd love to get your feedback drop those comments and questions in the comment section below as always all the applicable links for everything I've covered in this video or in the description below - rupaul see this has been wptouch and until next time take care

Channel: WPTuts

Views: 32,214

Keywords: WPTuts, crocoblock elementor, crocoblock jet engine, crocoblock tutorial, elementor extras plugin, elementor extras addon, elementor extras post extra, elementor custom skin loop, elementor custom skin plugin, dynamic content for elementor pro, wordpress loop custom post type

Id: sCeGjjawl8c

Length: 41min 49sec (2509 seconds)

Published: Thu Jun 04 2020