Gutenberg vs Elementor | The Future of WordPress

you've probably been hearing more and more lately about gutenberg the default block editor for wordpress well in this video i'm going to be putting it head to head against what most people consider to be currently the best page builder for wordpress ie elementor now as i film this in march of 2021 wordpress has just come out with another new update including some big changes to gutenberg but i want to give you a prediction within one year from now gutenberg is going to have completely revolutionized the way that we all build wordpress websites in fact i think that all other page builders including elementor are going to be dead [Applause] now that is a huge claim and i am willing to be proven wrong but watch until the end of the video and you're gonna see exactly why i'm saying it and please make sure to post in the comments what you think as well i want to know your predictions too now just before we get into the nitty-gritty of what it's like to use the two-page builders or the block editor and page builder versus one another let's start with the most important thing of all speed speed is vital i've been saying it time and time again if you've watched my previous videos but now it matters more than ever with google's core web vitals speed is now officially a ranking factor if you want your website to rank organically and you get more organic search traffic coming to your website then speed matters more than ever so we're going to kick things off with a straight shoot out of which one website built with gutenberg or exactly the same website built with elementor let's get started okay so to get things started for our speed test i have two fresh installations of wordpress on separate subdomains as you can see up here one for gutenberg and one for elementor now for both i don't have any other plugins installed other than the sg optimizer and i will show you if we click into here you will see that i have the caching on and i've also got the security on so we've got https but there is no other form of optimization on here at all okay we're not minifying anything and we're certainly not uh reducing down any of the media and that goes for this one as well let's open it up and take a look exactly the same settings and there's no other form of optimization on here now both of these are hosted as you can probably guess with siteground and both are using the cadence theme now cadence is a really good theme for both elementor and gutenberg as well and make sure to subscribe because i do have a video coming up that goes into detail on what the best themes are for gutenberg in particular i've already done one earlier this year for elementor so make sure to check that out as well i'll put the link in the description below okay but both of these are fresh installations of wordpress so we are starting with a blank slate for each now what we actually need to do is install a starter template so to do that we're going to come on down to plugins and we're going to add new and we're just going to look for some starter templates and this one here is the most popular one by brainstorm force who are the people who bring you theme like astra which is another really good theme but we're going to install and activate this on both okay so i've got it installed on both and obviously for our gutenberg we're going to be having a look at the gutenberg template and for elementor we're going to choose the elementor templates now we want to choose one that can be done on both of the websites so they are a little bit different if you're doing this for yourself but it's a great place to start with a fully made template for your site let's just try and find one that we've got on both of these so let's have a look now i can't see one that's the same for both yet ah that was one on there there we go okay so we'll go with this one so they've got this for both elemental and gutenberg so let's go ahead and import a complete site you can skip this if you want to and just go ahead and import and while it's doing that for elemental we will do this over here for gutenberg as well so import complete site fill these in click on next skip this bit now you notice that it by default installs the astra theme but we can get rid of that we don't need it okay so both of those are installed but it's also installed a couple of extra plugins for example wp forms now i don't need that i also got rid of this on the gutenberg site as well but we're just going to delete that it will make the front end one look a little bit strange because we're not going to have a form on there now but i don't want to clog it up with extra plugins i want to keep this as light as possible for this speed test so we've got our starter templates on both elementor for obviously our elementor site and we're just using gutenberg for the gutenberg site now straight away as you can probably notice we've got slightly less plugins on our gutenberg website than we do on the elementor site because of course we need to have elementor and depending on what other features you're going to be using you might even need to have elementor pro so that's going to be the first uh sign that you're probably going to pick up on why speed is going to be even more easy to attain using gutenberg rather than elementor or any other page builder because we're going to need less plugins on there okay it's going to be lighter but let's go ahead and take a look at both the sites so we'll visit both of these okay so this is the gutenberg version it's just very plain and simple we've got quite a few images on there we've got obviously our buttons we've got different icons on there and if we take a look at elementor we've got exactly the same thing as well okay i know it doesn't look all that fancy but it's a great place to start and obviously if you're new to wordpress then starting out with a template like this is really good because then we can just go in and obviously start editing it but that's obviously subject for a different video for now let's go right ahead and grab our url and we're going to head on over to gt metrics sticking on in and test the site now gt metrics is free to use um there is a limit on how many uh times you can test a website but you can always sign up for a free account and we're going to do exactly the same thing for google page speed insights as well and let's grab gutenberg and put that into page speed insights 2. so while those are analyzing we'll head back on over to gt metrics and wait and see what this comes back with okay cool so that was the one for elementor now before we take a look at this let's go ahead and compare this to our gutenberg url grab that and put it in here click compare and we'll let it run its test on that and see what it comes back with so just to recap as you saw we had uh two starter templates there both exactly the same start template both on a fresh installation of wordpress same plugins same caching no minification on the front end as you saw so this is very much it's a really simple way of doing this i know that there are obviously more in-depth ways but this is something you could all do if you wanted to test it out yourself which is what i think is really cool so let's start with google itself okay page speed insights and importantly mobile okay mobile especially speed and loading times is more important than ever it's more important now for ranking than your desktop version okay so mobile on elementor is ranking in at 62. if we take a look at gutenberg mobile is 98 and in the green straight away that is a massive difference for something that we've just imported from scratch and if we take a look at the desktop version for elementor we've got 84 and we've got a hundred for gutenberg so straight away with page speed insights from google we can see that gutenberg is ticking all the boxes now down here these are the really important things okay these are your core web vitals they're the things that you're going to be hearing more and more about when it comes to uh speed loading times now your largest content will pay first contentful paint if we look at this on elementor it's coming up a little bit slow now 1.2 seconds that's certainly pretty quick but it's nowhere near as quick as 0.6 seconds okay you can see down here we've got green as opposed to some some orange and red and if we just take a look down the page we'll see again we've definitely got more uh sort of errors or advisories coming up for the elementor version rather than the gutenberg version now let's compare gt metrics and again we've got a similar result now by no means are these bad okay so this is actually pretty good score for elementor for something that we haven't got any additional form of uh you know uh minification going on or anything like that um we've only got really basic caching on both of these but we've got a performance grade of b versus a 81 versus 91 so 10 better over here um you can see this all the scores are slightly better when it comes to the gutenberg version of this website and interestingly let's just take a look at both of these now again the layout admittedly is slightly different but as you've seen i haven't changed this at all this is just loaded through from the actual templates but look at the quality difference here okay again i've not done anything to this so i just think it's interesting that if we look at gutenberg look at the clarity of the image as opposed to the one with elementor okay i know i wear glasses but my eyesight's not that bad this is definitely a better image on gutenberg and i'm pretty sure that is as well so we we seem to be getting a better better layout automatically from gutenberg and a clearer crisper image and yet we're getting obviously better results and what really impresses me is this okay google's page speed insights if you run your own websites through this it's definitely the toughest uh out of all of the um the speed testers okay it's tougher than gt metrics especially on mobile so to get a hundred percent uh on or sorry 98 out of 100 for the mobile view on gutenberg i think is really impressive and that's where we're seeing such a big difference here between that and elemental okay so that was the speed test you saw the results of that the next thing we're going to take a look at is how easy it actually is to edit a web page or put one together using gutenberg versus elementor so this is another starter template you can get from exactly the same place now this is one for elementor i think it's pretty good we've got a nice background image here you've got a call to action obviously with your button and your title over the top and we've got a slight image overlay going on as well by the look of it so pretty standard i'd say for uh most websites okay you're gonna be pretty happy having something like this as your home page so let's go ahead and recreate this inside gutenberg so i'm going to go on over and create a new page we'll just call this one testing so we'll go right ahead and publish that uh we can view the page and currently it's blank we've just got this on there so we'll go and head on back now let's start first of all with our image so we've obviously got all of our default gutenberg blocks and elements that we have over here i'm going to give a little tip to you if we come on over to plugins click on add new and let's search for cadence blocks now i'm going to do another video as well on what the best add-ons are for gutenberg you don't want to go crazy again the more things you start putting onto your website it's going to slow it down but this is a really good one that you can actually pair up with the cadence theme and it uh it just adds quite a few extra blocks that we can be using and the great thing is any that you're never going to use for example if you're never going to use testimonials you could just go right ahead and deactivate it okay and then it's it's never going to be loaded it's not going to be using up any space on the website at all so let's head on back over to our pages now that we've added that come on down to testing and go on into it so the first thing that i'm going to do is add in a row now over here this is one of the first things that i want to mention gutenberg up until recently has been missing the ability to drag and drop into a page and that's one of the big things that people love about page builders this ability to just drag and drop things in okay so that was a big thing to be missing and i'm really really glad that they've added it in but using our cadence blocks i'm going to go for a row layout i'm just going to choose a single row layout and we're going to make sure this is full width and then if i come over here i can access the the block settings now this is one thing i will say i don't like as much okay if we come on over to this same web page that we're going to be building but we do it inside the elementor editor obviously if we start adding elements in so for example if i just drag in a heading as you probably know everything is now styled from the same place the toolbar over on the left you can go on in you've got your settings for the overall page here as well so everything is just in the same place now one thing that i personally don't like as much about gutenberg is the fact that we've got it on both sides so we can obviously come down here to add in elements or we can come over here to do it but we've then got to come over here to get to the settings of them now i know that's a really small thing but it does annoy me slightly i i don't like it as much going from side to side and it would certainly be nice if we could actually grab this and maybe move it around or stick it somewhere that we that we wanted it to be but these are all little things that i'm sure they will probably add in with newer and newer updates that's why i said earlier on i don't think this is quite there yet when it comes to replacing page builders but it's it's so close it's not going to take them long i think that these little bits of just user friendliness they'll probably iron out and it's going to become really nice and easy to use so anyway if we click back in to our row layout which we can also access just up here we can come on in and click row layout we're going to come on down to our background settings and let's put in an image so select image and i've got one ready to upload uh just here so let's click and drag that on in these are obviously all the ones that were loaded in with our starter template earlier on but this is our background image that we have from over here so i'm going to import that in now we obviously haven't got any height so if we come on down to structure settings and i'm going to change this over from pixels to vh and i'm going to bring this up so that we've got it at 100 of our our viewport height so there we go 100 and now what we want to do we want to move our content here from the top we want to bring it down to in the middle and then we're going to click on into it and we're going to add in a heading so we'll go with the cadence blocks advanced heading and what was it we're going to type so explore the colorful world is the first bit so explore the colorful world and let's just see what this actually is so that's montserrat and it's 24 pixels so we can take this put it over into the middle i'm going to change it over to white bring this down to 24 and then under the typography let's make sure that this is monsterart montserrat potato potato and i think font weight probably around 500. maybe 600 that looks pretty similar tell that now maybe there's slightly more spacing going on so we could always bring the letter spacing up just a little bit maybe 3.5 maybe three that looks pretty good and then we need to add in our other heading we'll make this one h1 and it says a wonderful gift and that is montserrat 64. so we'll put it into the middle again make this 64 and once again make it white and change it over to monster art for the typography and this was definitely bold before so we'll just increase that probably up to around 700 okay that's looking pretty similar now we need to add in our little divider first of all so let's come back search for the spacer or divider we'll put that in now we want to grab the color so i'm just going to come on over and cheat slightly i'll come over to the elementor version and see what color they've got this in as and we'll copy that head on back come into color and put in our hex code then increase the height slightly make it a little bit thicker and bring the width down so somewhere around there will probably do and then i just want to move it up so we'll come on over to this arrow move it up there now we've got quite a lot of height so we'll bring that down come back over to our header go into our spacing settings and then bring this up so it's probably around there and then last but not least we've got our button which looks like the same color to me so i will just quickly grab the advanced button widget put that in uh it says learn more and then under button settings let's change the text color over to white and we'll change that background color over to that same color we had before and then we've currently got this sort of gray board around it which we don't want so we could just make it transparent or i can make it the same color again and then under the border radius let's just bring this up so that we're curving it nicely maybe increase the border width slightly and then i think the final thing is actually the typography itself so font family this one was okay not montserrat so let's go in change it over to that and it is size 14 so we want to bring this down to 14 pixels and then the very last thing we need to do is put in our color overlay so again i'll just jump over to the elementor version let's take a look at what they've got going on so background overlay got a slight blue so we'll copy that and the opacity is 0.55 so come back up to our row layout background overlay settings go to the overlay color and once again we're going to paste in our hex code and the opacity was five five okay so let's update that now another thing i just want to point out that i think is not quite there yet with gutenberg is the previewing so we can preview this and we can have a look on tablet we can also have a look on mobile if we look on mobile we see that this obviously doesn't look right so we can click back in we've got now our font size and you can see over here we can again change between desktop and mobile that's very similar to what we can do with any of these elements inside of elementor we can switch between desktop and mobile view but i do think that it's a little bit more actual inside of elementor just when testing these actually looking on a real phone rather than the uh the mock-ups that we see here the one inside of elementor seems to be a little bit closer uh than the one inside of gutenberg so that's a slight letdown but again it's only something small and i'm sure that they will correct it in time so if we close this window down and pull it as you might want to do when you're trying to get a different view for mobile etc you'll notice that there's only so far we can close it before we actually start to lose our block editing abilities and things start to become a little bit cramped up i don't like that as much on elementor it's much easier to do especially when you're in the mobile view we can just collapse this down and we can also change the width of this over here so these are all little small sort of user experience things which probably won't bother most people but i do think that elementor is still just that little bit easier to actually navigate and use especially for beginners rather than gutenberg but as you can see we're quite easily making this look exactly the same so let's go ahead and have a look at this in a new tab okay so that's what we've just made with gutenberg i can see that i haven't got the spacing quite right but if we take a look over here obviously at the original this is extremely similar all we needed to do was change the spacing slightly and we've managed to recreate exactly the same hero section for our page now one thing i do want to address if we have a look up here when it comes to creating headers and footers this is where themes are going to be really important still with gutenberg because it's not easy to create headers and footers and certainly if you're wanting to make things like pop-ups or save templates custom loops or dynamic linking it's really hard to do without having extra add-ons so that is a big factor now if that's not something that you use or even know what i'm talking about it doesn't matter to you but when you start to become a little bit more advanced and you're wanting to do more stuff this is where elementor is just that little bit more ahead still because we have the ability to have our templates uh if you get elementor pro you can have the theme builder as well where you can start creating headers footers pop-ups and so much more but that's why i've given it that forecast of a year that's my prediction i think that we're going to be able to do all of that and so much more inside gutenberg within a year's time there are already some major updates that are going to be coming out later this year and i mentioned just then things like uh templates you have global items with elementor where you can save and then reuse things but that's only part of elementor pro you actually have reusable blocks inside of gutenberg okay obviously our completely free inbuilt block editor so when you are going into a page either any of these that we've previously made or the one that we were just playing about with you can go into the top toolbar here and you'll see you've got this add to reusable blocks so any part of this that you've designed you can add to reusable blocks they've just done an update on this in wordpress 5.7 it was a little bit buggy before but they've made it a lot better and that's going to make it so much easier for you to just save your designs and keep reinserting them and thanks to things like cadence for example it's easier than ever to access pre-built libraries whether they be full-on starter packs or just reusable sections you can add straight in so please do make sure to subscribe because i'm going to be going into all of this and more in a lot more detail so you can see exactly how to do it and quickly put together an entire website but hopefully that's helped you you can see now but it's perhaps a little bit more difficult to use gutenberg than it is quickly navigate around elementor but it's not far behind and the results are so much more impressive so hopefully that's given you a good idea of gutenberg versus elementor and the possibilities there i just hinted at them in that video but as you can see there's quite a lot of powerful possibilities make sure to subscribe because i'm going to be putting my money where my mouth is and i'm going to be taking my own website jackinthenet.com and completely redesigning it taking it from elementor and putting it over to gutenberg and i have some really complex parts to it so it's going to be interesting to see how it translates across i'm going to be doing a feature length video on that so make sure to subscribe and very soon i have videos coming up of what the best themes are for gutenberg what the best add-ons are that you can be using and the great thing is that so much of it is completely free there's very very little need if any at all for any premium add-ons so that is another really big and good feature about gutenberg but please post in the comments of course like the video and subscribe thank you very much for watching and i look forward to seeing you on the next one

Channel: Jack in the Net

Views: 11,138

Keywords: gutenberg vs elementor, gutenberg vs elementor speed, gutenberg wordpress, wordpress gutenberg, gutenberg page builder, gutenberg blocks editor, gutenberg, elementor, wordpress, gutenberg vs elementor 2020, elementor page builder, gutenberg vs elementor 2021, jackinthenet, jack in the net, jack duel

Id: 2IV9DwFUbFE

Length: 25min 21sec (1521 seconds)

Published: Mon Mar 15 2021