Course: Adding Pages and Navigation

In this course we’ll show you how to add pages and navigation to your website. We’ll cover the following topics:

  1. Adding and editing pages
  2. Creating Content Copy For Your Website
  3. Creating an Opt-in form
  4. Adding widgets to the sidebar and footer
  5. Creating navigation menus
  6. Client review and approval

Adding and editing pages

In this lesson, we’re going to show you how to add and edit pages on your website. We’ll cover the following topics:

  • Adding a new page
  • Editing an existing page

We’ll cover these topics in two ways:

  • With text and screenshots
  • With video

Let’s get started!


Adding and editing pages: Text and screenshots

Adding a new page

Adding the title and content

Returning to our Stover Tree Service website example, we’ll start by hovering over the ‘Pages’ panel in the WordPress Dashboard, and then clicking on ‘Add New’:

Adding a new page

Adding a new page

This takes us to the Page Editor:

The WordPress Page Editor

The WordPress Page Editor

We can start by adding a title for Stover Tree Service’s Home page. Notice that this automatically adds the title to the end of the permalink, which is based on the settings we created in a previous lesson, Discussion and Permalinks settings:

Adding the page title

Adding the page title

We can edit the permalink by clicking on the ‘Edit’ button right beneath it. Since it’s rather long, we’ll shorten it to just include ‘quality-tree-service’, and then we can click on the ‘OK’ button:

Changing the page’s permalink

Changing the page’s permalink

After creating the page title, the next step is to add the main content. We have copied the content from Stover’s existing home page, so we can paste it into the main field of the Page Editor: (We will teach you how to create content in the next lesson.)

Main content added in the Page Editor

Main content added in the Page Editor

We now have the content added, but it’s not yet formatted. In order to format it, we’ll need to use the tools available at the top of the main content area. The first tool we want to select is ‘Show/Hide Kitchen Sink’. This will give us access to all of the editing tools we’ll need Notice too that we are on the ‘Visual’ tab of the Page Editor:

The Kitchen Sink button in the Page Editor

The Kitchen Sink button in the Page Editor

This reveals a second row of tools that we can use to style our content:

Second row of formatting tools

Second row of formatting tools

Tip: Formatting Tools

The formatting tools in the Visual view of WordPress are similar to those in many other text editors. You probably recognize a lot of them. If you ever see a tool that you’re not familiar with, you can hover over it to display a Tool Tip, which will explain what the tool is used for.

Let’s have a look at the page before we style it. We can click on the ‘Save Draft’ button to save a draft of the page:

The Save Draft button

The Save Draft button

We can then click on the ‘Preview page’ link to view a preview:

The Preview page link

The Preview page link

A preview of the Home page

A preview of the Home page

Now that we know what the page looks like, we can start styling the content. Let’s begin by making the heading a H1 heading (which will emphasize it for the search engines), centering it, and making it bold:

Styling the page heading

Styling the page heading

We can then click on the ‘Save Draft’ button again and take another look at the page preview:

The updated draft preview

The updated draft preview

We’ll use the same process to style the remaining content on this page. We will cover the additional styling in the video at the end of this lesson.

Page options

On the right side of the Page Editor are several additional options for creating pages. The first area we’ll look at is the ‘Publish’ panel:

The Publish panel of the Page Editor

The Publish panel of the Page Editor

There are several options within this panel:

1. Status This tells us the status of our page. We can change from draft to published, and vice versa.

2. Visibility This determines who can see the page. The options here are Public, Password protected, and Private.

3. Publish immediately This allows us to set a publish date, which can be set to any time in the past or future.

4. Publish button This button will change the page from a draft to a published page.

The area below the Publish area is the ‘Page Attributes’ panel:

The Page Attributes panel of the Page Editor

The Page Attributes panel of the Page Editor

There are two primary settings in this panel:

1. Parent This determines if this page will be in a sub-menu of another page.

2. Template The Template setting determines the layout of the page. All themes have different template options, but you’ll get a pretty good idea of what the options mean once you’ve gained some experience.

We have now completed all of the initial changes to this page, so we can click on the ‘Publish’ button and publish the page:

The published page

The published page

You can see that our page’s title now appears in the navigation menu. We will edit this, and change this to the Home page, in a future lesson.

Editing an existing page

Once a page is created and published, it’s simple to edit it. We can start by clicking on the ‘All Pages’ panel in the WordPress Dashboard:

The All Pages panel

The All Pages panel

This takes us to a list of pages, where we can click on the title of the page we want to edit:

Selecting a page in the All Pages panel

Selecting a page in the All Pages panel

This returns us to the Page Editor, where we have the same options we have for adding a page:

Editing a page in the Page Editor

Editing a page in the Page Editor


Adding and editing pages: Video

In this video, we’ll cover adding and editing pages in WordPress:


Congratulations on completing Lesson 1! You should now understand how to add and edit a page in WordPress.


Creating Content Copy For Your Website

Now that you know how to create and edit pages, let’s create the content. In this lesson, we’re going to show you how to save time using your client’s existing content to complete the copy on their website. We’ll cover the following topics:

  • How to Quickly Create Content for Your Website
  • Establishing a Strong USP for Your Client
  • Writing Body Copy for Your Website

We’ll cover these topics in two ways:

  • With text and screenshots
  • With video

Let’s get started!


Quickly Creating Content for Any Website

A key to creating a successful website is having good copy. Learning how to write effective copy will enable you to increase your sales and “wow” your clients with your ability to create a website that makes them money. Most clients will have some copy to hand off to you. It could be a brochure, copy from their existing website or other marketing materials. You can use this information as a springboard to create the copy for their entire website.

Using existing copy will save so much time. This is what we did for Stover Tree Service and it took our team a mere 3 hours and 50 minutes to produce all the content for their site!

Here are the actual steps we took to create content for Stover Tree Service. You can follow these steps to easily and quickly create content copy for your clients:

1. Conducted our initial meeting with Stover about the project

2. Began pulling copy from their parent site and researching services and a unique selling proposition (more about the USP below)

3. Determined the USP – decided to focus on increasing property value

4. Began writing copy, starting with the homepage and about page and submitted it to Stover

5. Edited the pages based on client interactions. They wanted to include a list of the certifications which Stover Tree Service holds through ISA (International Society of Arboriculture)

6. Completed and submitted tree services page

7. Completed and submitted first blog post (more on writing blog posts in the next lesson)

8. Chose an image for blog post, and published

We spent 1 hour and 55 minutes preparing and meeting with the client, and only 3 hours and 50 minutes actually researching, pulling copy from the parent website and writing and editing the copy. If you were to write the copy from scratch or hire a copywriter, it would take at least two weeks to complete the copy for the site. So many web designers get hung up on this key element. Follow the steps we took for Stover and get this part completed in approximately 5 hours.

Establishing Your Unique Selling Proposition (USP)

Your unique selling proposition is your “pitch” that sets you apart from the crowd. Establishing your USP will help your visitors know exactly what you are selling and why they need you. Here’s what your visitors will ask when they come to your site: Why should I buy from you and not from someone else? If you have a strong USP, they will not be able to turn away.

The video below will detail how to establish your USP.

Here’s a small part of what we’ll cover:

  • What is a USP?
  • What is the purpose of having a USP.
  • How to determine your client’s USP.
  • The difference in a tagline and a USP.
  • We will give you some questions you can ask your client to uncover their real USP.
  • We’ll share with you the million dollar question that your client’s USP should answer in order for their business to grow!

For Stover Tree Service, the USP we established for them is: Increase The Value Of Your Property With Stover Tree Service.

Here’s a great example. Notice the placement of the USP on the homepage and the strength of the pitch:

USP on the homepage

The USP is often the headline for the homepage.

Creating an Effective Headline

For Stover, we wanted to grab the visitors’ attention within the first 3 seconds of landing on the site. The average visitor will quickly glance at your site and if nothing catches their attention, they will bounce out.

The biggest thing you can do to make sure your website grabs attention is to use a great headline. Your headline is the most important element on the page because:

  • Your headline is the first thing visitors see
  • Your headline should immediately grab their attention
  • Your headline should force them to keep reading
  • 80% of your visitors will read your headline
  • Your headline leads into the rest of your copy

A good headline is specific to only one company (remember the USP). If you can remove the headline from your client’s website, put it on other company’s website and it still makes sense – it’s not specific enough.

Here are 7 headline formulas to get you started:

  • State a benefit
  • Offer a free special report, e-book, PDF, etc.
  • Tell your visitor a story
  • Make a recommendation
  • Use a testimonial
  • Compare Something
  • Use power words to help your visitor visualize.

After you write the headline, you’ll want to write some copy to convince your visitor to take action.

Writing Body Copy for Your Website

Again, your USP is your sales pitch and it must answer this question your visitors will ask: Why should I buy from you and not from someone else? Your website copy should reinforce your USP. Remember, you need to use existing copy from your client to save time. Take what they have and apply these tips. For Stover Tree Service we carefully constructed the copy on the homepage to convince their visitors Stover Tree Service is who they must hire.

Here are some basic guidelines to follow when writing copy for your site and your clients’ sites.

1. Use “Because”
Remember, your visitors are asking “Why”, so you need to answer that question multiple ways.

2. Write in second person
Example: You will love product A because it will help you with your….

3. Emphasize “No Obligation”
Example: Provide a place for them to check: “I understand this free gift is mine to keep, and requesting it does not obligate me in any way”

4. Use “The answer may shock you”
This is great to use after asking a question because it helps keep your visitors reading.

5. Use “But wait — there’s more”
This is great to use right before you announce a bonus or tell your visitor you’re going to give them something else for free or with their order.


Congratulations on completing Lesson 2! You should now understand how to:

  1. Quickly Create Content for Your Website
  2. Establishing a Strong USP For Your Client
  3. Write Body Copy for Your Website

Creating an Opt-in form

In this lesson, we’re going to show you how to create an opt-in form for your website, but first you need to understand the purpose of generating leads and how you can easily convert your visitors into leads. We’ll cover the following topics:

  • Creating a Web Form in GetResponse
  • Creating and Configuring a MailChimp Account
  • Creating an AWeber Account
  • Setting up a List and Creating a Form

We’ll cover these topics in two ways:

  • With text and screenshots
  • With video

Let’s get started!


The reason we recommend creating an opt-in form for your sites and your client’s sites, is to collect your visitors’ information. As soon as your website visitors submit their contact information they become a lead for you. You can now nurture that lead with email marketing with the goal of converting your leads into sales.

Unlike most other online marketing strategies, email marketing allows you to follow up with your prospects on a long-term basis. Studies have shown that long-term follow up is the best way to maximize sales. You can expect to get $40 back in sales for every $1 you spend on email marketing. This strategy will give you and your clients incredible results if you do it properly.

We recommend these email marketing tools for creating forms, setting up your autoresponder campaigns and building your list:

  • GetResponse – offers a 30 day free trial. You get access to all the functionality in the free trial. The monthly subscriptions range in price based on how many subscribers you anticipate. A nice perk that sets GetResponse apart from the crowd is a double opt-in is NOT required for your subscribers. GetResponse allows you to disable the double opt-in feature.
  • MailChimp – both free and paid subscriptions. You can do all of your email marketing for free without having to upgrade to a paid version with the exception of using autoresponders. This is great for starting out, especially if you or your client has a low budget. As your business grows you can upgrade to a more robust subscription that will allow you to set up email autoresponders.
  • AWeber – paid subscription with a low price option. Through AWeber you can accomplish all your email marketing goals. Each subscription comes with support. You can start with a $1/month option for your first month.

GetResponse

GetResponse is our top choice for you if you have the budget for the paid options after your first free month. You will be able to send both autoresponders (automated emails) and broadcasts (manual emails). You will be able to move your subscribers from one list to another. This is important for when your lead becomes a customer and you want them to receive different information from you.

Since GetResponse offers a free trial you do not have to give credit card information until your 30 days is up. This may be helpful when working with a new client.

Watch this video to learn how to create a web form using GetResponse:

MailChimp

MailChimp’s free account allows you to send up to 12,000 emails per month, to up to 2,000 subscribers. This is a great option when you’re starting your business, or for new clients who haven’t used email marketing in the past.

However, with the free version you can only send broadcasts. If you get to a point where you are ready to take advantage of using autoresponders or you need a larger volume, MailChimp has several paid upgrade options available.

Watch this video to learn all the basics on creating and configuring a free MailChimp account for your email marketing campaigns:

AWeber

AWeber has slightly different payment options available. You will be able to send both broadcasts and autoresponders with any option you choose.

Creating an AWeber account

Returning to our Stover Tree Service example, we’ll start by going to the AWeber website and clicking on the ‘Order’ tab:

The AWeber Order tab

The AWeber Order tab

On the next page, we can select the pricing plan we want, and then enter our account and billing information:

Creating an AWeber account

Creating an AWeber account

Once all of the fields on this page have been completed, we can click on the green ‘I Agree, Complete My Order’ button:

Completing our AWeber order

Completing our AWeber order

You’ll then receive an email with your password. Once you’ve got it, you can return to the AWeber Home page and log in:

Logging in to AWeber

Logging in to AWeber

Setting up a list and creating a form

Once you’re logged in, the easiest way to set up your account is to follow the Setup Wizard at the bottom of the page. You can start by clicking on the green ‘Do This Step’ button:

The ‘Do This Step’ button in the Setup Wizard

The ‘Do This Step’ button in the Setup Wizard

This takes us to the Basic Settings page, where we can enter the information for our list:

The AWeber Basic Settings page

The AWeber Basic Settings page

Once we’ve completed all of the fields on this page, we can click on the green ‘Save Settings’ button:

The Save Settings button on the Basic Settings page

The Save Settings button on the Basic Settings page

We’re then directed to the Personalize Your List page, where we can enter additional information about our company:

The AWeber Personalize Your List page

The AWeber Personalize Your List page

Once we’ve completed the fields on this page, we can again click on the green ‘Save Settings’ button. Notice that the Setup Wizard follows our progress through the pages, and provides additional guidance for each step. Don’t hesitate to use the resources provided here if you’re unsure of how to complete a page.

The next page is the Confirmed Opt-In page. We can change ‘Require Opt-In on Web Forms’ to the ‘OFF’ setting and then click on the green ‘Save Settings’ button:

The AWeber Confirmed Opt-In page

The AWeber Confirmed Opt-In page

Tip: “Confirmed” or “Double” Opt-Ins

If you’re building a site for a local business, we recommend you change the confirmed or double opt-in setting to ‘Off’. The confirmed opt-in is an extra “hoop” that your prospects will have to jump through. When a visitor signs up on your form, some companies require the visitor to verify their subscription by clicking a link or button in an email. This creates a second action or a “double” opt-in required. You may lose as much as 50% of your subscribers with this requirement, which will cut your leads in half.

The benefit with using the confirmed or double opt-in feature is to cut down on spam. If you’re building a large list, and/or there’s a lot of potential for abuse, you may want to consider using the confirmed opt-in option.

The next step is to create a welcome email. We can move forward by clicking on the green ‘Do This Step’ button in the Setup Wizard:

Moving forward to create a welcome email

Moving forward to create a welcome email

We can then complete the information on the Edit your Message/Design page:

Creating an email message

Creating an email message

Once completed, we can click on the green ‘Save’ button, and then the green ‘Next’ button that appears right below it. This takes us to the Edit your Message/Settings page. We can leave the defaults here and click on the green ‘Save & Exit’ button:

Saving the email message settings

Saving the email message settings

The next page is the Followup Message Editor page. We encourage you to create an email series of messages for your subscribers, as this is one of the best steps you can take to increase sales for your client. Once you’ve set up the series, you can click on the green ‘Do This Step’ button in the Setup Wizard:

The Followup Message Editor page

The Followup Message Editor page

This takes us to the Sign Up Form Generator page. Here we can create a custom form with the fields we want, and that matches the look of our website:

Creating a form

Creating a form

Once we’ve got the form set up as we want it, we can click on the green ‘Save Your Form’ button, and then the blue ‘Go To Step 2’ button:

Saving the form and moving to Step 2

Saving the form and moving to Step 2

We can then enter the basic settings for our form and click on the ‘Save Your Form’ and ‘Go To Step 3’ buttons:

Creating the basic settings and moving to Step 3

Creating the basic settings and moving to Step 3

This will take us to the Publish page, where we can select the ‘I Will Install My Form’ publishing option, which reveals the Javascript Snippet we’ll need for our website:

Getting the form code for our website

Getting the form code for our website

In the next lesson, we’ll show you how to add this code to your website.

Creating an AWeber form: Video

Watch this video to see the steps we’ve outlined above:


Congratulations on completing Lesson 3! You should now understand how to:

  1. Create a Web Form in GetResponse
  2. Create a MailChimp account
  3. Create an AWeber account
  4. Set up a list and create a form

Adding widgets to the sidebar and footer

In this lesson, we’re going to show you how to add widgets to the sidebar and footer. We’ll cover these topics in two ways:

  • With text and screenshots
  • With video

Let’s get started!


Adding widgets: Text and screenshots

Adding widgets to the sidebar

Let’s start by taking a look at what’s currently in the Stover Tree Service sidebar:

The default content in the WordPress sidebar

The default content in the WordPress sidebar

You can see that the default WordPress content is being displayed. Our first step will be to remove this content. In the WordPress Dashboard, we need to go to the ‘Widgets’ panel, which is located under the ‘Appearance’ panel:

The Widgets panel

The Widgets panel

This takes us to the Widgets page:

The Widgets page

The Widgets page

You can see that this page is laid out in two columns: On the left is a list of available widgets. On the right, we can see the widgets that have been included (by default) in the sidebar. In order to remove these widgets, we can simply drag them to the left column of the page:

The empty sidebar after default widgets have been removed

The empty sidebar after default widgets have been removed

You can see that the sidebar no longer contains any widgets. We can now add a widget to the sidebar to display Stover’s AWeber form. In order to do this, we’ll drag a Text widget from the left column to the sidebar:

A standard Text widget

A standard Text widget

Now that the text widget is in the sidebar, we can open it to add our code. We’ll be using the javascript code we received from AWeber for our form. (We’ll show you how to set up an AWeber account in a future lesson.) So all we need to do is paste the code into the body of the Text widget, and then click on the ‘Save’ button:

Adding the AWeber code to a Text widget

Adding the AWeber code to a Text widget

We can then take another look at the site to see the live form:

The AWeber form displayed in the sidebar

The AWeber form displayed in the sidebar

Adding widgets to the footer

We’re going to follow a very similar process to add a widget to the footer. Although there are four footer widget areas, we can only use the first two. This is because we set the footer up to have only two widget areas in the Customizing the theme for your website lesson.

We want to add our client’s certifications to the second footer widget area, so we can start by adding a Text widget:

An empty Text widget in the Footer 2 area

An empty Text widget in the Footer 2 area

We have already uploaded the image for our client’s certifications to the Media Library. (We’ll show you how to use the Media Library in a future lesson.) We can then take the URL for this image, add it to the Text widget in Footer 2, and click on the ‘Save’ button:

Image code added to Footer 2

Image code added to Footer 2

Tip: HTML

We have used some HTML in order to display this image, specifically the img tag. In this tag, “img” stands for “image”, and “src” stands for “source”. If you ever find the need to use HTML on your websites, and aren’t familiar with how to accomplish a specific task, try a simple web search. There are a lot of online tutorials available that will show you the exact HTML code you need.

We can now take another look at the live page to see the certifications image in the footer area:

The certifications image displayed in the footer area

The certifications image displayed in the footer area


Adding widgets: Video

Watch this video to see how you can add widgets to the sidebar and footer of your website:


Congratulations on completing Lesson 4! You should now understand how to add widgets to the sidebar and footer of your website.


Creating navigation menus

In this lesson, we’re going to show you how to add and edit a navigation menu. We’ll cover the following topics:

  • Adding static pages in Reading Settings
  • Creating a navigation menu

We’ll cover these topics in two ways:

  • With text and screenshots
  • With video

Let’s get started!


Adding a navigation menu: Text and screenshots

Adding static pages in Reading Settings

If you’ll recall in our General and Reading settings lesson, we left our Home page with the default appearance, which is to display our blog posts. We’ve now added our actual Home page, so we’ll need to change these settings to reflect it.

We’ve also added About Us and Blog pages, but haven’t added any content yet. We’ll use these pages in both the Reading Settings and creating the navigation menu.

So let’s start by going to the Reading Settings panel, and changing ‘Front page displays’ to ‘A static page’:

Changing to a static page in Reading Settings

Changing to a static page in Reading Settings

We can then select the Home page we created for the ‘Front page’, our Blog page for the ‘Posts page’, and click on the ‘Save Changes’ button:

Changing the Front and Posts pages

Changing the Front and Posts pages

Creating a navigation menu

The next step is to create our navigation menu. We’ll start by going into the ‘Menus’ panel, which is under the ‘Appearance’ panel in the Dashboard:

Navigating to the Menus panel

Navigating to the Menus panel

This takes us to the Menus page:

The Menus page

The Menus page

We’ll name our menu ‘Main Menu’, and then click on the ‘Create Menu’ button:

Creating the Main Menu

Creating the Main Menu

This takes us to a page where we can select our menu’s location. We’re going to select ‘Primary Menu’, and then click on the ‘Save Menu’ button:

Saving as the primary menu

Saving as the primary menu

You may have also noticed there’s a ‘Top Menu’ option. This menu would appear at the very top of your pages, above the header. You may want to use this option if you have a need for a secondary menu on your website.

We can now add pages to our menu, which is as simple as clicking on the checkboxes for the pages we want to add, and then clicking on the ‘Add to Menu’ button:

Adding pages to the menu

Adding pages to the menu

And the pages will appear in the ‘Menu Structure’ panel:

Pages added to menu

Pages added to menu

We can then drag and drop the pages to put them in the correct order:

Reordering the pages in the menu

Reordering the pages in the menu

The final step is to rename our Home page for the navigation menu. We can do this by clicking on the arrow next to ‘Page,’ changing the ‘Navigation Label’ field to “Home”, and clicking on the ‘Save Menu’ button:

Renaming the Home page for the menu

Renaming the Home page for the menu

We can then take a look at the live Home page to see the new navigation menu:

The new navigation menu on the live page

The new navigation menu on the live page


Adding a navigation menu: Video

In this video we cover the steps we outlined above:


Congratulations on completing Lesson 5! You should now understand:

  1. How to add static pages in Reading Settings
  2. How to add a navigation menu

Client review and approval

In this lesson, we’re going to cover the items you’ll need to include in your client review process.

Let’s get started!


The client review process

Once you’ve added content to a couple of pages on your website, it’s a good idea to get some feedback from your client before continuing. This will allow your client to express their wishes at an early stage of the process, and it will be much easier for you to make any requested changes now, instead of after you’ve built out the site.

When to initiate the client review process

We suggest that you conduct your first client review after you’ve added two pages to your site: Your Home page, and one sub-page. We typically use the ‘About’ page as the sub-page, but you can use any page that makes sense for your project.

If your client has an existing site with a blog, you may also want to set up the Blog page and add a couple of posts. This will give your client the opportunity to review the new blog, as well, and make any requests for changes.

How to direct your client

It’s very important that you give your client a clear idea of what they should be reviewing. We suggest that you include the following categories:

1. Overall appearance. This is the appearance of the website as a whole – the look and feel, how the elements are laid out, etc.

2. Color scheme. Make sure your client is happy with the colors you’ve chosen for their site, and be open to their input regarding any changes.

3. Fonts. Direct your client to review all of the fonts on the site: Heading fonts, content fonts, sidebar fonts, etc.

4. Content. Finally, make sure your client is happy with the appearance of the content on their site. This would include how the content is laid out and styled.

The client review process for Stover Tree Service

For Stover Tree Service, we are submitting the Home and About Us pages for review. Our client does not have a blog on their current site, or we would include the Blog page in the review, as well.

We will be asking them to review the site on the criteria we outlined above. We’ll share their thoughts with you in a future lesson.


Congratulations on completing Lesson 6! You should now understand how to initiate and direct the client review process.

This concludes the Adding Pages and Navigation course. In our next course, we’ll show you how to create posts and set up your blog.

Go to next Course: Adding Posts and Setting Up the Blog