How To Add a Cover Image and an Inline Image to Your Post Using Gutenberg for WordPress

For the past few weeks, I've been sharing mini tutorials like: how to create posts and pages , how to add lists and how-tos, and how to incorporate widgets and embeds in the new Gutenberg interface. If you've been blogging using WordPress up until now, then you've been using the WYSIWYG (What You See Is What You Get) Editor and Gutenberg will feel very different.

Heads up! WordPress is forcing a roll out of the Gutenberg Editor on November 19th – so, you might as well learn to use it. And one of the newest features is a way to add a cover image and an inline image without all that extra manual coding!

Here's how to add a #coverimage and an #inlineimage to your posts in #Gutenberg for #WordPress. #blogging

How To Add a Cover Image and an Inline Image to Your Post Using Gutenberg for WordPress

Be sure to take a moment and install the Gutenberg plug-in editor. Here's how to add a cover image and an inline image to your posts in Gutenberg for WordPress.

HOW TO ADD A COVER IMAGE TO A POST

Log in to your WordPress blog.

Click on “Posts” in your WordPress dashboard.

Click on “Add New”. You should see the Gutenberg Editor.

Write your blog post’s title in the box labeled “Add Title”.

Write your post in the box labeled “Add Text or Type / To Add Content” in your Gutenberg Editor.

Now you can add a cover image to your post. This is a cool new feature that Gutenberg offers and involves no manual coding at all.

To add a cover image to your blog post, click on the spot where you want it to appear. And then click on “+” which will appear to the left or in the center top of the new block being created.

Big Fat Tip: You can also create new blocks by clicking on the  
“+” in the upper left hand corner. There's also some  “Undo” and “Redo” arrows there. Plus, an icon of an “i” with tons of information including: a word count, number of headings, number of paragraphs, number of blocks, and a breakdown of your title and headers.

Use the search bar to look for the Cover Image option or scroll down and click on the arrow next to the Common Blocks option. This will open up icons representing all of the common blocks available to you currently.

Click on the icon that looks like a picture with a broken border around it (Cover Image). You can either upload an image from your computer or add an image from your library.

You can then add text to the cover image by typing in the “Write title…” area. You can also use the toolbar on the top of the block to change the alignment of the image.

In the right sidebar, you can set a fixed background for the cover image, change the color of the overlay, and set the background opacity.

Big Fat Tip: Once published, the cover image will not be a pinnable image. Keep that in mind when you're planning graphics/images for your blog posts.

Click “Publish/Update” on the right side.

HOW TO ADD AN INLINE IMAGE TO A POST

Including an inline image within a post is something that a lot of bloggers have wanted to be a simpler process for a while. Before, you had to manually code or mess with alignments to create this look. Now, you can simply add an inline image block right in the post.

To add an inline image in your blog post, click on the spot where you want it to appear. From here, there are two ways to add an inline image. The first option is to click on “+” which will appear to the left or in the center top of the new block being created.

Use the search bar to look for the inline image option or scroll down and click on the arrow next to the Inline Elements option. This will open up icons representing all of the inline elements available to you currently.

Click on the icon with an image and lines of text around it (Inline Image). You can either upload an image from your computer or add an image from your library.

Add text in the spot next to your inline image.

You can use the toolbar in the block to change the alignment of your inline image, add formatting to your text, and add links.

In the right sidebar, you can set a Drop Cap (a larger initial letter at the beginning of the text, set the font size, and change the font colors.

Click “Publish/Update” on the right side.

3 Shares