\nThere’s a new way to build highly effective and performant WordPress websites. The Gutenberg block editor made its way into WordPress core in 2018, and more and more WordPress sites are built using blocks today. Kadence is a theme with a complementary block plugin and it makes it incredibly easy to build fast and beautiful sites easily. If you have a site built on iThemes Builder and are looking to modernize your site with a new look and feel, you know it’s time. With the new Kadence AI platform coming soon, there’s no better time to move to Kadence & Kadence Blocks.\n\n\n\nIn this training, Kathy Zant from Kadence joins Nathan Ingram to rebuild an iThemes Builder site using the new tools in Kadence theme & Kadence Blocks. If you’ve been waiting to move your site from Builder, we’re here to help make that process easier than ever. We’re taking a site built years ago with Builder and showing you how we are transforming the site taking speed, design, and even accessibility into consideration as we use the latest state-of-the-art tools to make a more effective web, together.\n\n\n\n\n\n\n\n\n\n\n\n\n","is_multi-day_event":0,"EventOrganizerNames":"Kathy Zant","livestream_public":0,"livestream_replay_set":1,"livestream_zoom_registration_link":"https:\/\/us06web.zoom.us\/webinar\/register\/WN_QzYwVWvxQ86JtnDJa3njog","livestream_chat_log":"https:\/\/drive.google.com\/file\/d\/1cKT1mqeJCYcWCeBTbZeaJ4obA0hc5r-p\/view?usp=sharing","livestream_live_transcript_url":"https:\/\/otter.ai\/u\/mfB_LHZy2CwrCVpx_n2lCKyuYmQ?utm_source=copy_url","livestream_vimeo_video_id":873084637,"livestream_live_transcript_text":"I'm Nathan, you are telling me a little bit about it. I never used builder. But it sounds like it was just like, responsive cutting edge in its day. And now WordPress as a whole has kind of moved away from using page builders, whether it's Elementor Divi, there's this whole new genre of building with blocks building with Gutenberg building with blocks plugins that has has come to the forefront. And Ben Ratner, who is the founder of Kadence is really the person who started it all I'm sure it was coming. But Ben was one of the first who really implemented this Kadence blacks was the first blacks plugin to be released and it was released before Gutenberg was ever a part of core. It was released. Gutenberg was still a plugin, and everybody could see kind of where where are they going with Gutenberg. I had Gutenberg installed on my personal site. I'm like, Alright, I'm gonna get myself ready for this. I'm going to practice using the block editor, you know, whereas before we were using the tiny MCE editor that was, you know, basically here's your content. That's all you can do. No fancy stuff. Don't anybody try to get too fancy over here. And now this whole new world of getting fancy with your webpages has really opened up and Ben Ratner was one of the first people who could see where this was going. And Ben started Kadence Kadence blocks with the idea of giving more control, control over color control over sizing padding margin, all of the things that developers in the past would have to do. He wanted to give that to everyone and to do so with Kadence blocks so Kadence blocks is very much like Gutenberg, very much like the block editor. However, it gives you control over what you're doing. So you have in the Gutenberg block editor, you'll have like an image block and you can put an image in and you can set you know your alt tags and size things a little bit and center things. But Kadence box extends that you can add masks you can change the color right within the Gutenberg or white opens in the block editor. There's so much more you can do with Kadence blocks so you'll have the image block and Gutenberg as core and then Kadence box has the advanced image block which is just like the image block except a gives you much more control over what you're doing. So in that sense Kadence is much like a page builder gives you the control that page builders and I themes builder and Divi and Elementor all of these other builders that are built on top of WordPress gives you the control of doing that except you are within WordPress rather than on top of it. So I'm really excited to to show you the fun of building right within WordPress. With a little bit of fancy extension.\r\nYep. All right, so sorry about the delay here, folks. I had to get the captions working in ironed out that's all going so I'm gonna officially start recording now and we'll dive right in. Well, happy Tuesday everybody. Welcome to another actually not another. It's the first the very first solid Academy live stream on what used to be I iThemes Training so welcome everybody officially to solid Academy. So happy that you've joined us today for this very first webinar where we're talking about converting I iThemes builder sites over to Kadence which is going to be a lot of fun. So my name is Nathan Ingram. I'm the host here to solid Academy. I'm joined by Kathy Zant, the marketer extraordinaire, the product direct the all of the things with Kadence dial up Hey Kathy, how are you?\r\nI'm doing good. Thanks for having me. Absolutely.\r\nSo we were Kathy and I were talking earlier this is such a we didn't plan this like it would have been a great plan to have if we thought about it to have but we scheduled this this live stream months ago. And we were talking a little bit about you know this whole transition so I themes was one of the very first commercial WordPress theme companies and that's why it was called AI themes back in the day and I themes had this this really groundbreaking theme called I themes builder that would allow you to really create without having to get into the PHP of the template files, create all sorts of page templates in a visual way. apply those to different pages or or set up views for custom post types, 404 views all those things without having to touch code at all. And it was way ahead of its time and it was really quite amazing. And so we're going to now look at taking the old themes builder theme and bring it up to speed for 2023 with Kadence. So Kathy was giving us some really good information earlier, Kathy, give us kind of an overview of what we're going to attempt to do today in this live demo.\r\nYeah, okay. So we are going to take Nathan, you've been so kind as to give us a sample site, a site that was built with a themes builder, using all the innovative tools that were there. And we are going to migrate this site. We'll give a little preview of the site. Here we are. Nice, very simple site but lots of words. Lots of layouts. This is all built in builder and iThemes builder and we're going to migrate it to Kadence and Kadence blocks so it's gonna be fun. So we're gonna start off looking at all of the ways you might want to set up the framework with Kadence and then how you would come to as close of a representation of what we've got right here using Kadence.\r\nVery good. Yeah. So this is a perfect example of those of you who work with clients. You know what it's like to build a client site many many years ago, and wow, they just never change it and there it is. And, you know, so you're looking at a site that is,\r\nI'm gonna guess\r\neight years old, many, many years old. It is. It is what it is, you know, there's very little design in this. We actually didn't even design this. We took it over from somebody else. And it just never has changed so we converted it over to our stack kept all the design and text and here it is. So a lot of you were talking in the pre show before we actually kicked off the recording about maybe you don't have builder sites but you've got some gulp WP bakery visual composer sites, or maybe some Divi sites and this some of the things we're going to talk about today are things builders specific but really in a big picture. We're going to talk about how to look at the way the site is created now and how do we visualize that in a Kadence layout, and then build all the things to get us where we kind of already where we need to go. So this is by the way, there's no handout. If you're just joining us, there's no handout, no slides, nothing like that. This is all live demo. It is very possible. We're going to break something and then fix it. Which is what we call here at solid Academy affirmation time. Because you know, if the people who are supposed to know what they're doing break things then helps you feel better about yourself because you break things to probably, and then we'll figure it out together right on how to get it back. So it's good. It's a good training opportunity. And our goal is to we're gonna do a few of the pages on the site now. Why don't we start Kathy just kind of with an overview of I themes builder and how to get into that, you know, those old layouts so we're gonna go back into the admin area here. And we're gonna go to my theme, and then layouts and views and Kathy is driving right now. And so there's three different layouts in this project or in this in this website. So there's a home layout that's applied to the homepage. There's a projects layout that's applied to and you can see the project's custom post type over there on the left sidebar underneath widget content. So there's a custom post type called projects and this layout is applied to those posts. And then there's kind of a default layout for the site, which has a right sidebar. I'd very, very basic. So let's first let's just go into the home layout, and just click Edit there. And it has been so like I was setting all this up for demo today. And wow, it's been so long since I've looked at any of this and so this is the way we used to build sites with our themes builder, I think is builder was created pre customizer, it does not support the WordPress customizer. So everything was done right here in this layout engine. And so what we have Kathy, let's take a let's get another tab open with the front page of the website open live. Maybe go there and just view the site. Yeah. So notice at the top, there's this gray bar across the top and there's a couple of bits of content. And then we've got our header and then there's some body content and scrolling all the way to the bottom. We've got some footer content with these three widget boxes. So if we go back to the Layouts tab, you'll see that reflected in the layout. So there's our widget bar at the top that has if it has a couple of bits of content there are navigation, which also includes a logo, our content box, and in those three boxes at the bottom. Now builder. Builder had this thing called widget content. And this was it's like a custom post type almost. It's very similar to a custom post type. So if you click in there, what you have are a bunch of essentially posts. They don't render on the front end of the website, but this was a kind of a hacky workaround and actually worked very well of ways to you know, how can I use the WordPress content editor so for example, if we go into let's just go down to employment opportunities. So that's one of the things that's in a widget box. This is a full WordPress visual editor here, where we can go in and just It's the classic editor right and so within this, you could drop into a widget area. So you could have all these sections on your page before page builders were ever conceived. That's how builder would build sites. And so we've got all these bits of content that are here in widget content, and then they're dropped into layout. So if we go into Appearance now real quick and widgets, you can see how some of this is set up. There's a whole bunch of widget areas here. So right sidebar, see there's all the the widgets in that layout. There's the home layout with all of the boxes there. So if we go right there so there's employment opportunities that's dropped in his widget content from where we just were, and then these other these other layouts like over there, the right sidebar top is open. That's a duplicate sidebar. So you could set all of your sidebars up in one layout, and then have duplicate that sidebar and other layouts so you wouldn't have to set them up multiple times. So thinking about that today, my goodness this was really backwards but back then, it was the bomb like it was people say that anymore that I just show my age. Like it's it was so awesome. There was nothing like this. It was fast. And you could build totally custom websites without touching code at all. So I cannot see you're having some issues with login. That's not something we can troubleshoot during a live webinar, but if you'll email sales@ithemes.com They will help you and get that set up for you. Okay, so let's so Kathy, as we look at the front end of the website again, as we're thinking about this in Kadence having kind of picked it through with the way builder has got this set up how would we deal with this\r\nin Kadence um,\r\nthat with widgets, right? If it's on the page, it's going to be on the page we are going to see the content of what we are building out within that page with the exclusion of two areas the header and the footer, which would be handled within the customizer at this point in time. In the future as full site editing comes along. All of the things are going to be within the context of the page. So and really when you're thinking about building out a website, you have navigation at the top, you have footer information, and then you have boxes and it's just how are you laying out those boxes. As we get into this you'll start to see you know, in the old way of building with builder we had widgets as our boxes so like when we look at the footer we've got the employment opportunities had set up as a widget as widget content and as being pulled in via builder as well as a box here we were going to do it similarly with Kadence. But you're going to have much more control. So we're going to focus on just re revisioning this site into Kadence. But as you have as you do that, you're going to start looking around at other sites and you're going to say Oh, well, look at what else I can do. So this is going to get you baseline to baseline. But this is going to open up an entirely new world of redesigning your site and modernizing it getting it to a place where really there are infinite possibilities of adding additional design, adding additional ways of connecting with your customers, adding new ways of pulling people into your content. So there's going to be\r\nit's going to be good.\r\nYes. And what you're talking about Kathy I think is an interesting discussion. You know, if we look at the client side of this, if you have clients that still have builder sites, you kind of have to ask yourself the question, can I charge for this right? Is this something that I can build for if I've been managing this site for all these years, and now I think builder has fallen out of support. So it's no longer a theme that's being supported at all, either by technical support or continued updates. And at this point, I believe now even there are no security patches that are going to be applied. There hasn't been a security issue in builder and ever so I don't imagine that will be a problem but you know, it's not supported at all anymore. So it's sunsetted. And so you have to ask yourself the question, do I charge the client for this or how's this going to work? And really, you know, this is the time like Kathy was just saying there's so much more like if these people would invest in their website, there's so much more we could do so much how it could look so much better. But you kind of have to take two courses here, am I going to push for a redesign? Or am I going to just rebuild this quickly as is in Kadence and maybe charge a small amount or nothing at all? I would at least charge a small amount if you can. But you know the language that I would use for a client is basically the you know the soft some of the software that powers your website has aged out it's just it's no longer supported. And it's been sunset and we really need to rebuild your site in a different in a different software stack. So you know the options are we can rebuild it as is without design thought and just rebuild it just like it is for this price. Or we can really move let's move you into a better new website at you know, higher costs. So that's how I would approach that from a client perspective. You have any thoughts on that? Kathy?\r\nYeah, so smart. Um, you know, web. The web is eternally evolving. And if you're developing in WordPress there is it's not just, you know, sure you can build a site and just stick with that same version, but there's PHP improvements on PHP, seven, four is now end of life. So we need to start really looking at getting all of our sites up on PHP eight, you know, new versions of MySQL new versions of WordPress, there's always going to be this trajectory of growth and it really behooves all of your clients to stay current with that. They don't want to be left behind when technologies change and sure this is just a brochure site, they could very easily argue that we don't need any of that. But how further lat along down this upgrade path. Do they want to go? I mean, the longer you go, the more of a jump you'd have to go from, like WordPress, an old version of like WordPress to I don't even know to where it is now. You can't just make that just that big jump you know, I I cleaning one hack site that I had to do and I swear to God, Depeche Mode was having a concert and live concert inside the site. It was so old. It wasn't like from the 80s but it felt like it right. And you couldn't just update the site from like WordPress to, to where we were at that particular time. You had to do incremental jumps, because every time you were up to those updates for software, do things right when you're updating, I'm sure a lot of you have updated WooCommerce or Elementor. And it's like, gotta update the database, hang on tight right there. Those kinds of updates to the underlying technology need to happen. So you really it really behooves you to have those kinds of conversations with your clients that staying current helps keep the costs down in the long run. If they wanted to move from you know, I going to from builder to Kadence is one thing this is going to be fairly simple but like if they really let themselves get behind in terms of all of the technology, the amount of work to get them current is much more so this is actually a much more cost effective way of doing this.\r\nAbsolutely. Alright, so\r\nas we're going forward here, some of you noticed somebody mentioned in the the web in the chat, absolutely backup, of course, you'll notice in the URL here that Kathy has pulled up this is a dev site. So we've made a copy of the live site over and Kathy I just DMU the, the live URL, because we're probably gonna have to compare those two as we're building and I think we're ready to just dive right in. What do you think? Let's dive\r\nright in. Okay, why did they change slack on me? So let's I don't know if anybody else,\r\nDMD you in the webinar chat. Okay.\r\nAll right. Great. There it is. All right. In zoom, there's the live site.\r\nAlright, so we have a backup we have a staging site set up for this and we're ready to make the move over to Kadence from builder\r\nOkay. All right. So builder does not use the customizer, as Nathan mentioned Kadence very much does use the customizer, boy all of those widgets. That's a bit much. I'm glad it all works logically, but I'm looking at it and it's like this is going to be so much easier. So let's get into the customizer. Well, first we have to install Kadence don't we we have to install Kadence there is no need to look at the customizer until we have Kadence so this is the scary part. This is the worst of it. This is the most painful part is just switching over to Kadence isn't it? Like if we do a live preview?\r\nI wonder what it looks like it's\r\ngonna happen here.\r\nDun dun dun. Oh God, terrible. It's not terrible. I can work with this.\r\nAnybody else having PTSD of like broken sights?\r\nThat's not that bad. Is everybody okay? I'm\r\non the right side. I'm not doing it to the live. I don't have access to the live site. Right.\r\nI am going\r\nYep. And so just FYI. The reason they're in the in the preview that the columns are still there. Some of these pages where there's multiple columns, it's actually using beaver builder in the content area. So we'll need to disable that also as we move into Kadence\r\nright. Okay, so I'm just going to go activate and publish.\r\nThen tanta\r\nDanton time we are done. So if we went and we look now at oops, I could have just refreshed that. Oh, thanks for choosing Kadence no problem. I do that all the time. All right. So there's our live site right now. Our footer is gone. Every look over at the footer, so we're gonna have to rebuild that. And of course, our header does not look the same, does it we still have our navigation though. Isn't that great? But we are going to have to and look our slider still there but that's Beaver Builder, right? Yeah, I'm pretty sure Okay, yep. So we're gonna get into the customizer, and we're going to first of all, take a look at Kadence with the customizer, and you said builder actually, was a product that existed before the customizer right where you customizer pre customizer. Wow, Depeche Mode. I think I hear them in the background. Wow, WordPress, this is the great thing about WordPress is that it has been around for so long and that as we as we develop these sites, you know, your content is separated from design. So you can take your content, it's still your content still there. It's stored in a database. And then most of the stuff that's happening with themes and other stuff is happening elsewhere. So it's really easy to change things is one of the reasons why I dove into WordPress, because I was an early blogger and I redesigned my site every month and so I liked to not have to change pages. So I wanted to just have that design and content separate look at our colors and our fonts. Now Kadence has something that's really powerful, which is the Kadence color palette. So each one of these colors that you can set up has a different purpose. And for this particular site, we're not going to have to worry too much about that. But I want to tell you a little about it because it's so powerful. So when you are working with with Kadence and you're building out let's say you're building out a landing page, if you set up all of your brand colors here and then let's say you want to go into the design library and pull in like a hero area. It will inherit from your brand's colors because you have them set up in the global palette. Now I pulled some of our colors from from our existing site. We have real out their colors of dark gray, dark blue and light gray, getting really, really out there with that. And we're going to pop some of these and so we have accent colors, and we have to accent colors and you'll see buttons hovers like Default button hovers. We'll use those. We have our strongest text. We have strong text and then we have some medium text and subtle text. And then we have our background colors and we can set our subtle background, lighter background and white so you can see some of these colors here with this background. So I am going to go ahead and for our for some of our colors. I'm going to set these up. I am going to do this as the dark blue that we had on our existing site, which is a fun hex color of 384 B\r\nA one\r\nand then I'm going to keep that strongest text color. I'm going to try to use this one this medium text color for the dark gray, which was three C three F 42. That looks right. And then our lighter color was just a final E A. And so those are going to be our colors that we're going to inherit over.\r\nThere's a great question in the chat Kathy. Yes palette too. And palate three. Can you set up more than one? A bunch of different palettes on a site?\r\nYeah, you can. You can set up on these are really helpful when you're pulling in. You're pulling in like the starter templates and stuff like that. You can use the different palettes just to kind of see how how things would look as you're pulling them in and there's a link in here when you start working on it. There's a big thing up on the Kadence site and how to use that color palette. But generally speaking, this is like button colors. Then we have text colors and background colors. And so when you set those things up, they inherit throughout the rest of the site. Again, we're separating design from our content, our site background,\r\nbut only one of those palettes can be active at a time.\r\nYes, yes, exactly. I'm gonna stick with our palette one make sure I don't forget that.\r\nI did not check the color and the background here. That's probably why is it just white? Okay.\r\nI have a screenshot and Okay, so that's just set up to white, our site background. I am going to we have a background image right.\r\nI am going to set up that ie a light gray color.\r\nAnd then your links, how you want your links to work. How did the links work on the old site?\r\nIt's a good question.\r\nI think we can probably just add the it's that Yeah. So here we are to do an inspector on that and see\r\nwhat that color is actually just close enough\r\nor if you have the color.\r\nYeah, okay, I'm gonna drop that in the chat.\r\nOkay, I don't know what the hover color is. It seemed to be a lighter, something lighter.\r\nsomething lighter than that. bump it up a little bit. Was that\r\nSure? look great. Okay, we're gonna have standard underline. That's what we had before. All right. So we have our color setup. And then I didn't check fonts, but that looks like a fine variety of Arial. Helvetica. Sans Serif. If\r\nit is, it's Helvetica. It is Helvetica. Yep. Okay. Really creative. font choices on this site. Yeah, I'm just going to\r\ndo the standard area, Helvetica, sans serif.\r\nHow does that look close? Close. And, you know, this\r\nis not we're not going to finish this this afternoon. But we're giving you like the overview of what you need. Okay, so we're going to use that blue color. It looks like four is that our h1 there?\r\nThat is the h1. Okay.\r\nSorry, h1. We're going to set that to that blue color\r\nlooks like maybe H TOS are black. Let's go to the live site.\r\nSee if there's any other font differentiators we would like to add.\r\n3228 24 I should have inspected on these but I didn't. We're just gonna go with those. But what you can do is on the live site,\r\nyou can do inspect\r\nand you can take a look at you know what things are and then get an approximation for those. So\r\nlet's see.\r\nYeah, you know what, actually, let me just, we talked about actually not doing this Kathy but I'm gonna switch over to my I'm going to share a browser window really quickly. Check. Let me show folks a really easy if you're moving from builder, here is a an easy way to deal with that. So I'm actually I'm here in the cPanel File Manager. I'm in the Content folder and then we're in the Child Theme\r\nbuilder. And right here in\r\nthe styles dot css. At the very top is where the marks of the scroll down right here are where all of the heading sizes are defined right towards the top under this headings area. Okay, so that's an easy way to find\r\nthose sizes. Perfect.\r\nSo if you want to share again setting\r\nthat is nice and clean.\r\nAnd I don't think we want to take the time to put all those in but that's how if you wanted to match exactly, that's how you would find\r\nperfect, nice and clean. Yeah, and so in in here, so I think it was what 27 So you can get in and get super granular like Kadence gives you the ability with your fonts to do whatever it is that you want to do. So you have so much control. So if you wanted to go in and see all of these are inheriting so they're inheriting from this base font. But let's say you have h3 and you want to get in and you want to change that to a specific and get really specific about something for your H threes. You could go and say I want this to be\r\nregular, huh? Tell me my heart.\r\nAre we doing that for real? No, no. But you could do. You could if you wanted to Kadence allows you to make we could\r\nmake some decisions. You can\r\nsay all of your sizes up you can transform the tax. So if you wanted to say for that particular one, I want it to be all uppercase. Everything that you do in a style sheet, all of the code that you used to have to do you can now do in Kadence reader in the customizer or let's say you are in I'm getting ahead of myself. But let's say you are on a specific page and you have an advanced text block. You can set just this one text block and have that be Comic Sans and change the colors and you can it doesn't have to all be set up within the customizer here in the customizer you're just setting up like here's my framework. Here's what I'm gonna do. This is like where you're theming your site. So you're setting your brand colors, you're setting your fonts, you're setting, your typography, all of that stuff as a general rule, all of that can get overridden on each individual page, which is one of the power, the powerful things about Kadence buttons. You can control those on a page or you can set your standardization of your buttons over here. I don't think we have a lot of buttons to worry about. So I'm going to skip that part. All right, I am going to go ahead and publish what we've done thus far for our customizer, and it's going to basically show you what you've got here. So we've got our color is now set up for our h1 and our fonts are set up so we are ready to go. Let's see other general types of things. If you have to deal with like your logos and things like that, all of that can be set up here so that it is inherited through the site. What other things pages and posts layouts, all of you can still do widgets if you want to do widgets. Let's see menus. All of your menus can be managed over here in the customizer as well. We have that main navigation set up over here. We're going to pull that into and we you saw that we have different tiers. So over on our menus over here we have you know dropdowns set up and you can see those reflected in the menu over here what we do has all of these dropdowns underneath that. Now what we want to do is to be able to pull this in and make this look like it did right so we want to we need to set the page the page width, right because all of this is being set up let's see we publish that we have a page with as full wet and this is a fixed wet. So we need to set\r\nthat page layout PAGE PAGE PAGE LAYOUT\r\nand we are going to set that so we are always going to show our page title. Our page titles\r\nare sometimes aligned. Now we're going to say they're left aligned. We can override that\r\nour page layout is going to be narrower\r\nI know we had it\r\nset to 1050 with the I wonder if there's a way to\r\nlet me jump in here real quick Kathy that we probably ought to make because our default builder layout had a right sidebar. We should probably make our default page layout here right sidebar. Yeah. Can we set our container width\r\nto 1050? Yes, where's container width?\r\nThat's a great question.\r\nThat's right\r\nwe're gonna get rid of this space in just a second. Title container min height on it, or is container what\r\nNow honestly, this is probably something I would just leave alone at. Yeah, the standard width here\r\nall right, yeah, let's just keep it standard. We just don't want to do full wet. All right. Single Page Layout. That's where I need to get rid of that spacing.\r\nOh, it's it's that cut. It's a general layout, Max content width at\r\nthe top. Content down.\r\nThis is my trauma with Kadence it's always been with Kadence is that I I know it's there. I just can't remember where it is. So but there it is. And we would we want to keep that centered.\r\nYeah. And honestly, like that's how you would do it. I would say let's put it back the way it was and you know, just revert that. Okay. What was in 1200 a little you can just hit the little\r\nrefresh icon. Top 90. Yep. Just leave that alone.\r\nBut that's how if you needed your site to be constrained even further, that's where it would be.\r\nRight. Okay,\r\nthen our sidebar, you can set your sidebar where you can make your sidebar sticky, all of that fun stuff.\r\nWe didn't make a white, I think right? The sidebar. So it looks like it's part of the sidebar background why there we go. And then sidebar air padding. I think we want that to no padding on that or\r\nah we need to get rid of that gutter somehow. Yeah.\r\nAll right. Let me come back. to that. Yeah,\r\nwe'll come back to that.\r\nThink this is the one that always gets me not to.\r\nThere's this every time I convert a site there's this space here and I always forget where it is. If anybody remembers because if you've converted a site, we're behind me where that is. I thought it was that it was post page layouts page. Layout.\r\nDesign. It's something with the header.\r\nI know where it is on. I'm going to just go ahead and publish this. And I'm going to try to do it on the page and then I'm going to come back to the customizer, and I know where to do it. On the customizer. Alright, so um, let me I am going to create a new page\r\nfor this particular one.\r\nSo this is going to be a new page because I could go and just edit this particular page\r\nI'm just going to use the standard editor\r\nto go ahead and deactivate Beaver Builder Kathy.\r\nOkay. So that will There we go. Okay. All right. Let's go back to\r\nour homepage. So this is what we're trying to get as I was going to do the Hatter wasn't I? Yeah. All right. So yeah, I'm mad because I can't find I want to get rid of the space. But let's do the hunter first. Let's go back into the customizer and get our hunter straightened away because otherwise everything else is just not going to inherit well. So we have to go into our costs customizer and we're going to go into the header and there is no logo Oh, there is a logo.\r\nIt is in the media library.\r\nIt is in the media library. All right. So we have our logo, where, alright, so the Kadence header builder, if you see down at the bottom of the screen, there is basically a three tiered layout here that gives you three tiers of a header. So you see here we have the logo and we've got our primary navigation here. So similar to this, and then above that we have a space where we can put in this content above it. So this should be fairly simple to do. So here we are going to\r\nadd I'm going to add some\r\njust HTML and we can it ends up being somewhat like a widget. And we are going to take this\r\ncopy that in in there and then over here we are going to add more HTML now.\r\nHere we are adding just the phone number and it's a live demo, folks. It's a live demo All right.\r\nShould be able to just pull in\r\nanother HTML element I'm just gonna do a button for now. And we're just gonna put\r\nOh, we don't have the Pro Kadence pro activated.\r\nHang on a minute. Oh,\r\nit's that was that's why we don't have enough head. That's why the other HTML All right, I've just activated Kadence Pro.\r\nAll right, well again\r\nKadence Pro to my rescue. I'm so used to using Kadence Pro. Why is this not look right? Alright, so we'll go back to the header.\r\nI'm going to put HTML here and just copy and paste that in. Coming back\r\nto that window we're gonna have to close that.\r\nOkay, and then of course, you can\r\nrefine that with design, right? So\r\nthat is going to be white text.\r\nWe're going to change the background on that whole thing in just a second. And we are going to say that that's Arial and then our size. You can set your size over here to anything you want. I think that's more like a 12 or 14 So and of course it's white. Let's change the background color on this good design. Tap roll background and that was that gray color. So you can see up there we're getting closer.\r\nAll right. And then next on that top row. We are going to available items. Why is there no\r\nyou may have to publish and refresh to pull out those the new in the free version of Kadence. I think there's only one HTML\r\nitem option I could be wrong about that.\r\nJust click over in the Yeah, look at that. Isn't that weird? Oh wait, hang on. Okay, let's just why don't you close the customizer and go back in we have to turn on the\r\nadditional header. We have to do Okay, so when you go Kadence pro, you go to Kadence and you have pro,\r\nyou have all of these additional header elements. I also highly recommend doing Header and Footer Scripts because it makes it so that you don't need to Child Theme and you can put your Google Analytics all of the tags and everything that you need there. I'm also going to hook turn on hooked elements because we're gonna talk about that in a little bit too. There are tons of additional menu types of things that you can do. And then if you want to do conditional headers that you can do and various like a different header for each page. You can do that as well. All right, let's get back to it. Let's go back to the front end of our site. Let's go back to our customizer and let's get our additional header items. My friends, and we'll go back into our header. Oh my gosh, look at all of that.\r\nYeah, there's a few more things there. How about that? I feel so much. The option is important.\r\nJust a little bit. Oh my stars.\r\nOkay, so folks, if you have ever wondered, Where are all my things? Maybe you too have forgotten to toggle. We can see we did all that on purpose. That was it's all on purpose just to demonstrate the importance of turning on the options.\r\nI just tell you like how many times\r\nAlright, so I want white text. We get that.\r\nNo, you're not getting it's not a link. There we go. And then we want our font to be we set it there and we set our size was what 14\r\nthing what oh, 14 That looks close ish.\r\nBut we need a lot more padding on that\r\non the row itself, and the row itself.\r\nSo we're going to add some design, and we're going to add some\r\nmaybe five five top and bottom. There we go. Maybe some more in from the sides.\r\nYeah, I think 10 looks closer. All right.\r\nSo there you go. There's some of your header for your top row. Now we have our logo down here we want to make sure we set up our logo. So if you click on the little gear next to that, it says site identity. We are going to go select the logo and tell the site where that logo is and I believe that's it. We're gonna\r\nreally gorgeous ping file.\r\nWe are going to add a little bit alt text we are going to skip cropping and we are going to say we don't want logo and title. We just want the logo itself and\r\nprobably want it just a little bit bigger.\r\nNo idea exactly how it's going to how much bigger we'd want it to be. But we're close.\r\nIt's a battleground re 130 pixels on the current site.\r\nIs it okay perfect. I love that precision. All right. There we go. So we've got that our site title is there the tagline the site icon. Of course, you might want to set that up as well if you're still on builder because you haven't you haven't been using the customizer. So you can do that. as well. So we got our side identity. That's all set. Now we're going to go over to this primary navigation. And we're going to try to get this as close as we can. The background on this row seems to be like that EA gray. So I'm going to set that up as well. So I'm clicking on, you see these blue icons over here. So I'm clicking on the main row, and next I'm going into design and the main row background. I'm going to pick that that gray that it was close enough.\r\nAll right.\r\nLet's go over to our navigation. And let's get going with this. So our navigation style right now is pretty basic. There are things we can do here. Our navigation background\r\nis going to be just playing and you should in fact it's going to stay the same drop down options. We don't know what we have going on over here.\r\nThey just kind of pop. Anyway you see that there's different drop down reveals that you can do here. We need to do some stuff with design.\r\nItem divider looks like something we need to set. Yes, really. I think I don't think we have the right navigation set. That the right menu, the right menu selected.\r\nWe don't have the right menus to home who we are what we do some projects\r\nshould be called main nav okay. Please marry navigation Select Menu. Yeah, that was just pulling pages. There we go. That seems a little more familiar, doesn't it? Thank you. All right. There is no other navigation is there. That's perfect. Okay. Now, we want to where am I headers.\r\nI am going to go to design and we want to set up the divider.\r\nAnd looks like we had some font. We had this setup so that it was uppercase so we can set up our drop down or was it Adam dividers just going to make it a little bit bigger so we can see where it's going. Okay. So you can see\r\nnow we have our dropdowns we're going to want to style these. So we've got white and then the hover is gray. So our drop down colors. Initial color is going to be white. Right and then our drop down weight\r\ndrop down background wait and then it turns reverse. Alright\r\nwhite with black. And that's one of the cool things about\r\nKadence in the customizer, as as you are changing these things. You can just go over here and see the change you made here. What did it do? You don't have to save it go to the front end all of that stuff. So that's one great benefit that that we have here.\r\nActually wrong. There is no item divider in the submenu in the drop down.\r\nThere isn't okay so actually just dash 2x\r\nThe Dash, the side zero pixels\r\nx okay, perfect. All right,\r\nand you can add shadows and whatnot. We also have this blue line on the underside of our header\r\nand that would be where does that go Nathan? Do you know?\r\nYeah, that's gonna be me going into the header.\r\nThat is\r\nclick go click on the gear on the main header line at the header builder at the bottom.\r\nHere Yeah, yep.\r\nOkay, and then border right there\r\nborder. Beautiful. So yet, this border is going to be that and it's going to be our primary blue.\r\nProbably\r\nthree pixels or so maybe it's actually more like five.\r\nOkay. All right.\r\nLittle padding in that header area, maybe 10 pixels on the top on the bottom\r\nis that right? tab and I can never remember where stuff is. Till I have done\r\nI always remember it with trouble T RB l top right bottom left.\r\nTrouble actually\r\n10 all the way around kind of looks nice.\r\nOkay. I'm gonna go ahead and publish that and let's see what it looks like not terrible\r\nwe're getting they're\r\ngetting in less than an hour. Look at that. We no longer have Beaver Builder. We no longer have builder. We have Kadence\r\nand a hatter So speaking\r\nof an hour right at the top of the hour, why don't we take a five minute break and we'll come back and build the homepage.\r\nSounds good. All right.\r\nSo we're going to pause for the next step five minutes or so back in five minutes.\r\nAlright folks,\r\nwe're back after a short break. What we've decided we're gonna do, we're gonna go ahead and build out. The header isn't 100% but we're close. I think you can see how to get to where we're trying to go. And then so now we're going to focus on the footer, and then build out the homepage from here so I was just mentioning to Kathy This is such a non standard footer. footers aren't built like this more with all these blocks of content. And so we make it a technical limitation of Kadence here in that Kadence gives us two HTML areas for the footer but not three.\r\nRight the if you absolutely had to do something like this, I would recommend instead using Kadence elements because that gives you so much flexibility and so much more freedom to do anything in a footer and you would just set that element up to replace the footer and I can give you a quick pointer of where that is on all the sites that I do anymore. I am always doing a footer and elements and then just replacing footer on the whole site. So\r\nthat's my preferred way of going. Let's do that. Okay,\r\nso I Okay, so I'll just go ahead and get started doing that. I'm going to show you quickly how the flutter builder works. I'm not going to go into it completely. But basically it looks just like that header builder. You've got your three rows, and you then drag in various elements into the footer and and there you go. And you can see it as it is building but my preferred method so much easier. We are going to go into our now I turned this on when I went to Kadence. And I said, Oh, I'm going to turn out all of these things. Hooked elements is one of those things that I turned on. So you can just go into elements. This will show up once you turn that on. So I'm gonna go into elements and I'm going to add new, and elements are a way of\r\ntheming a site\r\ngives you flexibility and freedom to do all sorts of things for a footer. I'm just going to create it a Content section so you can have content sections, you can have templates. So you can have like a page that replaces all of your blog posts and it's going to look in a certain way, but I'm going to build out a Content section that replaces the footer and I'm going to hold on a second let me just get my screen. Okay. So setting up Kadence elements, I'm just going to say um, site wide footer, just as that's just an internal notification there so I can tell what I'm doing. When you're setting up a Kadence element, you will get this particular navigation here and then it says that it's a Content section, you can change it to one of the other elements if you want to your preview settings. This is mostly if you're going to do a template. But for placement, we are going to say this is going to replace flutter. And you see here there's all sorts of different settings here so you can create a content section for example.\r\nOh, stop me, Nathan.\r\nI could go on forever about the power of all of this. We're just replacing footer. I'm just going to search for flutter. There's so much you can do you can do before footer after footer. Replace footer. This is what we're going to do. And I'm going to say Display Settings. I'm just going to say and the entire site and then this is where I am going to build out what we saw on that live site here. You can also do this for a header by the way. So yes, that header builder is like I'm sorry, I want to come back to builder. If that's too much for you. You can do the same exact thing with Kadence elements and replace headers throughout the whole site. We're just going to do the footer for now. So we're going to do a row layout and Kadence works with rows and sections. And it's all just boxes, right? So we're going to do a row. Let's see, what do we have we just have a content with row with three various boxes here with some content in it. So I am going to do a row with three equally Why can't my eyes focus? There we are. There is our row and we have our three sections here. Now with this row layout, I can set that background to be whatever I want, but it looks like on our existing site. We just have pretty much a standard white background there. But then we have our sections here now for this particular section. So I'm gonna see we have this is really handy if you're new to the block editor. This list view or document overview area, gives you an overview of what everything is so you can kind of tell where you are. So I have a section here and that section. Let's see. It is a light gray background with a little bit of a darker gray border around it right. So I am going to set up this section let's see I have to go into my style I have to be on that section. Make sure you're on the section style. And then my background color is going to be that lighter gray. And then I am going to do a border style. And I am going to make it's pretty thin border so I'm going to make that the darker gray. What was my darker gray,\r\nthree C is that I'm still on the right site. I think it's that one yeah,\r\nthree C three. Okay, there we go. And then I'm going to make that just a one pixel border. That looks like it's too dark for that particular one.\r\nYeah, grab that white gray and just bump it down that\r\nyeah\r\noh, there it is. Okay. drag that down. That looks better.\r\nWhat do you think Nathan?\r\nThat's good. Okay. All right.\r\nSo I suggest a little trick right here. You may be wondering, are you going to duplicate the section? Oh,\r\nI was going to just copy styles. Oh,\r\nyeah, that works too. Where's my copy styles.\r\nCopy Paste styles, copy styles. I go to this. Make sure I'm on the section. And then I can paste style. And then I can go over here and I can paste style. So you do that once you've got all of your styles set up over here how you want it to be and then you can just go section by and just copy those over. There's so much more I want to show you I'm so excited. This is where I have more fun rather than the hunter boat builder. So here I'm going to set up advanced text. And we're gonna set up some padding and stuff on that too. I am just gonna you know what, I'm just gonna take\r\nall of this\r\nyou know what?\r\nI'm gonna set this up as two different blocks. I'm gonna do employment opportunities as my first one and I'm going to bump that down to\r\nan h4 and,\r\nyou know what I really want to do on this section is I want to set up my\r\nmy padding\r\nand here look top right bottom left, I don't have to guess like I didn't have our builder.\r\nUm, let's see. I'm going to just do them all the way across 10 pixels and 13 pixels.\r\nWhat do you think? I think sounds good. All right, and then this I'm just going to leave this as paragraph text\r\ndown here\r\nand it looks way\r\nskinnier, right. But as I close this out, it's it's going to adjust. So I'm going to do some advanced text here for\r\nthis text and paste that in. I do think we did H for right or wrong and then we're going to pop in our text here and we could do if I went\r\nback here I could probably do the paste styles again. I'm just going to keep moving for now. So I'm separate separating these out into two separate blocks. So\r\nwe can assign the text differently\r\nit's even pulling in our link for us.\r\nI think that spacing looks about right. So go to your section. Make sure you're on your section block and you're not on a text block go to advanced. I am going to group these. Oh this is the other thing with Kadence is you can set this up. You can use I actually recommend using this because it's going to be it's going to float for responsiveness a lot better. Actually, I should go back and change this one I did not do this one that way.\r\nWay better to do. Where is the link that looks good enough. And then we're gonna go here. Oh, here getting Yeah, not here, there. Now they're all set up the same. Alright, so\r\nnow there's the magic setting in that row to make all these the same height. So we don't have boxes that are staggered\r\nin height. What is that setting?\r\nYeah, click the row go up to the row. And then advanced and structure. Structure settings, enter column height. 100% toggle that on. That toggle right there. Boom. And everything's the same height. How many times have I tried to make all the things the same height on websites in the past and lost my mind that fixes it?\r\nBeautiful that fixes that. That's brilliant. And there's minimum height to is also another just brilliant. There's so many like little things that you used to have to ask the developer to help you fix. It's all in Kadence all of these different so much here. All right, I'm gonna go ahead and publish this. And because I have it\r\nset, we go to our site here. refresh it. Alright, so we want to\r\nadd our row we want to say layout\r\nrow. Layout, I don't know Natalie. Where was it? Inherit with, right?\r\nThis is so you can if I default your your rows are going to spread for the entire width of the screen that's available to it. But this inherent max width from theme is amazing. So that will now make it the width of the theme. We might want to let's say add a border on the top of that row if if I think we had that on our other one. Yeah. So if we wanted to do that you would add that styling to the row. So we're on the row layout style. You can go to border settings there. Let's say you just want a border, that border radius I want a border but not all the way around. Let's say just on the top I wanted to do a darker gray border of two pixels. update that and that would then show across like that. Of course it doesn't look great. We would tweak it but no matter where we are on the site now, that is the\r\nfooter. So there's our footer. And\r\nthere's our footer. Now the great thing about that is let's say you have a site and you wanted to have a specific footer and just some pages that can get that granular when you're using Kadence elements when you're building out footers, or or headers that way. So Kadence elements is part of pro but oh my gosh, Nathan does it make you weep with the with the tools\r\nthat it gives you? Elements is fantastic. Now there's one thing there in the site wide footer. Let's go back into that because we can choose the HTML tag. We probably want to put that in a footer tag for that row. I've forgotten exactly where to do that. But if you get into that row it lets you choose\r\nI think it's an advanced\r\nstructure settings. Yep, choose that make the container tag footer. The very first option there. That'll keep your because it's actually the footer. That'll be your HTML, correct.\r\nYes. Beautiful. Brilliant. That's\r\nsomething that been added after. I think Ben who was here in the chat made that suggestion when been written or was with us doing some training and they added that really quickly when that you've been that did that. I think that was actually been has dropped off for the second hour, but I'm pretty sure that was Ben who did that? Yeah, not so long ago.\r\nAnd that's the great thing. Okay, so one of the reasons you're moving off of builder, it's no longer supported. It is like the Kadence team is so supportive of their customers. I am very active in the Kadence Facebook group. Whenever there is a request for something if it makes sense. They make sure it gets done quickly. If there's a bug, they make it. They fix it very, very quickly. It's an incredibly responsive team. Just backed by one of the most brilliant developers that I've ever worked with. So I am a huge fan. Let's keep moving. Let's um,\r\nlet's go to the homepage. And let's let's lay this out.\r\nWe're going to I was I was going to create a new page but let's just go ahead and\r\nsee what we can do here\r\nAlright, so that little error is there because the FL builder layout that's a vestige from Beaver Builder since we deactivated that so we can just there's all the stuff that was in it. That's the original homepage content. Probably we can just remove that block if you want to. Okay, just kill the block altogether and we'll just rebuild from scratch.\r\nOkay, sounds\r\ngood. All right. So what do we have?\r\nOn our homepage,\r\nthere we are. We have a slider and we have some text that is, you know, you saw that the row layout screen to be pretty simple for us to build and we're going to do it. So we have First things first, we have our slider\r\nadvanced slider. Nathan, I've never\r\nbuilt a slider and I\r\nnever use sliders either. So this will be this will be an adventure so it's really don't we have a gallery because really that's not it is a slider but it's not it's really a photo gallery with a with a that just moves. Yeah. So does the Kadence gallery support navigation\r\nlike that? I don't know. I never use I never use these.\r\nWell, let's let's get one let's just use the Kadence slider and figure it out.\r\nAll right, let's do it. Let's have some fun.\r\nSo you see there's an advanced gallery advanced slider.\r\nSo we have a slider advanced slider container over there. In the list view with a couple of slide blocks in it. So if we edit that one, probably just set a background image of the first image that's there.\r\nYeah, so in the slide.\r\nI guess we just go find our image. What is our first image it is\r\nlet's just pull this lovely image there. Is it this one? I am going to find that out for you. there and we can\r\njust put several of them in there and it doesn't really matter which ones they are.\r\nOkay. I'm just going to\r\nthe first one is called crosswalk.\r\nOkay. Okay,\r\nprobably isn't that one. There it is. 60 by 300. That looks like it.\r\nWe'll just do a few of these. The next one is called peach tree\r\nthere we go.\r\nAnd the next one is called Euro. Why EU are yet is that the third?\r\nI put three of them in.\r\nThat's great. So let's just do that.\r\nOkay. All right.\r\nSo there's our slider. There's settings for your slider of how fast you would like them to autoplay, if you want to pause it on hover, um, transition speed fading, there's all sorts of settings. Padding, you know, all of the fun stuff. Then after that, we just have a headline. So this would just go into oops, window. So I am just going to do an ad after I'm going into the the list view over here I'm going to do ad after and then I'm just going to do advanced text. And I'm just going to this is going to be our h1 It ceases as our h1 we have a line tech center, and then line Tech Center and that seems to be pulling that was an h3 here might want to change that so that it's bold. But again, we can override all of that we can set go set it on the customizer for the overall site, or we can just bold it like that here. So you can always override anything that you have and the cool thing is when you start pasting in like text and whatnot. It is showing us what that text is so you can see it all over here on that list view. Here we have not\r\nwe're not following best practices on keeping our H tags in line at this point. We're just kind of regrouping we're just rebuilding the site. We will say you will obviously want if you're rebuilding it to keep your your semantic structure for all your headings to keep those in order.\r\nRight, exactly. Now we're going to use our row layout and we had that three across deal again, and I am just going to copy and paste our text from what we had here and it's going to just, you know, to paragraph and then just pop in what you have\r\nfor those\r\nand then you can tweak those. It's very easy. One of the reasons why I love Kadence is because it stays pretty close to what WordPress is doing. So let's say this is a WordPress Gutenberg block that is pulling that ace that is adding the style to that air saver systems. If I want to pull that over to an advanced text and add more customization because I want to use Kadence I can do that. Here. So it stays very close. You're not having to like strip things out the way we are doing right now. So if like, you know, five years from now you're like oh, you know what this other blacks program works so much better for me. You can do that much easier because we're just working with blacks here. And all of the blocks whether it's generate blocks Kadence blocks, what are some of the other ones there's a number of different blocks plugins out there, you can use them all on this particular page. So it's not like you're like okay, I'm stuck in bait beaver builder here. And that's, that's what this is going to be. You can move across all of them so I can do the same thing. I'm going to stop right here because I know we want to get into some other stuff that you want to show Nathan, but you see what I'm doing. I've got the live site over here, and I'm just copying and pasting from the live site into into our role layout here. And then I can set up, you know, all of the padding all of the layouts. If for some reason I have an extra paragraph tag over here, very easy to remove those. And you see here we've got Kadence blocks, and we've got some Gutenberg blocks and they can they all work together. It's an entirely new way of building with WordPress. The great thing about it and I'm not going to run any speed tests here because we don't have time but once you build out a site with Kadence blocks, and it's closer to WordPress, your PageSpeed scores\r\nare going to go up. Nathan, do you want to take over?\r\nSure. Yeah, let me get to my screen arranged correctly so I can share. Right? Okay, so what we're heading next is, right, here's all the things. Okay. One of the things that builder offered us back in the day. Okay, here's our right so we was the ability to create\r\ntemplates for\r\ncustom post types and things like that to really set things up the way you like. So you could, for example, create a builder layout that was just applied to a particular custom post type and really customize the way you want it to look. So here on this side, we have a custom post type called projects. And it's rendered oops, it's rendered here. Under this menu, all these are posts in this custom post type called projects and we have this builder layout that is applied to this particular page. So if we go back in here and look, ooh, that's broken. If we go back in here and look at this project, here's our layout. And then in our views, we have the post type projects gets the project layout applied to it. So we need to convert this and the beautiful thing is, this is exactly what Kadence elements does. So you can set up a layout. And then you can apply that layout to a post type or all the posts in a post type for example. So we're going to do just that. So this builder layout was super simple. It was just our same header nav and footer. We don't have to do that because that's already set up from the customizer and the footer element that we just did. And then we have our content area which in this case I'm in the wrong one, in this case actually has a left sidebar. And in this left sidebar, it's showing all of our projects. It's basically listing all the posts in that custom post type. Now, I had to remember how I did that a million years ago, and really all this is is that the shortcode it's a shortcode that's rendering out all the posts in that custom post type in an unordered list right here. So that was actually in our functions dot php, but before I removed that and actually set it up as a plugin. So there's now a plugin over here that is called, oh, it's a it's an EMI plugin. It's just the code that out that creates that shortcode that outputs our project list. So this content, all we have to do is echo out this shortcode and we're good to go with that. But what we're going to do is we're going to create our extra we could do this even a different way where we don't need that shortcode. Yeah, let me show how to do that with our Kadence element. So let's add a new element. We're going to call this this is going to be a let's see template. And we're gonna call this our project. Template. Billy suggested we could do it as a menu and we could except if we added another project, then we'd have to go in and manually add it to the menu. So we want to do this work just dynamic and you add a project and it just shows up automatically. So let's take a look again at our layout and what that needs to look like. So we have a sidebar and we have our content. So that's what I'm going to create here. We're going to make a row and it's going to have a left sidebar just like this. And over here in this area. We're going to use the beautiful Kadence dynamic contacts I need to make that\r\nthat needs to be a Kadence advanced text, I\r\nbelieve to get our dynamic content. Because over here in this area, what we really want to show up is our post content, right? So here we're going to have actually first of all, we need our post title and we're going to connect that to our post title. So that's set up and then we're going to add advanced text, it's going to be just div Yes. And then we're going to connect this to our post content.\r\nCan we connect\r\nin that post content one of these options, Kathy, how do we get our post content in here?\r\nOh. post content should be there. Um, it's should be\r\nwell, we'll do it this way. Now if you set up um, I think we could do with a query block\r\nif you're\r\nstill here, help me What do we do? How do we get the post content output here?\r\nOh, you\r\ncan if it's a content element. Now this is a this is a template\r\na template element\r\nmaybe it's called post content\r\nthere isn't a post content block.\r\nThe last one in the list is the post grid.\r\nWeird Okay. Interesting\r\nall right\r\noh is it projects under Select post type? Yeah, we want the current posts though.\r\nYeah, you're right. It's not complicated. It's just where is it? 100 100% Exactly right. How do we\r\nattach individually\r\nI can hear\r\nChris furiously googling. Yeah. I was thinking that's where I was heading a minute ago was the query loop choose\r\nworry from the template. So this probably would work but I don't want that black background. Let's just do standard Okay, let's just try this and see what happens. All right, we need to apply our template to single project page\r\non everybody. Update, and now.\r\nYes, that did it. Okay.\r\nSo what we just did, for those of you playing along at home, was here in our post template. We use the Query loop which is a core block, and we just grabbed the standard query loop. Which is outputting, the post title and the content. Or wait a minute, actually, I'm not sure that this actually updated on\r\nbecause it's not giving us our sidebar in that view. Okay, so that didn't work actually. Single projects\r\nawait replan. Here's here's what we missed. It needs to be replace single post content.\r\nNow we'll see if that will. Okay, so we\r\ngot this but we've lost our query\r\nreplace this with standard\r\nInteresting. I wonder why you can't\r\ndrop in post content right here or attach that as a dynamic item. I'm open for suggestions in the in the chat. If anybody\r\nhas an option\r\nshould be one of those items\r\nInteresting, okay. Well, with actual Okay, that's interesting.\r\nOkay, every block is coming. Hopefully with Yeah,\r\nso this is definitely something to look at. I think there's actually another way we can manage this. And that is here in the layout area, where within the customizer, we have the ability to affect the layout of each different custom post type defined on the site. So here's our projects, custom post type. And by the way, I'm in customize pages and posts project layout. And here we're gonna say left, this is probably the way we should have done it to begin with left sidebar. Let's get to one of these. Okay, there's that. So we're getting we're getting closer here now. So left sidebar. We want the content to be boxed like so. Enable\r\nvertical padding there.\r\nBut that now gives us a sidebar to work with\r\nand probably want because\r\nelsewhere on the site we have a right sidebar, so let in that's probably set up a sidebar one. So here on this one, let's make it sidebar two, and then we can add our widget over there to give us our navigation. Here sidebar to we're going to put make this a dance text with something that says\r\nsay all projects, all our projects\r\nactually could just do that. shortcode\r\ntheir last our heading\r\nhere we go.\r\nAlright, so these are all clickable now. Take us where we need to go. That's another option. Rather than doing an element, we can do it this way and just use the customizer to set up the layout. All right, so this is we've got most of the framework in place and from here, it's really just kind of tweaking things and making it a little a little prettier. Here in this area we've got\r\nwe should\r\nwe should have some vertical padding here. I'm not sure why that's not showing up.\r\nWho says we may need a sidebar widget?\r\nI think we're okay. We're okay here. All right.\r\nSo that's that's how we can handle custom post types here. And then if we wanted to lay in additional something extra with an element on that custom post type we could I chose vertical padding.\r\nYes, I meant to choose vertical padding.\r\nBecause we were missing padding. Here in here.\r\nquite sure why that's not shown\r\nall right.\r\nI think maybe the only other thing to show is dealing with our menu. So this this menu is actually coming from a plug in which we need to disable. This is an old plug in called Oh like there's this old plugin called shift nav. That was a really nice responsive menu back in the day. And here's this little plugin that we were using the make all those columns, the same height. It's a really cool plugin. It's probably hadn't been updated in forever, two years, but you can tell it to match the heights of different items in a row. But we don't need that anymore because it's a simple toggle in Kadence now Alright, so let's refresh our customizer. And we just set up our mobile menu and\r\nwe're virtually there. Alright, so that's ugly.\r\nAll right, here's our tablet. We have our logo let's let's work our way down so in in tablet that looks okay on mobile is just way too big. So let's make that about\r\nthere ish. And get our\r\nmixture I liked the fatter hamburger menu there it just stands out better. We'll make it our blue.\r\nThat looks good.\r\nAnd if we click it, we have our off canvas. I like these to come in from the other direction but that's just me. Just put them coming in from the left. Look at there it is and then we'll color up our off canvas\r\narea. Make the background white.\r\nAnd then in our mobile navigation. We'll set our color to be blue. It says mobile logical just make all the colors the same. We need the font to be a little bigger for mobile.\r\nBe about like that.\r\nAnd one thing I like to do on a mobile menu and this is just me. I'll add an HTML area here. And in it I will actually put the logo of the site I'm just kinda like it there\r\nto show up\r\nand make that clickable to the homepage\r\nneeds to be\r\na little prettier but you get the idea\r\nAll right, so we're getting there. Our Close icon is white. So we need to fix that\r\nyeah we go\r\nreally quick, super easy settings and the customization. Chris is saying WordPress six to remove post content blocks with only shows in the site editor. Oh, see, I knew it used to be there. They took it out. And only put it in there for the site editor for block themes.\r\nI'll go on them.\r\nOh, he shows us how to do it in that video. Thank you so much, Chris. Chris, as usual, coming through with the answer that we need. All right. So we've gone a long way in the last hour and 45 minutes or so we're we've got all most of the things there. It could certainly use a little brushing up here and there but we're you know, we're\r\ngetting close Kathy what now? I feel like we did at first of all,\r\nyou know the customizer, like way better than like I don't know if I call in because I think I spend too much time in elements. But oh my gosh, you're fast in the customizer,\r\num what other things could we do?\r\nWho has questions in the chat that we haven't found yet? questions would be good. I mean, obviously, we could spiffy this whole thing up but it needs some Speth some definite Speth. But yeah. What specific questions Do people have in the chat? Your old H tag question. Okay. You're going to have to refresh my memory. So drop it in there again.\r\nAnd others questions questions, setting up the custom put Yes, Sherry. So this was just a pods custom post type. Yep, that created this very simple. Very simple custom post type with a title and content. Can Kadence get H tags to be recognized by core I'm not sure what that means soon. Are they not recognized by core? I mean, it's an input do you mean by that? Is like this. This was the Kadence advanced text. And on the the front end, it echoes as an h2 like it shows up as an h2 Billy says I can't seem to get info boxes in a row to fill the section vertically. Ah.\r\nYes,\r\nthat is a great question. Shall we do one of those\r\nisn't there something\r\nor am I thinking of? Another tool?\r\nAlright, this will be cool. We're going to copy this HTML, remove the block and paste it and it just becomes in that cool I just love the the way the block editor does this. Oh, nice\r\nmissed this image tag\r\nYeah, it's not gonna catch the image. But the rest of it it got that was pretty good. Yeah, close. All right. So let's do a\r\nthree column row with Infoboxes\r\njust had to do this on something.\r\nIn a few info boxes in here and make things a little bit different. Now your question Billy, when you say you can't get info boxes in a row to fill the section vertically so all the boxes are the same height. So is the issue that you've got a background on these boxes and you want all the backgrounds to be the same height\r\nYeah,\r\nokay. So, you know, let me just copy some text to make these different\r\nsizes.\r\nLike that. Okay, so I have three different sizes. And that is a great question. So\r\nis it I mean,\r\nso here's what I would do to handle that. Billy, rather than making the infobox have the background.\r\nMake the\r\nsections have the background. So see I selected section over here. We'll put the background on the sections\r\nwhen you have no background section background there\r\nwe go. Now that's the infobox\r\nsection, style background\r\nWhy isn't my background color showing up here?\r\nIt's very very\r\nWhy isn't my background color showing\r\nbackground color set\r\nno background color set, but my\r\nsection isn't that weird? I look at the\r\ninfo box doesn't have a background. That's the first thing I looked at Laura isn't that weird? There's no There's no background\r\nI don't have an answer for that\r\nso let's try\r\nanother. There's something weird going on with that row for some reason. The background color. Yeah, this was something I don't know. I did something on that. I don't know what it was. So the so in the answer to the question here, Billy is I would put the background on the\r\nsection\r\nlook at that\r\nokay, it's that's what it was. Okay, defaulting to white or the or the infobox background\r\nso if we fix our\r\nso we're looking at this cat cat even though it says no color. Yeah, actually pulling in white. But we'll just make we'll just make it transparent. Alright, so now what I've got here, Billy is our three. You can see our three sections or columns are different widths. But if I go here to row layout, advanced structure, set the inner height the same, then they're all the same. Now if you've got a button, for example, at the bottom of each of these info boxes, and you want all those to be at the same level there's a way to do that. There's some CSS that does that. You can just ask Kadence support about that. I know Sue, had that problem and got some got the magic CSS to fix to make the buttons all\r\nflushed to the bottom here. In that right sewer. Did I make that up?\r\nAll right, so Billy, does that help?\r\nOh, is that the CSS there in the chat? See?\r\nAbove. Yeah, okay.\r\nSo the CSS is there in the chat. So you put it in early? Yeah. All right. Any other questions we can struggle to answer before we wrap things up today. Billy, yes, so you can't make the end. Well, okay. With the native same settings of Kadence blocks, you can't make the info boxes themselves the same height, but you can make the sections the same height, right, with that setting. So that's the easiest workaround. Another way you could with jQuery. Make those info boxes the same height. It's, I think needlessly complicated when there's a simple default solution, like this section box\r\ncan refer to each other because they're within that row layout, whereas the info boxes are kind of like their own thing and they can't refer to each other. So that's why the section black, it just makes more sense to have them relate to each other.\r\nYep, exactly.\r\nAll right. Anybody else have questions?\r\nGet rid of Infoboxes\r\nthat's easy to do. You just delete them. info boxes are incredibly helpful and they're used in so many ways and design.\r\nAlright, folks,\r\nany other questions before we wrap things up? This has absolutely been a live webinar with many things. We're figuring out on the fly. And some things are taking longer than they should but that's just the nature of web development, isn't it? So hopefully this has been helpful to you especially just to think through the process, whether you're using things builder or some other page builder to look at what your layout is, and then how best can I replicate that using the tool set that Kadence gives me and it's really, you know, for some of y'all that had been around for a while and you've been watching iThemes Training webinars in the past. I resisted the block editor for a while but we found it now to be very usable, and it's really all because of Kadence.\r\nAny final thoughts as we're wrapping up now,\r\nreally happy to be here and if you guys have questions, if you're struggling with anything with Kadence Kadence support is top notch Kadence Facebook group, which you can find a link to on the Kadence wp.com homepage. Down at the bottom. There are so many people in the community who are there to help you get answers to your questions too. So\r\nwelcome to Kadence.\r\nYeah, yeah, absolutely. All right. Folks. So that's gonna wrap it up for us today. I am back tomorrow for members for our flight course talking about proposals and contracts. And then of course, office hours for our members on Thursday. Yeah, that's gonna wrap it up for us here on solid Academy. Thanks for hanging out with us this last two hours to learn some Kadence things. I'll see you next time here on solid Academy where we go further together.","livestream-resources-group":"s:34:\"a:1:{s:6:\"_state\";s:8:\"expanded\";}\";","multi-day_replay_details":"s:102:\"a:2:{s:16:\"course-resources\";a:1:{i:0;a:1:{s:6:\"_state\";s:8:\"expanded\";}}s:6:\"_state\";s:8:\"expanded\";}\";","mbfp_count":"s:6:\"a:0:{}\";"}},"postCountOnPage":1,"postCountTotal":1,"postID":448436,"postFormat":"standard","geoCloudflareCountryCode":"US"}; dataLayer.push( dataLayer_content );
Nexcess.comServers.comLiquidWeb.com
Search our site for answers
Log in
Help Docs Software Kadence Moving from iThemes Builder to Kadence Blocks

Moving from iThemes Builder to Kadence Blocks

There’s a new way to build highly effective and performant WordPress websites. The Gutenberg block editor made its way into WordPress core in 2018, and more and more WordPress sites are built using blocks today. Kadence is a theme with a complementary block plugin and it makes it incredibly easy to build fast and beautiful sites easily. If you have a site built on iThemes Builder and are looking to modernize your site with a new look and feel, you know it’s time. With the new Kadence AI platform coming soon, there’s no better time to move to Kadence & Kadence Blocks.

In this training, Kathy Zant from Kadence joins Nathan Ingram to rebuild an iThemes Builder site using the new tools in Kadence theme & Kadence Blocks. If you’ve been waiting to move your site from Builder, we’re here to help make that process easier than ever. We’re taking a site built years ago with Builder and showing you how we are transforming the site taking speed, design, and even accessibility into consideration as we use the latest state-of-the-art tools to make a more effective web, together.

Was this article helpful?