How to add site navigation on Zoomforth

Media: video & written how-to articlesStart buildingUnder 15 min

Learning objective

By the end of this session, you will be able to:

  • Add, duplicate, hide and remove subpages
  • Add internal and external page links
  • Add anchor links

Video tutorial

Video transcript

In this video, we will review the navigation of a site. How you can structure your site as a single page site with infinite scroll, or as this site shows, add additional site navigation to organize your content across different subpages.

Subpages

The left-hand editing panel will display each subpage just below the term navigation. To create a new subpage, simply click on the plus subpage button, and a prompt will appear to name and create a new subpage in real-time. As you enter the fields, you will see it reflected on your site editor instantly. This creates a new empty subpage to add content from scratch.

The other option is to recycle or bring in content from an external site or from within this site as a new subpage. Both of those options are available through the dropdown on the same button. Let’s walk through each now.

Let’s say we want to connect the insights from our blog. The editing panel will prompt you with the steps you need to take to complete the action. In this case, we need to enter the subpage title and URL.

Zoomforth automatically assumes you’d like to open the link in a new tab, but you can uncheck this if you prefer to load it right within the existing browser. Once you’re happy, select create external link. Your new subpage will now be displayed in the navigation.

Now let’s walk through the internal link. Again, follow the prompts to set up a subpage by linking content that already exists on your site. For this example, we can link the toolkit found on the homepage. Enter the internal link title toolkit. Next, select the destination subpage home from the dropdown. Then we can select the destination content.

This will take us to the subpage we selected, and we can scroll until we find the toolkit. When selected, a checkmark will appear to confirm you’ve linked the content and you can click done on the editing panel. Now you can create your internal link, and it will show up in the navigation of your site.

Whether you choose a single subpage or multiple subpage site, you may find it helpful to include anchor links. An anchor link is a navigational tool. It’s a link in the navigation bar that will take you to specific content on your page, like key numbers.

Let’s build one together now. We can create an anchor link for FAQs on our homepage, select plus anchor link. Again, follow the prompts. In this case, we need to add a title - FAQ. Now follow the prompts to select the destination content. Scroll until you find the content you’re looking for. When selected, the check will let you know you’ve linked the correct content and create your anchor link. You can now see it reflected at the top, under the home page link.

Editing the order of subpages

If you need to edit the order of your subpages, just hover over the subpage name in the left-hand editing panel. Simply drag it above or below the order you wish to change. These updates will automatically happen on your site. There are some additional editing options on each subpage available to you. Click edit on any subpage. We can change the subpage title and slug, and there are a few more options below. I’m going to review.

Hide a subpage

Let’s say you are still building out the content and not ready for visitors to view the information. Zoomforth allows you to hide the subpage which automatically removes it from your navigation and hides the content from the preview or published version of the site. When you’re ready to unveil the subpage, uncheck the hide option, and the subpage will reappear.

Hide subpage from navigation

This is slightly different. The subpage exists, but viewers cannot access the subpage from the navigation bar. In this case, you would need to link the subpage content to a subpage which is accessible via an internal link. This is used to streamline your navigation.

Show scroll back to top button

Initiate this prompt to enable users to jump to the top of the subpage instantly versus them having to manually scroll. We can visualize this by clicking the preview button at the top right-hand corner.

Show scrolling process indicator

This is an extra navigational tool that displays on the right-hand side of the subpage to direct the visitor to specific content. On the left-hand editing panel I’ve chosen the dark scroll indicating color. Let’s visualize this. Now we’re going to go back to the preview button. Now you can see this dark-colored box on the right-hand side. When I scroll across, I can see my anchor links displayed, select the one you wish to choose, and it will take you to that content.

Duplicate subpages

You can also duplicate a subpage to replicate the content and use it as a framework for a new subpage. Simply click duplicate and Zoomforth will automatically create a copy and add it to your navigation.

Deleting subpages

Lastly, delete the subpage. You can find that at the bottom of the left-hand editing panel in red to remove a subpage from your site.

Now you know how to create and edit subpages in Zoomforth and add-in options like anchor links and a scrolling process indicator. Now try to add to subpage on your own for more information on how to use the platform. Please see the next modules in this video series.

Cool features and fun stuff

Check out our free workshops and training courses, and learn how to take your sites to the next level.

Find out more Arrow right