Excellent tutorial, many thanks. I also very much appreciate you not adding promotions. No background music means your voice is still very clear at x1.5 speedup. Actually, because of your super clean uncluttered presentation I'd say your tutorials are among the very best on TH-cam.
I can't believe this video was released 2 years ago and I spent so much money and time with Divi Builder slow life. I'm happy I could still get the lifetime because I'm sure Kadence will be expensive in the future.
Thank you for this tutorial. I'm trying to gain more familiarity with Gutenberg as I feel this is what we are going to see more of going forward. I spun up a site and installed the Kadence Theme along with Kadence Blocks. One thing I noticed was the ability to use the Tab key on the frontend to navigate the menu and page content without the mouse which is one of the WCAG compliance criteria. I even went so far as to resize the window to force the mobile menu and was still able to navigate the menu which would be useful in situations where you want to use the mobile menu on all devices. Kudos for that.
Big thanks for taking the time to explore and showing what we all were wondering about: how will it compete with Elementor? Elementor still feels a lot more intuitive and the UI is great. But Kadence did a real good job. The only one who (still) seems not up to standards as UI is concerned is Gutenberg.
Thanks. I agree that Elementor is usually thought of as easier to learn and use. Third parties like Kadence are helping to fill in the gaps and fix some of the Gutenberg shortcomings.
Thanks. I am new to WP and look at a lot of videos - having now seen how you just get on with the job without all the fluff of others I am a convert to you channel.
👉👉👉👉 David, thank you so much, what an excellent tutorial! Very clear and well explained. And with very practical and valuable information. Greetings from Santiago de Chile. 😃👌👍
Hi David, very informative video about Kadence Theme + Kadence Blocks! Can I ask what's your experience using those setups with other GB Blocks like Qubely & Stackable Blocks? Thanks
Thanks. I haven't had any conflicts. The only downside is having a long list of blocks to choose from, though with the better addons you can disable the ones you don't want to use. I suppose another thing to keep in mind with any of the Gutenberg addons is that if you disable it then the block formatting is lost where it is used. So all of them have some lock-in.
In traditional web terms, page elements can have an ID which is unique on the page. If your styles just apply to one element then you could use the ID to target it. Classes are usually used when you want to apply the same styles to multiple elements, though it works with just one also. If you wanted all the buttons to look the same, then you could define a class 'peter-buttons' and put the CSS into that class in the stylesheet or the Customizer CSS panel. Then in Gutenberg when you use a button you add 'peter-button' to it so it looks consistent with the others on the site.
@@DavidMcCan thank you for your answer, now only manual or a workaround that I don't yet know if it exists, have to try a static image as a video for example.
Thank you for this video and tutorial, it’s another of many that I’ve been watching to try to better understand this whole new block builder environment. Years ago I abandoned the classic WordPress building structure which I had a fairly decent handle on for an independent novice web builder. Then went to SmugMug in 2014. But now I really want to bring my website in-house on my own hosting site on a Synology NAS with WP. If you would consider please doing a video or just explaining here briefly the basic structure functions, comparisons, of the core system Gutenberg, the block structure and themes. What is the theme. I’m a bit confused regarding templates versus theme. My idea of themes is it’s the designs of the template designs of pages/sites. But I’m seeing that that’s not probably not true. I’m having a hard time clearly identifying understanding what a theme is in relation to a collection of blocks. For example the Kadence theme versus the Kadence blocks and the customizer and Gutenberg. Im sorry that this is confusing. I don’t even understand it well enough to even ask a clear question. Any help would be greatly appreciated! Thank you Scott
Thank you and thanks for the suggestion. Generally speaking, WordPress requires a theme. The Customizer is a place where you can see your theme settings in a live preview. Generally themes don't come with blocks. WordPress has some core blocks in the editor and there are plugins that add more. Kadence theme and Kadence blocks have a good integration because they are from the same developer. That can be confusing.
@@DavidMcCan Wxcellent! Thank you for your reply. This was A few months old and was at sure you’d see it. I sincerely appreciate this. This really helps me see the association between these pieces. And it all comes together so much more clear now. Thank you. I did subscribe and see many more good views I’d yours. Thank you again!!
Hi David, Great video! I’m curious about changing a site from Elementor to Gutenberg. Can I recreate each page using Gutenberg and then delete the Elementor version or will extra code be left by Elementor? I’m trying to make my site as light weight as possible. Thanks.
You want to make sure that the permalinks / URLs are the same after you're done. You could rename the Elementor page, create a new page with the old name, and then create the content in Gutenberg. When you were done then remove the Elementor page.
Hi David. Thanks for the tutorial. Really helpful. One question though: I'm about to start my web design agency and I was thinking why would I choose Kadence blocks while I can have much more functionalities and ease of use with elementor or Beaver Builder (specially with their free or paid add-ons). Thanks for your time :)
Gutenberg with a good addon has gotten to the point where it is good enough for basic page building. This was not always the case. Elementor Pro brings a ton of features that Gutenberg, even with addons, does have (yes?). I've actually been asked this question so many times now that I just wrote an article and created a video for it :) e360.co/how-does-gutenberg-stack-up-with-elementor-free-and-pro/
@@DavidMcCan Thank you so much, very helpful indeed. a lot of great tutorials and in-depths reviews on the websites so I subscribed to the newsletter. I think I'll stick with Beaver builder or elementor for some more artsy purposes (typing effect, better hover effects, timelines,...) and keep the Gutenberg's Kadence blocks for other pages. Thank you so much for your time :)
Is there any custom or absolute positioning plugin available for Gutenberg ? I'd like to move image anywhere within a block without changing its size .
Good and I learned some things as I am used to Elementor Pro. However why does no one show mobile previews? Kadence doesn't play well between preview window on a desktop and the real site on an iPhone. Kadence blocks are better yet still a lot of surprises between the back end and on a telephone.
@@DavidMcCan I’m using Kadence Pro blocks et al with Gutenberg but have never seen the width % labels shown on the columns of your rows in your example. Is there a way to turn that function on? It looks very useful. See 15.19
Hi David...the one thing I can't seem to find an answer to is changing units in the block defaults....blocks shouldn't be using pixels...so outdated.... to make things more responsive we should replace pixels to rem, clamp etc...the option to change the unit type is available on block defaults - so why is it so hard to get a clear answer if this is ok....my main worry is making changes for default units from for example pixels to rem and then an update for the plugin comes along and writes over my settings...any thoughts?
I think that user preferences are preserved across updates, but long term assurance would need to come from the developer. If you have purchased then you can open a ticket and should get an answer. If you are using the free version then it might be harder to get an answer but ideally you could ask on the plugin forum or in the Facebook group.
@@DavidMcCan Thanks David....have posted on forum - but no one seems interested in answering...just thinking it is a lot of work in the backend which I don't mind doing if my settings are respected....it would be nice to see developers approach this subject in their videos....setting up block defaults NOT using pixel units has to be the way forward...or so web-development shows...
You stacked 2 Row Layouts inside a single column wrapper Roy Layout. Wouldn't be better to use only one two column Wrapper Row and check the "horizontal column" layout option?
@@DavidMcCan At the top of the "Row Layout" Block panel settings, below the number of columns are the "Layout" area. The last layout option there is "Collapse to rows". By doing so you get "horizontal columns" or rather "collapsed rows". I think is a better way to wrap those more complex container grids. or isn't?
@@PanchoMarconi - I added and nested the Row Layout blocks just to show how flexible it is. There may have been a different / better way to create the layout.
@@MichaelFidelis - Perhaps a change with WordPress 5.5? I'll try to check it and post back if I noticing something. You can move a Row Layout block using its toolbar. The Block Navigator is also a good helper to find where you are if you get lost.
I tested this and as far as I could tell, it works the same. When you add another Row Layout block into a column of an existing Row Layout block they stay inside the overall outer container. I don't think that's changed ... or am I not understanding the issue? Let me know.
@@DavidMcCan Great Tutorial! But I have the same issue here. I am unable to add another Row Layout within the same outer container. I don't have toolbar attached to the front of row layout, nor "plus" bar or circle with plus as You have in Your tutorial. It just disapears when I add some text or heading.
@@cd38plus - Perhaps try selecting the block using the navigator. When you first select it you should see the outline and perhaps the plus buttons. Once the focus moves away, even when working with that block, the outline and buttons don't show. For example, when adjusting the setting on the side panel. Hope that helps.
I don't see half of what you are showing here! I cannot add a column, once I've already selected the number of columns. I cannot stretch the height. I don't have those controls on the left of the block, or the ones just above it. I am also using Astra so quite perplexing.
It sounds like you have one of the columns as the focus and not the Row Layout block. Maybe try using the block navigator to select the Row Layout block and then you will see a slider on the right where you can increase the number of columns. Same with the resizing controls, you need to have the Row Layout block selected. Hope this helps!
ACF Pro has the ability to create custom blocks. I want to make a video on that topic, but have a pretty long list at the moment. Neither Gutenberg, nor Kadence support ACF fields out of the box.
![🔥[NEW TUTORIAL] How to Create Pricing Tables in WordPress with Kadence Blocks🔥](/img/n.gif)
Thank you very much David. This tut is exactly what I've been looking for. I am now on a mission. Fantastic tutorial!
Great. Thanks for the positive feedback.
Excellent tutorial, many thanks. I also very much appreciate you not adding promotions. No background music means your voice is still very clear at x1.5 speedup. Actually, because of your super clean uncluttered presentation I'd say your tutorials are among the very best on TH-cam.
Thank you. I appreciate the feedback. I'm glad my style / method works well for you.
I can't believe this video was released 2 years ago and I spent so much money and time with Divi Builder slow life. I'm happy I could still get the lifetime because I'm sure Kadence will be expensive in the future.
Great video - you taught us the interface, the tools, settings and even how to create a good layout. Thank you very much!
You are welcome. Thank you for the positive feedback.
Fantastic David. It is truly inspiring for guy like me who is learning. Thanks.
Wow. Thank you for the kind comment.
Thank you for this tutorial. I'm trying to gain more familiarity with Gutenberg as I feel this is what we are going to see more of going forward. I spun up a site and installed the Kadence Theme along with Kadence Blocks. One thing I noticed was the ability to use the Tab key on the frontend to navigate the menu and page content without the mouse which is one of the WCAG compliance criteria. I even went so far as to resize the window to force the mobile menu and was still able to navigate the menu which would be useful in situations where you want to use the mobile menu on all devices. Kudos for that.
Thank you for sharing your findings regarding accessibility.
Thank you, David, for giving us this awesome tutorial!
You are welcome. Thank you.
Big thanks for taking the time to explore and showing what we all were wondering about: how will it compete with Elementor? Elementor still feels a lot more intuitive and the UI is great. But Kadence did a real good job. The only one who (still) seems not up to standards as UI is concerned is Gutenberg.
Thanks. I agree that Elementor is usually thought of as easier to learn and use. Third parties like Kadence are helping to fill in the gaps and fix some of the Gutenberg shortcomings.
Great video. Very informative. Thanks for taking the time to put it together.
Thanks. I am new to WP and look at a lot of videos - having now seen how you just get on with the job without all the fluff of others I am a convert to you channel.
Thank you very much for the kind words.
Killer video, thank you! Incredibly informative and well laid out. Thanks again 🤙
Thank you for the great comment. Appreciate it.
Great video David, please keep'm coming
👉👉👉👉 David, thank you so much, what an excellent tutorial! Very clear and well explained. And with very practical and valuable information. Greetings from Santiago de Chile. 😃👌👍
Greetings and you are welcome. Thank you for the nice feedback.
Hi David, very informative video about Kadence Theme + Kadence Blocks!
Can I ask what's your experience using those setups with other GB Blocks like Qubely & Stackable Blocks? Thanks
Thanks. I haven't had any conflicts. The only downside is having a long list of blocks to choose from, though with the better addons you can disable the ones you don't want to use. I suppose another thing to keep in mind with any of the Gutenberg addons is that if you disable it then the block formatting is lost where it is used. So all of them have some lock-in.
Thanks, David, great presentation! - as a newbie, when would I use a CSS class, do you have an example?
In traditional web terms, page elements can have an ID which is unique on the page. If your styles just apply to one element then you could use the ID to target it. Classes are usually used when you want to apply the same styles to multiple elements, though it works with just one also. If you wanted all the buttons to look the same, then you could define a class 'peter-buttons' and put the CSS into that class in the stylesheet or the Customizer CSS panel. Then in Gutenberg when you use a button you add 'peter-button' to it so it looks consistent with the others on the site.
@@DavidMcCan Terrific, thanks for taking the time to explain it so well!
22:57 Great tutorial! Is there a possibility of automatically adjusting the row layout size to the selected image or video? Thanks!
Not that I know of. Nice idea, you might suggest it to them.
@@DavidMcCan thank you for your answer, now only manual or a workaround that I don't yet know if it exists, have to try a static image as a video for example.
Thank you for this video and tutorial, it’s another of many that I’ve been watching to try to better understand this whole new block builder environment. Years ago I abandoned the classic WordPress building structure which I had a fairly decent handle on for an independent novice web builder. Then went to SmugMug in 2014. But now I really want to bring my website in-house on my own hosting site on a Synology NAS with WP.
If you would consider please doing a video or just explaining here briefly the basic structure functions, comparisons, of the core system Gutenberg, the block structure and themes. What is the theme. I’m a bit confused regarding templates versus theme. My idea of themes is it’s the designs of the template designs of pages/sites. But I’m seeing that that’s not probably not true.
I’m having a hard time clearly identifying understanding what a theme is in relation to a collection of blocks. For example the Kadence theme versus the Kadence blocks and the customizer and Gutenberg.
Im sorry that this is confusing. I don’t even understand it well enough to even ask a clear question.
Any help would be greatly appreciated!
Thank you
Scott
Thank you and thanks for the suggestion. Generally speaking, WordPress requires a theme. The Customizer is a place where you can see your theme settings in a live preview.
Generally themes don't come with blocks. WordPress has some core blocks in the editor and there are plugins that add more.
Kadence theme and Kadence blocks have a good integration because they are from the same developer. That can be confusing.
@@DavidMcCan Wxcellent! Thank you for your reply. This was
A few months old and was at sure you’d see it.
I sincerely appreciate this.
This really helps me see the association between these pieces. And it all comes together so much more clear now.
Thank you.
I did subscribe and see many more good views I’d yours.
Thank you again!!
Hi David, Great video! I’m curious about changing a site from Elementor to Gutenberg. Can I recreate each page using Gutenberg and then delete the Elementor version or will extra code be left by Elementor? I’m trying to make my site as light weight as possible.
Thanks.
You want to make sure that the permalinks / URLs are the same after you're done. You could rename the Elementor page, create a new page with the old name, and then create the content in Gutenberg. When you were done then remove the Elementor page.
Thanks David, Would a staging site work better?
@@re66044 - Sure. If it is easy to push your updates to live.
Hi David. Thanks for the tutorial. Really helpful. One question though: I'm about to start my web design agency and I was thinking why would I choose Kadence blocks while I can have much more functionalities and ease of use with elementor or Beaver Builder (specially with their free or paid add-ons). Thanks for your time :)
Gutenberg with a good addon has gotten to the point where it is good enough for basic page building. This was not always the case. Elementor Pro brings a ton of features that Gutenberg, even with addons, does have (yes?). I've actually been asked this question so many times now that I just wrote an article and created a video for it :)
e360.co/how-does-gutenberg-stack-up-with-elementor-free-and-pro/
@@DavidMcCan Thank you so much, very helpful indeed. a lot of great tutorials and in-depths reviews on the websites so I subscribed to the newsletter. I think I'll stick with Beaver builder or elementor for some more artsy purposes (typing effect, better hover effects, timelines,...) and keep the Gutenberg's Kadence blocks for other pages. Thank you so much for your time :)
Is there any custom or absolute positioning plugin available for Gutenberg ? I'd like to move image anywhere within a block without changing its size .
Not that I know of.
Nice! Wonderful tutorial thank you so much!!
Thank you for the positive feedback.
But what was the tool you used to detect the font? I found Fontanello after looking in Chrome store, but it's not quite the same. Thanks.
It is called WhatFont.
Good and I learned some things as I am used to Elementor Pro. However why does no one show mobile previews? Kadence doesn't play well between preview window on a desktop and the real site on an iPhone. Kadence blocks are better yet still a lot of surprises between the back end and on a telephone.
That is a good suggestion. Thanks.
Is pro version necessary?
No, the Row Layout block is included in the free version.
Is there a good A to Z paid tutorial on Kadence somewhere ?
Not as far as I know. The theme and blocks plugins are getting regular enhancements, so it would be challenging to keep it up to date.
Excellent tutorial ! Thank you !
How Do I Edit Gutenberg Editor Page with (were I Draw Section rows and content)
I'm not sure what your question is. If you are asking how to change the way things look in the editor, then those are styles that your theme sets.
How do you engage the % readings of the blocks on the page?
I'm not sure what you mean. To show a reading progress bar? What block or theme are you using for that?
@@DavidMcCan I’m using Kadence Pro blocks et al with Gutenberg but have never seen the width % labels shown on the columns of your rows in your example. Is there a way to turn that function on? It looks very useful. See 15.19
@@shotsi673 - Ah, try clicking in the middle between the columns. That shows the percentage for me.
@@DavidMcCan Thanks.
Hi David...the one thing I can't seem to find an answer to is changing units in the block defaults....blocks shouldn't be using pixels...so outdated.... to make things more responsive we should replace pixels to rem, clamp etc...the option to change the unit type is available on block defaults - so why is it so hard to get a clear answer if this is ok....my main worry is making changes for default units from for example pixels to rem and then an update for the plugin comes along and writes over my settings...any thoughts?
I think that user preferences are preserved across updates, but long term assurance would need to come from the developer. If you have purchased then you can open a ticket and should get an answer. If you are using the free version then it might be harder to get an answer but ideally you could ask on the plugin forum or in the Facebook group.
@@DavidMcCan Thanks David....have posted on forum - but no one seems interested in answering...just thinking it is a lot of work in the backend which I don't mind doing if my settings are respected....it would be nice to see developers approach this subject in their videos....setting up block defaults NOT using pixel units has to be the way forward...or so web-development shows...
@@martynpage4823 - Too bad they don't seem that active in the WP org forums.
@@DavidMcCan I finally got a reply saying the settings are included in the database and will not be affected by plugin updates...;)
@@martynpage4823 - Awesome. Thanks for letting me know.
You stacked 2 Row Layouts inside a single column wrapper Roy Layout. Wouldn't be better to use only one two column Wrapper Row and check the "horizontal column" layout option?
I'm sorry. I'm not sure exactly what you mean. Where is the checkbox for horizontal column?
@@DavidMcCan At the top of the "Row Layout" Block panel settings, below the number of columns are the "Layout" area. The last layout option there is "Collapse to rows". By doing so you get "horizontal columns" or rather "collapsed rows". I think is a better way to wrap those more complex container grids. or isn't?
English is not my native language as you can see
@@PanchoMarconi - I added and nested the Row Layout blocks just to show how flexible it is. There may have been a different / better way to create the layout.
Thanks David for the video, however after following each step, the row does not stack, but changes to the selected option?
looks like an update may have changes the process. When adding subsequent row layouts, they are automatically added to the same container.
@@MichaelFidelis - Perhaps a change with WordPress 5.5? I'll try to check it and post back if I noticing something.
You can move a Row Layout block using its toolbar. The Block Navigator is also a good helper to find where you are if you get lost.
I tested this and as far as I could tell, it works the same. When you add another Row Layout block into a column of an existing Row Layout block they stay inside the overall outer container. I don't think that's changed ... or am I not understanding the issue? Let me know.
@@DavidMcCan Great Tutorial! But I have the same issue here. I am unable to add another Row Layout within the same outer container. I don't have toolbar attached to the front of row layout, nor "plus" bar or circle with plus as You have in Your tutorial. It just disapears when I add some text or heading.
@@cd38plus - Perhaps try selecting the block using the navigator. When you first select it you should see the outline and perhaps the plus buttons. Once the focus moves away, even when working with that block, the outline and buttons don't show. For example, when adjusting the setting on the side panel. Hope that helps.
I don't see half of what you are showing here! I cannot add a column, once I've already selected the number of columns. I cannot stretch the height. I don't have those controls on the left of the block, or the ones just above it. I am also using Astra so quite perplexing.
It sounds like you have one of the columns as the focus and not the Row Layout block. Maybe try using the block navigator to select the Row Layout block and then you will see a slider on the right where you can increase the number of columns. Same with the resizing controls, you need to have the Row Layout block selected. Hope this helps!
thanks david
I requesting ACF (stuff) + Guteberg or Kadence Blocks as you best expert on acf subject
ACF Pro has the ability to create custom blocks. I want to make a video on that topic, but have a pretty long list at the moment. Neither Gutenberg, nor Kadence support ACF fields out of the box.
@@DavidMcCan thank you sir