So, you’ve got a new site and you’re ready to work with it, but not ready to read through a long tutorial? You’re in the right place.
This collection of videos will guide you through the basics, showing you the simplest ways to do what you need without getting bogged down with all the options you have to do them. If you do want a detailed run-down of the “block” system of Gutenberg, we cover them all here.
Table of contents
Adding a Post or a Page
Pages are for top-level information, like your Mission or Staff page; posts are best for things like press releases, but also for any info with “parent” info, such as a profile for a single staff member. Try to lean toward making posts whenever you can.
The process of creating posts and pages are pretty similar, so we’ll use a post as an example here.
You’ll start on your dashboard. Hover over “Post” and click “Add New.”
Next you’ll fill out the body of your post, as well as the settings for the post, like what its category is. You can do this in any order.
Title and body
We’ll start with filling out the content of the post.
The body of your post will be made up of “blocks.” Adding blocks is extremely easy with Gutenberg, and you have a wide variety of them available to you to spiff up your posts and pages. We go over all the basic ones here, so we’ll just stick with the two most important ones: text and images.
Adding text blocks
Adding text blocks is as easy as typing in a Word or Google docs document: just start writing! Each time you hit “Enter,” a new text block will automatically be created.
As you saw in that video, each block has its own menu that will allow you to edit the contents of the block.
Adding image blocks
Adding image blocks works in much the same way. Keep in mind here that there are multiple ways of adding blocks; we’re just going to show you one method to save time.
Start by selecting and existing block, then hit “Enter” to create your new one. Then, you’ll usde what’s called a “slash command” to bring up the menu of block types. Then we’ll select the Image block.
A “slash command” is just what it sounds like: typing a forward slash ( / ) to bring up a menu of options.
If you want to know more about slash commands or other ways of selecting and changing block types, we cover them in a ton of detail here.
If you want to learn about Gallery blocks and other beautiful ways of displaying media in your posts, we have a detailed run-down of those here.
Post and Page settings
The content of your post or page is just half the battle: you’ll also need to fill out the settings, such as selecting its Categories or deciding on how comments will work.
Categories are crucial for making your Updates sections relevant and clean, so don’t neglect them! It’s best to limit yourselves to a small, set number of categories to ensure the blog menus don’t get too long and complex.
Couple key notes here:
- Do not use “Uncategorized” as a category. Always make sure to uncheck that box. It’s there to ensure that each post has at least one category, but it looks really sloppy if you ever use a theme that displays the categories prominently.
- Setting a category is, essentially, deciding which page you want it to show up in. Let’s say your site has a Press Releases setion and a page that displays all your Climate posts, and you have a post is both a press release and covers your organization’s climate work. You’d go ahead and check both of those off, so the post appears in both places.
Categories can be found in the sidebar menu of your post, under the “Document” tab. Select the ones you want and that’s it!
Tags function like categories, but are less mandatory. Your site’s theme may feature them prominently, or not feature them at all. If you do need or want to use them, they’re right under Categories. You can be less strict here about limiting yourself to a small list of tags, but less is ususally more!
Typing a comma after a tag will automatically set it and let you start typing the next one.
Set a featured image
Once you’ve set up categories and tags, you may decide to set up a featured image. This may be optional depending on your theme. That’s also located in that “Document” tab in your sidebar menu.
You may also want to write an excerpt. Some themes won’t have a place to display these, but in case yours does, this is how to do it. Depending on your preferences, this may be either literally grabbing a sentence or two from the piece, or it may mean writing a kind of summary of the article.
Preview and publish
When you’ve done all that, use “Preview” button to make sure it looks ok. This is extra important if your theme displays titles over an image: you’ll want to make sure the title shows up against the colors of the image.
Once you’re happy with it, you’re ready to hit “Publish”!
Editing a Post or a Page
You can always go back and make edits to posts and pages you’ve already published. The process of editing a published post or a page is very much like the process of writing one. We’ll go over a couple of the most common edits you’ll be making to your existing content; we’ll use posts again for our example.
Go to that same dashboard and hover over “Posts,” then click “All Posts.” From there, you can either search the database to find the post you want, or just find it in the list.
Editing images and galleries
You may have both galleries and single images in existing posts and pages. Since we already covered creating images above, we’ll cover editing galleries here.
Let’s say you want to add an image to an existing gallery. You’ll first click on the gallery block, then click the little pencil in the block menu to edit.
Once you’re in there, you’ll see quite a few options for editing your gallery. You can even edit individual images in the gallery by clicking on them.
You may decide to add a whole new image block entirely (or a block of text, or a header block, etc etc). The logistics of doing that are also covered here, but here’s a quick video of adding, as an example, a video block.
There are multiple ways to add blocks other than the way we use in the video. For example, as you’ve learned in this article, you could just select a block and hit “Enter” at the end of its content, and a new block will be created underneath. Again, all covered here, but use whatever works for you.
When you’re happy with the changes, just follow the “Preview and publish” routine above.
Whew. That’s probably enough for now. We say this a lot, but: experiment! There’s very little that can go wrong. 🙂
And do make sure to check out all the different block options in our guide here. It’s not a complete list of every single block in Gutenberg, but it’s more than enough to get your imagination going.