Page Menus (7 mins)
Completion requirements
01 Getting Started
This tutorial covers how to add page or header menus to your projects, including:
- Adding a header.
- Navigating pages on the header.
- Hiding and showing pages.
- Setting parameter values on redirect.
- Changing link names.
- Creating new pages from the site menu.
- Adding folders to the header.
- Conditionally hiding and showing pages.
02 Adding a Header
1. Expand the Pages dropdown and click Manage Menus The Site Menus window opens.
2. Enable the Include a Header switch. A header is automatically added to your project.
All current pages in your project are automatically added to the header.
2. Enable the Include a Header switch. A header is automatically added to your project.
All current pages in your project are automatically added to the header.
03 Navigating Pages on the Header
In preview mode, click on the heading titles to navigate to a different page.
04 Hiding and Showing Pages
To hide pages from the header, click on the eye icon without having to delete them.
05 Setting Values on Redirect
To set values for the redirect:
1. Click on the page gear icon. The Edit Link screen opens.
2. In the Edit Link menu you can:
This allows to set a value to a parameter, while redirecting to a different page
1. Click on the page gear icon. The Edit Link screen opens.
2. In the Edit Link menu you can:
- Change the menu icon.
- Update the link name.
- Choose which page users are redirected to and how the page opens.
- Configure an on click action.
- Set Parameters.
This allows to set a value to a parameter, while redirecting to a different page
06 Changing Link Names
1. Navigate to the Edit Link screen.
2. Type in the new name of your page.
This will automatically update the header name in your project.
2. Type in the new name of your page.
This will automatically update the header name in your project.
07 Creating New Pages
1. Click the Add menu Item button.
2. From the pop-up menu you can create a new page, add a link, or add a folder.
2. From the pop-up menu you can create a new page, add a link, or add a folder.
08 Adding Folders to the Header
1. Navigate to the Site Menus screen, and click Add Menu Item.
2. Click Add A Folder.
A folder is added to the Navigation Menu.
To rename the folder:
1. Click the gear icon and type in the new folder name.
To add pages to folders, simply drag and drop pages under the folder.
When users click on the folder item in the navigation menu, a sub-menu displays the pages.
2. Click Add A Folder.
A folder is added to the Navigation Menu.
To rename the folder:
1. Click the gear icon and type in the new folder name.
To add pages to folders, simply drag and drop pages under the folder.
When users click on the folder item in the navigation menu, a sub-menu displays the pages.
09 Conditionally Hiding and Showing Pages
For this example, we will set a global variable.
1. Open the project settings menu and click the tools tab.
2. Click the Custom Variables gear icon.
3. Click the Static tab on the Custom Variables screen and add the variable:
4. Click the Conditions tab and configure the following condition:
5. Click the Then + icon. The Add Node Screen Opens.
6. Select Affected Elements and click Next.
7. Ensure your filter is set to All.
8. Choose which element you want to affect. For example, hide the Contact Us Form header. Click the element selection box, use the dropdown to configure the action and click apply. Click Next.
9. Add a tag and click Insert.
The node is added to the screen.
10. Click Apply.
Save and preview. The Contact Us form is displayed:
If we fulfill the condition we defined earlier, the Contact Us Form is hidden.
1. Open the project settings menu and click the tools tab.
2. Click the Custom Variables gear icon.
3. Click the Static tab on the Custom Variables screen and add the variable:
- For example: source
4. Click the Conditions tab and configure the following condition:
5. Click the Then + icon. The Add Node Screen Opens.
6. Select Affected Elements and click Next.
7. Ensure your filter is set to All.
8. Choose which element you want to affect. For example, hide the Contact Us Form header. Click the element selection box, use the dropdown to configure the action and click apply. Click Next.
9. Add a tag and click Insert.
The node is added to the screen.
10. Click Apply.
Save and preview. The Contact Us form is displayed:
If we fulfill the condition we defined earlier, the Contact Us Form is hidden.