[00:00]
Hey, guys, this is James from Isotropic, and in this video, I'm going to be discussing how to build out fairly advanced layouts in Gutenberg and this is specifically for blog post creation. If you're trying to make a pretty blog post and don't want to use any page builders and you can read my or if you my last video or read the transcription of that link below to know why, I recommend using Gutenberg instead of page builders to build out blog posts.

[00:26]
But in this video, we're going to be discussing how to actually create a pretty blog post with Gutenberg. So let's get right into it. Today, we're going to be using a demo site, uh, where we're going to basically copy and each blog post over in Gutenberg. I'm going to show you how to do that type of styling. First, you should understand that Gutenberg isn't a full fledged website builder and should really only be used, in my opinion, for blog posts.

[00:55]
If you want a visual builder, go with Elementor go with oxygen builder, don't you don't use Gutenberg just yet to build out a full website.

[01:04]
However, if you have a full website built out with Elementor and you're trying to build blog posts, definitely go for Gutenberg. So in this example, this is a page, this is a landing page. This would be built with Elementor or another page builder or recoded or through a custom theme or theme or really anything like that. This isn't something that would be built with Gutenberg. Now, this is a blog post, and you still have your heading, you still have your initial post and some additional sidebar stuff and everything here, but the content would be built in Elementor theme or Oxygen.

[01:46]
And this would be a template applied to your single post here. Many people are using page builders to create complex layouts like Elementor you would use to add this and add that and add this. And that is where you would want to use Gutenberg. So. Specifically in terms of Elementor, uh, it it. We use Elementor to build out the single post template, but then we go ahead and use Gutenberg to build out the actual content styling.

[02:16]
So here we have a fairly pretty complex post, has a bunch of images, um, fonts, styling headings, uh, and embedded YouTube video and a couple of other things fairly long. Uh, so let's let's go ahead and basically recreate most of this in our Gutenberg builder. So here's Gutenberg. Uh, enter the title and the title would be taken away and rendered by your template up here. And then here's our actual content on the post.

[02:50]
First, uh, we want to make this larger and this is very doable and easy with, um, Gutenberg. And we can just choose a preset text and now it's larger. Um. Now, we have an image here and we're just going to copy and paste that image into Gutenberg, and Gutenberg allows you to do that fairly easily. I see that there's a drop shadow here. So what we can do is, um. Either apply CSI style.

[03:22]
So I would I would add a class called. And then. Go ahead and. I had a little custom made HTML. And we actually need to add a style tag. And then I'm going to quickly inspect this element and bring this onto your your screen and we see a shadow here and we're just going to apply it to our Gutenberg post. And the reason I'm doing this is to kind of show you that this is a very powerful platform.

[04:14]
And if you're looking to create posts, this this is more than adequate and you don't need to use element here and there. There are a lot of negative things that come with using elements or to build post, which I talk about again in that previous video. Now we want to add there's a bunch of other content, but I kind of went over how we're doing that. But now we want to add a YouTube video and there's a built-In YouTube embed feature and you simply just paste the link in and your video shows up.

[04:46]
That's very simple and easy. And while we're on the topic of imbeds. Do you have a ton of them so you can paste the Twitter Lincoln and we'll show a Twitter card, Facebook, Instagram, another WordPress post, Spotify, SoundCloud, there are a ton of embeds that you can use here to build out pretty, pretty beefy blog posts. Now, a couple a couple more sections. And I think you guys are getting the point that you can really do everything that you would want to use.

[05:14]
Page builder four in this this this Gutenberg. So here's our our first heading, and then we'll just add in the content underneath, I don't know if this list is going to come in style or not, but as you can see, there is a list element. Uh, and you may be wondering what these are. I go over them in a previous video, but I use a, uh, add on pack and I install this on all client websites as well.

[05:44]
And it adds these additional tools here. So these really expand the the Gutenberg builder and make it very similar to Elementor so it's called Gutenberg Blocks, and there are a ton of additional plugins out there. I've just used this from the beginning when when you came out, uh, never had reason to switch, but there are a ton of additional ones as well. Final few things that I want to show you, many people don't know, but you can add specific, uh, design elements and the main thing here is that you can add columns.

[06:22]
So if you want a multi column, so you want an image here. But next to the image, you want a general paragraph. You can do that very easily in Gutenburg and people don't know this and go to Elementor because of that, but but there's no reason, especially when you have that functionality to add in columns. And that's just to show you that the columns are there for you. You can add galleries, you can add median text, which is essentially what I did, a two column.

[06:55]
But you can also, uh, edit these columns and make it a three column layout or four or five column layout. So there's a lot of expen ability here. Um, let's take a look on the front end and see if our success that I added in the beginning shows up. Yeah, so our shadow showing up and obviously this looks different than the left side because I'm using a base um, hello Elementor theme, but it can be styled to look exactly like this by using Gutenberg or by using our Elmentoror page builder or theme to create this complex post.

[07:32]
This would be your featured image. This would be your, title. This would be your category author, um, date. And then you can have an author box in the sidebar here. You can have a table of contents in the sidebar here. But this actual post would just be built using Gutenberg and it would load quicker because it would it would load less dumb elements. Uh, it would use the native WordPress styling and it would just be a better solution than Elementor.

[08:01]
And finally, you wouldn't get stuck with your, uh, Elementor your page builder if you were to choose to move to a new platform. Uh, many, many tools, including Elementor oxygen builder, uh, and and other page builders specifically create their own custom Unicode that can't be exported. So if you built out all your blog posts in Elementor and then decided to move somewhere else, all that styling would be broken and you would have to take hundreds of manual hours for many different posts to convert them into that new builder.

[08:36]
So using Gutenberg IT ships with WordPress, it's going to be with WordPress into the future. Uh, so it's just a it's it's a better solution. And as you can see, you can build out fairly advanced layouts with it.

Why You Should Use Gutenberg to Build Blog Posts