Changing from Elementor to Gutenberg (and Switching from Astra to Kadence Theme!)
Vložit
- čas přidán 10. 07. 2024
- This is the process we used to switch from a Astra Elementor WordPress site to Gutenberg with Kadence theme. Kadence blocks makes it possible to recreate Elementor style sections very quickly.
Recommend using the Kadence theme combined with Kadence blocks for the best experience here. We have covered other aspects of using Kadence in previous tutorials that you will probably find useful here:
• Kadence Theme for Word...
Check out the pro version of Kadence here: ideaspot.com.au/kadence
Though most sites can be done very well using only the free version as we show in the video.
I had been thinking of doing this project for months now, and it actually turned out a lot easier than I'd imagined. Changing a whole site over from Elementor to Gutenberg only took me around half a day.
Well worth the effort for the improved performance results as we see!
0:00 Introduction changing from Elementor to Gutenberg
1:14 Method summary
3:33 Changing WordPress theme
4:04 Customizing Kadence Theme
12:41 Gutenberg Blocks by Kadence Blocks Plugin
29:20 Customizing Kadence Blog Posts
32:15 Going live with the new site
32:36 More recommended 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!
The Bob Ross of web design, this is so relaxing. Thank you.
lol thanks mate :) Had been dragging my heels on changing the blog over to gutenberg, but it actually wasn't too hard in the end!
Alex, it is like you are reading my mind! You have a tutorial for every material website change that I've decided to make and this one is no exception, thank you so much.
Thanks, it’s no trouble - I just share whatever I’ve been going through myself each week 😅
You deserve many more subscibers! This video is gold. Elementor has become a grrat pain!
Thanks! This is exactly what I'm about to do Alex!
Yes I think many ppl are looking to try this - hope it helps 😅
Great tutorial and spot on subject matter, thanks.
Thanks Mark 👍
Very helpful. Thanks man.
thanks, but I have a question
1) now I am using the Astra theme, do I need to remove it before installing blocksy theme?
Again, which theme do you recommend me for blog article sites? blocksy or kadence?
2) while switching, what precautions should I take not to lose my backlinks already created or linked to my Elementor pages?
3) which block editor do you recommend me? Gutenberg block or kadence block?
4) I don't have many visitors on my site. Is only backing up my website enough? Or should follow additional procedure?
Thanks for the tutorial. The not applied global button changes to already added buttons makes clear one of the biggest problems with Gutenberg. How will you handle design changes after the site is build? Searching and replacing blocks manually can not be the solution. How to solve such global changes? Ideas?
Hi thanks for this. Does anyone know what could be the cause of my image header (Edited from Page menu with gutenberg) is not showing up? I'm using Gutenberg with the Kadence starter template. The rest of the images are working beside the header image. My domain and hosting are by Google. The only overlay background colour that appears.
Why did you want to make the change? Did elementor slow things down? I am also confusing whether I should go after ASTRA+ ELMENTOR PRO or Kadance theme + Kadance Blocks
What are you using?
Hey, Alex, what do you do with all the left-over Elementor CSS and Javascript that can slow your site down?
After you’re done with the conversion you can uninstall Elementor since everything is built in Gutenberg
IdeaSpot Thanks mate
What plug-in do you recommend for backing up the site?
updraft or wpvivid are ok - but the best method is to use your web host panel, it should have a backup tool there
I already have 48 posts I made with Astrapro and Elementor Pro. Now I am trying to add Ezoic and they are suggesting that I remove these to improve speed, but to change over 48 posts seems like a heck of a lot of work. Will it help my site speed if I change say half of those? And then use Gutenberg going forward? If I deactivate them, does that mean I cannot edit anymore, the ones that are made with Elementor Pro and Astro Pro? This is very confusing. I wish I had known about the speed issue before I listened to the recommendations for Astra pro an Elementor pro.
its a few days work, but if you get Ezoic running well it will be worthwhile 👍
make a duplicate of your site somewhere else, so you can work on the changes in a safe place, then once youre happy, overwrite the original site with your gutenberg version.
So Astra and kadence are the top choices for Gutenberg? Which one should I choose for a blog??
KADENCE all the way!
I have wanted to do this with my Elementor site as well but I'm sure it will take me longer than a half day!
I was planning to just keep Astra though...only change from Elementor to Gutenberg. Any reason I should consider Kadence as well?
Or could I use Astra theme with the Kadence blocks plugin?
Kadence has the most customisation features. You can customize headers, footers, blog posts, woocommerce etc.
Great video I switched from Astra to Blocksy so would love to see more Blocksy content!
Good choice too! Do you use a block builder plugin like kadence blocks or quebly?
What's wrong with Astra theme? I was planning to buy the Astra pro theme?
@@IdeaSpot Hi, yes I've been using Stackable!
@@serpantinthewild Nothing wrong with it per se, but I found Blocksy works better with Gutenberg imho (I don't want to use Elementor any more). Both have great free versions, though, I suggest you try both using something like localwp.com see which one you like better.
Nice 👍 will add a stackable video to my to do list 😅
Very good video .....observations...you touched on VH settings in kadence block defaults but then went over to pixels for VW....which is confusing and not the way to be doing things.....
Hello Alex, great tutorial. I need some help. I am creating a website on Kadence theme but having problems achieving a good page speed. Mobile 54 / Desktop 72. Any suggestions?
Caching
@@jpk6916 Have tried that, still not the best.
What hosting are you using? You could try WP Rocket.. But, if that doesn't work you may have to move your site to a host that has LiteSpeed servers.
Great video. For a small business e-commerce (WooCommerce), do you think the free version of Kadence will work?
Yes, definitely
Is there any more discount for kadence pro version? I'm with ocean wp theme now and elementor as page builder. Slow like hell, pagespeed insight gave me a speed of 7 on mobile LMAO. I'm dead...
You need to ditch Elementor.. may need to upgrade your hosting. If you don't.. you are correct.. You're Dead!
Even I who uses elementor and a FREE HOST gets at least a 69 score on mobile or an 85 score on desktop.
You should follow this tutorial and use W3 Total Cache, Optimole image optimization, and Asset Cleanup.
if we move from Astra to kadence will our blog get vanished or it will automatically merge with kadence?
Your posts & pages will all still be there, changing theme will change the templates and menus so the layout and style will be different
@@IdeaSpot Great so we need to be careful with menus,gotcha
thank you very much , really enjoy it !
can u do Changing from Themify to Gutenberg (and Switching from Themify Theme to Kadence Theme!)
What's wrong with Astra theme? I was planning to buy the Astra pro theme?
Astra pro is very nice, but Astra free doesn’t have as many functions as kadence free, I just wanted to focus on free stuff on this example to avoid forcing ppl to buy stuff - but for sure Astra pro is great - the main point was to get away from Elementor, the themes Astra and kadence are both really fast
@@IdeaSpot Thank you very much :)
Thanks for another great tutorial, Alex! Ain't it better to use margins and padding than using spacers to reduce the amount of code? Just curious.
For sure, that’s more optimal 👍
A trick: watch series on flixzone. Been using them for watching loads of movies recently.
@Bruce Finn Yup, been using flixzone for years myself =)
Awesome video! It looks like GutenbergAI is no more. Any new products that you'd suggest? (please and thanks)
I had my site created just as I wanted in Elementor. Now, trying to change it over to Kadence. If you have a lot of blocks with 2 or 3 columns with text and images.. it is a total NIGHTMARE! I was hoping there was an easy way to change the blocks from Elementor blocks to Kadence blocks.. but I guess that was wishful thinking. I am going to have to manually rebuild EVERY SINGLE PAGE ON THE SITE.. NOT FUN!! 🙄
Yeah that’s I went through 😅 think of it as a chance for a nice redesign
Go for the bricksbuilder it's insane and faster than gutenberg.
I haven’t tried that one yet but it looks nice, worth a closer look for sure
It's happened again...just as I was thinking of how to do a certain thing, you come up with a tutorial showing just what I was wondering about. Are you spying on me or something? :)
You can get the same results in Elementor if you know how to use Elementor. It seems as if there is a kind of Elementor bashing going on..
Can you share an example of an Elementor page that can score 100 on mobile? Would like to talk about it on another video if possible
heavy plugin
DUH! With Google putting all the emphasis on PAGE SPEED.. Elementor is no longer a choice. Believe me I wish it was. I LOVE Elementor. I had my site setup exactly the way I wanted it using Elementor.. but now I have to re-do the eitire site if I ever expect it to show in the SERP'S. If your site is too slow.. Google will show the faster sites first! You will find yourself on page TEN.
But your own website fails google web vital scores
Yes I installed ezoic ads to try to make some money but it slows the site down a lot 🤔 maybe I’ll uninstall it