Hey, y'all! I'm Cris.
  • Say Hello
  • Check Me Out
  • Work With Me
  • Find Out More
  • Shop My Favorites
  • Home
  • About Me
  • Contact Me
  • Sponsorships
  • Privacy Policy

Kiss My Tulle

Real Life in a Perfectionist World

  • Capsule Wardrobes
    • Fashion
    • Beauty
  • Travel
    • Disney + Marvel
    • Marvel Bounding
  • DIY + Tutorials
    • Home Improvement + Design
    • Food + Cooking
    • Health + Fitness
    • Holidays
  • Pregnancy + Parenting
    • Mommy
    • Daddy
    • First Trimester
    • Second Trimester
    • Third Trimester
    • Baby
    • Toddler
    • Kid
  • Weddings
    • Our $5,000 Wedding
    • Ceremony
    • Reception
    • Honeymoon

Blogging, Gutenberg · October 23, 2018

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.

https://www.kissmytulle.com/2018/10/add-audio-video-gutenberg-wordpress.html

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.

Sharing is caring!

  • Share
  • Email
  • Print

Posted In: Blogging, Gutenberg · Tagged: blog, Blogging, Gutenberg, How To, tutorial, WordPress

You’ll Also Love

The Best Accounting Program For Bloggers
My Top Five Favorite Networks That Pay New Bloggers To Post
Cheetah Print Kid’s Shoes Using My Cricut + EasyPress Mini DIY

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recipe Rating




This site uses Akismet to reduce spam. Learn how your comment data is processed.

Next Post >

How To Add Audio and Video to Your Post Using Gutenberg for WordPress

I'm Cris. I live in Alaska with my husband, two kids, and two cats. I love sleeping, Disney, Marvel, and fries.

Kiss My Tulle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Web Stories

Work With Me

  • Sponsorships
  • Contact Me
  • Find Out More
  • Press
  • Privacy Policy

Shop My Favorites

  • Travel Essentials
  • Capsule Wardrobes
  • Home Decor Finds
  • Pregnancy Must Haves
  • DIY Tools

hey, y'all!

I'm Cris. Kiss My Tulle is filled with humor, down-to-earth advice, true parenting stories that are equal parts funny and horrifying, and some swearing while tackling real life in a perfectionist world. Stick around!

Disney + Travel

  • Travel
  • Disney + Marvel
  • Marvel Bounding
  • Honeymoon

Being A Mom

  • DIY + Tutorials
  • Pregnancy + Parenting
  • Capsule Wardrobes
  • Food + Cooking
  • Home + Life
  • Home
  • About Me
  • Contact Me
  • Sponsorships
  • Privacy Policy

Copyright © 2025 Kiss My Tulle · Theme by 17th Avenue