Optimizing your website's navigation and footer
In Chapter 7, you'll build your website navigation and footer to help visitors easily find your most important content.
By now you’re making excellent progress on your website. You’ve got a homepage, products, sales pages, blog articles, an About page, and a resource center to keep everything organized. The last two elements that tie your site together are your header navigation and your footer. Here’s how to set these up in Podia.
Constructing a logical website navigation
Your website layout and navigation should make it simple for people to find the information they're looking for.
Here are things you can do to make your website easy to explore:
Place your main navigation in the header of your website.
Choose a navigation font that's easy to read.
Make sure there's enough contrast between the font color and the background in the top navigation area.
Don’t cram too much in the header. Leave enough space so it doesn't feel cluttered.
To provide a good user experience, keep the titles for your main navigation links short and obvious. If it's an About page, title it “About”. If it’s a directory of your products, title it “Products”. Shorter titles with just a few words look tidy.
Here’s how Canva expert and Podia creator Emily Connors titles her menu items. It’s easy to find exactly what you’re looking for and everything fits nicely into one line.
BUILD TOGETHER
To set up my navigation in Podia, I’ll click on the white heading bar with my logo at the top of my site.
In the left menu, I can edit my logo and add links to the pages I’d like to feature. For Your Best Road Trip, I’m going to link to my About page, 1:1 travel planning service, free packing list download, and Resource page.
Some of these titles are a little long which makes my header look cramped, so I’m going to shorten them for a cleaner look.
In the “Design” tab, I increased the size of my logo slightly and centered my menu links. I also gave the login button a blue background to match the rest of my website branding.
Now visitors can easily find their way around my core website pages.
Maximizing your website footer real estate
The last important piece of website real estate is your footer. The footer is the full-width area at the bottom of each website page. Here, you can reiterate your main value proposition, include links to your social media channels, and highlight important pages of your website.
This is also a helpful place to include your privacy policy and terms of service, which are required for most online business owners.
(Podia automatically generates these pages for you and links them in the footer, but if you’re using another website editor, make sure to add these manually.)
BUILD TOGETHER
On any page of your website, click on the gray footer area to bring up the editing menu.
In the “Content” tab, I added my logo, a short description of my business, links to my two main products, and my social media handles.
Next, I went to the “Design” tab to adjust the footer layout and color. I centered the content in the middle of the footer, increased my logo size slightly, and changed the background to that soft peach color I’ve used in a few other places on my site.
Now that my footer looks exactly how I like, I can press “Publish” and it will show up on all my website pages.
Now that you’ve got your foundational pages established, the next chapter will explore some advanced web design tips and style best practices.