This tutorial teaches you how to build a One-Page Website with a Menu that links to Blocks on a page instead of different pages. You can create a One-Page Website using the Nicepage Applications for Windows or Mac OS, WordPress Plugin, or Joomla Extension.
Each Nicepage's Page has the Blocks. You will create a Menu with the navigation to Page Blocks.
Linking Menu Items to Blocks
Create a new page or open an existing one.
Select the Menu.
Open the Menu Editor.
Click on the item to modify.
Select the Block Anchor option to the right.
Select "Block 1" from the list for the Block property.
Enter "Home" into the Label field.
Click Done.
In the same way, add new menu items linked to blocks on the page.
Sticky Menu On Scroll
On a One-Page Website, when you click on a Menu Item, the Menu remains on the screen so you can navigate to other Blocks. It would be best to use the "Sticky on Scroll" option.
To keep the text visible and readable over the content, you can add the Background Fill for the Header.
Select the Header.
check the "Sticky on Scroll" box in the Property Panel.
Add a white Fill for the Header Background.
Click the Preview Icon.
Select any browser from the list, such as Google Chrome.
In the browser, click the Menu links to test the navigation to Blocks.
Edit Block Anchors
You can change the default Block Anchors to make them relevant to the Menu Items. It is important for the direct links to Blocks and SEO.
Go back to the Nicepage Application.
to the left, select Block 1 in the Site Navigator.
Go to the Property Panel.
Locate the Block Anchor property.
Type "Home," replacing the value in the input.
Press Enter.
Similarly, edit anchors for other Blocks.
Test Anchors
Click the Preview Icon.
Select any Browser.
hover over the Menu links to test the Block Anchors in the browser.
You have created the One-Page Website. And now, you see the relevant IDs in the URLs.
You have learned how to:
Build a One-Page site with links to Blocks in the Menu
Make a sticky Header on the scroll
Modify the Block Anchors
## Summary
- Overview
- Video Tutorial
- Link Menu Item To A Block
- Sticky Menu On Scroll
- Edit Block Anchors
- Test Anchors
## Overview
This tutorial teaches you how to build a One-Page Website with a Menu that links to Blocks on a page instead of different pages. You can create a One-Page Website using the Nicepage Applications for Windows or Mac OS, WordPress Plugin, or Joomla Extension.
Please watch the video about [making a Menu with the Nicepage Application](page:82280).
## Video Tutorial
<iframe width="600" height="340" src="https://www.youtube.com/embed/R5QG3R8hvV8" title="Nicepage University: Make On-Page Websites" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
##
## Link Menu Item To A Block
Each Nicepage's Page has the Blocks. You will create a Menu with the navigation to Page Blocks.
## Linking Menu Items to Blocks
1. Create a new page or open an existing one.
2. Select the Menu.
3. Open the Menu Editor.
4. Click on the item to modify.
5. Select the Block Anchor option to the right.
6. Select "Block 1" from the list for the Block property.
7. Enter "Home" into the Label field.
8. Click Done.
In the same way, add new menu items linked to blocks on the page.
## Sticky Menu On Scroll
On a One-Page Website, when you click on a Menu Item, the Menu remains on the screen so you can navigate to other Blocks. It would be best to use the "Sticky on Scroll" option.
To keep the text visible and readable over the content, you can add the Background Fill for the Header.
1. Select the Header.
2. check the "Sticky on Scroll" box in the Property Panel.
3. Add a white Fill for the Header Background.
4. Click the Preview Icon.
5. Select any browser from the list, such as Google Chrome.
6. In the browser, click the Menu links to test the navigation to Blocks.
## Edit Block Anchors
You can change the default Block Anchors to make them relevant to the Menu Items. It is important for the direct links to Blocks and SEO.
1. Go back to the Nicepage Application.
2. to the left, select Block 1 in the Site Navigator.
2. Go to the Property Panel.
3. Locate the Block Anchor property.
4. Type "Home," replacing the value in the input.
5. Press Enter.
6. Similarly, edit anchors for other Blocks.
## Test Anchors
1. Click the Preview Icon.
2. Select any Browser.
3. hover over the Menu links to test the Block Anchors in the browser.
You have created the One-Page Website. And now, you see the relevant IDs in the URLs.
You have learned how to:
- Build a One-Page site with links to Blocks in the Menu
- Make a sticky Header on the scroll
- Modify the Block Anchors
##
