How to Use Kadence Blocks Pro Dynamic Content Feature (Kadence Blocks Tutorial)

hey what's up everybody clifton here with clifton wp and in this tutorial we're going to be exploring cadence and dynamic content we're going to be going through some of the things that you can do with dynamic content and cadence and we might even dive a little bit into custom post types which i will explain in this video so if you guys are ready to learn some cool stuff about dynamic content and cadence let's jump right into it [Music] alright for the benefit of those of you that would like to follow along i want to explain what i have in place here so that you can replicate the same thing so what i have here is a website that came from the cadence starter template in order for you to do dynamic content with cadence you are going to need the pro version of cadence blocks and the cadence pro theme so if we look at my stack here and we go to appearance and themes while i do have the free version of cadence installed if we go to plugins you'll see that i have the cadence blocks pro extension along with the cadence blocks we also have cadence pro premium add-on and we have the cadence starter template all installed if you're looking to pick that up you can go to the cadence website or click the link in the description below that is an affiliate link but you can also go there directly and here you will see the different bundles that they offer so any one of these bundles will allow you to have the dynamic content capability the essential bundle just has the cadence blocks pro and the cadence theme pro and the pro starter templates and that is plenty that's all you need if you would like to have some of the other awesome plugins that cadence has then i highly recommend you go with the full bundle or the lifetime bundle as well because that will give you access to a lot of really cool plugins and some of the other themes that they have but mainly the cadence type plugins to be able to really extend the things that you can do with your website okay so now back to our site so what we're talking about here today is we're talking about dynamic content and that's why i have this installed because we've got a lot of content on here where we can demonstrate the dynamic content capability now before i show that capability i do want to explain what dynamic content is to better understand dynamic content it's actually better if i tell you about static content which is the opposite of dynamic content static content is any content that you have personally or physically put onto the website so we're looking at this home page right all this information is static that means that this page was created with all the information directly typed in using one of the cadence blocks right so this is using the header block and somebody typed this in okay now with dynamic content dynamic content in cadence blocks is this icon that you see right here that looks like a stack of hockey pucks right and if you hover over it it actually says dynamic content what this does is it allows you to pull information dynamically from the database and this information can be pulled you can pull the post title the post url or the page url and excerpt and all these different fields all these different types of data now why would you want to do something like this well let me explain let's go ahead and take a look at our blog post as an example so if you go to the blog okay you'll see these different blog posts if we look at one of these blog posts you'll notice that we have a header section here with the title we have a featured image and we have content now all this content is still static content however what if i didn't want to use this feature of cadence i wanted to create my own my own post title section now i could physically go into this page into this blog post excuse me and make that change but if i wanted to do it across the board across the board of all my blog posts that would be tedious and very time consuming so the best thing to do would be to be able to do that one time and force it to be able to pull data for me dynamically so to demonstrate this i want to be able to pull the title of every single one of these blog posts dynamically but in my own featured header so right now this is actually set up using the customized version of cadence so if you go into the customizer here and we go to uh we go to blog posts and single post layout this is actually being pulled from here and it's completely styled from here okay that's why it looks like this so if i turn this off now you notice that that header is now gone okay and that's fine matter of fact we're gonna turn it off now so and now that it's off i'm gonna put my own title header there that i want to style okay so if i want to change the look of this blog post this is a way for me to be able to do that now the reason why it's important to have the cadence pro theme is because when you have that you get access to the elements feature of cadence pro and if you're not familiar with elements i do have a video where i discuss using elements to create different parts of your website all an element is in cadence is a way for you to create sections or blocks or areas for your website that you can hook into different parts of the website so you can create almost anything that you want and go ahead and hook that into anywhere on your website and that's what we're going to use here to demonstrate our dynamic content so what is the goal the goal now is for us to go to our blogs and for every blog i want to add a special heading area to that blog post to every one of these but i want to do it in one fell swoop so let's go ahead and do that right now i'm going to go to the dashboard i'm going to go to appearance and i'm going to select elements i'm going to click on add new and what i want is a default element type we're going to call this custom blog title okay and then here i'm going to select one of these blocks so all our blocks are listed here and i want to choose the row layout and i'm going to select a one column row and then within this row i'm going to select another one column row what this allows me to do is it basically allows me to style an outer row which is this one right here and an inner row as well okay that's just the way i like to do it okay awesome so now that we have our road put together let's start adding some dynamic content to this so the first thing that i want to do is i want to pull the featured image of our blog post so if we go to back to our site here and we go to each blog you'll notice that each one has a featured image right so i want to pull that image for my version of the header so i'm going to come here i'm going to select that outermost row if you want to use the list tree here of all the elements you can see it right here this is the row that i want so on this row right here i'm going to go to the right go to background settings and right here where it says select image you will notice the dynamic content icon okay when i click on that it's gonna say do i wanna enable dynamic background image i'm going to say yes in this case okay now that i've done that it's going to ask me where do i want to get the background image from i'm going to go ahead and click the down arrow and i'm going to say i want a featured image url there's another option to be able to pull it from a plus post custom field we'll talk about that later but for now i want the featured image url okay so we're gonna go ahead and pull that in there and then it's going to ask me what's the image source i want it from the current post so what this is saying is whatever post you're looking at check to see if it has a featured image and then pull that image and put that in the background for me okay and then uh right here where it says advanced if you click that down you're gonna get some customization abilities here so full large i just wanna i'll we'll make it full and then here it gives you a chance to put a fallback image url what this does is if there is no image for you to use in that if you don't put a featured image then this will be the fallback image i'm just going to leave that blank for now because i think all these have images all right so now we're done with our settings for our dynamic content for the background okay so next i'm going to say i want that to be cover i want it to be scroll and all this is fine the other thing that i want to do is i want to do an overlay so i want a little bit of an overlay on this so we're just going to pick a dark overlay just like that is fine for now we can come back and make our edits a little bit later so now that i've done that the next thing that i want to do is for this specific outer row i want the structure here to sort of match the theme and width so i'm going to come here to structure settings and we're going to set the content max width to inherit from the theme okay so that just brings it in a little bit so if i close this down you can see that this is now narrowed a little bit now we're going to add our second piece of dynamic content i'm going to click on the plus sign here i'm going to say that i want an advanced heading i'm going to center that heading i'm going to go ahead and click on the dynamic content icon right here and it's going to ask me where do i get this content well we want the content to be the post title i wanted to pull from the current post and click on add dynamic content and i know it says no content that's okay that's because we're not seeing any content right now now the other thing that i want to do and this is why it's awesome to be able to create your own header is i want to add a button this is a restaurant website i'm going to add a button that says visit the menu so i'm going to click on the plus sign right here we're going to do advanced button and i'm going to type in here c menu alright and i know we have a menu link in here somewhere yes we do all right excellent so now i've put c menu in there and now let's go ahead and style our button really quick i'm going to come here i want this to be orange whoops actually white background is going to be the orange color border it's also going to be the orange color and let's make our hover same thing actually in reverse and there we go all right and let's just go ahead and make this fixed and we'll give it a width of 220 pixels awesome let's see let's also give it a border radius of four that looks good okay so we'll leave this like this for now and then the other thing that i want to do is i want to add some more padding to my outermost row here so select this and we're going to go to the padding and margin and let's just make this 55. so now i'm going to go ahead and publish this now that i've created this custom blog title now i need to assign it to the blogs right so i'm gonna go back here we're gonna click on the element settings right here and the placement is i want this to be let's see here before all content so actually i think what i want to do is actually want to make this right after the header right after the header okay so after the header and then we're gonna select show on and from here we're gonna select that we want it on our single posts just like that and you can even choose which ones but for now we only want we want it to happen on all all right and then i'm going to click on update great so now let's go ahead and take a look at what has happened to our posts so i'm gonna come back out to our website here we're gonna go to blogs we're gonna click on any one of these and what do you notice here is our header right it doesn't look like much now but we're gonna go ahead and style this so that it looks great and then you'll see uh what i mean okay so we just wanted to make sure that it showed up well does it show up for the other ones let's go back to blog there it is again right and it's notice the picture has changed and i know we can't see the text but we'll fix that let's go ahead and fix that right now so let's go back to the dashboard i'm going to go to appearance elements here's my custom blog title click on edit alright great so now let's go ahead and make our changes here so i'm going to select this right here this heading and what i'm going to do is go to the block settings for that heading and we're going to change the color to white we're also going to make it a little bit bigger so let's make it 45 pixels so we can see it better all right and then for this right here our padding and margin we're going to make this a little bit wider so 65 and then we're also going to go to the background overlay settings and we're going to increase our opacity just a little bit about 50 about 60 there we go all right and then the next thing that we're going to do here is our c menu link here looks really small the text looks really small so let's go ahead and fix the text so select the button and we're going to find the uh font settings for that and we're gonna make this 24. okay i'm gonna go ahead and update this and then let's take a look at it on the front end here so here we go that's looking a lot better right amazing dining experience begins see menu so you'll notice that no matter which blog post we go to now you will see that the content changes dynamically so if i go to blog and i look at this one it says 40 truly amazing blueberry recipes right so it's pulling that data for me so you can kind of you kind of imagine what you can do when you can pull custom data like this there's so many awesome things that you can do i'm going to show you one more example of something actually more practical that you can do so let's go to our shop and take a look at our products all right so let's say for instance that i want to insert testimonials for my products okay there's no way are here to put in a testimonial you could put it in the description but that would be really strange so what we're going to do is we're going to set up something that will allow us to create dynamic testimonials in our website to do that if we look at this product you'll notice that we don't have a field in here that will allow us to have any testimonial information right there's nowhere for us to put in testimonials so what we want to do is we want to add some fields in here that will allow us to be able to do that and to do that we need to install an additional plugin and that plugin is a free plugin called advanced custom fields so just go to plugins click on add new and search advanced custom fields there's so many plugins for this one all right here we go this is the one we're looking for okay not this one this one by delicious brains so install and click on activate and now we can see that we have advanced custom fields installed now what is a custom field well whenever you look at any of these uh surfaces you look at products when you're filling out when you're creating a new product or you're looking at a product every single element here is a field okay the title is the title field right the editor is the editor field and all these different things are different fields product data fields short description field right and even the featured image is a field right so what if i wanted more fields which means what if i want more data that's what the advanced custom fields allow you to do so i'm going to come here to custom fields and click on add new and it's asking us to add a new field group we're just going to call this clifton product group okay that's just just labeling what the fields are going to be called okay it's not really the field themselves and then when you come here you'll see here we have the ability to add the fields what location the fields are going to be and the settings for that field so right now we're going to click on add field and the field label that we're going to use is we're going to call this testimonial 1 and the field name is going to be testimonial score 1 the field type here are all the different field types that you can use in this specific case we want the field type to be a text area so we want a text area to be able to put in uh the testimonial so we're gonna call that a test area okay and we can put some instructions here we can just say enter a brief three line testimonial and uh do we want to make this required let's go ahead and make it required uh you don't have to but i'm just going to do it for this specific example the placeholder text can say enter testimonial we can add a character character limit if we want to okay i'm not going to do it in this one but if this were a real build i probably would to limit how much text goes in there everything else here is fine so what we're going to do now is we're going to go to the location and we're going to say where is this field going to be so it's already selected the group is going to be a post type is equal to and we have post page element product order coupon custom icon this is going to be a product so this is saying i want you to only add this field to our product pages don't add it anywhere else okay and then right here in the settings all this we can leave exactly the way that it is right and then we're going to go here and click on publish all right and we can see here now that we have our testimonial field so when we go to our products now products all products and let's look at this one and if i scroll down we will see our product right testimonials and this is where you can go ahead and enter a testimonial right enter a brief three line testimonial so i want to be able to add three testimonials to this so i'm going to go back to my custom fields i want to enter the same product group and what i'm going to do is i'm going to duplicate this one we're going to call it testimonial 2 this is all fine update and then i'm going to duplicate it again and update so now i get the chance to be able to add three testimonials to the to the page so now when we go to our product pages all products so we can see here we now have these three additional fields that were in there before now we can go ahead and add in our text for our testimonial so let's go ahead and do that now i'm going to go ahead and add in some text to do that let's just grab some dummy text from my favorite dummy text website lipsum.com and we're just going to grab just a bit of text here i'm going to go back i'm going to populate that text in here all right and then i'm going to go ahead and update for this product all right so now when i view this product notice that that information doesn't show up anywhere on the product why because we haven't set it up we haven't called it into the template all right so now we're going to do that so i'm going to go here to my dashboard i'm going to go to appearance elements click on add new and we're going to make this a fixed we're going to call this product testimonials okay and now that we have that let's go ahead and add the testimonial so first thing i'm going to do is add a row i want a three column row this is fine and then within each row we're going to add a testimonial so i'm going to go ahead and click on the first block here and we actually have a testimonial block like this right and you can pick any one of these that you want to use let's just use uh this one all right and what i'm gonna do in this one here is i'm going to come here to the right side here and i'm gonna select the uh we're going to select the media settings and i'm going to turn the media off and what i want to do is i want to put in that testimonial right so you see how this pulls in the dynamic content for me so i'm going to go ahead and click on dynamic content we're going to go to we're going to say it's asking us where do we where do we want this content what content are we going to put in here well for us this time it's going to be a post custom field so you're going to select post custom field current post and then we're going to select the field and you can see the clifton product group is there and for this one i want testimonial one to go in there okay and then what do we want it to say right fallback content what do you want it to say if you don't have any content well let's just have it say oops no testimonial for this product okay so this is just some fallback content then right here um i want to put something else here so i want to say what a customer said about now check this out about and what we're going to do here is at this very spot okay we're gonna put in the post title from the current post ad all right so what a customer said about the post title okay all right and then right here we're just gonna leave this as it is uh we could actually let's just make this say customer and then ceo of company i'm gonna hide that so now we have our testimonial block and then let's just go ahead and style this a little bit i'm gonna come over here uh select this here go to the block container settings and what i want to do here is i want the continued border width to be 1 and the radius can be 20 contain a border let's make it just a little bit darker so we can see it on the front end all right and that looks pretty good so then what i'm going to do now is i'm just going to duplicate this so right so i'm going to come here select the additional options click on duplicate and do it one more time and then we're going to drag this over here and drag the second one to the third spot and now we have our three customer testimonials now we need to change all this so that it's different testimonials or each testimonial is matching each one so i'm going to select this right here click on the dynamic content we're going to say we want this to be the post custom field for the current post and we're telling you here which custom field please go ahead and find whoops here we go go ahead and define a testimonial number two is going to go in here and advanced oops no just in case it's not there oops no testimonials for this item all right and then i'm gonna repeat the same thing here only except this time this will be for testimonial number three okay select field and uh it's there there we go testimonial number three add dynamic content all right great so let me just make sure that this dynamic content was added it didn't look see that one was added but this didn't look like it went in so let's do this again post custom field current post and we want we want testimonial number two add dynamic content there it is i'm going to do the same thing here post custom field testimonial number one add dynamic content all right now that's all added in looks pretty good we're gonna go ahead and publish this now you don't have to publish it i just like to save things but you don't have to publish it before you set where it's going to go we still need to tell it where to show up right so we're going to go to the element settings we're going to say the placement for this here is we're going to say the placement for this is oh actually you know what we set this up as a fixed element that's not what we wanted what we wanted is we needed this to be a default element so we can just hook it in but this is very easy to fix all we need to do is come here click everything that you've created so i'm going to click the entire row layout we don't want this paragraph the entire row layout and i'm going to press command copy we're going to update this and uh what i wanna do here is i'm just gonna put a label next to this so i can use it somewhere else but i'm just gonna say update and we're gonna recreate this very very fast very quickly you'll be amazed at how quickly you can do that so i already copied it i'm going to come here click on add new and we're going to select defaults that's what we want not fixed and then here i'm just going to call this product testimonials default i'm going to sell click in the type to choose a block and i'm going to press command v or control v if you're on a pc and voila all our work is still here so now i can come here to my placement and i can say where do i want this well i want this to be placed in the woocommerce product page and the specific area that i want this to go is going to be right here so we have woocommerce content right here and i want this right before the product tabs okay so i want it right before the product tab so i'm going to go ahead and click here and that looks good and then the display settings are important because you have to tell it where you want it to show up and we want this to show up on single products and we'll leave that as all and i'm gonna go ahead and click publish awesome so now let's go back to our product so if we go to just go to the shop and i believe it was the first one actually maybe not that one let's go back to the dashboard let's go to products here this way we can actually see the actual product which was just rim the plate here okay so if we look at this product right here you'll see here's all our testimonials and now when we view the product and we scroll down we can see our testimonials are now hooked in here right pretty cool it wasn't there like that before so what happens when we look at a product that doesn't have the testimonials in there okay what happens when we do that so let's go let's open up a new tab alright so here's our product with the testimonials let's click on this bowl saucer one see right here so our testimonials are not showing because there was no we didn't put any information in this one so if we look at this product the testimonials are empty so we'll say here this tasty dish and this will say this was a fantastic composition and the last one this meal was unforgettable so you can kind of see the possibilities here right so now i've put in some different content in here and now when we go and we look at this one and we look at our testimonials you can see our testimonials for this one right are being pulled dynamically and it is different for the testimonials for this one right this has a little more text in it okay so now we've hooked these elements in here now what if i didn't want it inside the description this is strange it's it's on the description side what if i want it to be up here okay right above it well this is very very easy to fix let's just go to our element right here and what i want to do is right here where it says priority i'm going to set this to a lower priority so based on the priority it's going to put it above or below the the place where you've asked it to go so i'm going to change this to a five let's update that and then let's go back to our product and if i refresh this you'll see now that the testimonials are in a much much better place right so what a customer said about such and such is right here right so now you can see how dynamic content works so for this specific product this is the content that's being pulled and for this specific product let's go ahead and refresh that so that it moves up this is the information that's being pulled and so with dynamic content and the elements section of cadence elements capability of cadence you can do some really amazing things and this is just an example of what is possible and with that we're going to go ahead and end it here hey if you enjoyed this tutorial please go ahead and smash that like button and for those of you who subscribe to the channel thank you so much for subscribing and if you're not subscribed to the channel please go ahead and hit that subscribe button and remember to click on the notification bell so you can get notified whenever i release videos like this i do have more cadence videos coming out some really cool stuff and i want you to get notified whenever those videos launch once again thank you so much for watching and i will see you in the next video

Channel: CliftonWP

Views: 866

Keywords: kadence blocks, kadence blocks gutenberg, kadence blocks dynamic content, kadence blocks - pro extension, kadence blocks pro, kadence blocks tutorial, kadence blocks review, wordpress tutorial for beginners free, dynamic content wordpress, dynamic content gutenberg, dynamic content website, dynamic content kadence blocks, dynamic content kadence, dynamic content kadencewp, dynamic content tutorial kadence, cliftonwp

Id: gz8HGudYrYo

Length: 30min 58sec (1858 seconds)

Published: Fri Nov 05 2021