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

Подписаться 46 тыс.

Просмотров 28 тыс.

50% 1

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!

Опубликовано:

20 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 55

@terramoo6936 15 дней назад

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 3 года назад

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 3 года назад

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

@HullioGQ 3 года назад

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 3 года назад

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

@HullioGQ 3 года назад

@@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.

@thepurpleufo 3 года назад

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 RU-vid - 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 3 года назад

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

@janeksnowski 3 года назад

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

@MrManav05 3 года назад

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 3 года назад

Glad you liked it!

@kerawelt2008 3 года назад

Very interesting tutorial. Thank you !

@jeffbarnhart6441 Год назад

learned about the divider. keep doing these

@AB-tp1qe 3 года назад

Thanks for the video!

@premkumarelangovan Год назад

Great video. Thanks.

@ChakritTansakul 3 года назад

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

@IdeaSpot 3 года назад

Awesome, thanks for watching

@Ruben-yc1hn 3 года назад

Very helpfull! thanks.

@IdeaSpot 3 года назад

Thanks 🙏

@VeroLaos_lahausse 3 года назад

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

@sfetcucristian2949 3 года назад

Usefull. Thx

@yapchenpo95 3 года назад

Great! Request: Mobile version tutorial

@saminator358 3 года назад

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 3 года назад

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

@NathanHolritz 3 года назад

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 3 года назад

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 3 года назад

@@IdeaSpot Wonderful, thank you

@andrewmossop6547 3 года назад

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

@romtekch4958 2 года назад

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

@carstenaltena 2 года назад

You must be the Bob Ross of webdesign!

@jamesmarsh4047 3 года назад

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

@IdeaSpot 3 года назад

thanks for watching :)

@tomfraser3086 2 года назад

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 3 года назад

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 3 года назад

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

@IdeaSpot 3 года назад

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 3 года назад

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 3 года назад

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

@galacticambitions1277 3 года назад

Really appreciate it!

@Jsallette99 3 года назад

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

@IdeaSpot 3 года назад

Thanks so much! 😊

@carstenaltena 2 года назад

@@IdeaSpot Reminds me of Bob Ross ;)

@FirebrandVOCALS 2 года назад

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!

@GG-rm6hd 2 года назад

How does the result looks on mobile devices?

@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?

@martynpage4823 2 года назад

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 2 года назад

👍 pixels are the devils playthings 😅

@martynpage4823 2 года назад

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

@izakniemann5734 2 года назад

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".

@cliqueimarketing 3 года назад

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

@robertzoufood 3 года назад

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.

@romtekch4958 2 года назад

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

@weshen83 3 года назад

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 2 года назад

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.