Lesson 5: Finalizing Your Main Navigation

 

Now that you've learned how to add a page, create the layout for the page, and add in content, you can go ahead and add all the remaining pages that you'll need on your Main Navigation.

In this lesson we will: 

  1. Add all the remaining pages to your Main Navigation

  2. Link pages to each other

  3. Create a button

  4. Create a link

 

Step 1: Add all the remaining pages to your Main Navigation

STEP 1: Add the remaining pages
Look at your sitemap to see what pages are left to go in your "Main Navigation". Most likely this will be pages like your Contact page, Services, Portfolio, or similar. 

Follow the same steps that we took in the previous lessons to create a solid structure that matches your wireframes, and add content. Don't forget to pay attention to the different fonts you can use. "Normal" is used for body copy. "Heading 1" is good for banners and is used by Google as SEO data. Use "Heading 1" as the introduction or title to each page. "Heading 2" and "Heading 3" can be additional headers that are used on the rest of page. Again, even if you don't like the look of these headings, don't forget we will modify them in a later module. 

Once you've added the basic content to each of your pages, whether by creating your own grids or using the Starter Layouts, you'll have most of your website underway! 

 

You might need to create additional pages that will not show up on your "Main Navigation". For instance, imagine you have designed a specific webpage that is only accessible via a URL located on your homepage (such as an FAQ's or a testimonials page, or something similar). This is what the "Not Linked" section is best for!

These pages of your website can all be accessible to visitors, even if they're not in the "Main Navigation".
A great example of this is a Services page. On the Services page, you might list all of the packages or services that you offer. You might extend each introduction of a service to lead into a button or hyperlink that leads a visitor to an additional page. You can do this by creating that new page and linking the two together.

Let's start by making a FAQs page together. Feel free to go in and modify the content after to become a page you do need. 

Go to Home > Pages

  • Under "Not Linked", select "+"

  • Select "Page". Under "Page Title", name it FAQs. 

  • Under "Starter Layout", select "Details" and go with Details 1.  Click on "Start Editing". 

  • Click on "Save". 

 You will see this new page under the "Not Linked" section. 

  • Select the cog wheel next to the FAQs page.

  • Notice the URL Slug. It should read "/faqs". You will need this URL Slug to serve as the link on your other page.

  • Note that if you want to modify this page after this module, don't forget to change the back end information once the page has been updated. 

  • Select "Save". 

 

Step 3: Create a button

Now let's link this page using a button under our Main Navigation. Choose any page you'd want to see your FAQ button. If you don't want this option, feel free to remove it after this module is complete. 

  • Select the page you want to work on and make sure it's in the editable stage. 

  • Find out where you want to place your FAQs button and select the grey tab. Select "Button". 

  • Under "Text", enter FAQs. 

  • Select "Clickthrough URL", select "Content" and scroll down until you see the words FAQs. That is the page you made earlier. Notice when you select it, you will see the URL Slug "/faqs" show up in the dark grey bar. 

  • Click on "Apply". 

The button can also be modified in the "Style Editor", which we will cover in a future module.

 

  • Again, you will need to figure out which page you'd like this link to be on. 

  • Select the page you want to work on and make sure it's in the editable stage. 

  • Because this will link to actual text, you may need to write additional copy. For example: For Frequently Asked Questions, click here!"

  • Using your mouse, highlight those words you want to act as your link. In this case, the words "click here" will serve as the link.

  • In the text grey bar, select the links icon. 

 
 
  • Select "Content" and select the FAQs page. You will see the words underlined now.

  • To edit or remove the URL, click on the hyperlinked words. You will see the URL Slug "/faqs" as the URL. 

  • Again, if you don't want to keep the button or link on your site, feel free to trash it. This is just to show you how you would utilize the "Not Linked" section. 


Great job! Module 3 is done! Now let’s move on to Module 4, where we’ll learn the basics of design!