5 MUST HAVE Free ACF & Elementor Pro Plugins

if you work with advanced custom feels an elemental pro and you really want to open up some of the things you can do I'm gonna give you five absolutely free plug-ins today that work without combination of tools and opens up a whole range of different things that you can do many of these have been covered in different videos and we're applicable I'll put links to those original videos where I cover these particular tools in a little bit more detail so if you want to check those out and find it exactly what they can do then all that information is there available to you so the first plug-in we're going to take a look at is dynamic conditions for elemental now this is one of those ones that I've used in a lot of projects I've also used it in quite a few different video tutorials on this channel reason we can look at this is because this is what I were considered to be a fundamental tool that should be built into Elementor Pro but currently we have no control of a showing and hiding data if for example we've got empty fields so let's just say we wanted to create a custom post type and inside there we had several different fields that weren't mandatory well the last thing we wanna do is show empty field values when it comes to working with the template and what we put that information out on the front end of our site dynamic conditions for Elementor makes the whole process of hiding things incredibly easy now that's just one simple example of how you could use it so we're gonna do is going to quickly jump over and take a look at just some of the things you can do with this plugin now if you want to learn more I will put a link in the description below where you can check out a much more comprehensive tutorial on using this particular free plugin so this if it piques your interest go and take a look at that and get a lot more info on it so let's just take a look at that one first so dynamic conditions is one of those little plugins that when you want to do something really simple and straightforward where you want to show something or hide something and use something to trigger it it's a great way of doing it so what exactly do I mean by hide something or show something in triggers and all those kinds of things let me quickly show you I'll jump over into WordPress into the elemental template builder or the theme builder and I've created a blank template now which would be a typical single post so you'd have things like your featured image you may have a post title some metadata all those kinds of things you'd expect to see so that's sort of a really simple condition let's drag and drop the featured in option in and this will show us the featured image of the particular post we're looking at but what if someone hasn't uploaded a featured image world that's blank well we'd end up with a placeholder which would look a little bit rubbish inside our design so we need to have an easy way of illness show this only if there's a featured image uploaded if not we get to do something else so with this selected we come to the Advanced tab on the left hand side under there we've now got a new entry called dynamic conditions we click to open that up and we've got a very simple interface we've got the dynamic tag in other words what is it we want to check against in this example the featured image how do we want to check against it are we going to show something or hide something if the condition is met so you can choose whichever option you want they both will do fundamentally the same thing it's just how you want to handle it in your specific situation next up is the condition and finally we have the past short codes and debug mode which I'm not gonna go into in this what we're gonna say is first of all we're gonna set the dynamic condition the dynamic tags going to select that I'm gonna come down until we find the option for our featured image so we go media featured image data it's going to click on that then we're gonna set the condition so we're going to say hide when condition is met and then we're gonna set the condition so we're then going to say is empty so all this basically means is if the featured image is empty hide this particular container and we want to you can see we can say hide only contents and it says if checked only the inner content will be hidden so you'll still see an empty section but obviously that wouldn't be the best way of doing it in this particular example so you could select that and that would now hide the container part as well so it's a very very simple plugin and you can use it to check there's all manner of different kinds of data so if I click to open this up again just get rid of this I would like to see the tags you can see there is an absolute ton that we can check against and then we can show and hide various different elements the other thing that's very very useful and why I think this is incredibly powerful advanced custom fields is we can use it to check against ACF data so let's just say you wanted to put a simple checkbox as part of your dashboard part of your custom post type and then it has checked it'll do one if it's unchecked it'll do something else well this is the plugin that allow you to do that we can reference those ACF fields and then we can hide or show based upon whatever criteria we want to check against so that's the first one I wanted to show you it's incredibly useful I use it in a ton of projects and it's probably one of those go-to plugins that whenever I'm using ACF and I'm creating templates and theme files I will always have this one installed because it's just so invaluable so next on our list of invaluable free plug-ins for elemental an ACF is elemental custom skin now I've covered this and use this in quite a few different videos so I will put a link in the description below to the latest one when I take you through and show you how to start using this plug-in now another plug-in that I think is massively and valuable when you're working with ACF and templates and all those kinds of things that you do is elemental custom skin or is it used to be known le custom skin now it kind of gives a bit of a Miss nemrut because you're not creating custom skins as it were you creating a custom layer for your loop so what do I mean by your loop well if you take a look at this page you can see we've got a couple of different vehicles listed now each one of these items is a template that's being used to output a specific vehicles details then we've got that looped multiple times to show all the vehicles inside this particular section so in this example 3 so what any custom skin allows you to do is to create the layout for this specific loop item just an individual item the reason why I say this is invaluable when it comes to working with advanced custom fields is because as you can see we can reference ACF fields which you can't do straight out-of-the-box with element or pro so this is just a great way of doing it let me just give you a brief example of how this all works let's come back into the theme builder part of Elementor Pro inside our dashboard you'll see we have a new tab called loop we click on there that's where we can create our loop items so let's just go and take a look at that vehicle so we're going to say the default the vehicle loop we're gonna come in and we're gonna edit this with elemental and you'll see what it is is we've got a template that's just a layout for the data that's going to be used inside our loop so we've got the picture at the top the name of the vehicle then manufacture at the description and the button that allows to go through and view the details so you come back go to our page you can see there's the TT image there's the name there's the manufacturer at the description and the button so what we've done is we've created this custom layout with this like I say we kind of we want to pull in additional custom data so if we wanted to we could duplicate this once I've duplicated it I could now come in and add in any data that I want so I'll change from post terms and we'll come in and we'll choose something else so we'll just delete that from there I will come in and click on the dynamic tags and we can then pull something else in from ACF for examples we will say ACF field click our wrench icon and come and choose how it how details and we say let's go for the vehicle price this time gonna click on price come down underneath and we're just gonna put price put a full call on and we'll put the pound but we do have pounds in this example and you see that now pulls in the value that we've pulled from that ACF feel so if I update this now save and close this template file out and come back to our test page will refresh this and you'll see now we've also got the price which is ACF data pulled into the template designer we've created for our custom loop and that really is all le custom skin is really doing for us but it gives us a ton of creativity because we can get in and create any kind of loop layout that we want and then use that in a multitude of different ways so how would we actually reference this now we've created it well let me just show you that before we close this section down exit out of this section then I come back into our saved templates area I'm gonna come back in and we're gonna take a look at so your theme builder when I come into our archives we're gonna open up what we will create for a default vehicle archive so in other words this is we're gonna output all the listings of the vehicles inside that loop and you can see this is the same page so we've got listed here just inside elemental and all this is is your normal archive post section but we can choose the custom skin so normally you'd see something like this which would be the cards option and you'd have three options classic cars and full content but once you install any code elemental custom skin you get a fourth option or custom click custom that now allows us to go through and choose any loop templates that we've created so you can see the default vehicle loop is the one that we've used that's now inserted and everything is laid out the way that we've set it up to be laid out so you could if you wanted to use this in conjunction with the various dynamic conditions plugins that we've looked at already and then you could use those to show and hide various pieces of data if that data is included in this percent specific listing if not then that will be emitted from this so you can tie these different plugins in together to get a lot more creative in what you want to do but fundamentally that is what Ellie or Elementor custom skin is all about now if you find this information useful and you'd like to support the channel please consider just click on our subscribe button smashing the bar icon below to be notified every time new content is added don't forget to give us a thumbs up all this kind of thing helps so the next plugin we're going to take a look at its dynamic visibility for elemental now you may be forgiven for thinking the dynamic visibility for Elementor is pretty much just going to do the same thing as dynamic conditions and to a certain extent there is a little bit of an overlap however I think the two plugins have different things our enough differences in there to make them both worth considering based upon the project and what you need to do so what I'm gonna do is jump back over to the dashboard back into the same template that I was working on earlier on and as you can see I've added a few other things in we've got the title we've got some metadata we've got the featured image and we've got the text underneath it so the typical kind of things you'd expect to see in a normal post template but let's just say we wanted to hide or show various derivatives based upon different parameters the more we can do inside dynamic conditions well let's take a look at what I'm talking about let's just click on this metadata information I'm gonna color to the new tab which is visibility now don't worry about this icon missing I get that from time to time inside the dashboard this will normally be replaced by a little eye symbol so don't worry about that if you don't see it it's still gonna work perfectly fine hit the visibility option and you can see by default it's turned off so we're not using the power of that particular plug-in at all on this template once we enable it we now get a range of new tabs available visibility's they're being opened up you can see enabled that we were the option to hide this block she says hide this element on the front end until it's enabled so we can hide that in other words the HTML code and so on it's not gonna be part is gonna be hidden completely you also then got to keep HTML so if you wanted to have the HTML showing up in the code but not being displayed on the page you could use that option as well so have a little read of the documentation to see exactly what's going on there well we're interested in though are the next five tabs use a roll device and browser and so on if we click and open up the user role you can see we can choose what user roles can see the various different component parts of this particular template when it's being viewed on the front end of the site so the first option we have is the user role and we can click inside there we can choose the various different user roles that are part of WordPress so things like administrators editors authors and so on so you may want to show this to anybody that's logged in with the right login role or you may want to show it to everybody else in your normal visitors to it and not logged in or they don't match that user role you know it's up to you how you want to do it so you could use this inside your templates to do login and logout and stuff like that and access to the admin dashboard for your administrators and editors whereas your normal author and contributor and subscriber may not see those links there's a million different use cases for where you'd want to use this so you could choose a user role and you can choose multiple user roles if you want to you can also come in and do things like select a specific user so you could target them either by the unique ID their email or their user name and you can do a lot of these different ones as well so you can use commas to separate these up so you may want to be very very specific who can access this data or who can see this data you can also filter it down using metadata now don't worry too much you can't see this on this let me just click and choose one of those so you can do things like based upon user emails so you could really fine-tune who can see various different components of your site this is a good way with a sort of semi lock down various different parts you can then do things like use a meta status you can see not know not set or is empty is validated or is a specific value so there's a various different ranges of what you could do on there you can target IP addresses you can at Argyll a RIF get a referrer so you click on that you can choose exactly where the user comes from so if you wanted to do things like target specific adverts to users that came from Facebook then you could do things like that so there are a ton of different use cases for where and when and how you may want to implement this into your site design now that's just one of the options that's just the user enrolls we can also come in and use things like devices and browsers so if you want to we could target responsive devices so we could see desktops and TVs or mobiles and tablets we could target specific browser types on this if we wanted to for example Google Chrome you can target that now don't worry about this sort of visual glitch I kind of get that I don't know if this is something specific to Google Chrome or something else it's a little bit frustrating but it's one of those things I've seen this on various different plugins some thinking is more to do with the browser than it is the plug-in itself but like I said you can then target the devices that the browser this being used the mobile or desktop devices being used so you can see there's great ways of either to tap into this to use it for all manner of different things dates and times we can do that a date from and two so you may want to show one lot of advertising in the day time a different I love advertising in the evening time you can set the days of the week things to show up the time from and the time to conditional tags we've also got options in there so it's like you can use the native WordPress conditional tags to actually do things as well so you could target posts site page archive home manner of different things and finally you've got the fallback so if none of those conditions have being met you can set a fallback content so enable in that you can choose what you want to do and you can even use dynamic data inside here so you can put a message in there whatever you wanted to do and the nice thing with this is you should be able to tie this into the options you could set up so you could create a dashboard or create an options panel that you customize all these different messages and then you can use the dynamic option to tie those in and target those inside your templates so that might be a little bit beyond what we want to cover in this but hopefully what you could see with this plug-in is in conjunction with dynamic conditions we've got a ton of options on how we can show and hide different components different parts of our site in templates pages posts massive amount of different things we could do with this so it's an invaluable plug-in when you really want to get in and get really granular in how you control your website layouts with elemental now next up we've got two plugins by the same development company now why are we using two different plugins well I've found that they are both incredibly useful open up a ton of options and have a lot of features in the free version now this is something that I think is invaluable but it's not just that the developer is very open to suggestions feedback and is also very active in the WP crew Facebook group that's the Facebook group for the WP tides channel I'll put a link in the description below so if you'd like to join that become part of the conversation please by all means - there's no obligation there's no charges nothing it's just a great group of like-minded individuals that are all looking for help support share ideas and just basically a great place to hang out okay so the first minute take a look at is advanced post queries and what this does is it opens up the ability to get a lot more creative in how you filter and display your data this is something that when you started creating more advanced websites is invaluable when you want to output the data in the way that you want and not just the default way that elemental probe or WordPress may kind of force you to without this kind of tool so let's just jump over the dashboard take a quick look at this plug-in and see what kinds of things you can do with them advanced post queries for elemental is another one those great little plugins that does one specific job but when you need it it does it real really well so what do I mean let's just jump back over into our example this is where I've got the ability to edit the vehicles but I need to fail to filter this based upon the use of this logged in so how can I do that but with this plugged in is very very easy so if we take a look at the query section we have a new option the bottom says advanced query options click on there we've got five different values currently dynamic user date and time related posts and so on what I want to do is set dynamic user in this example so in other words it'll look to see who's currently logged in and then only display the content based upon that law in detail once I click on me you see this will update and only show me the vehicle that's associated with in this example the author being the current user so a set dynamic user but I can then set a second condition to make sure that I'm getting exactly the user that I want if you said the user is the current user the author is that's like the author is the current user the author is the current author and so on and so forth so again you can query against various different values and depend upon what you choose you can see we can set a second one a third one a fourth one we can really come in and fine-tune how we want to filter our data and this is the thing when you're working with advanced custom fields and tools like this a lot of what you're going to do is filtering data so the tools like this just make the whole process a lot easier and fills those gaps where you don't have these options inside Elementor Pro itself so I would recommend taking a look at this plugin it seems I could really simple plug-in and to use it it is very very simple but it has a ton of options that just open up what you can do with your dynamic data so the final plug we're going to take a look at is front-end forms for elemental what does this do it allows you to create front-end forms in other words you can allow users to upload data add posts custom post types and things along those lines without giving them access to the dashboard of WordPress this just increases your security but also has a ton of other uses and I've recently released a video that shows you how to create a fully customized front-end dashboard using this particular plugin the pro version because it gives you some more but you could get away with the free version for probably 85 to 90% of what was covered in that video so you don't necessarily need the pro version but that sort of expanded upon what you could do with this particular kind of plug-in to create something truly unique and keep your end-users your clients and so on out of your dashboard so as always that link will be in the description below and I would highly recommend you take a look at it because it really does open your eyes to some of the possibilities of using these range of plugins to create something truly unique for your end users and clients okay so let's just take a quick look at this as an example now this was the custom dashboard that I created as you can see everything is laid out nice and neat and tidy and it's a nice way of looking things without going to the dashboard of WordPress and could be a lot more user-friendly for clients and there are various different aspects of what we've been covering with the different plugins to hide and show different things but for this example let's just take a look at the ad post so if I click on add post that will take me into a front-end section that allows me to submit a new post so I can do things like add the title the content upload media set my featured image apply categories if I want to I can even use tags whole range of different things have been added into this particular plug-in which makes it invaluable so with all those kinds of things set up it's very easy now to be able to do this and what you can do is you can set this as someone can post content like for example you may want to open this up to people to contribute content to your blog or something you can have that uploaded you could be email with some details to say something's being sent through to you and then you can go through take a look at it if you're happy with it you can approve it if not you can then just deny it from being posted on the site all these options are available inside this plugin super super powerful and cool so let's come back into our dashboard now in WordPress and take a look at what we can do with this plug-in and how easy it makes the whole process now I'm using the pro version because this is a demonstration of exactly what could be done but I'm not going to show you any of the Pro options I will only show you what's available to you in the free version of this plug-in so this is the dashboard this is the page we were looking at on the front end this is now opening Alimentum so let's just make sure we select this they sell a form area so you can see we've got things like actions what we want to do we've got a range of things like we can edit posts we can add new posts we can do things like if we have advanced custom fields installed we can link it through and use this alongside ACF and target all the various different components inside there the beauty of this is that we don't have to manually one by one go in and add in the fields we want to use this plug-in is intelligent enough that it'll pull our data in and if we want to fine-tune it we can do exactly that so this is something simple what's the action create a new post what's the submit action or we can send an email once it's been submitted how do we want to redirect after the submit you may want to send someone to a second page to say thank you for your submission will review it bla bla bla bla bla or you may want to keep them on the same page well those options inside there for you so this is where we can do with the action we're going to skip over the fields of section we're going to jump down to post so if you over at the post you can see we can set the status of any new post has been submitted in this example we're set into the pending review but you can set it to any of these options draft private pending review and published so you get control over exactly what's going on the new post type you can see we've got post page and other things that may be installed so like we've got Elementor installed it's set up say elemental library for example but you can see vehicles which is my custom post type so we could pull this into there as well then underneath you see we've got things like the different fields we want to use so the normal fields you'd have as part of a typical WordPress post the title the content the featured image and excerpt if you're using it and things then like tags and categories and so on so you can see in this example I'm not using the post excerpt field but I am using the title of the content the featured image and so on the other nice thing about this is if you wanted to use a CF feels to possibly open up more control over the normal default WordPress fields you can do that so you can you can see we've got default featured image field or we could use none and custom if you wanted to use custom we could start referencing things inside a CF we're gonna leave that set to default maybe this is beyond what I want to cover in this we've already covered a ton of this in the different tutorials now speaking of a CF if we come back up and close posts down and go into fields you can see we can do now is we can set up the title for this or we can omit one completely we can even set this up through dynamic tags then we got field groups or the ACF fields you can see there are two options in their field groups and fields field groups will pull in all of the ACF fields from a specific field group created inside ACF feels will allow you to go through and manually select which fields inside all of your ACF groups you want a reference so you could mix various different fields in if you wanted to so you can then see we've got things like submit for approval which is what we've got in the button so we have control over almost every element in what we want to do with this particular form we could even come down there and control exactly what with the email so if we expand this out you can see we can set the email name we can set a to a CC and a BCC from all the things you'd expect to see we can even do things that you'd normally expect inside WordPress its if I inside Elementor itself where you can set the metadata so there's a ton of options inside you I would highly recommend that you just install this plugin and just take it for a play to see exactly how it all works but it is a very powerful plugin opens up a ton of possibilities on the front end for form submissions if you want to go above and beyond that the pro version has even more including the ability to go in a style everything the way you want the free version doesn't allow you to style the form you'd have to do that manually so with our mind like I say that's how we can use the ACF front-end form plug-in well there we go that's five absolutely free plugins that expand what you can do with elemental pro alongside ACF what do you think of these plugins are they new to you are they things you've seen and tried it yourself let me know in the comment section below now speak in the comment section if you've got other plugins that you think are worth me taking a look at drop links to those in the comment section so I'll take a look at them and it could be added into a future video or have some content created on them as always all the applicable links for everything we cover on the channel all in that description down below - your Posse this has been wptouch and until next time take care

Channel: WPTuts

Views: 18,502

Keywords: WPTuts, elementor pro, advanced custom fields elementor, advanced custom fields pro, advanced custom fields wordpress, elementor page builder, wptuts acf, elementor custom skin plugin, elementor custom skin loop, Dynamic Conditions for Elementor, Dynamic Visibility for Elementor, Frontend Forms for WordPress

Id: Hj0PL1KPzN0

Length: 25min 54sec (1554 seconds)

Published: Wed Feb 26 2020