From our today’s tutorial, you will figure out what is a navigation menu WordPress block on your landing page. You will also learn how to create it and apply it to your one-page website. While the typical website uses a menu as a navigation tool to move from one page to another, the navigation menu of WordPress landing page will sail you to the needed section.
Each menu item is a so-called anchor. Although, the landing page may be quite long and people won’t spend their time scrolling to a certain block. Jump links are used in listings or tables to navigate users to the part of the page they are looking for.
Adding a Navigation Menu WordPress Block
In case you are still trying to puzzle out where to start building an anchor menu, this topic is for you. Everything starts in the Gutenberg editor area, as usual.
Firstly, go to your landing page and find a section, where you want to place an anchor. Remember, that in Gutenberg you can’t give a web address to any Image block. That is why we will give the link to the Heading blocks.
After that, open the Advanced tab and enter a word or two in the HTML Anchor field. Do it with each section on your landing page you want to link.
As a next step, you need to move to the admin dashboard > “Appearance” > “Menus”. Whether you already have a menu or not, you should create a new one. Give your menu a name in the “Menu Name” field and click the “Create Menu” button.
After that, take a look at the Menu Structure area. Here you can change the menu name and here your items will showcase.
In the Menu Settings area, choose where to display menu location on your landing page. In fact, you can place it wherever you want, even in the footer.
Use the Custom Links tab to add the anchor links with the titles to your menu.
Firstly in the URL field, you need to write the anchors, you gave to your sections, beginning with “#” with no spaces. In the Link Text field, you are able to give your link any name you want to display as a menu item. Don’t forget to save the menu after adding all anchors.
We will create a navigation menu with a few landing page sections:
- Welcome hero section;
- About block;
- Services block;
- Reviews and testimonials block;
- Get in touch block;
- CTA block.
Customize the Menu
Now, let’s go to the draft of your landing website. Add a Navigation block at the top of your page and click on the “Create empty” text.
Type each of your HTML anchors, that you’ve given to the sections before. You can enable them to open in the new tab, add nofollow to link and write down the description.
After you’ve added all HTML anchors to your navigation menu, you are able to style it up. Choose one of the layouts, replace the items and set the text size.
Take a look at the result of your work! We hope you enjoyed these simple steps of adding a navigation menu WordPress block on your landing page.
Check the other tutorials to create a vivid and multipurpose landing page website.