Creating a One-Page Scrolling Menu with SiteOrigin Page Builder

we design captivating websites with creative seo and branding strategies.

Creating a One-Page Scrolling Menu with SiteOrigin Page Builder

One page websites are something we see much more now. There is a lot of value to having just one page for your website: simplicity for the user. However, you want to use a scrolling menu or else your website will not look professional.

In most themes, you can set the Menu Style in the Customizer. Be sure to make it a Sticky Menu – this means the menu will scroll with you as you navigate down the page, rather than staying to the top and not being visible when scrolling. This all helps with the navigation of your website, making it easier for the end user.

How to setup your scrolling menu:

First Install and Activate three plugins. SiteOrigin Page Builder and SiteOrigin Widgets Bundle and Page Scroll to ID by malihu.

Once you have done this, navigate to the Home Page, click edit and start building your site with the Page Builder.

When creating your website, you want to use multiple Rows so you can add the CSS tag to each row. This is how your menu will be able scroll.

Lets say in the menu you have a Home tab, About Tab, Services, and Contact Us Tab. That would be a very simple one page website – which is perfectly fine so long as you have compelling content that is easy to optimize!

  1. Go to your home page and click the Wrench to Edit the Row.
  2. Edit Attributes and add a tag to Row ID. For example a good tag for About would be: row-about
  3. Once you have done this with each of your rows for the Menu Titles, go to Menu.
  4. Add your menu items with the Custom Link. Under the link you want to put #row-about or whatever you named your Row ID. Just be sure to add the # symbol at the beginning. That character tells it to scroll.
  5. Add your title for your menu in the Navigation Label Field. This is what you will see in the menu on the front end. For example, when doing the About, us something like About Us or Our Team.
  6. Click Save Menu.
  7. Finally, go to Settings > Page Scroll to ID. All you may want to do here is edit the scrolling time. We recommend 1000 milliseconds.

Now you’ve got your scrolling setup! If you have any questions, please reach out to us at our Help Desk. Thanks!

Jack, Tenaya Digital