Module 3 – Creating a Page

In this module, we will cover:

• Creating your first page
• Adding content to your page
• Best practices for image content
• Previewing your page
• Publishing your page
• Assigning your page to the main navigation menu
• Working with hierarchical menu items

Creating your first page

Hover over Pages then click on Add New

You will then see a blank page ready for content, with the mouse cursor in the title content block. Notice the page settings on the right but leave all of the default settings for now; we will use the Default template. There are different page templates that you can experiment with on your own.

Add a page title called “My Test Page“. Notice that as soon as you start adding the title text, the blue Publish button illuminates.

Tip: The system will auto save your work but it’s better if you update and preview your page as you build it. Clicking the Publish button will make your page visible to the world and accessible to be added to the navigation menu if you desire.

Next, add a H3 subheading heading followed by a paragraph under the subheading. All page content is added by clicking on the “+” icon located in the top left section of the page editor

After you click on the “+” icon, a menu will appear displaying the most commonly-used content blocks. Select the paragraph content block.

Tip: Try scrolling down using the caret in the top right side of the content block menu to see all of the content block options.

Tip: Also, you can bring up the content block editor by simply hovering over the place on the page where you want to add new content. A “+” icon will appear so simply click on it.

Tip: You can also create a new content block by exiting your current content block by pressing the Enter or Return key on your keyboard. This will cause a new content block to appear right below your current content block.

Your page should look something like this:

Next, add a second sub-heading called My Second Paragraph by duplicating the first sub-heading called My First Paragraph. This is done by hovering over the block you want to duplicate and then clicking on the vertical ellipsis

Then, click on Duplicate. An exact copy of the duplicated content block will appear. Change the text to read My Second Paragraph. Then, hover over it and on the left of the content block you will see up and down carets and also a drag option between the carets. Use either the down caret or the drag icon to place the second sub-heading underneath the first paragraph.

Your page should look like this

Next, duplicate the first paragraph and place it under the second sub-heading. When done, your page should look like this:

Next, let’s add an image. Go to Google.com and search for “berry smoothie images” Select an image with a few different elements like the one below. Right-click and save the image to your computer.

Next, we are going to add our saved smoothie image to the site media library. On the left side dashboard menu above Pages, Click on Media > Add New

Then, either drag the berry smoothie image onto the upload canvas or select it by clicking the Select Files button. The image will then be automatically uploaded to your media library

Before we can use our new image, we need to add some very important information about the image. Click on Media > Library to see your uploaded image in the media library. Click on your uploaded berry smoothie image

A panel will open on the right. We will be adding information about our image. We are going to add values for the Title, Description, Alt Text and Description

• Title: Used by your site for media searches
• Caption: Use to describe your image to your users if it adds value
• Alt Text: Used by Google Search and accessibility readers to understand what the image is about. Your Alt Text should describe the image in words. Very important
• Description: This data is used internally by your site to classify images and enrich the post data. Use your Alt Text for the Description text

Does this Alt Text describe the image well? How can it be improved?

A blueberry smoothie in a clear mason jar on a distressed wooden plank table next to a green ceramic bowl filled with fresh blueberries

Once you have your values entered, they will be autosaved. Simply click on the “X” to close the image edit window. Now we are ready to add our image to our new page!

Adding an Image to the Page

Go to Pages > All Pages and find your page in the list. Hover over the page title and click Edit

Add the image underneath the second paragraph by inserting an image content block under the second paragraph and then click the Media Library button.

Select the image from the Media Library browser and click the blue Select button located in the lower left section of the window. The image will be added to your page

Tip: You can add multiple images by doing Ctrl > Click on the images you want to add to the page

Next, try adding a third sub-heading and paragraph followed by a YouTube video?

Working with Hierarchical Menu Items

Organizing your main navigation menu in a logical way will delight your users, keeping them exploring your site. One way to organize your pages in the main navigation menu is to group similar or related pages under a parent menu item. So a simple example could be:

• Available Seasonal Fruit (Parent)
  • Tomatoes (Child)
  • Nectarines (Child)
  • Peaches (Child)

We can do this with our test page by creating the following menu structure

• Test Pages (Parent)
  • Test Page 1 (Child)
  • Test Page 2 (Child)

Let’s try it!

Create the Parent Page

1. Create and publish a new test page and call it Test Page 2
2. Create a new page called Test Pages This will be your parent page
   1. Add links for Test Page 1 and Test Page 2
      1. Create text like “Test 1 Page” and “Test 2 Page” using a list inside a paragraph
      2. Highlight the “Test 1 Page” text and click on the chain link icon
      3. Search for the page that you want to link the text to by typing the page title into the search bar
      4. Once found, click the little arrow icon located to the right of the search bar.

Publish your parent page

Now that your pages have been created and published, lets update the menu.

Before we start, make sure that you have these three pages created and published:

Editing the Main Navigation Menu

1. Go to Appearance > Menus You will see your new pages at the top of the pages list. Test Page will be the parent page and the other two will be children of the parent.

The current menu looks something like this:

Add the two new pages to the menu

The menu structure should look like this

Hierarchical Structure

Here is how hierarchical menu items look in the menu editor. Notice the indentation.This is done by dragging and dropping

• Drag your new Test Pages menu item between Home and About

Should look like this when you are done:

Next, drag each of the test pages in sequential order under Test Pages and click the blue Save Menu button.

Note: To make your two test pages children (hierarchical) of Test Pages, drag them slightly to the right to create a right-indentation like this:

Next, view your menu and hover and click over the various items to see how it works:

If everything worked as expected, go ahead and do the following remove your 3 test pages from menu like this:

• Go to Appearance > Menus
• Expand the caret next to Test Page 2 and click Remove
• Follow the same removal steps for Test Page 1 and the parent page Test Pages
• Click on the blue Save Menu button

After you remove your test pages from the menu, the structure should be like this:

Removing Pages

• Moving pagesGo to Appearance > All Pages
• Locate your test pages by searching “Test Page”
• Select them
• Click on Bulk Actions button
• Select Move to Trash
• Click the Apply button

The test pages are still available from the Trash. To delete them permanently, do the following:

1. Click on the Trash link

• Search the Trash for your three test pages and then select them
• Click on Bulk Actions button and select Delete Permanently
• Click the Apply button

Congratulations!

You’ve successfully completed Module 3!