Managing Site Navigation
Site navigation is basically how your customers will make their way around your website and move from one page to another. It makes perfect sense to organize your page links in a structured, user-friendly manner. As such, Checkfront has provided menus at the top of your page (the header) and at the bottom of your page (the footer). There is also a category filter which we will look at a bit later on.
Accessing NavigationBack to top
Both the header and footer can be managed in your Site Builder web portal by clicking on the Navigation link in the left sidebar. This menu is always visible while working in Site Builder and can be easily accessed at any time.
Header Navigation MenuBack to top
Let's begin by exploring the header and the navigation menu associated with it. Clicking on the Navigation link in the left sidebar will slide out the navigation edit window. You can return to the main menu at any time by clicking on the small arrow icon in the top left corner of the edit window, as highlighted in the image below.
So what is the header menu?
The header menu is the set of navigation links at the top of your Site Builder website. Depending on the theme you have activated, this menu may look slightly different, but ultimately it should appear something like this...
Looking at the header edit menu, it's easy to see how the options you choose translate into the menu at the top of your Site Builder page.
Editing the Header MenuBack to top
To begin editing the header menu, click on the blue Edit link as seen in the image above. This will slide out the edit window even further. You will see a list of any currently active menu options. This menu by default displays some of the pages that come as standard with your theme.
Steps to Edit the Header Menu:
1. Select a link type from the drop-down menu.
2. Select a destination from the drop-down menu.
3. Input or change the label in the text field. See below for detailed instructions on the steps above.
Menu Link TypesBack to top
The link type enables you to connect that link to different items and features, both inside and outside your Site Builder page. The options are accessed via a drop-down menu.
There are 6 link types you can choose from:
Page enables you to create a link to another page on your website. The page must have already been created prior to updating the menu. Select the page you would like to link to from the drop-down menu, highlighted below.
You may also choose the text for the navigation button. Short and sweet is always better!
Choosing the category link type enables you to create a direct link to a particular category in your inventory. When clicked on, the user will be presented with a polished page of all the items in said category.
Select the category from the drop-down Destination menu. The text field will then appear containing the name of the category as configured in your Checkfront account. If you wish to change this text for your Site Builder pages, you may do so here.
Like the category link, the item link type enables you to link directly to the booking page for a particular item. That item is chosen from the drop-down Destination menu.
Change the link text if you like, otherwise, it's good to go.
If you'd like to create a link to a page that isn't on your Site Builder website, you can do so with the URL link type.
Enter the web address (URL) of the site you'd like to link to in the Destination field and then enter a label for the link in the Text field.
If you've decided to use the blogging feature in Site Builder, you can link directly to one of your posts by selecting the Post link type.
Select the desired post from the drop-down Destination menu and then change the link label in the Text field if necessary. You'll probably find that your blog post title is a little long for this link label, so you may wish to condense it a bit.
The submenu option enables you to create a nested set of links under one main heading. In the example below, the main menu link is used as a heading, which when clicked on, will open up a drop-down menu of actual links that can be clicked on. The heading itself does not link to anywhere specific.
Once you've entered a label for the main menu item, click + Add Item to Submenu. Here, we've added two Item link types in just the same way as described above.
You can add as many submenu links as you like by clicking on + Add Item to Submenu each time. Submenus can consist of multiple link types if you wish! The finished article will look something like this...
Reordering Menu LinksBack to top
Once you've been using your menu for a while, you may decide to add some additional links or simply wish to reorder the links you already have. Site Builder has a built-in feature that allows you to do this.
Steps to Reorder the Menu Links:
1. Hover your mouse over a link in your menu editor. Notice that the background turns blue and two horizontal lines appear to the left of the chosen link type.
2. Click and hold your mouse on those horizontal lines and drag the link to a new position in the menu.
3. Release your mouse button and the menu will now be reordered.
4. Click the blue Update button to save your progress. The same applies to submenus and they can be reordered in the same way.
Footer Navigation MenuBack to top
The footer navigation menu is configured just like the header navigation menu, so we won't go into the same amount of detail on how to set things up. Simply scroll back up and read the details there. The footer is the area at the bottom of your web pages that can contain useful links, social media calls to action and copyright details. The idea is the same though and you can see in the image below how the links you make translate to the actual footer.
The number of columns you can have in your footer is theme dependent. In the example we are creating here, there are 3 columns for the footer navigation links. We've already looked at how to create menu links and the different types available in Site Builder. So, let's just have a look at how the footer menu can be used to navigate your website, social media, and third-party web pages. We will do this by creating submenus under the 3 main headings.
Looking at the structure above, you can see that we have the 3 main columns each with its own heading. These were created by selecting the submenu link type for each one. We then added 3 links under each heading using a variety of different link types. When finished, it would look something like this to your users...
Category FilterBack to top
Depending on the theme you're using, you may see a feature in the Navigation section called Category Filter.
This enables you to narrow down the search on your inventory page by selecting one or more categories to include. Items from categories that are not selected will be filtered out from the search results.
Steps to Add Additional Categories:
1. Click on the edit link to open the category filter edit window.
2. Click + Add Item to Category Filter Navigation.
3. Select Category from the Link Type drop-down menu.
4. Select the category you wish to add from the Destination drop-down menu.
5. Change the text label if required.
6. If required, hold your mouse on the two horizontal lines to the left of the link type and drag the category into a new position.
7. Click Update to save your progress.
Once you've configured the category filters, you will see them at the top of your Inventory page.
Click on the categories you wish to include in your search. Only the items from the categories selected will be displayed. Everything else will be filtered out.