Navigation for Pages

Home > Ontraport for marketing > Pages > Navigation for pages

Home > Pages > Navigation for pages

Explore the options for creating a beautiful and functional navigation menu on your website.

In this lesson you'll learn:

How to create a customizable navigation menu
How to set up your navigation to improve usability, accessibility and SEO
Options for nested sub-navigation
How to make your nav fully mobile responsive

Comments

[Block//Author//First Name ##cap_first] [Block//Author//Last Name ##cap_first] on [Block//Date Added %F j, Y g:i a%+0d0h0m]

[Block//Comment]

Leave your comment

14-day free trial. No commitment.

Start your free trial to start growing your business with Ontraport.

Related resources

[Block//Resource Type]

[Block//Resource Name]

[Block//Resource Description ##ellipsis(166)]

Transcript

A navigation menu helps visitors find their way around your site, especially once it has more than a few pages. In this lesson, you'll add the Navigation element to a page, set up its links, and use the same menu across your whole site. Click Pages in the top navigation, then New page, or open a page you already have. Click Add block, or hover over the grey plus icon where you want your menu, and choose Build your own block. Then find the Advanced elements group in the palette on the left, and drag the Navigation element into your block. Navigation is a Pages-only element, so you won't find it in Advanced Mail. Click the element to open its Settings tab. Here you add the links you want in your menu and put them in order. Click any link to give it a name, set its URL, and customize its design. Each link also has its own settings that control how it works in your menu. Want more control over the look? The custom HTML section in the element's settings lets you add extra styling to your sidebar navigation menu, if you're comfortable writing code. The menu is fully mobile responsive, so it adapts to phones and tablets. When it looks right, click Publish, then Save & Publish, and check your live page. Most sites use the same menu on every page. Instead of rebuilding it each time, make it a global block. Select the block, click the gear icon, click the make global block button, then Convert Block, and give it a name. Now, when you add a block to any page, you'll find it under Global Blocks. To change the menu, hover over it and click Edit Global Block. When you publish, a pop-up tells you how many pages will update, and every one of them gets the new menu. If one page needs a different menu, click Detach Global Block. That copy stays on the page but stops updating with the others. On a membership site, you can show members a Log out link and everyone else a Log in link. Make two global navigation blocks with the same design, one with each link. Then, in each block's display settings, show the Log in block to Everyone except logged in members, and the Log out block to All logged in members. Logging members out only works on pages published to your membership site's domain. If you have the Dynamic CMS package, add your navigation links to your dynamic templates. Static content on a template, like navigation links, appears on every page published from it. So: drag in the Navigation element, set up your links, make it a global block, and publish. That wraps up the Pages section. Next up, we start on messages with the five message editors.