The main consideration when creating content for your One Page site, or a page with a one page menu in a multi-page site, is to organize your content into sections. In this way, you can then reference each section in your menu. Your menu will serve as a way for your viewers to quickly scroll to a section they’d like to view. For example, clicking the About menu item will automatically scroll the page to the About section.
There are two methods you can use to identify the specific sections of the page. You can use the ‘Name Of Menu Anchor’ option present in the Container Element, or the Menu Anchor Element at the beginning of every section.
Step 1 – Create your page content into the different sections you want on your page. For example, the About section, the Contact section, etc. The easiest way to do this is to have seperate containers for each section.
Step 2 – Once you’ve decided on the different sections of your page, it’s time to reference each section. There is little difference in whether you use the ‘Name Of Menu Anchor’ option in the Container Element or the Menu Anchor Element, but in most cases the Name of Menu option in the Container will be the simplest. The main difference is that with the ‘Name Of Menu Anchor’ option, it references the start of a Container. The Menu Anchor Element however, can be inserted anywhere in the content, giving you the ability to reference a spot in the middle of a Cointainer for example. In most situations, referencing the start of the Container, or Section is what you will want, and therefore either method will work.
Step 3 – If you’re using the ‘Name Of Menu Anchor’ option, you simply insert the unique Menu Anchor ID for the section you are on into the Container option. If you’re using the Menu Anchor Element, click the ‘Element Settings’ and enter a unique Menu Anchor ID for the section in the ‘Name’ field. For example, about.
Step 4 – Click ‘Save’ to save your changes, then repeat step 2 and create separate Menu Anchors for all the different sections that you have on your page. See the screenshot below for an example of the Menu Anchor Element inserted at the top of a Container, in the ‘About’ section.