4: Making Your First Page
Running Time: 15:29
Like any application, there usually is more than one way to do something. In building my first page that will be the home page you’ll see what I mean.
WordPress has 3 options when you create content. Save Draft, Preview and Publish (or Update) content. You’ll see that plus how to add and position an image in your page.
I also insert an image into the page and give you a very brief look at the Medial Library section.
Note: If you’re following along and trying this out make sure to use the stock theme, TwentySeventeen. You can learn more about themes, how and where to get TwentySeventeen in Module 3 – Themes.
Transcript Of This Video
Here I am on my prototype site, and I’m looking at the home page. Yes, it’s that terrible picture of me again, working in the garden. What I want to do is take that image and place some text around the right side of it, and make sure that this is going to be a quotation over here. That’s fine, maybe add a little bit of bolding, we’ll see. I want to make the first page. So, here I am on the site where I’m going to build the first page, which would be the home page.
There’s a couple of ways I can get to that page where you create the content, the editor. I could take the long way, and I’ll show you what I mean by “Long way” in a second. I clicked on the dashboard, and I went to “Pages,” I could go right over here to “Add new,” but I’m just gonna go over here to “All pages,” “Add new.” I’m deliberately showing that in WordPress when something’s important, there’s a couple of different paths to take and a couple of ways to get to what you want to– Where you want to be in order to create the content, in this case. That was the long way. Let me show you the short way.
The short way would have been either to click over here– The short way would have been to click over here. There we go, that’s fine. The first thing I’m prompted to do is to add a title, and I recommend that you always add a title. You could use a plugin to hide the title if you want to do that, and you would want to do that. For example, you wouldn’t want to have the word “Home” showing up on the page.
But when it comes to creating the content, always title the page in some meaningful way. “Home” is fine. What WordPress will do for you automagically is it will save this as a draft, in fact, it’s already done this for me, and it says “Saved” with a little checkmark next to it. To be sure, I’m now going to go over here to “All pages,” and we can see that “Home” is in draft status. Meaning that only I have access to this, it’s just a draft, and it’s not online. I can come back to it whenever I want, which is right now, to work on it.
I’m going to click either “Edit” or the actual link where it says “Home,” it’ll just take you to the same place. Let me start adding some content. I could just put in some words like “Content here,” but to watch me type all day– We don’t want to do that. It’s boring, and it’ll take forever, so what I want to do is copy and paste from a document into the editor. Now, when I hovered over this block, it gave me a set of tools that look a lot like a word processor. They’ll let me align the text to the left or center or right, and so forth.
I don’t want this toolbar over here. I want to get this a little bit out of the way. Now, this is my preference on working with this. I’m just going to go over here to the upper right-hand corner, way upper right, and do this toggle right over here. Now, this toolbar will be at the top, which I like. It’s much cleaner, and it’s out of the way, and that’s just the way I like to work with this. So, I said I wanted to paste all this content that I have into the editor.
The first thing I want to do is remove this block altogether. I could just put my cursor in at the end and go like this, and eventually get rid of it. But I could also do this. Go over here to this ellipse, vertical ellipse, and all the way down here “Remove block.” I’ve now deleted it, and that’s exactly where I want to be when I start adding my content.
I’m going to go over here, and I’m going to go over to “Copy.” I have a document right over here, and it’s already selected for me. How nice is that? I’m just gonna do “Copy,” and you’ll see what I’m going to do is I’m going to do Command-V, and every paragraph formed its own block automatically, which is nice. Now you can take any document, a Word doc, a Google doc, anything that’s text-based and you should be able to do just what I did. Hopefully, it’ll format real nicely, the way it did for me.
You could also copy and paste a spreadsheet into this. Anything that’s text-oriented or text-based copy and paste if that’s your preference, rather than just typing in longhand. If that’s the way you want to do it, that’s fine too. I’m going to take a look at this block right over here, and this is the first paragraph. If I go over here to where it says “Block,” you’ll see right over here it’s got this little paragraph icon. All blocks start out their life as paragraph, so that’s the default block in the editor. I’m going to go do a couple of things with this block. One thing I want to do is I can change the text size, so I can go to “Large.”
But it only changes it for the active block, so the first paragraph was the active block, and I don’t want it that large at all, so I’m going to go back to normal size. Another option I have is to change it by pixel sizes, so I could add pixels. I could do this. I’m going down. If you go negative, it would be small. If you go positive, you can see it gets bigger. I still don’t want that either, so I could click “Reset,” and that’s what I’m going to do.
I did that. Now, if I like drop caps– You might like drop caps, and there’s an easy way to do a drop cap. Of course, you’d only want to do that for the first paragraph. I don’t like drop caps, so I’ll get rid of that. Over here is an option to change the background color of this block, and I’m going to do that by just clicking on this over here. If I clicked on this over here, it would give me an option to choose any color I want, not these predefined colors.
I also want to choose a text color over here, and they give you a little warning sign– About some information here about it not being a sufficient contrast. I think it is sufficient contrast, so let’s see what we have. I’m going to go over here. You can see right now it’s updating. OK, good. Now that the updating has taken place– In other words, as you work and you’re still in draft mode it will save drafts for you, and it will update the draft. I want to take a look at this, so I’m going to click on “Preview.”
When you click on “Preview,” another tab is going to open up, and this is what I would expect. Previews, like we’re looking at here, are not on the internet, and they’re not published, they’re only available to me. I don’t have to worry about anybody seeing it, and it’s just for me as a preview. What I’m going to do now is I’m going to go back to the editor, and I don’t like this at all. That happens. You make a mistake, or you say, “No, this isn’t for me.”
So this is a very handy little tool right here, it’s the “Undo.” I’m going to click on this, and it should just step me right back in time to what I want, and that should do it. Now if I scroll down a bit, I see this over here is not a paragraph but a quotation, so I don’t want to leave it as a paragraph. If I go over here, I see the paragraph icon, and then it’s switched over to the little arrows going in two different directions. We call this the “Transform tool.” I’ll click on this, and you can see I could transform this paragraph block into a quote block, a heading block or a list block, and so on.
I am just going to click on the quote, and you can see visually it just changed. I also want to– Let’s take this block over here, select the entire block– Not both blocks, just this block over here. I’m going to do a better job of selecting here. I’m just going to select the whole thing over here, and then right over here I can bold this, and if I want, I could also center the text. Let me do that over here. It’s a little bit different than the prototype site, but that’s OK. That’s fine. I’m going to do one other preview real quick.
This is exactly what I expected. Finally, what I want to do is add the image. For that, if I hover over the spot where I want it to be, which is at the top of the page– Right over here I get this little inserter icon. By that I mean, you see where it says plus–? Right over there. It’s the same thing as this one over here. These are important in the editor because when I click on this what happens is all the available block options will show up.
There are blocks that are most used, and inline elements, and every one of these is different blocks. We’re going to look at some of these during this course, we’re certainly not going to do them all this video, but I want to go over to add an image so that you can see the block is a little bit different, obviously, than it was for a paragraph. To get the image, let’s see, I’m going to go to my media library. There is nothing in here because I haven’t put anything in my media library yet.
I’m going to close out of this, but I’m going to get that terrible image of me, and I’m going to go over to “Images.” Let’s get this out of the way, and we don’t need this now. For this, all I have to do is drag it right into there. Wow. So, that was cool. All I did was drag it into that area where the image block was, and it’s a little bit too big. Over here on the right where it says “Block,” now I’m working with an image.
Whenever you work with a particular block, you should know what kind of block you’re working in. If you don’t know, you can click into that block, and it says “OK, paragraph.” Or this one over here, “OK, quote.” It has some options over here, like “Style.” We’ll leave it this way, that’s fine. But I was working with an image, so back to the image I went, and I clicked on it. A couple of things to note. First, I’m prompted to give it an alternative text description. That’s what the “Alt text” is. It’s used for people who can’t see an image, but that alternative text is read out loud. It’s used for search engine optimization, and it’s used when people don’t want to or can’t download an image.
What you want to do is come up with some very descriptive text. Now, “Bud working” is not very descriptive here. It would have been, “A photo of Bud working in his garden.” Much more descriptive. You don’t have to do a storybook here, a couple of words or a phrase that will describe it will do the job. I’m going to scroll down now and take a look at the size, and this theme supports four different sizes. The size of the image will be determined partly by your theme.
But you might say, “I don’t want this size.” OK, well then you can change it by changing the width and height over here, you could do that. Or if you want to make it much smaller, 50% or you probably get the whole point. I’d like to reset it. The reason why I’m resetting it is because I want to do it the fun way. Why work when you can have fun? I’m just going to grab the side over here, and you’ll notice that the image is being resized, and it’s being resized proportionally. Which is what I want, because if it didn’t do that, it would look kind of strange.
Anyway, I’m going to type in a caption– No, I won’t. But here’s where I would type it in, and you can see that you can bold or italicize it, or you could make a link to it. But I don’t want to do any of that, so that’s fine. But wait a minute, my prototype site has the image on the left and text wrapping around on the right-hand side. That’s what I want. So, I click on this again– And that’s very important. Always know which block you’re working in.
Right here at the top, here are the options I have to work with this. I am going to– There we go. I clicked on this little icon over here, and the text wrapped around on the right. If I go way over here, the text will wrap around on the left. If I don’t want any wrapping, but I want the image to be in the center, I could do that. I don’t want that, and I want this. This is fine.
Now I’m ready to go. I don’t want to preview it anymore, and I want to publish it. Now when you publish it, it will be online. I’m going to click on “Publish.” What will happen is you’re going to have to click twice, so you clicked once which I just did, and I’m about to click publish again to make it go online. Publish is a double click. But before I do that, I wanted to show you this. You have some visibility options. By default, this will be available to the public, but if you want to make it private, you would click over here. If you want to make it password protected, you could click over here and then set a password.
This would only be a password protection for this one page, not your entire site. I don’t want any of those. I like the public option over here, so I’m going to fold this up. I also have this option over here if I want to schedule this at a future date because you couldn’t schedule it for a past date. That would be fine with me, and now I’m all set to go. I don’t want any of the options, and I want the default.
So here’s my second click on publish, and it tells me what the URL is, and it also tells me I could click over here to view it, and I could click over here to view it. Let’s do that. Not bad, this is pretty much what I wanted. In fact, it’s exactly what I wanted. It’s different than the prototype site, but it’s close enough, and it gives you an idea how to add an image to your page with text content.