WordPress is an easy to use Content Management System.
Why?
Because it makes it easy to create pages of a website, add content to them, and then easily edit them or delete them.
It’s all about how WordPress let us deal with the content in my opinion.
And, I don’t have to say how important it is for a non-techie person to be able to add content to his/her website without having to reach out to the developer now and then.
The good thing is, you are learning WordPress in the modern era.
When I started learning WordPress there used to be a Classic Editor which is pretty limited.
You can add content to the WordPress Classic Editor easily. There is no doubt about that. But all you can do is add content in a single column layout. Boring, Is it not?
Now, this works fine for pages like Privacy Policy, Contact Us, etc.
But pages like Home, About Us, etc. demands good multi-column layouts with dynamic content.
And this is why Page builders took over the WordPress content market by storm. They come with a lot of bells and whistles making WordPress Classic Editor look like shit.
Personally, I am against using Page Builders because:
I am not trying to give a bad name to Page builders. They are necessary for a lot of users. They give us a lot of control. I recommend Elementor to my clients who don’t like the WordPress Block Editor.
I am just saying they are not reliable in the long run. Some clients still want to go with Page builders because the Block Editor is still not good enough for them. It’s not their fault.
However, this scenario is now changing a little bit. I am seeing clients who really love the Block Editor for its simplicity and easy to use Columns feature.
WordPress Block Editor is still not a strong competitor for the other page builder plugins. It’s not quite there yet. But it is evolving at a rapid pace and lets you avoid page builders in some not-so-complex design scenarios.
Who knows? Maybe we will ditch the page builders altogether in the future.
So, it is a good idea to learn how to use WordPress blocks.
And this actionable guide will help you with just that.
Here is what we are building by the end of this WordPress tutorial:
As you might think, it is not difficult to build the above layout using the WordPress Block Editor. I have created the above design in less than two minutes.
See how easy it is to create such a layout?
WordPress Block Editor is pretty straight forward and easy to use these days.
Alright. Enough talking.
Come on, let’s get in to the action. Go to:
Admin Dashboard → Pages → Add New
Next, give the new page a title. I named it as “Dosth App” because we are building a page that promotes a Mobile App called “Dosth”. You can name the page whatever you want 🙂
Just below the title, there is a placeholder which reads “Start writing or type….”. Go ahead and click on it.
As soon as you click on it, the Block Editor’s Paragraph Block will get activated and WordPress allows us to configure it using the options located on the right-hand side of the screen and the cursor starts blinking indicating you can start the typing a paragraph.
The options on the right-hand side of the screen belong to the individual block that is currently active. These options are different for types of Blocks.
For example, only Paragraph Block will allow us to change the font size of the text entered. It also allows us to add a Drop-Cap for the initial letter of the paragraph.
Another example, an Image Block will let us upload an image and it will have a different set of options when compared to a Paragraph Block or Columns Block. So, keep an eye on the “Block” tab.
“Wait! What is a Paragraph Block?, In fact, What are blocks in WordPress?”
It is named as “Block Editor” because it helps you build the page content using various types of Blocks.
Simply put, a “Block” is nothing but a “page content” element like a paragraph, image, blockquote, layout, etc. and we use these blocks to build the content of the page.
It’s as simple as that.
For example, here is the new Block based content breakdown of the design we are about to build:
Anyway, as you can see in the above image, the first block that we are going to use is the Layout block.
You can add a particular block by clicking the “Plus” icon located on the right-hand side.
Clicking on this Plus Icon will open the Blocks Dropdown in which blocks are neatly organised into nearly half a dozen sections, and by default, the “Most Used” section is active.
We are looking for the “Columns” block and it is not inside the “Most Used” section yet.
Your “Most Used” blocks section could have different blocks based on how often you access a particular Block.
So, either search for the “Columns” block using the search box or scroll down a bit until you find the “Layout Elements” section and click on it to find the Columns block.
Once you click on it, WordPress will provide us with a few column-based layout options, and let’s go with the “Two-column: Equal Split” layout option.
And this is what you’ll see as soon as you pick a layout option.
For some reason, if you want to add more columns, you can do it in two steps.
Always remember, to adjust the options of a particular block, you first need to select it so that you’ll get access to options specific to that particular block.
Option values of a particular block are not shared with other blocks even if they are of the same block type.
Anyway, our design demands a two column layout, so, I am not going to increase or decrease the number of columns.
“Alright, but what if I want to change the width of one of the second.”
Good question, to achieve that, click on the second column inside the “Columns” block to access its options on the right-hand side of the screen.
Then, change its column width by using the “Percentage Width” option. Remember, you can only enter width in % unit.
Once you enter a custom percentage width to one of column, the other column will get adjusted automatically.
Anyway, for the purposes of this guide, I want the column width to 50% each, so I have reset the column width using the “Reset” button located on the right-most side of the “Percentage Width” option.
Also, if for some reason, you are not seeing the block specific options, just make sure that the “Settings” icon is selected. This setting is located on the top-right-hand corner of the screen.
If you are still not seeing the Column Specific options, make sure that you have selected a particular block. The “Block” tab is active only when you select a particular block.
If a particular block is not selected, WordPress will switch automatically to the “Document” tab where you’ll find entire page related options.
Next, let’s add an image to the left-hand-column.
WordPress Block Editor will let you add an image in two ways.
1) You can directly drag an image from your computer and WordPress Block Editor will convert it into an Image block automatically with the image set.
2) Click anywhere in the left-hand-column box and add an image block manually and then set the image by uploading it to the media library.
You can use both the options based on the situation and your work style.
All I want to say is that the Block Editor has got you covered 😛
If you are following along with me, please use the following image if you want to:
Once the upload is done, WordPress activates this Image Block so that we can configure it to our needs using the options on the right-hand side of the screen.
I can’t stress this enough, these options on the right-hand side of the screen belong to the individual block that is currently active. In our case, the options belong to the iPhone image.
The first option inside the Image Block options is “Alt Text”. Adding the alternative text will boost the SEO and accessibility of the page.
If you want to turn the image into a clickable link, use the “Link” icon located on top of the Image block when it is selected.
Similarly, if you want to replace the image, you don’t have to delete the image. Just use the “Replace” button instead.
Again, these options will change based on the block selected. You won’t see the “Replace” button when you are working with the Paragraph Block, get it?
Finally, you can adjust the alignment of the image using the “Alignment” icon located right beside the “Replace” button.
Take your time and explore the various options related to a particular block. If you mess up you can always undo the changes by clicking on the “Undo” button.
Once you undo a particular change and you want to bring back that, you can just click the “Redo” button.
Safe enough? All I can say is, with the WordPress Block Editor, you are in good hands.
Anyway, we are now good with the First Column.
Next, let’s deal with the second column.
Once again, click the box inside the second column and this time, add a Heading Block.
Next put in the following text:
Dosth is a free iPhone app that helps you keep track of your friends interests.
Now, by default, WordPress Block Editor will use the “H2” level heading. But if you are writing a big blog post, you’ll likely use “H3” and “H4” level headings.
You can always change the heading level by clicking on the “H2” button and then picking the correct level heading.
“Ok! But what about H5 and H6 heading levels? I use them often too!”
Nice question!
You have a whole bunch of options located on the right-hand side of the screen. As I said before, these are individual block “specific” options too.
As you can see in the above screenshot, you can change the heading level to H5 and H6 levels as well.
Also if you notice, the options inside the “Block” type will even let you change the color of the text. We will be using this option shortly.
Transforming just means changing or switching.
Anyway, for some reason, if you accidentally created a heading instead of a paragraph, you can change the type of the block without deleting the text.
All you have to do is click on the first option which indicates the type of the block. The whole purpose of this option is to let you change the block type.
As soon as you put your cursor on it, it will change to the “Transform” icon and if you click on it, you can transform to a similar Block that deals with the text.
WordPress Block Editor ships with two other Blocks that deal with text. Paragraph block and the Quote block.
“Hey! What is a Group Block? It’s doesn’t seem like it deals with text!”
Yep, you are correct. It doesn’t deal with text.
A group block will let you combine two or more blocks into a group so that you can style them together. You’ll learn more about the Group block soon.
Anyway, in our case, we don’t really want to convert the heading into a different kind of text block, so, I will just come out of the options by clicking some where inside the WordPress Block Editor.
Next, let’s add a paragraph block.
Always remember, If you see a plus icon, that means you can click on it and add any kind of block. It doesn’t matter if you are inside the a column block or a group block.
Anyway, now add the following text to the paragraph block:
Of Course, only if you love them.
If your cursor is blinking inside the “Heading” block, just hitting the enter will create a Paragraph block. No need to click on the plus icon.
And, as I just said, You can add any kind of block any where inside the Block Editor.
So, you can easily add a “Columns” block inside another “Columns” block by just clicking the “Plus” icon.
See how easy it is to create nested columns?
Trust me, even some of the most popular page builder plugins doesn’t have this feature right now ( This will change with time anyway ).
Anyway, now that we have added nested columns, just go ahead and add the following App Download buttons.
Here is the output from my side after adding those images.
Next, Let’s talk about the Group Block.
Before we discuss the Group Block, let me show you the problem that it solves.
If you notice the design that we are building, we are building a full-width design.
But, if you preview the design we have built so far, it is not full width yet.
So, what can we do to make this a full width layout?
Our first option is to make the “Columns” block full width. You can make a “Columns” block full-width by selecting it.
So, click on the “Alignment” option and finally choose “Full Width” from the popup.
If you are not seeing the “Full Width” or “Wide Width” options, don’t worry.
The active theme must support these options in order for you to see and use these options.
By default, most of the themes available on the market are aware of this issue and comes with good support. But in case, you are not seeing these options, add the following code to your child theme’s functions.php file:
<?php
/**
Register support for Gutenberg wide images in your theme
*/
function mytheme_setup() {
add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );
Now, adding the above code is not enough, and if you are a non-techie, you might need developer assistance for this. Anyway, the Potatodie website wrote an in-depth article about how to fix this problem properly.
https://potatodie.nl/diffuse-write-ups/gutenberg-group-blocks-full-width-containers/
And I really love the following article from the Josh Collingsworth’s site too:
https://joshcollinsworth.com/adding-gutenberg-full-and-wide-width-image-support-to-your-wordpress-theme/
Anyway, back to the problem at hand. I have made the “Columns” block as full width and here is the output I see on the frontend:
Well, that’s bad, right?
I want the section to be full-width. Not the content of the section.
The problem with making the “Columns” block full width is it also makes the content inside its full width as well.
That means, 50% of the entire screen is being occupied by column on the left-hand side and the other 50% by the right-hand column.
We don’t want that do we?
Instead we just want the section to be full-width and it’s content-width should be around 900px and centered. Like this:
Green Border represents the full-width section and the Orange Border represents the content-width.
So, how do we solve this problem and achieve a true full-width section with centered-content?
Simple. Using the “Group” Block. The intended purpose of the Group Block is not to create perfect full-width sections. The original intention is to create sections of a page with multiple blocks combined.
But we are using it to create a full-width section and it’s completely ok.
So, let’s put our “Columns” Block inside a group.
But before that, let’s come out of the full-width mode by selecting the “Columns” block and then clicking the “Full width” option again.
Next, let’s put our “Columns” Block inside a group. To do that, we have to transform our beloved “Columns” Block into a group.
When you transform a “Columns” Block or any other block into a “Group” block, the block that is being transformed will remain intact and the WordPress Block Editor places the block inside the “Group” Block.
It is important to remember that you can transform any block into a group block. Not just the “Columns” block.
Come on, transform the “Columns” Block into the “Group” Block by clicking on the “Transform to” icon and then click on the “Group” Block.
Now see what happens.
As soon as you click on the “Group” Block from the “Transform To” popup, the “Columns” Block is now wrapped inside the “Group” block.
You can confirm this in two ways.
One, by using on the “Block Navigation” button located on the top-left-hand corner of the screen.
As you can see, the entire “Columns” Block and it’s child blocks are now inside a single big “Group” Block.
The primary purpose of the “Block Navigation” is to help you select individual blocks by showing their relationship with each other.
In fact, it is not easy to select a “Group” Block once you unselect it.
Come on, go ahead and try selecting the “Group” Block once you exit out of it.
No matter where you click on the WordPress Block Editor, it is not possible to select a “Group” Block without using the “Block Navigation” feature.
However, the “Block Navigation” could be confusing if you are dealing with a fairly large piece of content with a ton of blocks.
This is where the second option comes.
It’s right in front of our eyes all the time.
Common, go ahead and select the “Columns” Block and you’ll see small breadcrumb navigation at the bottom of the screen.
See that?
And the words “Group” and “Columns” are clickable. So, you can select the “Group” Block this way too.
In fact, this is the only “Not At All Confusing” way to select any element with great control.
Anyway, now that you know how to select any block inside the WordPress Block Editor, let’s get back to the problem at hand.
We need to create a full width section with its content centered.
To achieve this, first, let’s make our Group Block full width, and let’s give it a background color of dark blue. The color code is #0073aa
WordPress Block Editor allows you to apply a background color to the most of the blocks and Group Block is no exception. Once you select the Group, you can give it a background color by using the “Background Color” box.
If you are not happy with the available background colors, you can go with a custom background color by clicking on the “Custom Color” link.
I went with the Custom Background Color because none of the available colors are fitting my needs.
You can also see the “Text Color” section right above the “Background Color” section.
This text color section will let you apply a text color to the entire group. For example, if you set the text color as white using this option, all the text elements inside this particular group will have the text color as white.
Come on, let’s try it out.
I have now applied the text color of white to the entire “Group” Block.
See how the color of the text-based blocks inside the group got changed to white?
Come on, now let’s preview it on the frontend.
Oops, the text color option is working for the “Paragraph” block, but it is not working for the “Heading” block.
The reason behind this issue is something called as Inheritance inside the CSS. I am not gonna scare you by talking about CSS inheritance here.
For now, just remember that the “Text Color” option of the “Group” block is not consistent because of the way active theme’s CSS is coded.
So, it is a good idea to change the text color using the options of “Heading” Block or “Paragraph” Block.
So, let’s just reset the “Text Color” option of the “Group” Block by clicking the “Clear” button.
Next, let’s select the “Heading” Block and add a text color to it directly.
Then, do the same thing with the “Paragraph” text underneath the heading text.
And, here is the final output in the browser after performing the above steps:
As you can see, the text color is now applied properly without any problems.
“Hey! It is indeed working. But the content alignment looks a bit off. Can we vertically center the content of the right-hand-side column with text and buttons?”
Of course Yes 🙂
To adjust the vertical alignment of the content inside the “Columns” block, all you have to do is select a particular “Columns” Block and click the alignment button.
By default, the content of a columns inside the “Columns” Block is top aligned.
Just change it to the “Vertically Align Middle” and you are good to go 🙂
Remember, if the content align options are not working as expected, the problem is with the Active theme. Not with the WordPress Block Editor.
Anyway, if you now preview it again, the content of the “Columns” Block is now at dead center.
You can also apply this technique to the individual columns. But to be consistent, it is always a good idea to apply it the whole “Columns” Block.
Yay! we are done creating a neat looking hero section using the WordPress Block Editor.
Isn’t it easy?
If you can create this layout, you can create any other layout using the Block Editor. You have just mastered some of the most important techniques.
This is one of the most important features and one of the easy to use functionality too.
When you are a writing big piece of content, for example, the article that you are reading right now, you might need to change the order of paragraphs, images, etc.
To achieve this, all you have to do is select a Block and use the “Re-Order” action buttons located on the left-most-side of the each block.
Easy, isn’t it?
But I have missed something 🙁
Now, if you notice, I did a big mistake.
“What?”
I did not save the changes by publishing the page. I did not save the draft either.
If you do the same mistake, you might have to spend a lot of time redesigning the page.
“Hey! I have noticed the Autosave feature of WordPress several times. Why not just use it if something goes wrong?”
Autosave feature is not an alternative to saving the changes. You’ll still lose some work sometimes. So, just get into the habit of saving the draft or publishing the changes.
If you did not save the changes for a long time, One of the problems that you’ll face with WordPress is, you might get stuck at the “updating” state.
In this scenario, just to protect your not saved content, copy all the content created and paste it by creating a new draft page or post.
You can do this clicking on the “Three Dots” icon located on the top-right-hand-corner of the screen and then click on the “Copy all content” option.
Once you copy all the content and pasted it in a new draft, come back to the original post and just hit the refresh button.
As soon as you do this, if there is a most recent Autosave, WordPress will let you restore from the Autosave. Once the restore is complete, just go through everything and see if there is any content lost.
If there is indeed a content loss, just delete everything and paste the content that you have previously copied into the new draft.
Trust me, this technique saved me a lot of times and it will save you a lot of re-work too.
Thank you so much making it this far.
You have come really long way and I truly appreciate your efforts for learning the WordPress Block Editor.
I have said this before and I will say it again.
If you prefer WordPress Block Editor over third-party page builders, you’ll give your website a good performance boost.
And, congratulations, your desire to learn the default WordPress Content Editor will save you from a lot of headaches in the long run.
Having said that, you still need to learn of things about WordPress Block Editor.
I did not cover a lot of blocks.
For example, I did not talk about adding a youtube video using the “Embed” block. Also, you can directly upload your own video using the “Video” block.
The usage of other blocks is fairly straight forward too.
So, keep practicing with different designs by using variety of blocks.
If you have any questions, shoot them in the comments section below.
Meanwhile, if you want to understand all the steps involved in creating a good WordPress website, please read the “How to Create a WordPress Website” article. I am sure you’ll love it.
I will see you in the next in-depth guide.