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. 

   The following video tutorial was made with one of the previous versions. We are updating the videos.

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.

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.
  3. Go to 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.

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

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. ### <div style="background: #f3f3f3; padding: 15px"><pre style="font-family: Roboto;"> The following video tutorial was made with one of the previous versions. We are updating the videos. </pre></div> ### <iframe style="width: 100%; aspect-ratio: 16 / 9;" frameborder="0" src="https://www.youtube.com/embed/R5QG3R8hvV8" title="Nicepage University: Make On-Page Websites" 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 ##