[Guide] How to Switch From Page Builders to Gutenberg Blocks

Рет қаралды 15,333

Күн бұрын

Here's a 6 step guide to switch from Page Builders to Gutenberg. If you have been pondering whether you should make the switch, now is the time, because it is more important than ever!
Google is making Web Vitals a ranking factor! So, page speed has become more and more important, and your site will never measure up to Google's expectation if you are still using page builders. So, do it!
🔨 Recommended WordPress Tools:
✅ Web Hosting (for Beginners): jackcao.com/bluehost
✅ Web Hosting (for Speed): jackcao.com/siteground
✅ Best WordPress Theme: jackcao.com/kadence
✅ Best Speed Optimization Tool: jackcao.com/wprocket
📑 Articles on Web Vitals
👉 moz.com/blog/core-web-vitals
👉 www.searchenginejournal.com/g...
💖 Free Tools Mentioned in the Video:
👉 Free Screen Recording Tool: obsproject.com/
👉 Free Gutenberg Blocks: jackcao.com/kadence-blocks
👉 Free WordPress Backup: wordpress.org/plugins/updraft...
👉 Free Image Optimization Tool: imagify.io
⌚ Time Stamps (Chapters):
0:00 Intro
0:58 Why is it important to make the switch?
2:49 Helping my Good Friend to Make the Switch from Page Builders to Gutenberg
3:40 Step 1
3:56 Best time to implement the change
4:38 What pages should you focus on first
5:42 What you need to look out for before the change
6:22 What will be gone after the switch
7:31 What information you need from your current theme
7:53 Step 2
8:15 Step 3
8:38 Step 4
9:25 Step 5
9:55 Walkthrough of a converted Page
10:34 Review Summary Box Creation step-by-step Walkthrough
14:01 Turn Blocks into Reusable Blocks for Convenience
15:32 Step 6: Speed Test - Is it worth switching
17:03 Outro
📽 More Helpful Videos:
✅ 11 Gutenberg Block Plugins: • Top 11 Gutenberg Block...
✅ Will Multiple Gutenberg Blocks Slow Down WordPress Site: • Will Multiple Gutenber...
✅ Site Speed Case Study: • Case Study: Speed Up W...
✅ Build a Fast Loading Home Page: • Build a Fast Loading H...
✅ Improve Site Speed (9 tips): • How to Speed Up Your W...
✅ Build a Lead Capture Page with Gutenberg Blocks: • How to Create a Lead C...
__________________________________________________________________________
AFFILIATE DISCLOSURE: This video and description may contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. I won't put anything here that I haven't verified and/or personally used myself. And, you will never pay anything more than what it cost if you buy the product directly from the source. From time to time, I may even provide you with some discount codes to help you save money.
__________________________________________________________________________
#pagebuilders #gutenberg #kadenceblocks #wordpress #jackcao #wpblocks #wppagebuilders #elementor #thrivearchitect #divibuilder #beaverbuilder #brizy

Пікірлер: 116

@CarlMadsen 2 жыл бұрын

Thank you times 1000, Jack. This is exactly what I was looking for! I have 3 different page builders in my current site and the new site is already loaded with Kadence Themes and Kadence Blocks. My next step was frustrating me , and this video NAILED it. Thanks again.

@martinkaspar5095 Жыл бұрын

Dear Jack this is top-notch: thank you very much - this is so awesome - ❤🙏🏻🙏🏻🙏🏻💐🙏🏻🙏🏻🙏🏻❤ plz do more WP-Tutorials The worldwide WordPress-Community needs your cool stuff - keep on making such awesome vids !!!!

@infowaygr8257 2 жыл бұрын

Keep up your excellent videos about Gutemberg. You are a true game changer! Hi from Greece!

@indrarangari 3 жыл бұрын

Namaste Jack Bhai... I Got your channel yesterday on a youtube search related to Gutenberg blocks and after watching your one video, I am watching all the videos back to back. Thanks for giving us Amazing value, Love from Bharat (India) 🇮🇳

@javedbadshah8513 2 жыл бұрын

I was thinking of the same thing and you came up with this video! Its been a while I've been watching your videos and all of them are very informative and helpful. Keep up 👍 the wonderful work ur doin

@amente 3 жыл бұрын

These tutorials are awesome. I'm changing all of my sites using your videos. Thank you! And please, continue the good work.

@JackCao 3 жыл бұрын

That's amazing! To think my videos made an impact brings joy to me. 😊 Thank you for your support!

@gaminglebron8687 3 жыл бұрын

Hey man, don't know how to say this but you're doing such an amazing job! So helpful and informative! I seriously cannot believe you have such a low subscriber count. You deserve a lot more! Continue the spirit, you have insanely great potential!

@ajtam05 3 жыл бұрын

In any case, this step-by-step helped. My website is fairly new and no traffic, so prob best to do it before it gets too messy. You got a subscriber out of me. Thanks!

@yapchenpo95 3 жыл бұрын

More of Kadence theme please. Thanks! Keep it up!

@dr_leigh_the_vet 3 жыл бұрын

This is great thank you so much. Would love to see some tutorials switching an existing theme (like Avada) to oxygen and Gutenberg.

@KodyKimani 3 жыл бұрын

Wow the exact video I need to watch!

@esthermirandalima 2 жыл бұрын

Thank you for this vídeo!

@Businessnavigate 3 жыл бұрын

fantastic training - thank you

@JackCao 3 жыл бұрын

Glad you enjoyed it!

@ernestomorrisonp.3479 3 жыл бұрын

great video !! thanks a lot !!

@kevinhayler3499 3 жыл бұрын

Jack helped me to remove my sitebuilder. A very genuine man. Got great advice. Saved me so much time and hassle. Thanks.

@JackCao 3 жыл бұрын

It's my pleasure working on your site Kevin. Thank you for putting your trust in me too 😊

@muslimkhan100 3 жыл бұрын

Very useful liked and subscribed.

@JackCao 3 жыл бұрын

Awesome, thank you!

@19mad92 2 жыл бұрын

another great vid! Thank you, you create just awesome value. What is your setup you use? What combination of theme and plugins?

@thierrydebelder2947 Жыл бұрын

Cool tutorial. If you install Spectra you can add a star rating, way easier then the method you showed with the icons Jack.

@martinargimon730 2 жыл бұрын

Hi jack. Could u perhaps do a quick video how to move a site built with ‘Elementor’ ( Using the ‘Hello’ theme) , to a Wordpress Gutemberg Blocks site . Thanks

@ionbuilds Жыл бұрын

These tutorials are awesome. Do you have tutorial from Divi to Guttenberg/Kadence Blocks?

@krisang6961 2 жыл бұрын

Great video. Thank you very much. Can you do a video to switch from Total Theme (WPBakery) to Gutenberg?

@javierordonez5587 2 жыл бұрын

Hello Jack!!, Great Video and information. I wanted to ask you about all the plugins that I have installed from all the other themes? do you have a video that explains how to removed them? please let me know, Thaks!!.

@ernestomorrisonp.3479 3 жыл бұрын

you rock!!

@jackliu3634 2 жыл бұрын

Hi, Sir Your video is great and so in your mind, we don't need to elementor to build the page?

@jagonly 2 жыл бұрын

Hi, i'm your new subs. Your vid was really helpfull. Did you do Divi swicth to guttenberg too? Thanks

@StartUpK 2 жыл бұрын

Could you please make intensive one for switching from divi to kadance.

@riezan 2 жыл бұрын

Oh I thought Gutenberg is a page builder!. Thanks for this bro. I've been following your reviews on such a topic

@JackCao 2 жыл бұрын

Thank you! If you have any tutorial request, let me know 😊

@tomfraser3086 2 жыл бұрын

I have switched most of my websites from Divi to Gutenberg (Kadence Theme) I have one, though, that has 100+ posts and each post has a Gallery and a Video Player with up to 10 videos....I'd like to make the switch, but frankly, i'm really apprehensive

@gregjones9199 3 жыл бұрын

I've hit the wall with DIVI so I'm going to take Jacks's advice here. Not only is Divi slow, but I keep paying so-called tech gurus to fix my site to no avail. I guess it's time to pull the trigger. And hopefully, Divi won't present me with even more bugs as I get it off my site. Thanks, Jack.

@cloninger1973 2 жыл бұрын

How hard is it to go from the page builders to Gutenberg and change themes but still keep the blog posts on my site untouched with the dates and content still intact? Thank you for your help

@gaminglebron8687 3 жыл бұрын

Hi! Could you make such a tutorial for Astra?

@beatriceprinz6308 3 жыл бұрын

It would be fabulous if you create a website from scratch using Flexia theme also available templates provided by various plugins, like Ultimate Addons, Stackable etc

@veroniquevanheerden7897 2 жыл бұрын

Thanks so much, I feel motivated again, I will do the changes, from elementor to Gutenberg, but can you please do a video on Blocksy theme, or should I change to Kadance, the thing is I like my sticky transparent header, and Kadance don't over it in the free version, please help 😊

@JackCao 2 жыл бұрын

I did a video on Blocksy's sticky header. kzfaq.info/get/bejne/pamfndKQ0Z6nk3k.html Which area of Blocksy would you like me to cover?

@andyvonbusse3503 3 жыл бұрын

Jack, great videos. Can you take a look at Gutentor and see what you think? They have an amazing amount of templates for Gutenberg. From Nepal of all places.

@JackCao 3 жыл бұрын

Wow! Just checked it and it seems to have many blocks and templates. Maybe I will do a deep dive on that Block Plugin.

@RedcubeX24 3 жыл бұрын

Hey Jack! Any tips on mobile editing? Responsive editing in Thrive is a blessing while with Gutenberg landing the perfect layout is a real pain. Ive noticed that some blocks in kadence arent responively editable. For example, take the info box. Align the image right on desktop, left on mobile. Preview mobile in gutenberg -> image is right View real mobile -> image is left This is a real pain.

@JackCao 3 жыл бұрын

Hmm.. I understand what you mean. It is hard to get a full gauge of how your site will look like on Gutenberg. So, what I would do, just like all the tutorials I do on my channel, I always have a split screen. On the left, I will have the gutenberg editor, and on the right, I have a live page where it will reflect all the changes (I will resize the browser accordingly to have a live view of desktop and mobile). And I will refresh the live page whenever an edit is made. This way you skip the reliance on Gutenberg preview (hence avoiding pain) 😊

@ajtam05 3 жыл бұрын

I just started my affiliate blog and initially bought JNews theme (which I still like) and I believe it automatically downloaded the Elementor plug-in? In any case, being new to Wordpress, I didn't know anything and just used Elementor because it looked easier and thought it's all the same since it was available. I eventually ran my website for speed and realized it was subpar on both GTMetrix and Page Speed Insights (more so here). Then I used Autoptimize and Async, which boosted GTMetrix to 88% for speed and 90-94% for structure. But Page Speed went from Mobile from 15 to 30-35 and Desktop from 65 to 70-90. Problem was......I was having issued with mobile version functionality with the button etc because of the async loading of CSS/JQuery/JS etc. Played around until it worked on mobile and now the actual speed feels a lot faster, but because everything is inline CSS, my mobile is around 7-12 and desktop is around 40-50 rating. I lose either way. Lol Sigh...luckily I only have about 6 posts so far, but I really just want to write articles. This is such a pain a newbie. Lol

@robertdavidlang52 3 жыл бұрын

BTW, Live Canvass can make blocks for Guttenberg and you can remove LC and the blocks work perfectly as Guttenberg blocks. Why? Because they are coded exactly the same way.

@drammeh1209 3 жыл бұрын

Can you make a tutorial or side by side comparison with Bricks builder and others builders including Guttenberg?

@JackCao 3 жыл бұрын

Sure! I am planning a speed comparison video between Gutenberg vs all page builders. Or, are you talking about the usability between Gutenberg and Page builders?

@jabien 3 жыл бұрын

Any recommendations for a posts block that will let you manually select which posts are featured? (Not just by category or tag)

@JackCao 3 жыл бұрын

Yes. It will be the Post Grid/Carousel Block from the Kadence Blocks Pro. I did a tutorial creating a magazine site from scratch and it will show you how to select a specific post or page from your site. kzfaq.info/get/bejne/ld6So92F2NDNdo0.html

@lingobol 2 жыл бұрын

Please create a video comparing fastest themes. Compare the best and provide your recommendation.

@Lulu-kt6gr 2 жыл бұрын

What if I just use Gutenberg going forward, after 48 posts with Elementor? Will that help speed? I’m adding Ezoic and just Now learning about the pitfalls of Elementor:(

@justtatythings 2 жыл бұрын

Hi Jack! I just created a staging site and am transferring everything over from thrive to Kadence blocks. I was wondering if changing to Gutenberg blocks would affect SEO since the coding is different? I just want to know how Google will see my content :)

@lakarama Жыл бұрын

The same question!

@Tripwithadi 3 жыл бұрын

Great content Jack.. Can you please help.. How to remove white spaces between row layout in kadence? I already set the top-bottom padding and margin to 0.. But when previewing, I still can see there is white spaces.. (I used colored background)

@JackCao 3 жыл бұрын

In every row layout, there will be 2 layers. The row layout and the section. Each of them comes with padding and margin. And if you are adding an element on top of the row layout, it has its own padding and margin as well. So, I would recommend that you visit each layer and check the padding and margin.

@KodyKimani 3 жыл бұрын

Is there a way to add a related posts element to the bottom of every post - I just tried but made a mess of it?

@JackCao 3 жыл бұрын

Yes, depending on the theme you use. If you are using Kadence, Generatepress, Blocksy, or other themes that allows "Hook Elements", you can add related posts below your content. In the next video on my channel, I will be demonstrating how to create a magazine style website, where I will be using hooked elements a lot. I hope that helps.

@KodyKimani 3 жыл бұрын

@@JackCao Thank you so much! I will definitely watch that - it's generate press I'm using by the way. I bought the pro version. I just switched from Oceanwp and ditched elementor - well I'm working on the staging version.... one post at a time .... lol ... i'll get there!

@thelongarmmarine 3 жыл бұрын

I’ve been using Elementor Pro/Astra for most of my sites...but if I rebuild them in Gutenberg/Kadence, won’t there be some 'artifacts' left when I deactivate/delete the plugin & theme? Or will it be 'clean' & show the best speeds & analytics? Thanks for the videos!

@JackCao 3 жыл бұрын

No, there won't be any "artifacts", and those elements created with elementor will be reverted back to its original HTML form. You might lose some elements as well. For Thrive Architect, it is the icons and buttons. Elementor might be different. So, I highly recommend that you work on a staging area. Also, a switch doesn't immediately guarantee a 90+ score. You still need to do some adjustments and optimization, and making sure those elements created in Elementor doesn't break in Gutenberg. It is a tedious process as you have to visit each page to make the adjustments.

@marioluna6203 3 жыл бұрын

Thank you for the amazing tutorial! I have just one question in mind. If I already have an Elementor site set up, would it be possible to build the same pages in Gutenberg page by page and just replace the previous page after the new one is ready? This way I could avoid any SEO problems from sudden switches and do everything at my own pace.

@JackCao 3 жыл бұрын

If you mean to revert your elementor page back to the wordpress editor, and redesign it with gutenberg blocks one page at a time, then yes, that's another way to do it! 😀

@marioluna6203 3 жыл бұрын

@@JackCao Awesome, big thanks for the reply!

@letyjay9715 3 жыл бұрын

great question, exactly what i was looking for. i wanna ditch my theme ! waste of my money tbh!

@siddhanthsukhdeve9405 3 жыл бұрын

Sir can you please make a video on best settings for WP Rocket

@JackCao 3 жыл бұрын

There is actually no "best settings" for WP rocket. It is all about trial and error because everyone's site is different.

@MatBobby 3 жыл бұрын

How about moving from Divi to Gutenberg and removing all of the short codes?

@JackCao 3 жыл бұрын

What does the shortcodes do? I think you may need to find alternative replacement before you make the switch.

@gumballdegree 3 жыл бұрын

Hi Jack, can you help me with this issue? I'm trying to build a homepage with kadence AND kadence blocks. I have a blog site and I used the "posts" block, but when I use it and set in to show the last 6 posts (for example) there's no pagination option for readers to go back to previous posts. Am I missing something?

@JackCao 3 жыл бұрын

Hello! Thank you for reaching out! The "posts" block under the Free Kadence Blocks does not have pagination. If you need the pagination, you would need to use the "Post Grid/Carousel" from the Kadence Blocks Pro. Check this: bit.ly/kadence-post-grid

@3urnUp 3 жыл бұрын

QUESTION: Can I use Gutenberg to create customized archive pages, such as the author pages and some categories? I'm doing this with Elementor.

@JackCao 3 жыл бұрын

I am pretty sure you can and this is a topic I will do a tutorial on hopefully this week or the next. 😀

@GigaBuzzStore 3 жыл бұрын

I would like to use the Nicepage theme instead of the Kadence. Have you any video tutorial on that?...

@JackCao 3 жыл бұрын

Unfortunately I don't have a tutorial on them. Very interesting theme, I will check them out. 😊

@TiagoDezan 3 жыл бұрын

Hi Jack, I hope everything is fine with you. Would it be possible for you to clarify something for me? I want to have Kadence's annual membership ($ 169) and I saw that Kadence Blocks is included in that membership. My doubt is whether the version of Kadence Blocks included in the membership is PRO or the normal (free) version. Thank you for everything :)

@JackCao 3 жыл бұрын

The Full Kadence Membership ($169 / year) includes every product of Kadence which means it includes the PRO version of Kadence Blocks. 😊

@RohitKumar-qt1hr 3 жыл бұрын

Hey. How sustainable it is to use plugins like the kadence blocks plugins? Or any block plugins for that matter. Don't they make the website clumsy just like the page builders do?

@RohitKumar-qt1hr 3 жыл бұрын

For example, removing plugins that use shortcodes can be tricky. And sometimes removing plugins can leave cache files that you have to remove manually.

@JackCao 3 жыл бұрын

From what I know, Gutenberg Blocks do not leave cache files on the server. When deleted, blocks used are automatically converted to html, but they will not look the same as when the plugin is installed. As for sustainability, I think it is here to stay because it is supported by WordPress and inherited in the WordPress editor.

@limsauliang4967 3 жыл бұрын

Hi jack, have u tried the new builder called "bricks", other youtuber said it is the best builder now days. What is your opinion jack?

@JackCao 3 жыл бұрын

Trying that now. Just bought the builder. Will do videos on that 🙂

@vwtourandtransportbali6555 2 жыл бұрын

hi jack how i can switch for woocomerce from elementor go to Gutenberg Blocks, couse im not see the Gutenberg Blocks on woocomrece

@JackCao 2 жыл бұрын

You can't directly edit Woocommerce content with Gutenberg Blocks. That's something that the WordPress community is working on. So, I have created this video to show you how to customize single product pages with Gutenberg Blocks: kzfaq.info/get/bejne/eJx3nJigmquyZHk.html&pp=sAQA

@earthgraduate726 2 жыл бұрын

Hi Jack , is there any custom positioning or absolute positioning plugin available for Gutenberg ?

@JackCao 2 жыл бұрын

Yes. Coming soon here: jackcao.com/stackable Its version 3 which is releasing this month will have lots of cool animations and customizations with clean codes. 🙂

@earthgraduate726 2 жыл бұрын

@@JackCao actually I'd like to move an image , block or column anywhere within a block without changing its size . I hope it does the job for free .

@kevinhayler3499 3 жыл бұрын

I use Beaver Builder with Generate Press and changed all the pages easily apart from the home page. I cannot figure out how to reproduce the same layout at all. All I want is a full header with 3 tiles below. Then a sidebar to the right and 5 blog previews to the left. Easy with BB, but not without. At least for me.

@JackCao 3 жыл бұрын

Let me help you. Send me an email. Jack@jackcao.com

@kevinhayler3499 3 жыл бұрын

@@JackCao thanks Jack I sent you a message . Any tips appreciated.

@nguyentuan7704 3 жыл бұрын

but guttenberg doesnt offer many templates kit to work on, i have problem with website´s design

@JackCao 3 жыл бұрын

Try this Block plugin: jackcao.com/stackable It has many ready made designs, specially made for convenience.

@MisteR-- 2 жыл бұрын

I seriously wait the next versions of Kadence or other Gutenberg addons because graphically it stay very very poor comparing to Divi. If someone think different I have a challenge ... recreating my website on Divi to Gutenberg

@peakminute 3 жыл бұрын

I want to switch one site to Gutenberg. However, some elements break in my case, I've tested already. Heck, some companies might be doing it on purpose to lock clients...

@JackCao 3 жыл бұрын

Yeap. Most page builders will lock you in to their content platform, even though they say they won't. It is a painful process, but a necessary one, in my opinion. Please do the change on a staging area.

@peakminute 3 жыл бұрын

@@JackCao 10 years ago all page builders were a thing (talking about posts). It was hard to do simple tasks like make a container and divide the layout into several sections horizontally. Now I've checked: all tables, buttons, and custom HTML will be broken in my case. Heck, I need to lock a time and start working on about 50 posts.

@productpromotions1736 3 жыл бұрын

Hi how about generatepress premium theme

@JackCao 3 жыл бұрын

Generatepress is the fastest WordPress theme on the market. They are the king of speed, but lack in generic customization. If you need customization, you will need to know CSS, html, & Javascript. Otherwise, you will have to contact their awesome support to help you out. You can use this link to get the latest discount: jackcao.com/generatepress

@productpromotions1736 3 жыл бұрын

@@JackCao ya actually I have a generate press premium theme. I would love to have a private conversation with on this with you mate...

@RealignYourMind 2 жыл бұрын

So all this did for me was switch my theme to Kadence but it's still operating inside the Elementor plugin. I still don't know how to make the full switch from Elementor to Gutenberg. You did not cover how to install Gutenberg or any of that.

@JackCao 2 жыл бұрын

I have quite a few tutorials on my channel that shares with you how to design a page using Gutenberg Blocks. You do not need to install the "gutenberg" plugin from WordPress, that plugin is for exploratory purpose. Instead, install "Kadence Blocks" and those designing blocks will appear in your Wordpress editor.

@KrzysztofGrodzki_fusserg 3 жыл бұрын

How do you think this is the time when you should seriously consider moving to building your website on Gutenberg?

@JackCao 3 жыл бұрын

Absolutely! Because in the next Google update web vitals will officially be considered a ranking factor. Page builders will not get you good web vitals and Gutenberg will. Plus, as Gutenberg matures, it will have more and more features. Currently, Gutenberg blocks provides up to 80% of what page builders can offer, so all the more reason to make the switch early. 😀

@gambomaster 3 жыл бұрын

It's simple. Just use Bricks Builder. It looks like a child of Elementor, Divi and Oxygen. It can also load gutenberg blocks and vice versa. 🙂

@JackCao 3 жыл бұрын

You know it is even harder to switch from one page builder to the other right? Because with bricks you have to rebuild the theme area from scratch. It is easy of you start fresh but most of us have a running website.

@BgmSquadReloaded 3 жыл бұрын

1st view

@JackCao 3 жыл бұрын

Thank you!

@BgmSquadReloaded 3 жыл бұрын

@@JackCao anytime bruh... ❤️

@victorrenevaldiviasoto9728 3 жыл бұрын

The #1 issue because I don't want to go Gutenberg is because of the painful responsiveness it has and the fact that 83% of my traffic is from mobile devices