Gutenberg Website Update Tutorial

TO LOG IN

Go to your website, and at the end of the URL type /YourNewLoginPageName. Then log in with your user name and password. You can reset your password if you have lost or forgotten it.

Once you are logged in, you will arrive at a page called “Dashboard.” The Dashboard is the control panel of the website. This is where you create and manage your content and see an overview of the details of your website. You have access to important menu options, like Posts and Pages, in the sidebar.

Quick Tip: Examples of pages are “Home,” “About Us,” and “Contact Us.” Examples of posts are information about upcoming events, stories about what’s happening in the organization, etc.
Quick Tip: Creating a Post or Page is similar to creating an email. An email has a subject line; a page/post has a title box. Both have a text box. Instead of a send button of an email, you’ll find a Publish or Update button.

---

TO UPDATE A WEBSITE PAGE

Mouse over Pages in the left sidebar, and select All Pages. You will see a list of all website pages. Choose a page to edit, mouse over the page title and click Edit. The page will open, and you can make changes. To view the changes, click Preview. In the upper right-hand corner, WordPress will show a preview of the Page in a new tab. To save changes, return to the Edit Page tab and click Update/Publish.

---

TO CREATE A NEW POST OR PAGE

Mouse over Pages or Posts, found in the left sidebar, and select Add New. This will take you to the page editor where you can create your page or post.

If you have a static Home page, you will see “-Front Page” on your page list. This is your Home and/or Landing Page of your website. Another page with a title extension will be your blog, and the extension will be “-Posts Page.” This is NOT where you post your blogs; you do that in Posts. This “-Posts Page” will capture your posts and put them in chronological order.

---

TO TITLE YOUR POST OR PAGE

Fill in a few words in the Title block. This title will appear on the website, so make sure it’s what you want your audience to see. It can be edited at any time.

---

TO ADD TEXT IN PARAGRAPH BLOCK:

Click inside the block. Copy and paste your text from a document saved on your computer or type new content inside the paragraph block. Click the Save Draft button on the right sidebar. As a back-up, Gutenberg will auto-save your work.

---

TO EDIT TEXT IN A PARAGRAPH BLOCK

The text block is similar to a Word document. Editing options appear just above the block. Formatting options include bold, italic and linking.

Quick Tip: To search for a block to add something other than text (images, PDFS files, lists, etc.) you can access the block features by using the plus sign “+” icon in the upper left corner.

For even more settings, click the 3-dot icon at the end of the row of options.

Quick Tip: Formatting should be removed from a block of text before the text is uploaded into the text box of a website. Microsoft Notepad is a good tool to use for this process. Paste your text into Notepad, then copy and paste it into the website text box. To copy and paste, highlight the text you want to upload, click Copy under the Home tab or use a shortcut like Ctrl and C or right click the mouse and choose Copy. To Paste, click Paste under the Home tab or Ctrl and V or right click and Paste.

---

TO PREVIEW YOUR DRAFT

In addition to Auto Save, you can save your work as you go by clicking the Save Draft button in the upper right corner. Click the Preview button to see how your Page or Post will appear to our audience.

---

TO UNDO YOUR WORK

The Undo button is the arrow next to the plus sign “+” icon in the upper left corner. If you make a mistake or change your mind about your text, click the undo arrow icon to undo what’s been done.

---

TO VIEW YOUR CONTENT STRUCTURE

The Content Structure button in the upper left corner shows the number of words, headings, paragraphs and blocks on the page or post.

---

TO CUSTOMIZE CONTENT

The right sidebar has additional formatting options to customize your content by block: alignment, font size, background color, and text color. Click the down arrow by Text Settings and Color Settings to see the additional options.

Quick Tip: Different blocks allow for better control of styling in each block. For example, you can highlight the text in a specific block and center the text, while formatting the other text blocks to align left. The centered text will stand out from the rest for added emphasis.

---

TO ADD IMAGES

Choose the image block from the “+” icon on the left sidebar (See the Quick Tip for adding blocks). Choose a photo or image you’d like to insert, and save the photo or image as a file on your computer. Do not use a copyrighted photo or document from another source. Just because you find something on the Internet doesn’t mean it’s free to use. Use of copyrighted materials, including photos or text, can land you in trouble and can be a costly mistake. Just don’t do it!

Make sure the photo is sized appropriately for uploading. High resolution photos are large files that take longer to upload, take up more space in your library, and are inefficient in providing a positive end-user experience.
Quick Tip: Best practice is to presize your image to the final size you want to display on your website. This will make inserting images easier and faster. Resolution of 400-420 pixels wide or tall works well for a primary image in a Page or Post

FOUR WAYS TO ADD AN IMAGE

1. Drag and drop it onto the page. The photo will appear on the Page or Post.
2. Click the Upload button, navigate to the folder where the image is stored and click Open. The photo will appear on the Page or Post.
3. Click the Media Library button and click on the image you want to add. Click Select. The photo will appear on the Page or Post.
4. Paste or type the URL of the image. The photo will appear on the Page or Post.

Quick Tip: You can upload .jpg, .png, and .gif image files to the Media Library. Acceptable audio files include .mp3, .m4a, .ogg, and .wav. Video files can be uploaded as well, but consider using a host like YouTube and embed the video in the website.
Quick Tip: The Media Library contains images you’ve uploaded. You only need to upload an image once, even If you want to use it in multiple places. Do not delete an image from the media library that is displayed on a Post or Page. If you delete it from the Media Library, the image will be removed from the Post and Page as well.

---

TO FORMAT IMAGES

Once an image is inserted on the page, formatting options appear above the image block. You can change alignment, link to a url, or replace the image. For more editing features like writing a caption, image title, and adding alt text, please see the Add Alt-Text section.
At the right sidebar, you can change the size of the photo or link the photo. You can change the size of the photo by grabbing a blue circle on its edge and dragging in or out.
The advanced options for the Image Block are alignment controls plus “wide width” and “full width.”

---

TO MOVE AN IMAGE

Click on the image you want to move, and click on the Align Center icon above the photo. The image will move to the center of the Page or Post, and Move Up and Move Down arrows will appear to the left of the image. Click the Up or Down Arrow until the image is placed where you want it to be.

---

TO ADD ALT TEXT

Alt Text is important because it informs search engines what the image is and assists any sight-impaired Internet users who visit your website. Access the Alt Text box on the right sidebar. As an alternative, you can add Alt Text on the Image Details page. To access Image Details, click on your photo and click the Edit Pencil icon above the photo. Type your keyword or phrase into the Alternative Text box and Save.

Type Alt Text that describes your image and incorporates your keyword or key phrase.

---

TO INSERT A LINK

You can insert a variety of links. You can link to pages on your own website, other websites, or documents you want your visitors to access. To insert a link, highlight a word or series of words in the text box that associates with the meaning of your link. After highlighting the word/words, click the link icon above the text box.

In the link box that appears, paste the URL of your link. When linking to an existing page of your website, you can search for the link by typing keywords into the search box. A drop-down menu will appear with options. Click the appropriate option.
To the right of the search box, click the 3-dot icon to access Link Settings and toggle to Open in New Tab. Open in New Tab is important because your website page will remain open to visitors when they click a link that takes them to view something else. You don’t want to send your visitors away! Here’s an exception: Links that go to pages on your website should not open in a new tab.
Click the bent “Apply” arrow. Once your link is uploaded, the link should be highlighted.

---

TO INSERT A LINK TO A PDF

Linking PDF to text (1 of 2 ways suggested):
Upload the PDF to the Media Library:

1. Go to the Media Library tab in the left menu, and in the drop-down menu, click Add New.
2. Drag and drop your media file from your computer, or click the Select Files button, navigate to the folder where the image is stored and click Open

Go the the main Media Library tab, and your recently uploaded file should be at the top of the page. Click on the file, and copy the URL of the file. Go back to the page/post where you would like to insert the PDF. Highlight the word/text, and click the link button. Paste the URL in the box and click the apply arrow. In order to make the PDF open in a new window, click the down arrow in the URL box, and click “Open in New Tab.”

Linking PDF via block (2 of 2 ways suggested):
Click on the page where you want to insert the PDF. Click the plus sign “+” icon in the upper left corner (See Page 6). Select the File Block that resembles a file folder. A file image will appear on your page. Drag and drop a PDF onto the page or navigate to a PDF saved on your computer to upload it onto the page. At the Media Library, click Select.
In the right sidebar, toggle to Open in New Tab (See Insert A Link for more information.) Choose the appropriate download settings of showing or hiding the download button.

Quick Tip: Upload PDFs, not Word documents, because PDFs download faster for your visitors. Also, they are more difficult for your visitors to edit.

---

TO EDIT TEXT IN A HEADING BLOCK

A Title Block is the place to enter a Title that your audience will see at the top of the page or post. In contrast, a Heading Block is used to add headings above paragraphs of text. A Heading Block creates subheadings in the body of the text to break up long sections and highlight important keywords and phrases.
A Heading Block text has a bigger default font size than ordinary text. Editing options appear just above the block and by clicking the 3-dot icon. The right sidebar has additional formatting options of level and alignment. Click the down arrow by Heading Settings to see the additional options.

---

TO ADD MORE SPACE BETWEEN BLOCKS

A Spacer Block will add space between blocks. The right sidebar has space to enter the height in pixels, or you can click the blue dot at the bottom edge of the space box and drag it to the desired size.

TO ADD SPACE BETWEEN SENTENCES

When you type text into the post or page and click Enter, a new paragraph block appears. To avoid creating a new paragraph while adding space between sentences, hold the Shift key down, and then press the Enter key.

---

TO MOVE A BLOCK

Move a block to a new position on your page by hovering your cursor over the block. Click and hold the 6 dots and drag the block to where you want it. As an alternative, use the Move Up and Move Down arrow to the left of the block. Click the Up or Down arrow to move the block.

---

TO ADD A SEPARATOR LINE

You can separate text and photos by placing a line between them. In the Classic Editor, this was known as an HR or spacer line. Place your cursor where you want to add a line, and click the plus sign “+” icon. Select the Separator block from the menu. At the right sidebar under the Block tab, you can click the down arrow at the Styles tab. Here you can select a short line, wide line or dots.

---

TO ADD A LIST IN THE LIST BLOCK

This block is useful when you want to add bulleted or numbered lists to your page. The options are unordered and numbered lists. Click on the page where you want to insert the list. Click the add block plus sign, and choose List. Type or paste your copy into the list.

Don’t overwhelm your readers with too many items in a list. A list should contain 7 or fewer points. Seven is the maximum number of points that readers will remember.

---

TO PUBLISH YOUR DRAFT

The Publish button is located in the right sidebar when the Document tab (not the Block tab) is selected. Several publishing options appear in the sidebar. This is where you can select a Featured Image for a blog post and Categorize your article. You can publish the draft privately for your viewing only, password protected for security, or publicly for the world to see.

---

TO CHOOSE TEXT/VISUAL OPTIONS

The Text/Visual options for viewing your content are hidden in this 3-dot icon at the top right of your screen. Click the 3-dot icon, then select either Visual Editor or Code Editor.

Never delete anything in brackets [ ]. The text inside brackets is known as short code. Unless you are familiar with editing short code, it’s important not to change it.

---

TO EDIT CONTENT IN A CLASSIC BLOCK

If the content on your page or post was created before December 2018 (before the launch of the Gutenberg editor in WordPress Version 5.0), the content has been moved into a smaller editing area called a Classic Block. This block has all the controls you’re familiar with, including the Add Link and Add Media buttons. 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.

This concludes the Website Update Tutorial prepared by Packerland Website for the WordPress Gutenberg Editor. Thank you for using this tool. We hope you find the tutorial beneficial in maintaining your website and reaching your internet goals. “Your Success is Our Success.”