One More Gift Just For You. Get Help For Free For Your WordPress Site

Topic Progress:

Course Progress

Get Access To Over 50 Free Videos  To Learn WordPress

7: A Closer Look At The WP Editor

Running Time:  15:26

A lot of WP courses leave out some very important aspects of the WP Editor. Even though I’m just getting started I wanted to spend a little time going over a part of WordPress that you’ll need to get comfortable with.

Check out lots more ways to use the Gutenberg editor in my course, How To WordPress.

Transcript Of This Video

It’s time to take a closer look at the WP editor. In December of 2018, WordPress gave us, after 15 years of using what’s now called “The classic editor,” a brand new editing experience. People call it “The Gutenberg editor,” and of course that’s what I’m featuring in this course. I’m going to take a deeper dive, and we’ll look at some of the features of the editor, and then I’m going to add some more content to my “Plant” and “Harvest” pages. Specifically, I’m going to add this cover image that you see over here, so when I’m scrolling the image stays fixed to the background and text scrolls over it.

For the “Harvest” page I’m going to add in this table over here. Tables are used when you need to present tabular data in rows and columns. But like I said before I do that I want to take a closer look at the Gutenberg editor, things that we haven’t looked at so far. I want to go over here to this little guy over here, and it’s a little information logo. It tells you information about this page. How many words has been have been used? How many headings? One, so far. Paragraphs, blocks, and what’s called a tree or a document tree structure that is the major components of the site being the title, and there’s only one heading tag used so far.

This information is really useful when it comes to search engine optimization. Anyway, I’m going to then– We don’t need that, so I can click out of that or get rid of it. What I want to show you is the options that you see over here, now you see where it says document? You can see it’s underlined over here. Up to now, we’ve been looking at blocks. No block is selected, so if I clicked into any block, you could see that the block changes and so forth, but let’s focus on documents.

“Document” means all the things that are pertinent to this particular document, if you think of this web page as a document. Which is what it is. These are the features or options that you have under documents, so “Status and visibility,” we know we can change these if we want over here, as far as it being visible or private or password protected, we could set that over here. The date it was published, if we want to move it to trash, we could do that. I’m not going to get into this permalink business right now, and it’s setting the URL for this page or customizing it. I’ll get into that when I talk about links in the next module.

“Featured image,” I’m not going to spend any time on that either because I use featured images for blog posts and not for pages, but you can. You can see it’s available over here. As far as discussion, by default, it’s not checked. Meaning, “Do you want people to comment on your pages?” I don’t think so. If you have a contact page, or a home page, or an about page, or services page, that’s not the place where you want people to comment. You’d want them to comment on your blog post, not here. By default, it’s not selected, and I would leave it that way.

The other option here is page attributes. There aren’t any, and by that, I mean if this were a different theme, you would see this option called “Page templates.” Many themes have more than one template, but this one only has one template, so there’s no options to drop down. But if you had other page templates, it would do things like control the layout of a page. For example, it might give you the option to do a full-width layout or maybe have two sidebars, or whatever. It just depends on the theme itself. Here there’s only one template, so there’s nothing to drop down. I’ll take care of that.

As we add plugins, we’ll also see that there will be other options here that will control, or set, or influence, or affect the document in totality. I’m not going to do that until we install a plugin or two. One thing you might like to do is do distraction-free editing, so for that, you can click on this little guy right over here, and the right sidebar has disappeared. You could also go over here to this ellipse and go over here to full-screen mode, and you’ll see “Wow, they’re not kidding.” The left and right sidebars are gone. You might like this.

It doesn’t do much for me, so I don’t bother, but you need to know it’s there. I’m going to go back here, and I’m going to go back here, so any combination of full screen or right sidebar or left sidebar, you can definitely get rid of those. You might recall that in an earlier video I toggled this. But if I de-select, what will happen? Every time I put my cursor in a block, a toolbar shows up at the top of the block, and I find that distracting. Let me go back to what I prefer, and that’s to put the toolbar at the top of the page.

So, that’s fine. One other option, let me go over here into “Documents,” is if I click over here– By default, you’ll be using the visual editor, that is when you insert your blocks. If you like to work with HTML, here you go. I do like to work in HTML, but that’s me. You don’t have to, obviously. So I will go back and use the visual editor. There we go. I’m going to skip through these, the only other one that I found interesting is over here.

If you don’t want, for example, the discussion option to show up in the document, de-select it over here, and it’s gone. Or you don’t want to show– You can see them on the right-hand side, they’re disappearing as I click through these. So that’s what the options section will do, like a “Preferences” for the document. I’m just going to do that, and that’s a pretty quick overview.

Now one last thing, after you publish something, if you want to unpublish it and put it back into draft status you can do it. In fact, it’s even telling you “Switch to draft.” If I click that, “Are you sure you want to do it?” I’m pretty sure. So now it’ll go back to being saved as a draft, and one way I know, that is you see it. It says “Publish” over here, so I know right off the bat this is a draft.

It says “Draft,” and there’s even another way I can tell if I go over here I will see that “Prep” now has the word “Draft” next to it. I could go click on “Prep” and publish it again, but here’s another thing I could do. Where it says “Quick edit,” it gives you some options here. I’m not going to get into this right now, changing the title and the slug and the publishing date, and things like that. Not gonna do that right here, but I am going to go right over here to “Status,” and it says “Draft.” I want to publish it, so I click on that. And voila, it’s been published.

Now I want to add the additional content to the “Prep” and the– I’m sorry, to the “Plant” and the “Harvest” page. I’m gonna go over here to the “Plant” page, and we’re gonna do that cover image, and I’m going to add it down below here somewhere. What I’m trying to get an inserter to work, and it doesn’t seem like I’m getting anything to work, so I want to select and make sure I have the column block. You see, the column block is just a block that holds two other blocks, and that’s what I want. I want to insert my content below the column block, so now I should be good.

Now, “Insert after.” Aha– That’s exactly where I wanted it. I didn’t want it to be inside this paragraph area, I wanted the block to be after the column block, and now I got it. We don’t need that anymore, so let’s get rid of that. I could search around for “Cover,” and it’s right over here, so we’ll do that cover. I’m going to take an image over here. Here we go. Drag her in over here, and this would be my wife. OK, perfect. Now I’m going to write a title, or just a little bit a text over– Here we go, “Write a title.” Now we got it. “Arlene at work.”

She’s looking. I could bold, italic– You get the idea for this text over here. So, let’s see if this is going to work the way I want. I click outside, and it’s not working. That is, the image isn’t staying in place, and it’s scrolling. Let’s see how to get this to work. I start scrolling, and I don’t see this working the way I want, so I have to go over here in the cover block and click on this over here. Now the background will stay fixed, and when I scroll, that’s what I want.

I can also change the opacity of the covers. You could do that. We can do this too, and we have some options here if you want to use them, that’s fine. I’ll leave it just like that. This is not the right color, but there isn’t a text option here, unfortunately, so I’ll use a slightly different opacity. There we go. Now that is done, I could update the page, but I’m not ready. Because I want to put the cover image on top of this column block. How do I do that? Drag and drop, as of now. This editor is new as of the moment.

If I drag it up here, let’s see if this will work. I can tell over here with this line it’s not going to go in the right place. I want it to go above the column block, and it doesn’t seem like it’s working. Let me show you what I mean by “Not working.” I click on this, and that’s not what I had in mind. I could do that, but that’s not what I want. I’m going to do the “Undo” process over here, and we do have this ability to take– to click on this little– See where it says move up? What do you know, I can click that, and I just clicked it once, and it moved into place.

So, that’s good. Now I’m ready to publish, or I should say update because it’s already been published. We’ll have a look, let’s go to have a look. We could do it this way, and perfect. When I scroll, you can see that the image stays in place. This is called a parallax effect when the image stays in place, and the text scrolls over it. That’s fine. Now, let’s do that “Harvest” table. I’m going to make my life a little easier, and I’m just going to copy this and keep it right there.

Let’s go to the “Harvest” page. Here we go, “Edit.” Now, what happens if you had to start a table from scratch? It’s easy to cheat and copy and paste and all that, but let’s say you started it from scratch. There is a block for that. I’m going to insert the block below this video, and if I click on “Video” let’s see what happens. No, I don’t want to play it. I want to do this, and I want to insert. There doesn’t seem to be any place to do– Here we go. It just took a second or two for it to all show up.

I’m going to click on that, and because I used “Table” recently, it’s right there. To create a table, it gets you started with two columns. I’m going to make it go to three columns, and we’ll leave– Let’s make it three columns too for the rows. If I want to give it a heading, that is that first column or the first row, have some more significance like a heading of the table, let’s say. All right, that’s fine. I’m going to then just put in some dummy content.

You may notice I’m just tabbing, or, in this case, I’m just putting my cursor in the cell like I’m doing this right over here. It’s pretty faint. It’s kind of hard to see all this, but it will automatically scale or resize based on the volume of the content that’s inside these cells. You don’t have to even worry about any of that kind of thing. Now, over here in the table block, I have an option to make this table a fixed width or to have it scale. I prefer to leave it like this, don’t toggle it, don’t have it fixed. That way, the table will size properly whether the user is on a desktop computer, or using a mobile device, or whatever.

It’s responsive, so leave it the way it is, I wouldn’t go changing that. I could also– Not advance, but I could also do some styling. Not too much in the way of styling here, but you can see I just changed the style. If I wanted to, for example, bold all of this I’m just selecting the words “Bold” and “Bold” again. So that’s how you start a table. Now, I don’t have a table to start, and I have one that’s already made. Since this table is not what I want, I’m just going to delete the table block.

So, “Remove,” and I’m going to paste in my table. I don’t even have to look for the inserter to be a table, and it’ll just recognize– That is, the editor will recognize that I’ve just pasted in a table. Again, if I wanted to change the styling of this to something a little different, I could do that. I’m going to leave it like this, and now I’m going to update what I have. I should have done one other thing before I updated. I’m going to move my table above the video.

Let’s see if I can drag and drop it. I couldn’t do it last– I just clicked on it, and there we go. So that’s fine. Now, again, because I made a change, I’m going to update. We’ll have a look. Perfect, so there you go. We had a deeper dive into the Gutenberg editor and then we added content to the “Plant” and “Harvest” pages.

All 6 Modules In This Course