How to Use the WordPress Page Editor

This guide covers the basics of making a page in WordPress, and how to use the tools on the WordPress Page editor.

All about blocks

Pages are the main place for content on your website. A page can have text, images, videos, and links to other pages or websites. In a previous post, I covered how to create and publish a new page, but today I want to take you on a tour of the page editor, and what all the buttons and knobs are for. Put on your safari hat, and let’s strike out!

Getting Set Up

First, make sure you are logged in (if you don’t know how to log in, it’s covered here), then on the admin screen, click on Pages. You can make a new page, or edit a page that already exists. You can edit an existing page by clicking on its name. For today, I will make a new page. To make a new page, click the Add New button towards the top-left of the page.

You are now on the page editor, ready to make a new page.

Add Content with the WordPress Page Editor

Now you are ready to add some content! The content can be text, images, video, and more. In order to do this, you will have to understand a new feature in WordPress: Gutenberg Blocks.

Blocks are sections of text, images, videos, quotes, picture galleries and more. They make up the content of your web page. For example, a picture on your page would be a block, as would a paragraph. When typing, every time you hit Enter to make a new paragraph, you are also making a new block.

Now that we’ve covered what a block is, let’s cover how to get them in the WordPress Page Editor. Before you start adding blocks, make sure you have put in a title for your new page, visitors won’t know what a page is about if it doesn’t have a title!

How to Add a New Block

New blocks come from the little plus sign in the upper-left corner.

Pressing the plus sign will open up a small menu where you can choose the block you want. When the menu first opens, you are looking at the Most Used group of blocks, but there are more to choose from if you scroll down. Alternatively, if you know the name of the block you want, you can use the search box at the top.

A paragraph block is for the bulk of your text.

A heading block is for titles and subtitles.

You will mostly be adding headings, paragraph, and image blocks.

I recommended you add a bunch of blocks and play around with them. You can always delete them later. For example, see if you can figure out the difference between the Image block and a Cover block. Curiosity and patience is the key to learning.

How to Change the Order of Blocks

Every block can be rearranged, at any point. But how to rearrange them is hidden. Here’s how you do it:

1. Put your mouse cursor over the block you want to rearrange.
2. Three new icons will appear on the left side of the block, in the middle. An up arrow, a down arrow, and in the middle six dots in two rows. If you click on the arrows, it will move that block up or down in the order of blocks.
   1. Alternatively, you can put your mouse cursor on top of the six dots in the middle, and click-and-drag the block to another location. Think of those dots as a handle, or a friction point so you can push on them.

Blocks can be in any order you want, but can only be in one column. If you want blocks to be in more than one column, you’ll need a new block just for the job.

How to Add More Columns

Warning: This is a bit more advanced, and can be very frustrating.

I need a reminder, maybe you do too…

Most of the time you won’t need another column. More columns tends to make your page rather narrow, so only use it when you need it, like for comparing two products side-by-side, or for a more newspaper-like layout, it might be just what you need.

In WordPress, a column is a type of block. It’s a special block, because it can hold other blocks inside itself. To make a column block, press the plus sign to add a new block, and find column, and click it. If you don’t see Column in your Most Used section of the new block menu, there is a little search box at the top of this menu, where you can type column.

This will add the column block to the bottom of all your other blocks, so if you have several already, you might need to scroll down to see the new column block. Also, there’s not much to see, as the columns are currently empty.

Optional: Add more Columns

Before you add any content into your new columns, decide how many columns you want. You start with two by default, but you can have up to six! To change the number of columns for your column block, you have to click on an invisible area, just above your column (above where it says “Start writing or type / to choose a block”). Just start clicking randomly in that empty area until you get it. This will probably be the hardest thing you do today.

Phew! You got it! Now look on the far right side of the page, where all those settings we’ve been ignoring are. When you click on a block, those settings change. Now that you’ve selected the column block (not the blocks inside the column block), the settings on the right will have a slider that will allow you to change the number of columns.

Click and drag the handle on the slider until the number on the right reflects how many columns you will get. If you don’t want to use the slider, you can also delete the number and type in your own, either way works.

Now you have lots of columns! Add blocks to your project, and click and drag them to the column you want them in.

How to Remove a Block

Sometimes you will want to throw a block away. Even when it’s removed, you can bring it back if you change your mind. Here’s how to delete a block in WordPress:

1. Click anywhere in the block you want to remove.
2. Look at the white toolbar at the top of the page. It is full of icons. Click on the three vertical dots to open up more menu options. A drop down menu will appear
3. Go to the bottom of this new menu, click Remove Block

Poof! It’s gone! If you deleted it by mistake, or want to undo any other mistakes, press the undo arrow in the white top navigation bar.

Last Step: Make your Page Live

Now that your page is ready for the world, it’s time to publish it. Publishing a page changes its status from Draft to Published. A draft can only be seen by you from the WordPress admin screen, a published page is visible on your website to everyone. You can always turn it back into a draft later.

To make your page live in the WordPress Page Editor, click the Publish… button in the upper-right corner. Then –and this is weird– press that button again (the second time it won’t have the three dots at the end). Once you click it a second time, you should get a green notice saying the page has been published, and a link that you can click on to see what the live version looks like.

And there you have it! A live web page, ready for the world. Remember to add your new page to your website’s menu, if your theme doesn’t do this automatically. Otherwise, people won’t be able to find your new web page.

You Are Now a WordPress Page Editor Master!

Now you know a bit more about Gutenberg, the WordPress Page Editor. You can now add, move, change, and remove blocks.

It’s not an intuitive program, but practice will make it easier to use. Take your time, explore the buttons, make mistakes, and press undo often.