How to Add Content with Hooked and Fixed Elements in Kadence (Kadence Pro Tutorial)

hey what's up everybody clifton here with clifton wp welcome to the channel in this tutorial we're going to be taking a look at the cadence pro theme elements feature we're going to be doing a deeper dive into this feature the elements feature of the cadence pro theme is probably one of my favorite features because it allows you to really create layouts and items and hook them into your website wherever you want in a very very easy way you're not going to need to know any code to be able to do this and you can really create some really dynamic websites using the elements capability of the cadence pro theme so if you guys are ready to jump into this tutorial and learn some really cool tips and tricks about things that you can do with elements and cadence then let's jump right into it [Music] okay so to have some fun with the elements we're going to start from scratch this is just how i like to do things like to start with a fresh wordpress install and go through all the steps so that everyone has the ability to kind of follow along from the very beginning all right so the first thing we're going to do or first thing you're going to need is a fresh install of wordpress so this is wordpress when you first install it this is what it looks like now we're going to go ahead and install our plug-ins we're going to need the cadence theme we're going to need the cadence blocks we're going to need the cadence pro theme and the cadence pro blocks now for those of you who may not have the cadence pro theme you can get the cadence pro theme i'm including the link here in the description below and also in the video this is an affiliate link so if you purchase cadence through my link i do get a affiliate commission from that and that goes to supporting the channel anyway so what we are covering in in here and what happens when you get the cadence pro theme is you get some additional features that are not in the free version of the theme so right here are the premium features there's the header add-ons hooked elements which we'll be covering today the ultimate menu i've already made a video about this and i'll leave that that link also in the description below or somewhere in this video and then fix elements so we're gonna talk about hooked elements and we're going to talk about fixed elements as well these two these are two fun topics to and fun features that cadence has then there's header photo scripts and the woocommerce add-on as well so this is the pricing 59 for a single license but you can use it on unlimited websites then there's the essential bundle and the difference between these two is that with this one you also get the cadence blocks pro and access to pro starter templates which we'll be using in this tutorial today and then the there's a full bundle which includes every plug-in that cadence has and there is also a lifetime bundle that just includes everything so just get the one that best suited to you and then hop on over to the tutorial and i'll show you how to use all these really cool elements all right let's jump right into it so here is our fresh install we're going to go to our dashboard i'm going to go to plugins actually go to appearance first then themes and we're going to click on add new and we're going to search for cadence now cadence is very popular you probably don't need to search for it it will come up cadence we're going to install and activate great and then i'm going to delete all these ones because i just like to run a lean install so we don't need these extra themes since we're not using them all right then now we need to install our plugins so we're going to go to plugins add new and we're going to search for cadence blocks cadence blocks is the gutenberg add-on that cadence has that allows your website to have page building features so we're going to click install there and activate and these are now our cadence blocks activated now we need to install the pro version of the theme so if you've already bought your if you already have the pro version you would just simply go to your account and download that from your account so we're gonna go here i've already downloaded it i'm gonna click on plugins add new upload plugin choose and we're gonna find my cadence pro theme here let's grab the most recent one install activate all right it's not activated i'm gonna go add new again and this time i'm going to install the blocks the pro blocks cadence blocks pro so upload choose file install and activate now we just need to add our license to this um to the install so i'm gonna go click here so that i can activate it enter my license key activate and then i'm gonna do the same thing for the cadence blocks pro all right so now we are all set if we take a look at our website now it is now the cadence version of the wordpress website so the next thing that we need to do now is we need to theme this and add a theme now i typically like to build my website from scratch but for the purposes of this tutorial we're going to just install a pre-made website so that we can go ahead and jump right into using the elements so to do that with cadence cadence has starter templates and you can see right here from the moment we installed the cadence theme it's been asking us to install the cadence starter template so let's go ahead and do that you can also do this from the plug-in repository now cadence you can use cadence with any page builder and there are lots of different page builders but the one that i prefer and i recommend is gutenberg only because gutenberg automatically ships with wordpress and it's becoming the is fast becoming the the builder of choice for uh wordpress so there's a lot of focus on it i think it's a good idea to really learn how to use gutenberg and i have some tutorials coming up and tutorials that i've already made that show you how to do that so we're going to select gutenberg as our builder of choice now that we've selected gutenberg we can pick any of these starter sites to be able to install and start utilizing the elements feature so let's just pick anyone that we want so what i'm going to do i'm going to select let's select this one digital services okay i'm taking a look at it this looks really good lots of white space and lots of lots of stuff we can play with so i'm going to go ahead and install the full site okay our site's installed let's view it all right so now just a few minutes we have a full starter site to get started with and now we can start playing around and adding some some elements to this and learn how to use some cool elements so let's get right into that okay so let's create an element you're going to go to the dashboard we're going to go to appearance and over here where it says cadence in the sub menu if you don't see the elements option kind of like i'm not seeing it here and you've installed the pro theme add-on just go ahead and click on cadence and scroll down and make sure that you have the hooked elements toggled on so once you toggle it on you're now ready to create an element so we're going to go ahead and go to our dashboard and just use this as a refresh and if you come back to appearance and then under cadence you'll see elements as a sub menu so what is an element anyway an element is just basically a part that you can create and it can contain blocks or it can be a block and then you can go ahead and hook that into anywhere on you want anywhere you want on your website that has an area where you can hook on to so this can be before the header it can be after the header it can be somewhere in the contents it could be inside of the contents at the footer lots of different options for where you can hook in some some items so the best way to do it is really to show you how this works so i'm going to go ahead here and i'm going to click on add new now when you click on add new you're going to get this element set up and you get to choose the element type so you have the default element which is just the standard hooking it into a place somewhere on the website you have the fixed element which is going to be fixed in place while the website is moving around this item is going to be floating kind of on top of the website or fixed to a certain part of the website and then you have the html editor which allows you to add your own custom code so we're going to create one of each of these so you can see what it looks like so let's create a default one so we're gonna call this our default element okay and for this one let's just create something that's actually pretty standard so i'm gonna come here and do a forward slash and i'm gonna type r0w for the row layout i'm gonna select that and i'm gonna select a three column row layout and in each one of these layouts i'm gonna place an icon so the first icon that i'm going to add here is going to be a phone this let's make this a telephone all right so here's a nice phone right here and we're going to reduce the size of this it's just so big so we'll make this uh c35 all right that looks good then i'm gonna go here and add a second icon into the second column and for this icon this is gonna be a chat icon okay so type in the word chat and let's use this one this looks like some speech bubbles here and we will make this also 35 and then for our last and final one i wonder if we could do an icon for subscribing so let's say subscribe no i don't see anything like that how about rss there we go so let's do something like this the old school subscribe link all right and let's also make sure that the size matches so 35 okay great then we're going to add some color to our background here so that we can kind of see what's going on so i'm going to select the entire row and i'm gonna go to background settings and for background color i would like let's do a color we can actually see so let's go with this color here actually a little darker would be good how about how about this color okay this is good let's make it this color and then let's make our icons a little bit of a lighter color here so i'm going to come here the icon color let's go to let's go with white there we go i'm just making the changes on the right side of the page here okay great so this looks pretty good now remember this is our default element so that means we can hook this anywhere we want so imagine that maybe this is something that's going to be an extra bar and maybe you're going to hook this to the footer or you could also hook it above the header right so now that we've done this we've created our our element now we're just going to go and configure where we want to place this so see this icon here this is where the element settings for placement are so when you select this you have your placement options right now it's set up to none you can go ahead and actually look at all the different areas where you can plug this in so before the site wrapper which is right at the very top of the website or after the site wrapper at very bottom before header after header this can actually be your header so you can have it replace the header then you have areas for your in your content where you can plug this in and then after the content hero title and then you can even replace the above content hero title it's actually pretty cool areas where you can hook this stuff in so you can see there's a lot of options here so for our purposes just to make it really easy we're going to go ahead and hook this below the footer so we'll just put this here after the footer okay and then for the display settings here you get to choose where you want it to show on so you can have it show on a specific page or post search results or your 404 page in this case we just have it show up on the entire page okay and you also have exclude settings in case you want to exclude any setting any uh pages and then user settings so you can actually narrow this down to specific user role types or logged in or logged out users okay for now we're just going to leave this alone and then device settings i can say i will i want this to show up on a desktop or on the mobile device and expire settings means that you can actually choose when this will stop showing so you can select a date sometime in the future when you don't want this to show but we're not going to use that right now okay so for right now we're just going to do an after footer i'm going to go ahead and save the work and then now when we visit the website and if we scroll down [Music] we are going after the footer we can see we now have these elements over here right so this is where we've hooked it into now what if i wanted this to be before the footer okay it's very easy i just go back to the dashboard go to appearance cadence elements then select edit go to my placement settings and now i'm going to put it before the footer update and then when we view the page and we scroll down we can see here now that it is before the footer so you can literally hook this anywhere on any page anywhere that you want right now a really good use of something like this would be on a mobile device right because on the mobile device you may want to have a couple of icons where people can easily click and and reach you but we'll do that in a different type of element maybe on the fixed one where it's actually floating on top of the website so that is the default fix element and like i said you can actually fix anything you want to any section of the website so now that we've done that let's go ahead and do the fixed element next okay so let's have some fun with some fixed elements so i'm gonna go back to the dashboard here and i'm gonna go to appearance and we're going to go to cadence and select elements now we're gonna do something quite similar here so i'm going to click on add new and this time i'm going to select that i want a fixed element so this will give me a different set of options right here on the right side when it comes to things like the placement right so the placements are a little bit different they're fewer but these are places where you can fix whatever we create here we can affix to these different areas right here and i'll show you what i mean by that so we're going to go ahead and call this our fixed element and because we might create multiple ones of these let's just call this fixed element one and then what we're going to fix this time is we're going to use the same example we're going to use icons but let me tell you you can actually fix anything you can affix any block any container or any layout pretty much anything you want you can affix to your website but this just makes it very easy to show you how this works so what i'm going to do here is i'm just going to open up the the gutenberg blocks and we're going to use cadence blocks in this one and we're going to do the same thing we're going to select icon an icon so here's our icon and for this one let's go ahead and just do a little icon navigation right so here's an icon here i'm going to go over here to this icon and we're going to change this to the home key so this will be an icon that someone can click on to go back to the home page let's uh spill home correctly there we go so i'm going to select the home key for this icon and i want this icon to be aligned to the left and then let's do some configurations here in terms of style you can leave it like this but i want it to be a little bit more distinct so that we can see it when we go to the front end so i'm going to come here and under the default style we're going to change this to stacked it's going to put this square box around it and then uh let's give it a very light background color so something like that or maybe a little lighter there we go and then let's make our border something fun and i'll make the border a little bit thicker i'm just trying to do something where that you can actually see once we look at it on the front end and then for the icon color itself let's do the same color as the border all right and then for a hover effect let's do something that we'll see so i will go with a white color for the hover effect and the background effect is going to be something really dark like that so let's hover over this all right that's looking pretty good so that's our that's our hover effect uh maybe i want something a little a little different being picky so let's uh let's make this a vibrant pinkish fuchsia color and then the border will make the border white so now we have our first item now the item is the icon is a little bit big so let's make it a little smaller so i'm going to come here and we're going to go to the icon size i'm going to change this to 40 to see how that looks that looks great and then right here where it says padding we're going to reduce this padding to 10. there we go so now that looks like a nice little home button okay then let's create some additional buttons that are based on this button it's going to be very easy to do just click on this right here click on the options and click on duplicate and then we'll do it one more time and duplicate okay so now we have we have three icons just so you know one of the cool things about about icons in [Music] cadence or cadets pro is you can actually increase the number of icons going horizontally right so if i said i wanted two of these i can increase it like that right so now i have them going all the way across but i don't want that that would take up too much space so let's just make it i'm going to make this horizontally because we're going to we're going to stick this to the side of our of our website so now we're going to no all we need to do here is just create a little bit of space between these so i'm going to select the first one i'm going to come here down to the margin i'm going to separate out the margin um so that it gives me each margin space and so with that and i want the bottom margin and i'm going to add 20 pixels between that all right great and then we'll do the same thing with the second one separate it out 20 pixels and then we're going to change the icon so we have different icons so let's go to the second one and we'll make this a phone icon so like a call and this one will make this a support icon and you can just type phone again and we'll use this as our support so you can contact support with that and then let's do one more icon just for fun i'm gonna go ahead and duplicate this and let's create some space for that one as well so down to the margin separate it out and we'll do 20 pixels and then we'll select this one and we'll make this icon a contact icon so how about an envelope i like that that one's better okay great so now we have our icons all set up and then we're going to go ahead and now configure this so now that we've done that the next thing that we need to do is we need to tell cadence where we want to affix this element where do we want this to go so you're going to select the element settings right here which is this settings settings uh icon right here and the placement that we want here is we want this placement to be so here are the options we have we can fix it to the top we can fix it above the transparent header you can fix it to the top after you start scrolling so that means if it's affixed to the top once you start scrolling then it will show up okay you can fix it to the bottom after scroll so after you start scrolling it shows up on the bottom you fix it to the bottom of the scroll um fix it on the bottom and fix bottom no space below footer and that is a that's that's this is one is actually better for like your modals and things like that so what i want to do is i'm going to fix it to the top after scroll and what this is saying is fix this to the top of the page for me and only show it after scrolling once the scroll distance reaches 300 pixels of the page so now this is going to be about a third of the page so i really want this a little bit lower so i'm going to make this 500. so what that's saying is once i load the page at 500 pixels of scrolling go ahead and show these icons okay next we need to display where is this going to show up i want this on the entire site so no matter what page you're on i want you to be able to see this because this will navigate to wherever i want and let's just put a link here on this one just to kind of show you that these actually do work so i'm going to select this go to all right right here is where you put in the link okay this little icon you're seeing here this is a dynamic link so if we were doing something with dynamic content or custom post types and things like that this is where you would grab that information and you can create templates with that and in a future video we're going to be talking about custom post types and specifically custom post types with cadence so that's going to be a lot of fun all right great so now this is done i'm gonna go ahead and uh publish this and then let's take a look and see what happens when we go to the front end so i'm gonna go to a separate tab here and we're just gonna load our site and right now you notice that nothing's happened you're not really seeing anything but once you start to scroll see what happens there see our icon shows up right there at the top right and now as you're scrolling i can now if i go to another if i go back up it disappears if i go to another page let's go to this pricing page and i start to scroll now i have these icons again if i click on this one it takes me right back to the home page so anytime i start scrolling things start to show up so if you have something maybe you have a special or a gift or a coupon or an opt-in or pretty much anything you would like to just show up on your on your site this is how you set that up okay now what if i don't want it to be so affixed to the top like that i'm going to show you how to change that okay so let's go back to this element right here and let's go back to the element settings which is this icon right here click on that and right here where it says width okay right here where it says width you can click on this and we can change this to a fixed width okay when you do that it gives you the options of the width of the item so how much of space is this occupying right so i can reduce this if i want maybe my icon is about 30 pixels so i can just say i only want it to take up about 90 pixels of space here right so right here i don't want it to take up i don't want to take up too much and then position is left which is fine which is where it is the x distance from the edge okay so the x distance from the edges how how far away from the edge do i want this so this x distance is actually the distance from the edge going horizontally the y distance is the distance from the edge going vertically so up and down so what i want here is i just want to create maybe 10 pixels away from the edge and horizontally i want this to be about 300 pixels away from the top okay so let's go ahead and save this and then check out our work so i'm gonna go ahead and refresh the page and then once you start scrolling you will notice that now instead of showing up a fix to the very top it's now showing up about middle of the page right so this is a little bit more user friendly for somebody versus it being you know bunched up at the top there so now we have our elements right here on the side and this is a fixed element this is how fixed elements work so right now this is going to be fixed here it's going to stop right when we get to the end and you can see our other our other element that is affixed to this section that's kind of locked in hooked into this section but this one floats on top and that's the difference between having the default element which is just stuck here and this element which kind of floats on top of the page and creates this really cool dynamic effect right and our link still works when we click on it it still takes us to the home page and as we start to scroll it has this nice appearing effect again all right and that is how you create a fixed element all right so next up we're going to do one more uh one more with the elements here we're going to create an element that's going to impact the header if you look at this header right now you notice that we have this button and it says get started now one of the things with cadence is if we go to customize for instance and we go to header and we're dealing with that with a transparent header on this one right the transparent header settings are all the way at the bottom so this is your normal header header settings right here the transparent header settings so if i select this then i can make changes to my transparent header now we're not going to make any changes to transparent header per se i just wanted to show that what i do want to show you though is if we look at this header and over here at this tray you'll see here we have the logo which is that logo right there and here primary navigation which is this navigation right here and then we have our button if you click on the button now you can make changes to the button and the button has a lot of great things you can do to to make changes to it but there is one thing that you can't do to this button and that is you can't add an icon to this button see so you can add an icon to the button and even if you go to design there's no area here where you can add on an icon and sometimes you might want to have a button here that has an icon or you may have someone have something else here instead of a button and the header section does give you all these nice widgets and all these nice elements to be able to do that and so but there's still a limited amount of items but that doesn't have to stop you you can have anything that you want here in this header area because of the power of elements and i'm going to show you exactly how to do that we're going to create a element that is a button that has an icon and we're going to put it right there okay so let's go back to the dashboard we're going to go to appearance cadence click on elements and we're going to click on add new this element is going to be a default element this is just going to be a button that we're going to place in our header and it's going to be a button with an icon so just click on default and we'll call this custom header custom header button and let's say icon okay and then we're going to select the advanced button from cadence blocks and we're gonna call this one let's call this instant quote because this specific theme is a digital agency theme so we'll call this instant quotes and maybe this is like a button where they can click it and they can get a quote maybe later on we can add a modal to this so that when you click on it it pops out a quote form that would be cool okay so instant quote then the next thing that we need to do we need to configure this button so let's go ahead and click here and what i want to do is i do want a custom button size so you can actually pick these standard ones where it's small medium and large but i want a custom size so if you click on the icon right here you have options to be able to add some padding to the top and bottom and i definitely want to do that so the padding that i'm going to use for the top and bottom is 13 pixels and the padding that i'm going to use for the left and right side is 30 pixels okay so this will allow me to have a button that's very similar to the one that we're seeing on the front end of the site okay so 13 for the top and bottom and the left and right 30 pixels then the next thing that we want to do here is we want to change the color so the color is going to be white and i would like a very distinct background color to kind of separate it from all the other buttons that are that are on the site right now so i'm going to come over here and i'm going to make this this sort of candy more of a candy pink not red per se but there we go a little more yeah like that that's perfect so ff005e candy pink and make it very noticeable and then the border color is going to be the same exact color so just copy the color from the first one and make the border color the same all right then we're gonna set up the hover for this one as well so the text color on the hover so this one i'm gonna make it uh yellow so i'll make it when you hover over it it's gonna be yellow but i still want the text color to be a dark color so this color is gonna be dark maybe like a there we go that's dark close close to black almost and then the background color is going to be a yellow sort of mustard color let's go like that and if you're wondering why i'm picking these colors these are sort of colors that are already on the site on the page but this is going to separate the button from the other blue buttons that are out there that are on the page already so i like this color here so i'm going to go ahead and grab the hex code f9ac00 and i'm going to make that color the border color as well okay so now when i hover over you can see that mustard color is right there and maybe i would like this color to be a little lighter so a little more a little more yellow in there that's a little brighter right there okay so take that and we adjust the main background so i really want this to stand out exactly just like that okay so now that we have this the other thing we want to do is that the buttons on the on the homepage or on this website have a border radius on them so we're going to find the border radius option which is right here if you scroll all the way down to border settings you'll see the border radius and i'm going to set the border radius to 50 pixels okay so that's going to give me sort of that same shape as what i have on the front end of the site all right our button is looking really good and then the only other thing left to do is i do want to set the the font for this uh button so i'm gonna come here look for the font font family and the font family for this specific template is jost jost so let's do that there we go and then the font weight for it is a little thicker like that okay so now now it matches all the buttons that are on the front end so the next thing that we want to do here is we want to add our icon right so we want to you know direct some attention to the to the button with an icon so that is going to separate our button from the header button that comes by default so remember we couldn't put it we can't have an icon in that one that comes from the header uh widgets but because we can create anything we want in elements we're gonna be able to put an icon in this one so i'm gonna come here select icon and for this one i'm gonna search for a hand i kind of want a pointing hand like this and i want that to be i want that to show up on the left side there we go and let me see what does it look like when we hover that looks good so our button is done so i'm going to go ahead and publish this just to save my work and now we need to do one last thing we need to set up the settings for this element so this is a default element so i'm going to click on element settings right here and the placement for this is going to be none so typically you're using a placement if you're putting this button in a certain part of a page but or the website but we're not going to be doing that we're going to leave that at none but for display settings we want to show this on the entire site so wherever we put this we want no matter where you are on the website we want you to see this button okay and then everything else just leave alone with a click update and now our button is set and ready okay so now we're gonna go to the front end of the website and if you notice right here we have our standard header with the header button that comes by default when you use the customizer so we're gonna open up our customizer and when you go to header or down here on the tray we have this button okay so this button is coming from the available items that you have here and you only have two of them in cadence right you got the button one and this is button two that's what this button is right but we've created this button and we want this button to be right next to this button or you could replace it entirely so whichever you choose but we're to put it right next to it so the way we're going to do that we're going to go back here i'm going to exit out of the editing section and right here where it says custom header button icon if you go over to the right you will see the shortcode for this button so because all cadence elements have short codes this allows you to actually put these uh elements anywhere that you want on your website that will accept a short code basically an html section or even a post content section you can insert these elements anywhere so i'm going to grab this element i'm going to go back to the header settings here right so in the customizer just for those who may not have seen how we got here customize we're going to go to the customizer we're going to go to the header and while you're in the header right here we're going to grab this html item okay and we're going to drag this item right next to that the button that we have right now okay then i'm going to go ahead and edit this item and then go to text and we're going to paste in our element just like that our element shortcode and leave everything else the way that it is matter of fact if we look right now you will see that the instant quote is already showing up now all the styling is missing but that's because we're in the customizer so i'm going to go ahead and publish this now and exit the customizer and now you can see that our instant quote is right next to our regular header button with the icon in place so you see that so if you wanted an icon and this button wasn't good enough for you you can just create one as an element and then populate it in there so you can either have them both show up there or if you want you could remove this one entirely and just have it say instant quote with the icon or create another version of this one and add an icon whatever you want to do you can absolutely do it with the cadence pro theme it is one thing that i love about this element so with that that is going to conclude this tutorial on elements i hope you learned something from here and i hope you enjoyed this tutorial hey if you are new to the channel and you have not yet subscribed would appreciate it if you subscribe and if you like this video go ahead and smash that like button to help me with the youtube algorithm and then go ahead and give cadence a try try out these different aspects of it and modify your sites any way that you want i'm going to be creating a lot more tutorials on cadence and all the different aspects of it matter of fact we're going to be focusing on custom post types and being able to pull in dynamic data and create dynamic content with the cadence theme so stay tuned for that i want to thank you very much for watching this tutorial and for those of you that have subscribed thank you so much for doing that those of you that are watching thank you very much for watching and i will see you in the next video

Channel: CliftonWP

Views: 639

Keywords: kadence theme, kadence theme free vs pro, kadence elements, kadence blocks, kadence tutorial, full gutenberg wordpress tutorial + kadence for beginners, gutenberg blocks wordpress, kadence blocks tutorial, kadence blocks pro, kadence blocks vs elementor, kadence theme tutorial, wordpress, wordpress tutorial for beginners, gutenberg plugin wordpress, kadence hooked elements, gutenberg kadence tutorial, wordpress tutorial, wordpress tutorial 2021, gutenberg blocks tutorial

Id: OrH4CmAvqXM

Length: 37min 45sec (2265 seconds)

Published: Thu Oct 14 2021