Gutenberg WordPress Tutorial with Kadence Blocks (Easiest way to edit with Gutenberg!)

The easiest way to use the Gutenberg editor is with the Kadence blocks plugin. You can try the free version by following this tutorial, and check out the pro version too at ➡️ ideaspot.com.au/kadence-blocks
Previous Kadence starter site tutorial is here:
• Kadence Theme Tutorial...
You'll find that you can do pretty much any design in Gutenberg that you were able to do in Elementor, even when using the free version of Kadence blocks. In our demo, we recreate the Astra mountain starter home page section quite easily!
If you're someone who enjoys the performance benefits of using the native WordPress editor, rather than an external page builder, this is definitely for you!
0:00 Gutenberg Editor Tutorial Intro
1:21 Kadence Blocks & Starter Templates
3:02 3 Methods of Using Kadence Blocks
3:52 Editing Blocks from a Starter Template
5:39 Kadence Row Layout Background Overlay Graidents
7:09 Building a New Page with Gutenberg
7:48 Make Kadence block full width
9:02 Divider Shapes in Gutenberg
9:49 Kadence Info Box Block in Gutenberg
11:53 Recreating an Elementor Section with Gutenberg
12:34 Kadence Blocks Row Layout
13:19 Full Screen Background image in Gutenberg
17:23 Vertical Align Middle in Gutenberg
19:42 Kadence Blocks Advanced Buttons
21:46 Button Hover Effects
25:17 Background Image Position
25:50 Kadence Blocks Pro Version
26:36 More Kadence Tutorials
At IdeaSpot, we support the free and open exchange of knowledge and information. Please support us by using these description links included here. Besides the great discounts you can get from these links, they help us grow too by providing us a small commission on referral. Thank you for supporting IdeaSpot so we can continue to provide you with free content each week!

[@terramoo6936]

You have a bob ross way of explaining! very relaxing and calming in time of stress trying to figure out how the hell to build a website!

[@jimjuris]

I am just getting started with Kadence free theme and Kadence blocks. Fantastic tutorial. Thank you for creating this video. I learned a lot.

[@GardeniaLimo]

one of the best tutorial i have watched, Start apply my first project website. Thank you

[@kerawelt2008]

Very interesting tutorial. Thank you !

[@AB-tp1qe]

Thanks for the video!

[@janeksnowski]

I was really struggling to find my way around the menus but WOW! you have helped me a ton to find my way Thanks a lot! :-D

[@thepurpleufo]

Alex...so I'm watching this a couple of months after you created it, but it's very helpful...and I appreciate the hard work you put into these videos. There are lots of good videos on KZbin - yours are some of the best - and I appreciate all the detail. Also, by the way, I don't have any trouble understanding your voice.

[@IdeaSpot]

Thanks 🙏 love to read feedback like this - good luck on your project 😀

[@HullioGQ]

I asked for this and didn't realize you did it just a week after my request. You're one cool dude, bro! Thank you so much!

[@IdeaSpot]

Thanks for the idea :D usually if one person asks it means a lot of other people are thinking the same thing!

[@HullioGQ]

@@IdeaSpot much respect! Please keep doing these videos since everyone else is focused on page builders. I am working on a Gutenberg-based site with no caching plugins and it's getting better results than another one I did withElementor, CDN and caching plugins all optimized.

[@premkumarelangovan]

Great video. Thanks.

[@jeffbarnhart6441]

learned about the divider. keep doing these

[@MrManav05]

It was a bit fast paced but , this exactly I was looking for ! Thanks a lot for the Video !! I would like to learn more about Kadence theme . Before this I have been following your Generatepress and Elementor tutorial which is also great.

[@IdeaSpot]

Glad you liked it!

[@sfetcucristian2949]

Usefull. Thx

[@ChakritTansakul]

Thank you for the tutorial. You got a new sub.

[@IdeaSpot]

Awesome, thanks for watching

[@Ruben-yc1hn]

Very helpfull! thanks.

[@IdeaSpot]

Thanks 🙏

[@yapchenpo95]

Great! Request: Mobile version tutorial

[@carstenaltena]

You must be the Bob Ross of webdesign!

[@VeroLaos_lahausse]

Hi my kadence websiteis Not showing up properly on mobile - do you talk on that in one of your tutorial? thank you

[@saminator358]

Thank you Alex. This was a great tutorial. I'm also learning with Gutenberg / Kadence Blocks setup and aim to move completely from Elementor / Visual Composer. Even Gutenberg+ Kadence is very light and user friendly combination, biggest issues I'm facing are related to a previewing of content and making it mobile responsive. Often mobile preview is very much different compared to a live view and sometimes changes (especially paddings and margins) are not taking an effect at all. This makes it difficult & time consuming to work with. Do you know are these problems related to Gutenberg or Kadence Blocks ? Thanks!

[@IdeaSpot]

Agree, the mobile preview is still Pretty fiddly - the fastest workflow when I was starting out was add the kadence blocks row element, choose a pre built row and edit from there, because those are all very well mobile responsive already

[@andrewmossop6547]

Thanks 🙏 random question moving away from Elementor theme builder to Kadence blocks speed your website up?

[@romtekch4958]

It's hard to see a question in your comment. Consider revising it.

[@Jsallette99]

Great tutorial... Love your voice... very calming and easy to listen to... thanks for being so thorough in this video...

[@IdeaSpot]

Thanks so much! 😊

[@carstenaltena]

@@IdeaSpot Reminds me of Bob Ross ;)

[@NathanHolritz]

REALLY appreciate this video! Extremely easy to follow, thanks! I'm curious if you have any content that deals in how to make our pages responsive for mobile? I didn't see any on the channel, but I may have missed something. Thanks! :)

[@IdeaSpot]

I think the fastest workflow in gutenberg is to use kadence blocks 'row layout' block and used the pre built library: www.kadenceblocks.com/prebuilt-library/ because they already have great mobile resposiveness & just change the content to suit

[@NathanHolritz]

@@IdeaSpot Wonderful, thank you

[@martynpage4823]

This is the Kadence Blocks video you refer to in other videos - but is also a couple of years old....also pixels being used instead of VH, VW, Rem, and Em units....Very good video - would be nice to see someone that is a developer take the bull by the horns and really make Kadence blocks defaults come into todays web development...not using pixels for most of the design elements....

[@IdeaSpot]

👍 pixels are the devils playthings 😅

[@martynpage4823]

@@IdeaSpot You are not kidding...;)

[@jamesmarsh4047]

Thanks alex. I get confused changing images in the info box and then having them not fit right

[@IdeaSpot]

thanks for watching :)

[@GG-rm6hd]

How does the result looks on mobile devices?

[@tomfraser3086]

Ive moved many of my websites from Divi to Gutenberg (Kadence pro) I do have a divi website with around 100 posts, each with Galleries and (Ultimate Video) Video Players. Am I asking for trouble toying with the idea of converting it from Divi to Kadence ?

[@rainbowsunshinekitty3953]

How do I edit the mobile versions in Gutenburg and it not change my desktop version? I need to change some things to make them mobile friendly but I don't know the wording, so I don't know how to look it up. Example, I have a tabs section in desktop version but need accordion for mobile. How do I those display diffrently? When I edit one it changes the other.

[@galacticambitions1277]

Fantastic video. How would you get the colour codes for shading the background image without using a page builder like Elementor?

[@IdeaSpot]

Hi, sometimes I use the eye dropper extension for chrome in my browser, or you could choose the colour in Canva.com or some other websites eg: htmlcolorcodes.com/color-picker/

[@galacticambitions1277]

Thank you so much! I really appreciate how you have helped me today. It's really solved and clarified a lot of things for me. Thank you for your generosity with making the videos and replying to viewers!

[@IdeaSpot]

Thanks, it’s getting harder to answer everyone these days but I’ll do as many as I can 😅

[@galacticambitions1277]

Really appreciate it!

[@FirebrandVOCALS]

I know this is unrelated to Kadence - But why does the Astra templates not extend full width when viewed in Gutenburg? it's very strange to work with. Cheers!

[@carolynbest1530]

How do you imitate a site's layout if its not Elementor...just some random site that I like their layout and colors?

[@FOREXanalysis-]

Does Kadence Blocks 100% FREE or Do we need to pay also like Elementor?

[@cliqueimarketing]

so we are going to stop using elementor and using this way since the price rise

[@robertzoufood]

Yeah, Kadence theme is VERY CUSTOMISABLE (you can edit the header, footer, sidebars etc.) and when you add this plugin and you get elementor pro for free and still get a 99 pagespeed insights score.

[@izakniemann5734]

I just can't stop watching the part where you say "Pretty much anything we can do in Elementor, we can recreate just using Gutenberg with this Kadence blocks plugin".

[@romtekch4958]

It's a pity you started with Kadence theme. I need to see how to use Kadence blocks with a pre-existing theme.

[@weshen83]

Hi Alex, just an honest opinion, and not sure if I am right. But speaking for myself, I love the information you convey but it is really difficult to listen to you. It sounds like you try too hard to use a kind of "radio DJ voice". I really mean this constructive and hope you aren't offended because I say this in public. And I wish you all the best with your channel!

[@NinaKatharinaWeber]

This. I couldn't put a finger on what the presentation reminded me of. But I felt tempted to email the video link to the Calm app and suggest they add this video to their sleep stories. And I also don't mean that in a very critical way - lovely voice and presentation, but it kind of blurred for me when I was trying to listen to it all in one go while following along in Wordpress.