Gutenberg Tutorial Helps You Manage Your Website

Gutenberg tutorial

The ability to manage your website is now at your fingertips. This WordPress Gutenberg tutorial serves as a guide for making changes on your website. Do you have exciting news to tell about your business or nonprofit? Congratulations! Create a post to share the information online. Do you want to change some outdated text or add recent photos? Log in and get started. This Gutenberg tutorial by Packerland Websites puts you in control. Follow these step-by-step instructions to create the look you want to present to the world.  The team at Packerland Websites created this Gutenberg tutorial to guide you through updates. Now it’s easier to change the content on your website.

Creating the Gutenberg tutorial

As website developers, we work with WordPress’ Gutenberg Editor all the time, but we know you don’t! That’s why we designed this tutorial to be simple and straightforward, especially for someone with limited knowledge of WordPress. We created a tool that clients can successfully use – no matter how tech savvy they are. However, this tutorial isn’t just for Packerland Websites’ fabulous clients. Essentially, we created this Gutenberg tutorial for everyone who’s learning how to manage a WordPress website.

  • First, we created easy-to-understand written directions.
  • Next, we added screenshots and images to illustrate what we’re talking about.
  • Then, we incorporated Quick Tips to offer helpful advice.
  • Lastly, we categorized tasks in the Table of Contents to help you find what you need quickly.

At Packerland Websites, we believe “Your Success is Our Success.” We want to see small businesses, nonprofits, and municipalities prosper. WordPress is the platform of choice for about 25% of websites on the internet. Because WordPress is so popular, we’re pleased to make this Gutenberg tutorial available to the general public. The tutorial is available to anyone who uses this robust platform.

Please let us know if you have ideas, edits, or suggestions for ways to improve this Gutenberg tutorial. Additionally, contact us if you are looking for help with digital marketing strategies. We can help you achieve your marketing goals through website design, SEO, content writing, and Facebook management.

WordPress 5.0 Update: What you need to know

On Dec. 6, WordPress released a major update to its website building platform. If you’re someone who regularly makes updates to the pages of your site or post regular blog posts, you’ll start to see some changes in the layout of your editing page. You can download the tutorial by clicking here or if you are still using the classic editor click the button below for that tutorial.

Classic Editor

The release of WordPress 5.0 introduced a new page editor: Gutenberg. Gutenberg introduces “blocks” or dedicated content sections that you can easily add and arrange to your web page. If your site has already updated to 5.0, you’ll notice that the content on your existing pages has been organized into a Classic block. The Classic block has all the same features and capabilities that the previous page editor did, but now it is just a part of a bigger picture. To this bigger picture you can add Paragraph blocks, Picture and Gallery blocks, Text Heading blocks, and more! There are even Layout blocks that allow you to add buttons or arrange your content into columns with ease.

If your site is already updated to 5.0 and using Gutenberg, you can access these new block features on any Page Edit page by using the plus sign in the upper left corner:

WordPress 5.0 update Gutenberg

If you click on a block to edit it, you will see more options appear just above the block. For even more settings, click the 3-dot icon at the end of the row of options:

WordPress 5.0 update Gutenberg

Once a block has been added, you can move it to a new position on your page by hovering your cursor over the block and clicking and dragging the block by the grid icon:

You’ll see that some of the familiar buttons on this page are not in their regular spots, but they haven’t left! The Preview and Publish/Update buttons are still in the upper right corner:

The Text/Visual options for viewing your content are now hidden in this 3-dot icon at the very top right of your screen:

WordPress 5.0 update Gutenberg

Just click the 3-dot icon, then select either Visual Editor or Code Editor:

WordPress 5.0 update Gutenberg

If you previously had content on your page, you’ll probably see that it’s been moved into a smaller editing area, which from now on will be known as the Classic Block. This has all the controls you’re familiar with, including the Add Link and Add Media buttons.

WordPress 5.0 update Gutenberg

If you can’t see these options right away, make sure that you are in Visual Editor mode (see previous image) and click inside the text editing area to start editing the text.

Packerland Websites is working on a new tutorial booklet that will explain what each of these blocks do and how to use them. For those of you who have been using the WordPress page editor regularly, we hope this quick guide will get you comfortable with WordPress’ new look and help you maintain the current layout of your website. If you’re someone who doesn’t often look behind the scenes of your WordPress site, don’t worry! We’ll take care of the updates and inform you of any changes that will affect your site as soon as we are aware of them. If you have any questions, please don’t hesitate to Contact Us. Packerland Websites is here to help in the ever-changing world of web!

Classic Editor