Website Update Tutorial

This is an introductory website update tutorial for use with WordPress websites. A great thing about WordPress is it’s a very user-friendly content management system which allows room for creativity. Our purpose is to provide a website update starting point for routine changes. There’s two different ways to update a website. The most current version is Gutenberg, which is explained in the following tutorial.

You can download the tutorial by clicking here or watch a demonstration from YouTube by Packerland Websites. If you’re still working with the Classic Editor or using Classic Blocks, click here for the WordPress Classic tutorial.

Classic Editor


HERE’S HOW TO START YOUR WEBSITE UPDATE: Go to your website, and at the end of the URL type /login. Then log in with your user name and password.

log-in screen for website update

 

Once you are logged in, you will arrive at a page called “Dashboard.”

 

Dashboard screen for website update

 

Quick Tip icon
Quick Tip: Posts and Pages are treated the same when performing updates. 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: When updating a Post or Page, think about it as if it’s an email. Both an email and a website update have a subject line and a text box. Instead of a send button, you’ll find a Publish or Update button.

FOR A WEBSITE UPDATE ON A PAGE: Mouse over Pages, found in the left sidebar, and select All Pages. Here you will see a list of all website pages. Decide what Page you’d like to edit. Mouse over the page title and click Edit. The page will open, and you can make changes. To save your changes, click Update.


To Create A New Post Or Page: Mouse over Pages, 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.

 

WordPress Dashboard with arrow pointing to Posts

Quick Tip icon

Quick Tip: 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.

 

 


ADD TEXT TO PARAGRAPH BLOCK: Click inside the block where you want to make the addition or change your text. Copy and paste or write text inside the paragraph block. Click the Save Draft button on the right sidebar. As a back-up, Gutenberg will auto-save your work.


Quick Tip icon

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.

 

 

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, linking and strike-through.

 

 

Quick Tip icon
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.

Quick Tip: Reusable blocks are a convenient way to use the same block on multiple pages.

 

 

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

 

 

 

 

TO EDIT TEXT IN A HEADING BLOCK: A Heading Block is used to create subheadings in the body of the text. A Heading Block text has a bigger default font size. 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 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, heading, paragraphs and blocks on the page or post.


To Customize Content: The right sidebar has additional formatting options to customize your content: 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 icon

Quick Tip: Different blocks allow for better control of styling in each block. For example, you can highlight the text in a specific block by centering the text while using align left for the other text blocks.


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, click Shift and Enter at the same time.

 


TO ADD SPACE IN A SPACER BLOCK: This block will add space between blocks. The right sidebar has space to enter the height in pixels, or you can click the bottom edge of the space box and drag it to desired size.

 

 

 

 


 

TO ADD IMAGES IN THE IMAGE BLOCK: Click on the page where you want the image to appear and choose the image block from the “+” icon on the left sidebar. 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 icon

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.
  2. Click the Upload button, navigate to the folder where the image is stored and click Open. The photo will appear with a checkmark in your Media Library. Click the Select button in the bottom right corner of the Media Library
  3. Click the Media Library button and select the image you want to add. Click Select.
  4. Paste or type the URL of the image

 

 

Quick Tip icon

Quick Tip: The Media Library contain 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.

 

 

Once an image is inserted on the page, formatting options appear above the image block.

 

 

You can change alignment or select the pencil icon to write a caption, image title, and alt text. The Alt Text box is on the right sidebar, also. Alt Text is important because it informs search engines what the image is and assists any sight-impaired Internet users who visit your website.

At the right sidebar, you can change the size of the photo or link the photo. You can also change the size of the photo 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 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.

 


Quick Tip icon

Quick Tip:Don’t overwhelm your readers to 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 MOVE A BLOCK: Move a block to a new position on your page by hovering your cursor over the block and clicking and dragging the block by the grid icon:

 

 

 


 

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 associate 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!

Click the bent “Apply” arrow. Once your link is uploaded, the link should be highlighted.

 

 

 


INSERT PDFS: To insert a PDF into a page, click on the page where you want to insert the PDF. Click the plus sign “+” icon in the upper left corner. 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 or Edit Link for more information.) Choose the download settings of showing or hiding the download button.

 

 


Quick Tip icon

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 SAVE, PREVIEW AND PUBLISH 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.  Preview and Publish/Update buttons are there also.

 

 

 


 

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

CODE EDITOR is for advanced updates, and most people find Visual Editor easier to work in.


TO EDIT CONTENT IN A CLASSIC BLOCK: If you previously had content on your page, you’ll probably see that it’s 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.