Psst! If you're looking for a tutorial on how to create advanced post layouts with Gutenberg, click here.

[00:00]
Hey, guys, this is James from Isotropic. And in this video, I just want to quickly run through how we advise our clients to create blog posts with an Elementor site. So off the bat, I recommend not using Elementor to build out blog posts, even if there are complex layouts that include columns, tables, multiple images, galleries, stuff like that. And the reason I recommend doing this and using Gutenberg to do this instead of Elementor even though Elementor is a structure or builder is because Elementor adds a lot of weight to the page.

[00:32]
So continuously adding more Elementor elements to a blog post will make it load slower, worse user experience. And the same thing can be done with Gutenberg. That's the first reason and the second reason is in the future. Elementor is a great builder now, but in the future it might not be the top of the pack. There might be a better option out there. For example, our agency uses Oxygen Builder for most of our websites now, whereas we used to use Elementor for most of our websites in the past.

[01:02]
If you build out your blog post with a mentor, there is no possible way in the future for you to easily migrate from Elementor to a new page builder, a new theme, a new content management system, because everything is encoded as a short code specifically for Elementor to read and then displayed to the visitor. And it's pretty formatting. So you're really limiting your future options. If you build out hundreds of blog posts on Elementor and either in the future you'll be stuck with Elementor you'll have to pay somebody to move away if you want to move away.

[01:36]
So let me show you a couple of things here just really quickly. So here's Gutenberg, very simple, easy to use title and your blocks, so on so forth. Most people write out their blog posts, they have multiple paragraphs, and from those paragraphs they create and maybe add an image or add a couple of things. You can see Amelia's booking plugins installed here. We're not doing that. And you can see they're a bunch of different blogs. In these blogs, there are a couple of things that you may not know about and may be very helpful to you.

[02:10]
So first, you can easily add a gallery. You can easily add media and text. So text next to an image, video files, audio, a lot of things here replace many blocks in Elementor. And obviously, if you're building a page or a full site or a header photo, you can't use Gutenberg. But if you're doing a simple blog post could be very easy just to use Gutenberg. Here's where a lot of people don't know about this, but this is where things get interesting.

[02:42]
So columns you can build out complete column layouts in Gutenberg. Just add the column block and there you go. And now you can add say I want to add a paragraph here and I want to add a gallery here, so.

[02:56]
You can easily search through your blogs and add your at your gallery, I don't know if we have any images here. I’ve gone on Unsplash and download two images just to show you what the automatic gallery looks like. So free images, if you don't know about it, it's very helpful to web designers, but you have your you have your gallery and you can add and edit different images and make different structures and really build out anything you want in Elementor so, uh, to compare.

[03:28]
Let's go to another post and just load up the the Elementor builder and show you that there's a lot of overlap between the blocks and Gutenberg and the blocks on Elementor if Elementor roads. This is a very slow interface as Elementor loads. Let me go back here and just show you a couple of other things so you can add HTML blocks. And whenever I embed links I really like using something called iFramely. So here's a link to my agency and we just copy and paste the code in here and bam there's your HTML code showing on the front end.

[04:01]
Well designed. And let's see. We can copy this placeholder text and throw it in, uh, Gutenberg. And, uh, let's check out our media library. We can add multiple images into a gallery and this galleries and only one side of the page. Finally. Let's take a look at this on the front end. And you'll see that. Here's it, and this is a hello thievin nothing, nothing special, but you'll see your main paragraph.

[04:39]
Here's a column. Here's a here's a gallery and here's a link. So you can really replace everything in Elementor you can add your columns and your gallery and your link. And that shows up exactly as it would show up in Gutenberg. But you can replace everything an Elementor with Gutenberg. And the reason to do that again is that it's faster and it's future proofed your site. Everything will work with you because this is a native feature of WordPress ever since version five.

[05:05]
So you'll you won't be stuck on Elementor. One other thing before I leave you is I want to show you a couple additional things. So if you look up Gutenberg, you will find many free plug ins that are very similar to eliminate or add on plug ins and that they add additional functionality to Gutenberg. You'll find a ton of different block packs, which are essentially, uh, if you're purchasing an advocate for Elementor, it's essentially like an Elementor widget pack.

[05:38]
And we like using Gutenberg blocks because they add a bunch of additional pretty well designed and functional utilities to Gutenberg. And you'll see there are a ton of additional things you and I don't know if there's a pro version, but. The this version works very well, so I'll just show you to end this video. Uh, this pack that we that we use on our site and we have our clients use. All right, so we're back here. If we just go to our blog library, you can get there or go from here.

[06:16]
I'll show you the additional blogs that we have. And keep in mind, all of these are built into WordPress immediately. But here, advanced heading postgrad, you can display, uh, posts, you can have a post carrousel section just as you have in Elementor buttons, team members post Timeline's blog quotes how to schema, uh, an inline notice. I mean, and everything is really well built and designed. And it is really it it makes elements are much more advanced and very much more advanced, so a bunch of different things you bunch of add on Advanced Blocks for Gutenberg.

[06:54]
The reason again, we want to use Gutenberg instead of elementally is that you're not locked into Elementor in the future. You may really love the tool now, but there might be better offerings out there in the future that are cheaper, that are easier to use, that don't have a bunch of bugs all the time. Uh, and then, uh, it's, it's also just quicker on the front end. And because this is a local so I can't really show you the speed test, but, uh, Elementor sites that use Gutenberg to do their posts are a lot quicker than Elementor sites that use Elementor to do their posts simply because you're already loading Gutenberg.

[07:26]
And if you do Elementor, you're just adding additional elements onto the page and it might not impact it crazy, especially if it's a small post. But if it's a big post, uh, it adds up and it's just slower and slower. So it ranks lower and visitors don't like it as much. So hopefully this seven minute video showed you kind of why we recommend this to our clients, why I will recommend this to anybody who asked me if they should use the Gutenberg Elementor anything to to build out blog posts.

[07:55]
But, uh, those are the benefits, in my opinion.

How Do I Build Advanced Gutenberg Blog Post Layouts?