From this tutorial, you will learn how to build a One-Page Website with the 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 also watch the video about making a Menu with the Nicepage Application.

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 linking to Blocks on the Page.

Fixing Menu on Scrolling

On a One-Page Website, usually, when you click on a Menu Item, the Menu remains on the screen, so you will be able to navigate to other Blocks. For that, you need 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. In the Property Panel, check the "Sticky on Scroll" box.
  3. Add a white Fill for the Header Background.
  4. Click the Preview Icon.
  5. Select any browser from the list, for example, the Google Chrome.
  6. In the browser, click the Menu links to test the navigation to Blocks.

Editing 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. In the Site Navigator to the left select Block 1.
  3. Go the Property Panel.
  4. Locate the Block Anchor property.
  5. Type "Home" replacing the value in the input.
  6. Press Enter.
  7. Similarly, edit anchors for other Blocks.

Checking Anchors

  1. Click the Preview Icon.
  2. Select any Browser.
  3. In the browser, hover the Menu links to test the Block Anchors.

You have created the One-Page Website. And now, you see the relevant IDs in the URLs.

Summary

You have learned:

  • How to build a One-Page Website with links to Blocks in the Menu.
  • How to fix the Header on scrolling.
  • How to modify the Block Anchors.


<div class="video-container"><iframe width="740" height="418" src="//www.youtube.com/embed/R5QG3R8hvV8?rel=0" frameborder="0" allowfullscreen></iframe></div> # From this tutorial, you will learn how to build a One-Page Website with the 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 also watch the video about [making a Menu with the Nicepage Application](page:82280). 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 linking to Blocks on the Page. ## Fixing Menu on Scrolling On a One-Page Website, usually, when you click on a Menu Item, the Menu remains on the screen, so you will be able to navigate to other Blocks. For that, you need 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. In the Property Panel, check the "Sticky on Scroll" box. 3. Add a white Fill for the Header Background. 4. Click the Preview Icon. 5. Select any browser from the list, for example, the Google Chrome. 6. In the browser, click the Menu links to test the navigation to Blocks. ## Editing 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. In the Site Navigator to the left select Block 1. 2. Go 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. ## Checking Anchors 1. Click the Preview Icon. 2. Select any Browser. 3. In the browser, hover the Menu links to test the Block Anchors. You have created the One-Page Website. And now, you see the relevant IDs in the URLs. ## Summary You have learned: - How to build a One-Page Website with links to Blocks in the Menu. - How to fix the Header on scrolling. - How to modify the Block Anchors. <br>