Follow

WordPress Gutenberg: Basics

  • Applies to: All Service Types
    • Difficulty: Easy
    • Time Needed: 10
    • Tools Required: AccountCenter access

Overview

Gutenberg is the latest editor for WordPress. Previous renditions of the WordPress editor occasionally required knowledge of HTML and CSS to build a post or page. Gutenberg was created to help ease the process of website building with it's use of "blocks".

In this article, we will go over some of the basics of what Gutenberg has to offer.

Instructions

  1. Log into the wp-admin dashboard.
  2. Click on Posts or Pages. Then click on Add New.

    wp-1.png

  3. In the Gutenberg editor you will notice:
    • The "Add Title" block to input a title for your page/post.
    • An additional block below to input content.
  4. On the right hand side you'll see various options to control:
    • Status & Visibility: Make the post publicly viewable.
    • Categories: Select a category for your post.
    • Tags: Add relevant tags.
    • Featured Image: Add a featured image.
    • Excerpt: Write an optional excerpt.
    • Discussion: Allow/disable comments.

      wp-2.png

  5. Click on the wp-1.png icon. A drop-down will appear to edit your page/post:
    • Hide Block Settings: Hide the drop-down.
    • Duplicate: Create a copy of the current block.
    • Insert Before: Add a block before the currently selected block.
    • Insert After: Add a block after the currently selected block.
    • Edit as HTML: Edit the block in HTML form instead of blocks.
    • Add to Reusable Block: Add to a library of blocks that can be instantly recreated at a later time.
    • Remove Block: Delete the currently selected block.

      wp-4.png

  6. Clicking on a block will allow you to add text. In addition selecting:
    • wp-2.png to add an image.
    • wp-3.pngto add a gallery.
    • The menus on the right-hand side will change to allow you to edit font size, type, and color.

      wp-5.png

  7. Clicking on the wp-2.png icon will prompt an option to:
    • Upload: Add an image from your computer.
    • Media Library: Add an image previously uploaded to your media library.
    • Insert from URL: Add an image from online using its URL.

      wp-6.png
      .
      • Example 1: We've uploaded a photo from our computer. You will also have the ability to add text below the image.

        wp-7.png

      • Example 2: We've uploaded multiple images to make a gallery. You can also add a caption to each photo.

        wp-9.png

  8. One of the defining features of Gutenbergy is the ability to is easily move/re-order your boxes through drag & drop.
    • In this example, we are grabbing this text block. The blue line indicates where we are going to drop the block.

      wp-n-1.png

    • You'll now notice the block we dragged is now in between the image and gallery we uploaded.

      wp-13.png

  9. That covers the basics! Gutenberg provides a more user-friendly experience and has helped lower the learning curve required for building your website! For more information on WordPress in general feel free to review the Resource links below!

Resources

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk