This lesson is a part of the How to Build & Maintain Elementor WordPress Website? course.
In Lesson 7 we’ve learned what’s a page template, and what do we need them for. Also, we’ve created one and looked through the options of using page templates, now let’s check how we can make use of the Gutenberg editor.
Anyone using the version of WordPress engine higher than 5.0 can wave goodbye to the classic WYSIWYG editor...well actually that’s not true if for some reason you don’t feel like using Gutenberg you can rollback and get the TinyMCE, how? Just install a plugin TinyMCE advanced.
When you install and activate the plugin, go to Settings >> Tiny MCE Advanced >> Classic Editor (TinyMCE) tab, scroll the page to the Advanced Options and mark the option Replace the Block Editor with the Classic Editor.
Until you remove the checkmark from this option you will never see the Gutenberg editor again.
Now let’s get Gutenberg back so we could build some “rich-content blog post”.
Let’s create a test blog post, I’ll call mine Creating & Editing a Post with Gutenberg.
You can do it from any page in your WordPress website, just hover the + New >> Post
When the Gutenberg editor loads this is what you will see
On the right side of the editor, you can change post options, like it’s visibility settings where you can make it Private or Password Protected.
In the middle of the page, this is the content area, where your rich content magic will happen.
Let’s have a look at the controls.
The blocks menu is structured in 8 categories
Now let’s try to create something with Gutenberg.
First of all, let’s add some text. Choose a paragraph block, or start typing.
I’ll use some dummy text from hipsum.
On top of the block, you will find some basic formatting options (like alignment, bold, italics, link and inline image). When you click on three dots you’ll access additional options of the block.
There’s an interesting option a reusable block, it’s like a template we’ve created previously with Elementor, here you can create a unique block and save it for further reuse.
Now let’s check the block settings. As you can see there’s a bunch of options that we can tweak.
Frankly speaking, I wouldn’t recommend you easing up on all of those features, since all of your posts may look different, and eventually your blog will lose its wholesomeness of style.
I’ve just checked in on Unsplash and downloaded a bunch of cool food photos, I’m going to use them for this post.
There’s a cool block in Gutenberg called Cover there you can add an image or a video, as well as some text above, as for me its like the hero area. This block is good for separating major parts of your post.
If you open the settings of this block you will note that you can turn on a fixed background, and it looks quite nice when turned on.
When it’s OFF you can move the focal point of the background thus changing the position of an image.
As an overlay color, I’ve used the same as for the button in my previous lesson #d30c5c.
After the cover, I’ve added another text block and the Gallery block.
Previously, adding a gallery to a WordPress post was a real pain at the back of a head, now you can do it in a few clicks.
Add a gallery block to your post
Choose a bunch of images from your Media Library or upload from the desktop. I have some nice shots of apples so here’s my gallery.
If you click on the + you will add some more images, though I think 3 is more than enough.
In the gallery block settings, you can change the number of columns from 1 to 3, and assign links to each item.
After the gallery, I’ve added another text block and a video block next to it. As always, there’s a bunch of options how you can add a video, either as a Video block...
or as an embed from YouTube, Vimeo, VideoPress and tons of other sources:
I’ll use the YouTube embed. As you can see, it’s dead simple, just paste the link to a YouTube video, and that’s all.
Right under the video, you can add a caption and this where some block settings will appear.
There’s some minor text formatting that you can use.
Under the video, I’ve added another text block. Lastly, I’ve added a button.
There’s a funny thing, you can add an inline image to the button (next to the button text) I wouldn’t recommend you adding something larger than an icon, cause it might look weird...
Does it look like a button to you?
To make something I’ve added two similar sections with Junk food and Good food.
To make it a little bit more interesting I've created some more sections, feel free to check full post screenshot here.
Also, we have a full-fledged free course dedicated to Gutenberg editor, you can check it out here.
End of the lesson.