How to Publish Dynamic Content with Kadence and Meta Box

5:30PM Apr 19, 2022

Speakers:

Nathan Ingram

Ben Ritner

Keywords:

sponsors

custom field

post

custom post type

meta

questions

template

webinar

dynamic content

ben

block

hotwire

woocommerce

add

image

set

section

create

layout

box

Welcome everybody. We're glad you're here today we are just getting started and getting things begun here we're going to be talking all about Kadence and dynamic content is can be a great webinar. As you are joining us here in zoom want to invite you to open up the live transcript if you'd like to. At the top of your zoom window, you should see a red live indicator. So click on that custom live streaming link with the drop down and select View stream and that will open up a browser window with the otter translate, not translation but transcription of this event. So this is actually only our second zoom webinars. So we're still ironing out a few kinks. We've moved over from GoToWebinar just last week. So pardon us if we still have a few things. We're ironing out here like this live transcript and other things but we have a great webinar lined up for you today. A topic that I'm super excited about and that is this new ability of Kadence to publish dynamic content from custom fields and all sorts of neat stuff. been written or founder of Kadence is with us and we'll get started here and two or three minutes from now. We will be using the chat in zoom. So if you've been on previous webinars with us over the years, I ithemes.com. Forward slash chat has been retired to the annals of web history. So we are now using Zoom chat. Glad to see everybody over there. Saying hello folks from around the world saying hi. And yeah, so Stacey. I know copy the chat. That's I'm working on it. That's not going to be available for today. So again, welcome, everybody. Glad you're here. It's gonna be a busy webinar today. We have lots of folks signed up for this webinar. If you're just joining us and you'd like to open up a live transcription. We have the otter service connected and you'll be able to view that transcription by clicking on the live link at the top and dropping that menu down and select View stream and you'll get a great translation live as we go. It's very cool. So it's good to see everybody logging in from around the world Switzerland, Dallas, England. Nashville, Colorado, UK, Texas, everybody Ben Joe is disappointed there's no Montana in the background of your your office there. Like you wanted to see.

Oh, this is Montana right here. Yeah,

there you go. Joe, it's right there. It's right there. So welcome, everybody. We'll get started in just about a minute. or so from now we're talking about the new dynamic content in Kadence been written or founder of Kadence is going to demonstrate all that it's gonna be a lot of fun.

Yeah, just pretend that that's a window, you know, should be a little bit bigger though. Right there. You

go. That's it. So once again, if you're just joining us in the chat, and you'd like to follow along with the live transcript, you can do that by clicking on that. At the very top of the Zoom screen, you'll see a little red Live button. You can drop down a menu there and hit View stream and you'll be able to view this live otter trends transcript as it's happening. So just about 30 seconds before we get started. I have a great webinar for you today we will be using the questions area of zoom. So ask your questions under the questions link in your resume menu. I let me just ask do you all see that questions link? We are this is our first real webinar using Zoom webinars

Yeah, under q&a You'll see the q&a link

All right, I got about three minutes after so we are going to get started here with Ben. So welcome, everybody. Super excited. You're with us today for this AI iThemes Training webinar. My name is Nathan Ingram. I'm the host here at I iThemes Training. And today I'm joined by Ben written or the founder of Kadence, who's going to be talking to us about publishing dynamic content with Kadence and meta box then welcome back to iThemes Training How are things going for you today?

Good. Thanks for Thanks for having me on. Excited too excited to do this.

Yeah, this is gonna be a lot of fun. I've been looking forward to this webinar as soon as I saw it. Come across slack as an opportunity for training. I thought we've got to do this and get this scheduled as soon as possible because for a lot of us who are building custom sites, being able to control dynamic content, like custom fields, is a very important part of building custom sites. So give us a little overview of what we're going to cover today.

So yeah, there is like a million things that we can do with dynamic content. And the focus for me today is we're going to build a custom post type called sponsors, or essentially we're going to allow you to we're going to look at this travel blog and allow this hypothetical person who's doing a travel blog to have sponsored posts, where within the post you select, hey, this company sponsored this post and then we'll automatically fill in like a little banner at the top of the post that said posts sponsored by and then their logo and that takes them to a custom page with more information about that sponsor as well as the link to their website. So we're going to kind of show you how that can work using a custom post type in some meta fields.

Very good. So we got a long way to go today. And this is this should be a really interesting webinar. glad y'all have joined us if you're just now popping into zoom. This is a new format for us. And I think straining for Good grief. 15 years we've been using GoToWebinar and this is our first live public webinar with Zoom. So if anything breaks, I apologize in advance. We're still learning a few things here and getting some things worked out. Let me cover a few housekeeping details before we turn things back over to Ben. First of all, a lot of you have already found the chat. If you've been in zoom webinars. This is a normal thing. You can pull up the chat alongside the webinar. Lots of folks participating today. The i ithemes.com forward slash chat URL has been retired. We are no longer using that we are using Zoom chat going forward. And the place to ask your questions is no longer the chat area it is in the q&a, which you'll see a little icon down there at the bottom of your zoom window where you can pose a question and we'll have a good time of q&a with Ben toward the end of this webinar. Also I would like to remind you we are recording this it will be available on a replay. So as with any live demo, if there are things you want to go back and review I've just dropped in the link to the replay the same link you use to register for the webinar. We'll be sharing the replay video there on that link about an hour so after we wrap up today. So once again, ask your questions in the Questions area. And if you would like a live transcript to follow along during this webinar, look at the very top of your zoom window. There's a red Live button there with a drop down, click on that drop down and select View your stream and you'll be able to it'll pop open a new browser window where you can follow along with the otter transcription of this live event. So Ben, I think I covered everything there. Let's get started. I'm looking forward to this.

All right, awesome. So yeah, I wanted to kind of first just outline I'm using a starter template that you can get this is one of our newer pro starter templates. Really beautiful travel blog. And the plugins I'm using is custom post type UI that's we're going to build a custom post type in that's free. I've got Kadence blocks Pro and Kadence blocks and then Kadence pro we're going to be using that for elements today and then their starter templates is still active. I've got meta box this is free and then I've got meta box builder This is not free. But if you're you know if you're using meta box you're probably on there Pro. But just to say like a lot of what we cover today is in metal ball, we're gonna use metal box. You can do the same thing and advanced custom fields. So it's not like this isn't translatable to that and then I've got a reset plugin in here in case I need to like really, if I do something really bad. So what we're going to get started with first is creating a custom post type so

Okay, I gotta rearrange what is oh, I'm typing the slug. Got it. Okay.

Sponsors is my custom post type and essentially, I'm gonna leave almost all of this as it is by default. A couple of things I want to do. I'm going to enable this. I'm not going to talk about this today, but it's it's worth enabling because you could do you could do like custom excerpt. I do want to enable custom fields. That's important. And then you know, just for fun. You know, we'll use the money sign for our menu icon. So now we have this new post type sponsors. One thing in the media library I've already uploaded some logos from travel companies, just that we're going to use, so that's going to be our sponsors. We're going to have you know hotwire and things like that. So I'll create a new sponsors, post

and I'm just gonna grab some placeholder text for the content in my post. I'm gonna go ahead and set

the

I've got two images here. You can see the ratios a little different. I'm going to set the featured image just as this one that's got a little bit more spacing on the top and bottom and publish and we'll we'll look at what this looks like on the front end of the site. So pretty basic. I've got, you know, hotwire and my placeholder text. First thing we're going to do is look at kind of customizing this layout. So if I go into dashboard here, we're gonna go into Appearance and then elements and we're going to create a new one and we're going to choose template. So this is the sponsors post.

I'm going to add a row layout block to columns. We'll do

that's fine. And on this side. Well, before I get too far, I'm gonna come into the Element Settings. Here and go ahead and set my preview to be sponsors. And I'm going to select hotwire that want to just create it. So that way as I'm filling this out, I get a live preview. Now this is going to be a replacement for the single post content and I'm going to just go ahead and save the entire site, or sorry, the single sponsors and visible to all users. So now I've got my row layout here. I'm going to put an advanced image there and then in my image settings, I'm going to enable this to be dynamic and I'm gonna say pull in the featured image. So that's giving me a live preview because I've already told it, where to source from. And then on this side I'm going to use the advanced text and let's just say

we do a little text and this will be dynamic, we'll grab the post title.

Okay, that's going to be an h1 tag. We're gonna go and set the spacing on that.

Just so it's tight, up with our little pretexts there

and then we need to post content through throw that in. And then after that, we're gonna go ahead and add in one more block here. Let's add in a button block. Oops. And I'm gonna move it down a line at left we'll set it to design as theme

and I'm going to make the link here dynamic. But for now, I don't actually have this setup. So we're just going to leave this somewhat blank. We'll publish this and get a look at how our sponsors look now. Oh, wait, one more thing I need to do here and this template and that set of background. When you replace the post content using a template, the background is going to be transparent. So you're going to want to come in let's do

you know what, let's do 40 pixels around,

and a white background and we'll just make that gutter wider. Okay. So let's pop out here. Let's go look at our sponsor. If we view it now, we've kind of got a different layout, right. So what we were building was this section of the of the page. You You can of course like if you wanted to get rid of the header and all of that you can you can totally take over and make this a completely custom thing. But for now, this is kind of what we want just something a little bit different than what what we got with the ability to have a dynamic link and automatically pull in that featured image. So now let's start creating some meta boxes with the meta box builder. I can go into custom fields and start adding field groups. So we'll add sponsor settings we need to add a link field

that's html5, there we go.

And we need to add an image field because there's going to be times where the featured image we want to use a different ratio. So I want to be able to select two different images. Or perhaps there's, you know, just reason because of the design of the logo, whatever the you want two different images. So this will be this will be my call it in content image for the and I actually, I want to use single image Okay, last thing, I almost forgot here, this needs to be applied to the sponsors. So, we're going to do that. So now it's applied there. And then we'll add another field group and this will go into posts, and this will be like selecting a sponsor. And for this, there's a bunch of different ways you could do it. We could use a select box. I'm going to use post and use sponsors that way it auto fills one thing with this is what gets saved is the ID of the sponsor, so we'll need to like go and grab IDs. i There's other ways we could do it and I was thinking about it even today when I was like prepping for this that I can probably translate that ID. When we get to that part. I'll explain what I mean. But at some point, we're gonna have to go grab IDs, but just once. So now let's go into hotwire and just fill this out so we've added two new custom fields in here. We've got the sponsor link. So we'll add in hot water wire.com And then we're gonna grab this, this image with like really tight ratio around the logo and update and now if we wanted to view this just to make Oh, we didn't set that up. Yeah, maybe I should have done metal boxes first. Let's go into Appearance and just update this template so that it pulls in that link on the button that we've created. So right here, we we've got custom post field sponsor settings, we want to use sponsor link.

So now we can look at our sponsor.

And there you can see the link is in fact hotwire so that's coming through. Okay. And of course, we could link that I that image to to hotwire as well. So now, instead of a post, we'll just grab this first post here

there's going to be a new option. Down here to select a post sponsor. And so for this first post, we'll just select hotwire. Now that currently doesn't do anything, but that's going to be the next thing we do is let's go build our banner so we're going to add a new element

this will be a Content section and it'll be sponsored. Banner. We're gonna add a row layout here. We'll make it a single column, we'll add advanced text and let's just say that it's a div

and put a background on this and let's do 20 Okay,

so couple things here. First, we want to add in the sponsored image. So let's drop an image in and we want to source this from a post custom field but we don't want to use a current we want to use our hotwire and we're gonna go in and say in content image, so there's our image. We'll drop it down. And then in our section we're going to just change the flex align to horizontal. So the next thing with that is we're going to add a link. And same thing here. We're going to select post custom field, because we want to go ahead and there's two ways you could do this one, you could link this directly to that hotwire link, or we could use the post URL. So it goes to our like, you know our sponsor page. And again here we're not going to use

the

link sources current we're going to set it to hotwire and now we need to make sure that this well let's let's set up our element first. Our placement is going to be at the top. So I'm in single inner content and I want to be before the intertidal area. Want to display this on all single posts, and for all users and then in my

Row Settings here.

I also want to add a margin on this because of where it's going to get placed. Okay, so what we'll see here is that by publishing this, if I go into any post now, it's going to have this post sponsored by hotwire and that's because we haven't made it conditional as to whether or not this post is sponsored by hotwire. So to do that part, this is where we need the the sponsors, ID. You can get a post id right from the URL here. So we're going to just copy this and again, I'm thinking about ways to make this a little bit easier, but it's not a huge deal. Inside my row in this sponsor banner, I'm going to do conditional display and I'm going to enable it to be by a custom field for the current post. I want it to be the post field that we created for under a slug sponsors. And I'm going to use equal to my post ID. So what I'm basically saying is inside the current post, which would be in the actual blog post, if there's a custom field set for post, and it equals this post id, which is the post id for our hotwire then we show it. So if I update this now and go into my post, this post should show because we've set that already to be a hotwire sponsored but then the next one which we haven't set. If we go in there, it doesn't show and that's because we've conditionally set that section to load. So now, if you're setting this up, you can duplicate and like each brand could have its own color. And all you're doing here is changing. A couple things like to make it work. So before we do that, let's go create a couple more sponsors. So we can kind of show how this works.

And then the last thing here is just to go into the conditional and we need to just update this value with delta. So this is like, you know, there's a million ways to do things. But this this route allows you to make a very custom banner based on each sponsor. Now, if you've got 1000s of sponsors, this isn't going to be the right approach, right? You're gonna want something where this these items get dynamically filled. So there's a couple of ways to do this, like sourcing. One thing I'm looking at doing is the ability to source by a custom field rather than sourcing by like a post type. So then you could create a relationship between like, if this post has chosen sponsors, then we sourced by that. But for now, this is it. The other thing I'm looking at building, and I'm hoping that comes up fairly quickly is like the ability to do more relationship block stuff. And so there's going to be different ways to do this depending on what you want. Another option is to literally simply go into each post and add meta fields for like this image. And so instead of selecting a post, you're selecting a sponsor, but hopefully this makes some sense as like this post being sponsored. Now we can come in here and edit this post

and we'll just select delta as a sponsor. I have to wonder what to do oh that's weird What should I do?

So did you pull in that image from the post custom field?

This image is from the post custom field. Yeah, I hear that in content image.

I think I saw do we need that second row.

I think I deleted my well. So the thing is, these are conditional.

I think I deleted my previous one. Let's just do this. That's oh nine

okay, this is showing hotwire and that's one Delta. I think I just duplicated on different thing. Um, so, there again, I'm sure everyone's got questions for like how you can extend this and different ways to do it. Mostly I just wanted to show you like, there are ways to conditionally based on the row, determine if this should show or not. And if those conditions aren't met, they won't show and then there's ways to pull in data based on selecting what the source is. Or if it's the current source. Like whatever that post you're on is and then using Megabox you can pull in and create dynamic links or pull in images and show what you want and so like there's a lot of places like simple places to go from here in terms of like, I could go into my About Us page. And they're, like, create a carousel of sponsored posts, because now I have a post type for that and so if I wanted to just show off all my sponsors on a page, you can do that. You know, like, you could do more things where you hook in and show like sponsored by as part of like when it's in an archive setting like using the same elements you can hook right into here and say like, you know, put a little sponsored by image into even this content. So like, there's definitely a lot of different ways to implement and sponsored by it's just one like, one simple example for using like a custom post type that's kind of has a relationship with blog posts, but I mostly wanted to set that up because I figured there would be a lot of questions and then I could go through and try to answer and also talk about like, the future and what are the new things we're working on?

All right. Yeah. We have quite a few questions that have come through as you can imagine, then I have a question. Host prerogative, right. So when you created the element, like, in my mind doing something like this, I would, I would want to have like an element that displayed on all posts. If that post, like it can't let me I'm fumbling the asking of the question. The question is, can you make the visibility of the element contingent on whether the custom field for the sponsor is set?

There isn't that in elements, maybe there should be if the elements empty. It's not going to show and so just by in your like, if you wanted to wrap the whole thing in one row layout, right? Then you can do a conditional field. That's basically like I'm going to check the current posts, and if this is empty, sorry, show it if it's empty, and if it's not empty. So I mean, that that's a way like you could put everything you want to inside of one conditional that basically says, hey, if there's no if they haven't selected a sponsor, just render nothing, and then the element will know if it's if it's rendered empty. Don't output it.

Right. And in that case, you'd only have to have your one row that just shows the image. Right? You wouldn't Yeah,

I mean, it depends on how you want to source the image. So like by doing it like this I'm essentially saying like, this is a great idea if you want to like have Delta's brand colors as part of this banner and things like that, where you want to really play with the design per like because then you just get into too many things if you're not just doing multi like dividing it up. So like with this you know, you can get in and change like the text on a per basis, right? So it's conditional. If it's hotwire, it's going to show that it's gonna show this Gotcha. Now if you just wanted to show one item, the issue is this is being sourced from that hotwire, custom post type. And right now in Kadence, like we're, I'm working on a, a query block that will essentially let you create a relationship where you're like, hey, if the post id is this in this meta field, that's a relationship I want to connect with and that's going to be the source and right now, like in dynamic content, you've got a source from a post type not from a custom field. Got it. So like, that's part of the the limitations at the moment is like, the source has to be a post type. So if I use the current post, I would have to add that image into each post and then that's another like whole bunch of work, right?

But yeah, whole thing. Yeah, for sure. Okay, so this is a super cool feature in Kadence. Now, extending extending this dynamic content into custom fields and given the ability especially with the power of elements to place those things pretty much wherever you want them to go. Yeah, ton of questions set up the first question that we got about 50 times. Maybe slight exaggeration, but not much. Is the the version are you using the free version of meta box now I think

this is the this is meta box core with their builder. Okay. Okay. You don't get the field groups unless you have their pro. You can create group so meta box is like different than advanced custom fields, advanced custom fields, you can just their free version, you can just create with meta box you have to you have to use their website to generate fields and then you can like, import them in, but you don't have a builder, like this builder isn't part of their free plugin.

Gotcha. So yeah, this is just different than I've ever seen meta box look, we're using a meta box, the all in one plug in that has all the add ons just kind of in one thing, and that lets you build custom post types custom taxonomies custom fields, just all in the same UI. So the questions that came in were about oh, why are we using custom post type UI? When meta box does all that? And the answer is meta box is smartly designed so that all those things are modular. Like if you don't need to create custom post types. It doesn't do that out of the box, right?

Sure. Yeah. i Yeah, I suppose I should have just stayed in the metal box family. I am used to using custom post type UI. So that's more of me just not having not using a ton of metal bucks, but it really wouldn't matter. Which Way You created a custom post type cast.

Yeah, as long as it's defined somewhere. Okay, so let me let me get back to the top of these questions because we have a bunch bunch of questions. Ben asks, Does it matter what tool you use? We kind of answered this but pods are tool set, meta box. It's tool agnostic, right? As far as the dynamic content.

You can use those tools. The problem is there's right now we only have support for meta box and advanced custom fields pods is probably next, essentially, the custom fields will let you put any, like if you build a metal custom metal box, it'll source it right and it'll show it as an option. The issue is like every metal box builder saves data differently. So like an image metal box for advanced custom fields, saves images that are an array in a certain way. And for meta box, they save it in a different way. And so like, it's a matter of converting all of that to what's actually going to work on the front end. Because like when you're sourcing an advanced image block, we kind of need to know like, what's coming in from this meta field, we're getting an ID, are we getting a URL to an image? Are we actually getting like an array with that actually has the width and all the attributes in it. So right now, meta box and advanced custom fields are the two that I'm like have added support for their advanced fields that to let you do that stuff. Where like you can source galleries now using advanced custom fields gallery or meta box, advanced image select. But you're not gonna be able to source a gallery using pods simply because we just like there isn't we haven't created that relationship yet. Pods could certainly come in and hook that up like that's, it's it's just a matter of writing that extension into Kadence box Pro and it can be added as a third party but but right now the two that I've mostly been focusing on that's largely because it's the two that are most requested is meta box and advanced custom fields.

Very cool. Topher is here, Topher would like to know about how this whole concept could apply to archives of those post type singles. Is there a way to create templating for archive pages.

You can create a template that shows Yeah, you can create a template that that essentially sets up what happens in each loop item. So if you're looking at the screen here, this would be one item and this would be another and that can be a template that you define. In terms of this whole overall thing. I haven't set that up primarily because we need an advanced query block, which is, again, I've referenced that it's like what one of the things you're working on the query block is one of the most like difficult blocks to get it right. But once we have the advanced query block, where you'll be able to to like create a template, add the advanced query block in to then define how the query is going to run. If it's going to be inherited, or if you're going to edit it. And how that's going to work like WordPress Core has a query block plugin, or sorry, a query block, but it's not very advanced. It's it's actually very, very limited in what it can do. So yeah, it's all just a matter of like, steps. But in terms of like, if you wanted to create an archive page for sponsors, it'll generate one if you've turned on like archive page, right? And then you can go into elements you can add a new element Whoa. And then, in the template area you can choose archive loop item content. And we'll just, you know, just for

just to show you, we'll

apply this real quick this is going to apply to post types. This just show you what I mean. So this turns this block like all of this into just showing the titles because I've I've taken control of like that loop item itself. So now from here, I can kind of like go any direction I want to in terms of like how I want to design this and source it.

Very cool. Some questions about that advanced query block any idea on timeframe on that

don't want to say anything and not deliver it's complicated. And I'm wanting to do a lot with it and I keep having to like be like, I've got to be realistic about getting it out first but but my hope would be next month that it would be out towards the end of next month.

Excellent. And clarifying question from Topher. How about individual items, like for example, a single page layout from that custom post type is there a way to customize those currently with Kadence?

Yeah, we did that. Um, so we have this sponsored post template right here.

Oops, we don't want to do that

which we applied to the sponsors. So we that were the ones you know, toward the beginning that set up like I want the image here on that sponsored post type. That whole thing is a template that you're basically setting. So now sponsors follow that template.

Very good. Let's see. Folks, I'm sorry, I'm just this is our first live, many participant webinar using zoom and I'm still getting used to the way the questions and answers are stacked and it doesn't let me group things like I'm used to here. So okay, here's a question from Sue. Then can you do a quick overview on elements and when to choose different types content versus template versus the other two and when you would use one or the other?

Yeah, so content are basically sections where you're hooking in. And that's going to be the one you use the most really, like. You're almost always going to be choosing. I want to put some content somewhere when I'm adding fixed items is kind of what it says like this is something I want to be fixed on my like screen. So I want it to be fixed to the bottom or fixed to the top. And then a template is when you want to override something if you want to override how a custom post type or even how the standard post type outputs. You would choose template or if you want to override the like sidebar or the you know, archive loop item or the footer or the header like all of that you would do in template and then HTML editor is really more just like I want to add a script and I want to use the conditionals that are in elements to add it. So basically, if you want to add a script on your checkout page that you want to control for maybe it's your thank you page, whatever and you want to control it from within an element. Then you would use the HTML editor and drop in that JavaScript, whatever for tracking, let's say. And then inside of the element settings, you would say like I only want this to appear, you know, maybe you just pick a single page or a single post, or you know, maybe you're doing something I don't know, maybe you're doing something where the tracking where you're like, I only want it to show when this author is the author of the post, you know, you can do a lot of things like that. Very cool.

A number of questions came in regarding filtering, like you know, show me posts that have a sponsor is what would you suggest? Is there anything in the Kadence ecosystem now that could help out with that sort of post filtering?

Yeah, that's part of one in advance query. Block two is a more advanced filtering system right now. If you use the Kadence, post grid block, you can enable filtering based on a taxonomy. So you know, that's one way to do something like that, where if you wanted to show all sponsored posts, you could do it that way. Or, like, you could have the ability to, like, set a taxonomy of sponsored and then you know, that'd be one of your categories. Let me just

So,

inside the box settings here, you've got displaying filter, and what this is doing is just setting up based on taxonomy. So you're in and you're only filtering what's on the page. It's not like, like, if you actually just wanted to show everything in a single category. You wouldn't use a filter for that you'd come in and then select which category you want to show. So that's like, I guess two different things if that makes sense.

Let's see question here from Trent. Would there would you see a way to make this this approach work with Kadence and metabolics for like a real estate listing site?

I don't, you know, I don't know enough of what you'd need from a real estate listing site. But because you can create a custom archive loop item, like and you can fill that out with you know, so like, you know, if you're, if your real estate thing needs like a price, and all of that and you're filling all that information out and Megabox I don't see why that wouldn't work because inside of elements, you can just say like, Hey, use your advanced text and then I want to source the current post, get the price, you know, that kind of thing.

And then a saying in the chat, Ben Bradley that the metabolic showcase has an example real estate site out there. Let's see. I use a great question from you. Okay. And will the extensive usage of elements slow down my website?

Not unless you're on really bad hosting? Well, you know, what we're talking about is one, one hit to the database to pull in the elements. And then conditionals to basically say, like, Hey, should we show this on the page? You know, I'm not the first to create elements by any means. You know, ASTRA generate press. They've all been doing it for a long time. I've never seen any concerns about speed because of how you're doing it. You're like it's one database hit. And that can be cached. So I mean, essentially, like, if you're on a decent host, I don't see why it would slow down your website. Maybe Maybe if you had 1000 Or I don't know 100 elements your you know.

Yeah, I don't see how it would.

Yeah, we using other themes, and even some Kadence sites. We don't see any real speed hit from elements. We've been using those on our agency side for quite a while. Works really well. We've got a number of questions about WooCommerce then especially applying these sorts of this, this concept, to WooCommerce posts and archives and editing, maybe the template loop for WooCommerce. Anything to talk about in regard to that.

Yeah, definitely. So it's coming that'll all of that, like WooCommerce is a little bit different to like, provide all the support for it, but essentially, like, I'm, I'm like, somewhat embarrassed. It's not out yet. But templating in WooCommerce is something I've been working on for a little while. And yeah, essentially, what's coming to shop kit Kadence shop kit is the ability to create templates for WooCommerce stuff where you'll be able to design the single product page, the archive loop, that kind of thing. You'll be able to use custom, you know, you could add meta fields to WooCommerce but then you're also going to pull in and use blocks that are created for WooCommerce to pull stuff in. And yeah, I mean, it's tricky. It's a it's a tricky thing. It's funny that the hardest part is actually getting everything to show up in Gutenberg like it's supposed to. Just because it's you know, WooCommerce has is still doesn't have that stuff done, but But yeah, that's coming. Very good soon.

Soon, afternoon. In other words, what watch the Kadence blog and make sure you're signed up for the Kadence email. You'll you'll hear from all that you'll notice immediately. All right. Let's see. The question from Kelly off the direct topic of NetBox will Kadence blocks be moving to any sort of container child structure using Flexbox?

So we already have Flexbox. We've had it for a while. One thing that's going to happen really soon. Inside of Kadence, is we're so I'm just going to show you right now the section block is our container like it's the container block and you can add a section block as of the latest release, without having to use a row layout block. An intersection block if you want to add another section block. And then let's just say we'll add to section well, let's make up this outer one. So now I've got I'll show you the I've got a section with two sections inside of it. I can go into that parent section. And now I've got columns that I've basically set up because I've got sections and sections so you can already do that you can already nest as of the latest release. In you know if you wanted this one to let's just say like I want this to have a fixed pixel width, this one's going to fill the space, all that kind of control is there. What we're what I'm, like, really close to releasing is the row layout also uses section blocks. And right now this is a fixed layout but in like the next major release, and I've already been playing around with this quite a lot is like the ability to move section blocks around inside of a row layout, and even make a row layout drop. And so essentially, there'll be two ways to manage your columns based on what you prefer. And so a row layout is going to let you define the layout from the parent block. Whereas when you're nesting sections, you define the layout from the inner blocks the parent is the parent, but like actually defining the column width happens in the section book, whereas with the row layout, it'll define the column width and defined your responsive settings. So in general, the row layout block is going to be just way it's gonna be easier to use but then like you'll be able to move sections around in it. And then it's easier to control how you want that to look on on mobile.

Very cool. It's a great question that just popped in what is the benefit of using sections over rows

the the only thing is just preference, like for your design. So using a section, like if you're using a row for one, let me let me just use this layout right here. For example. In this layout, I have two sections. If I need to add a paragraph of of text, and then right here I want to add another like container essentially. I don't need to add another row layout block here. I can just add a section that I can use as container if I want to have a border around it, whatever that's separate from this paragraph block. You traditionally like if you wanted to set a background with container and Kadence you would put in a row layout block inside of that and then you can control everything. Now you really don't need to you can just use the section

if you need to create like an internal section and a section. So there is a benefit to that. And that you save a little bit of image save two dips, right? The only reason if you're starting at the top like if you're starting from the top and starting with a section block that you would want to do sections and sections instead of starting with a row layout is if you need a column width that's static. And by that I mean like in a row layout block, you set column widths by percent, right. And you can do that in a section but there's times where you're like, I want this section to be a specific pixel width all the time, even when the screen size changes. I want it to maintain that pixel width. So whether it's you know, an image or an embedded video or something that you're like, No, this needs to be, this needs to be 500 pixels until I'm in like mobile. Then you would do that with a section because you're basically defining it by pixel width. Now, you can change that but that's in general, like the only use case that you're like, I want to have a section and section when I'm doing section at the top level. It's because I really want a specific width that static for this like and this one to be the one that changes over time versus like just using a percentage because then a percentage as you change the screen size, that percentage the pixel amount is going to be less. I hope hopefully that makes sense. Yeah,

note to self I need to learn more about Kadence sections. I didn't realize any of that that is very cool.

Yes, sections inside of sections is pretty new. And as well like with that whole update. The row layout block will be out soon and that'll hopefully like those two major updates should explain like how to use Kadence a little bit more but like in general, I know there's a lot out there like Elementor is really pushing their new container block and the ability to like mess containers that way. And that's great. And what Elementor is doing is saving like a lot in terms of time space, but like Kadence is written differently and the row layout block is still something you'll want to use

very cool. So for those of you who are not watching the chat, we did just get a deal come through for Kadence 25% off the Kadence essential bundle or full bundle through Friday using the code meta box 25. Thanks Kathy for setting that up really fast. So once again meta box 25 for 25% off the Kadence essential bundle or full bundle through this Friday. We're just about a time here and a couple more things I want to hit. First we've dropped several links in the chat. There is a replay of this event that will happen we'll get that video up in about an hour. The link is the same one you use to register for this webinar and it is there in the chat if you're looking for that. Also, if you're not aware Kadence started a podcast not too long ago. Ben, you want to talk just briefly about the Kadence beat.

Yeah, so this has been a bit of fun Kathy and my sister Hannah, get together and talk about how to bake websites, effective websites and so definitely been a fun time for us. Hopefully you have a listen and enjoy it and definitely send us your feedback as to what you want to hear but our primarily thing has been you know, kind of what's going on a little bit as well as really talking through different strategies for like how, how to approach different things. In our last episode, we talked about email marketing.

Yeah, it's a great great podcast if you haven't seen that yet. It's on all the podcast channels. Pick your favorite one and you'll find the Kadence beat right there ready to go. And folks, there are a lot of questions that we didn't get to answer today and I apologize for that. Some of them very technical that we probably couldn't have answered in this format very well. There is one that I'll drop before we finish here, Ben. Any idea if or is white labeling of Kadence coming?

Yeah, it's again, it's like the one. It's like the one that yeah, it's coming. I've I've built half of it out. Essentially, there's a small group of people that really really want that and I I'm, I hear you and I'm working on it. It's it's hard to spend time on it when there's things like WooCommerce templates and advanced things and Megabox and advanced things because it is such a small group of people who want white label but you guys are very vocal and so I hear you and I see your comment. I will I like I said I have half of it done. I just need to get the other half and probably push it into betta so that people can start testing it.

That's fantastic. Thanks, Ben. So there's one final comment that I'll wrap us up on early on in the webinars Scott mentioned in the q&a you were doing Sunday was when the double the double icons were appearing from the hot or the Delta post. He said You know, you've been You said that's weird and Scott said no that's weird is our language not yours? So, this iThemes Training is what we call affirmation time. So when you see the people, the really brilliant people in our space, scratch their heads for a minute. It makes you feel a whole lot better about yourself.

Yeah, sometimes you just got to refresh the page and go okay, what did I do? Because somehow I deleted a row and I didn't even see that I did that. But I did.

Yeah, it's fantastic. Well, thanks everybody for hanging out with us for the last hour. Hopefully you picked up some really great stuff. It is thrilling for me to see the continuing development of Kadence it just continues to get better and better. And such a great team behind it. Ben, thanks so much. Any final words are wrapping this up today?

No, just thank you guys for being a part. Do this again soon.

Yeah, for sure. So folks, once again, don't forget the Kadence podcast, just Google Kadence podcast. It'll pop right up and that special deal paid a pardon me meta box two, five all together. No space meta box two, five is the discount code that's good through Friday of this week. We're 25% off the Kadence essential bundle or the full bundle. Again that deal expires on Friday. Ben, thanks again for being with us. Thanks for you all hanging out with us as well. My name is Nathan Ingram. I'm from everybody here and I think have a great rest of the day. We'll see you back here next time on I iThemes Training where we go further together.