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

so in this video i'm addressing the concept of many people who are still using page builders i think this is a topic that is not talked about much but it is going to be an important topic in the next coming months or years we're going to talk about how to switch from using page builders to gutenberg because more often than not page builders are the main causes of most side speed problems and if you have been following my channel the benchmark of a good size speed is 90 and above on google page speed insights and is achievable with gutenberg blocks i know that if you have been using page builders for years and you have been creating content using page builders by default it is kind of uncomfortable to switch from page builders to a good number because of a few things firstly you're not sure how to make the switch secondly you're not confident using gutenberg thirdly you're worried that gutenberg does not offer the features your current page builders provide and you're worried that you'll be wasting your time doing so many things and achieving almost similar results or you simply just don't have the time to switch because it's really a tedious task but the thing is it is getting more and more important to make the switch as you probably already know the core web vitals of your website are going to be a ranking factor of google it simply means that your page load speed how fast your content is displayed on devices when clickable on and basically all the metrics that can be found on google php insights is going to be an official ranking factor it is not me who is coming out with stuff moss has talked about this search engine journal has published a useful article on this claiming that this change is going to happen in may 2021. if you are interested to read those articles i've left the links in the description so believe it or not this change is coming and it might hit webmasters who are still using page builders so i think it makes total business sense to make the switch as soon as possible to stay ahead of the curve and if you're intending to remove your wordpress page builder plugin and replace it with gutenberg blogs this video is for you i want to make a special thanks to daniel who has shared a little of his process on how he switched from elementor to gutenberg and this is what he said and in this video we're going to go deep into the process so let's go hey this is jack and if this is your first time watching a video from my channel i share lots of wordpress tips and tutorials as well as online business content so if you want to learn any of these topics then subscribe to the channel and hit the bell notification my only goal is to share with you ways to save lots of money for your online business using wordpress i don't use page builders and site speed is my main focus so if you're running an online business and you're paying hundreds of dollars to make your website work subscribe and you'll become a money saving expert for your online business so before we get into the meat of this video i hope you can do me a little favor and smash that thumbs up button for the youtube algorithm i really appreciate that and thank you now i'm gonna walk you through the steps i took to help my good friend rex who runs a singing niche site to switch from using thrive team products to good member blogs and what is challenging is that he's using all of driveteam's products which means the team and the plugins as well so there are extra steps to be taken he was using driveteam's focus team and he uses trife architect to create all his content so it's going to be a challenge to make the switch and i'm basically going to walk you through step by step on how i help rex make that switch and do stick with me to the end because i'll be running a google php inside test on all important pages to see if it's worth changing from page builders to gutenberg now of course there are many ways to do this and if you have experience in this and you think that your method is much better than mine feel free to share it in the comments i'm really open to suggestions because it would help people who are watching this video [Music] this is the most important step because without this step you'll be wasting a lot of time trying to figure out how your site worked before the change and that is if you don't have a staging area to work on and that's the case with rex so the first thing i would do is to go to google analytics to identify what is the best time for you to implement the change for rex's case it is tuesday 4 p.m to 8 p.m and on wednesday it is 2 p.m to 4 p.m on a friday it is 7 p.m to 9 00 p.m and on saturday it is 1pm to 4 pm the lighter blue represents the low traffic period of your site these are the best timing for you to make the switch and if you are working on your site on a staging platform these are the best timing for you to make your staging site to a live site and if your web host does not have a staging area like for rex's case we need to make every change within the time period so planning is super important in this case next on google analytics we need to identify important pages of your site the important pages are the high traffic pages or the pages where you send your traffic to for example the landing page or it could be a review page that is making you the most money these are the pages i will keep a lookout for after the change so to identify those pages i would go to behavior and under site content i'll click on all pages and over here you will see which are the high traffic pages i would recommend that you show rows to the maximum and then i would recommend that you export it to google sheets or whatever format you are comfortable with and then i'll select all these columns and hide them because we don't need these data and then i will start a new column to indicate the page b before the change and another column to show the change and then in google analytics again under behavior i will select site speed and i'll click on speed suggestions i will sort the data by page views and then record the page speed score next i will visit each of the important pages to scan through and see what features are needed now this is only applicable to you if your server does not provide a staging area if you can work on a staging area then you can always refer to your live site and what i recommend is to use a screen recording tool to record the design look and feel for each of the pages on your site if you don't have a screen recording tool then i recommend using a tool called obs studio it is a free open source screen recording tool that does the job better than most paid tools out there i've left the link in the description it is not even an affiliate link because it is not even a product they sell it is totally free so go check it out and record your web pages for later reference now this is something you need to know that whatever elements that you design with the page builder will most likely be gone for example in this case rex has many affiliate buttons that are created with trife architect and in every review page he has included a review summary like this with star rating so when i delete drive architect it will turn from this into this after the switch but don't worry about that like page builders you can create this section as a template and use it all over your site using something called reusable blogs from gutenberg blogs so this will save you a lot of time and i will do a short tutorial on this so do stick around i think this is probably the main reason why people hesitate to switch because they thought they have to style and create everything one block at a time well in fact it only takes a few minutes for you to work on one post because you have the power to create templates you might also want to take note if your site collects leads because the forms that are connected to your email autoresponder service will be gone as well so it will make a lot of sense that you copy down all the external affiliate links of your page the link of your email list as well as the rating in numbers so you can replace the star rating with gutenberg blocks finally i will do a screen recording of the current theme settings to identify the font styles the theme colors and all that stuff for later reference so once you're done with all these steps and you have a blueprint for your website the second thing you want to do is to back up your site but before that don't forget to smash that thumbs up button and let me know in the comments if i've missed out any important planning steps i would recommend that you contact your web host to have them back it up for you most web hosting providers will be able to do that but if not there are some plugins that will do the job i've left links in the description for you to check them out and when you're done backing up your site then it's time for you to make the switch at the designated time [Music] now this is the easiest part of all is just installing the new team and plugin and removing the page builders now if you're not making the switch on a staging area then time is of essence you need to pick the right time which you have discussed to make the switch and minimize the impact and once you have done that it's time to adjust the theme settings [Music] so i've just installed the free cadence team for rex's website and it took just a couple of minutes to set up the theme color as you can see you can use the color palette here to change the colors of your entire site you determine the font styles of your body content as well as the header i recommend since speed is of concern to use only one font style for your entire site more font styles will make a slower website and then you adjust the layouts of your archive pages like your blog row or category pages now i won't go too deep into the details because rex's site will be different from yours and if you want me to do a tutorial let me know in the comment section which team you want me to work on so once all the team settings are done the next step is to visit each individual page [Music] starting with the important pages to the least important page you'll want to make adjustments to all of them i know it is kind of like a tedious task but this is actually a good time for you to keep your site up to date with all the latest seo rules that you might have missed in some of your older articles now if you are working on a staging area it is so much easier for you to refer to your live site but if you are working on your live site it's time for you to open up the video recording of each individual page now when you make the switch from page builders to gutenberg your wordpress editor will usually be reverted to the classic editor and to use gutenberg blocks all you need to do is to click on this and then click on convert to blocks and everything here will be converted to blocks easily and then next as you can see here this used to be a review box the star rating is gone and the button is gone as well so for rex's side he has this review summary box on almost all of his review pages so i'll quickly show you how to create a review box that can be reused on all the pages of your site so i have the cadence blogs plugin installed so if you want to follow along you need to install that plugin as well so all i need to do is to click on add block and then i will click on row layout if you don't see row layout just search for row and you will see it here let me click on this and let me select one column and then next i will add a title let's search for heading and you'll see this advanced heading this is by cadence blocks as well so over here let's copy this review heading let's put this here centralize it next let's copy this let's hit enter and let's paste the info here then this as well you hold shift enter to go to the next line but if you just hit enter it will create a new block so shift enter again to stay on the same block copy this as well shift enter and then i will add this image here this time i will hit enter and it will create a new block notice the space this is a new block and this entire section here is a block by itself so i'll add an image i'll select this size the image to around 300 shift this up and then align it right and then copy the rest of the stuff so the product rating for this is 2.5 out of 5 stars and let me add a star rating so over here i will search for icon and then i'll change this to a star the size i will put this maybe 20 and then i'll align it left icon color i will change it to this yellow color and then this title for accessibility i'll put it as 2.5 out of 5 stars just in case this icon doesn't load it will load the text instead and then i'll change this number of icons to five so as you can see five stars are here but on icon 3 i want it to be a half star so i will search for half and here we go and then for icon 4 i'll remove this search for stars and i have this blank star here and then for icon 5 as well so this is 2.5 stars and then now we need to add a button so let's search for button this advanced button is from cadence blocks as well the button settings for the background color i will change this to red border color i will turn it to transparent and the text color i'll put it to white and for the button size the top padding i'll put it as 20 and then the left right padding i'll put it as maybe 40. turn up the box shadow and then i'll paste in the url open a new tab change the hover color background to this color the border i do not want this so let me turn it transparent and then last step let's select this row layout and let's go to padding and margin let's put the left and right padding as 25 as well and then let's go to border settings border color we want to change it to maybe something gray then border width i would put this as maybe 10 and as you can see this is basically what we want this is a review summary box that looked decent like before the change now the next step is to turn this into a template so that you can use this on all the pages so what you need to do is to click on this options and add to reusable blocks and this is done if you want to change the name of the reusable block you can manage reusable blocks so as you can see this is the reusable block we have just created we can even turn this into a template so for example let me change this to review name to make this generic remove this product founder description and all this information i'll leave this we can even change the name of the reusable block to something like review template and let's update this okay now so for example let's go back to the previous page so now take a look at this whatever there is change on a reusable block will be changed here because it is linked and this is very useful if you want to have a centralized call to action where if you added an element in this reusable block the change will be reflected on all pages that uses this reusable block that are linked together but if you don't want this box to be linked together all you need to do is to click on this review template over here which is the reusable blocks and then click on this convert to regular blocks and then this will unlink from the reusable block and then whatever edits you do to this will not affect the reusable block [Music] and now let's compare the before and after and see if it's worth the time switching over from a page builder to gutenberg [Music] [Music] so as you can see it is definitely worth the time and you will never get such a result using page builders now what i've discovered is that sometimes you will still not get a good result after the switch and it is mainly because of the images on the site they are either not sized properly or it is not serving the webp format and all that stuff so if that is the case then i recommend that you install a plugin called imageify to optimize your images and i think it will help improve your size speed to achieve results like this so these are the steps i've taken to help rex with his website and it will probably take a few hours if your site is not that big like below 80 pages but if you you have a bigger site it would take a few days or more to complete the entire switch but i can assure you that this is all worth it in the future because number one you can cut costs if you are paying for a page builder and number two you don't need to worry about your site speed or hire a web developer to optimize your site and number three as good number blocks mature it will eventually overtake page builders so it is worth staying ahead of the curve and you won't need to worry about google changing the algorithm to focus on page experience so i hope that after watching this video you have more confidence switching from page builders to gutenberg and if you need gutenberg tutorials i have quite a few of them on my channel feel free to check them out and if this video did provide value to you i hope you can smash that thumbs up button and if you already done so thank you all the best to you take care and stay safe

Channel: Jack Cao

Views: 9,408

Keywords: page builder wordpress, gutenberg wordpress, gutenberg wordpress tutorial, gutenberg blocks, page builder to gutenberg, switch from page builder to gutenberg, convert page builder to gutenberg, wordpress page builder to gutenberg, elementor 2021, divi builder, brizy wordpress, thrive architect, page builder wordpress not working, will page builder slow down website, slow wordpress website, slow wordpress site, wordpress slow loading, wordpress slow loading problem

Id: hJyzyVqzH7Q

Length: 18min 0sec (1080 seconds)

Published: Fri Mar 26 2021