How to Create Gorgeous Blog Posts with Gutenberg

 

 

If you haven’t noticed, with the latest WordPress update (WordPress 4.9.8) you now have the option to try out the brand new Gutenberg Visual Editor.  One of the most common questions I get as a custom blog designer is how to set up a blog post and use galleries, columns, etc.  Well, with the latest update, you no longer need an outside plugin to create fabulous fashion and interior posts.  

I’m going to walk you through the basics of Gutenberg so you too can get started getting gorgeous posts fast!  Watch my video below or keep scrolling for a step by step guide! 

https://youtu.be/xDiiS9YWvPM

First, make sure that you have the Gutenberg plugin activated and installed.  You can follow my tutorial here to see how to install a WordPress plugin, just search for Gutenberg in the plugin directory, activate, and install it.  

To create a new posts, in your WordPress dashboard, just go to Posts > Add New.  This will take you to Step 1.  

Step 1: Add post title

Step 2:  Select content block

Using the plus sign icon in the upper left corner of your post editor, select the type of content block you want to start with.  You can select basics like a paragraph, header text (bolder and bigger than regular text), an image,  a gallery, or columns.

You can add cool elements like a cover image which is a full-body image with text overlaid on top of it.  To do this, just click on the Cover Image block and it will be added to your page.  

Some of the other block options include the Paragraph block, which is simply plain text, a Header block which is bold header text, a gallery or a column.  I will go into more detail in my video above how to edit each block but for text, we’ll just the Paragraph block as an example.  You can adjust your text size and add a colored background by clicking on the block settings on the left-hand toolbar.

Step 3:  Add Images or Galleries

You add an image the same way as you added images in the Classic Editor, simply select the Image block from the content blocks in Step 2 above. If you want to add a link to your image, so that when someone clicks on your image it will direct them to a new website, simply upload your image, then click on the image.  Click on the pencil icon that appears, and then, in the Block tab on the right, scroll down to Link Settings. Choose “Custom URL” from the Link To dropdown, and then paste your link in the Link URL box,. 

You can easily add links to single images as well.

Add link to an image in your post:

To add a link to an image in a post, simply hover on your image in the post dashboard. On the toolbar that pops up, click on the link icon.

Then, you’ll just type or paste in the link you want your image to link to, and click the arrow to apply.

And if you want the link to open in a new tab, click on the up and down arrow and you can toggle the “Open in a New Tab” button on and off.

One great plus in the new Gutenberg Editor is the ability to add galleries.  So to add a gallery, click and add the Gallery block from the content blocks. 

Once you have uploaded all of your gallery photos, you can select the number of columns you want to use in your gallery by going to the Gallery Settings toolbar on the right.  Simply type in the number of columns you want your gallery to have here.  Above is an example of a 2 column gallery. 

You can change the number of columns and the gallery will adjust.  Above is the option of a 3 column gallery.  You can see one post drops down below.  Feel free to experiment! 

You can also add captions to your images.  Just hover your mouse over the image and type in your caption where it says “Write caption”.  Also, in the right-hand toolbar you can select the Crop Images option which will uniformly crop your images.  You can add a link to the caption however by highlighting the caption, and clicking on the link icon to add your caption:

Add Links to Gallery Images:

If you want to add links to your galleries, you can install the Gallery Custom Links plugin here.

To have your image link to another website, simply click on the image in your post editor, and click on the pencil icon that pops up.

Simply click on the image from your gallery that you want to add a link to. Then, in the right hand panel, paste your link URL and you can also choose if you want the link to open in a new window. Click the blue Update Gallery button to save.

Below is an example of a 3 column gallery with 4 images in action!

Step 4:  Add columns

The columns feature in Gutenberg is still in the beta, or experimental, stage so it’s not that robust right now, but you can add two columns by clicking on the plus sign in upper left corner (add content block) and scrolling down to Layout Elements.  Just click the columns element and 2 columns will be added to your page.  Then click the plus sign to add either text or an image to your column. 

Step 5:  Add link to text or Shop the Look widget

This is nothing new in Gutenberg but most bloggers want to be able to add a link to text to link back to other sites or photo sources.  To do this, simply highlight the text you want to add a link to, and click the little link icon that pops up.  You can paste in your link and click apply.  You can also specify if you want the link to open in a new window or now. 

You may also want to add a Shop the Look widget to your blog post.  To learn how to create a Shop the Look widget, you can view my post here.  To add your Shop the Look widget to your blog post, just click in the upper left corner of the post editor to add a Custom HTML block.  And then paste your Shop the Look code into the HTML box.  

Step 6:  Set your post category

Same as in the Classic Editor, you can set a category or categories for your post.  Make sure you are on the Document tab in the post editor toolbar on the right side of the page.  Click to expand and select your categories.

You can also further categorize your blog post by adding tags.  Tags narrow down your categories even more.  So for example if you had a post categorized with “Holidays” you could add the tag “Gift Wrap” to a post about gift wrapping.  Just type in your tag in the Tags box and click Enter to add a new tag.  

Step 7: Add Featured Image

Just like in the Classic Editor, you will want to add a Featured Image to your post.  This is the image that will show up in your homepage and archives excerpts as well as post sliders if you have one.  Make sure you are on the Document tab in the post editor toolbar on the right side of the page.  And just click to upload your Featured Image. 

And that’s it!  Keep in mind that this is a brand-new plugin and thus in the experimental, or beta stage still.  I cannot guarantee how the posts will translate if you are using Mailchimp or Feedburner, etc. to deliver blog posts via email, and in other formats.  This is just meant to introduce you to Gutenberg and what it can do.  Subscribe to my Youtube channel for updates and of course follow my blog as I will be keeping up with updates to Gutenberg and new features that you can add! 

*Update:  Currently, Gutenberg is not compatible with Easy Recipe and other recipe plugins.  Easy Recipe states that they will be working on a plugin update compatible with Gutenberg so keep an eye out for that and update when prompted!