One-page navigation allows users to easily access content in long landing pages or one-page websites. SiteOrigin Corp offers integrated one-page navigation with menu highlighting and smooth scroll. In this tutorial, we’ll explain how to set up a one-page website or landing page using Page Builder by SiteOrigin and Corp.
Create Your Page
If you haven’t already created a page, go to PagesAdd New, create a new page and click on the Page Builder tab to get started.
If you’d like to use the demo page content, you can download it here (right click and save as). Once the file is on your desktop you’ll need to un-zip it before importing the JSON file from LayoutsImport/ExportSelect Import File. From SiteOrigin Corp version
1.12, the One Page Demo will be available from LayoutsPrebuilt Layouts.
Adding Row ID’s
One you have a populated page, either with your own content or with the demo content listed above, it’s time to insert our row ID’s. Row ID’s will be used to link to each section of the page. Edit the first row you’d like your menu to link to and click the Attributes tab on the right, use the Row ID field to insert an ID that’ll be used later in your menu. For example, in our demo, the first row we’re linking to is the Services row. The ID used is
services. You can insert any name or number.
Add a row ID for every row in your page that you’d like to link to.
Create Your Menu
Go to AppearanceMenus, click the “create a new menu” link if you don’t already have a menu added. Once named, save your menu to the Header Menu theme location. Next, add your anchor links, these will direct users to the various sections of your one-page website. Click the Custom Links tab on the left to add a link. In the URL field, add the name of your first section ID with a hash before it. For example, if the first row you’d like to link to has the ID
services, you’d add
#services to the URL field. The Link Text field is the text your users will see, insert the link text for the anchor you’re linking to.
Creating One-Page Navigation in Multi-Page Website
Creating an anchor menu as we’ve described in the above paragraph is quite simple for a one-page website. But what if your one-pager is part of a larger website? In that case, you’d need a separate menu. In our Corp demo, we’ve done exactly that, the one-page demo has one menu and the rest of the website has another. If you’d like to know how this was done, read on.
The plugin we’ve used for this is called Menu Items Visibility Control. Once installed and activated, it adds a Visibility field to each menu item. In each menu item at AppearanceMenus we’ve set the visibility to either show or be hidden on the one-pager. To do this, you’ll need to know the ID of your one-pager. Go to Pages, edit the page concerned and check the URL, within the URL is a number, that’s the page ID. In the case of our demo, the ID is
288. The below conditional statements can be used in your menu, simply replace our page ID (288), with yours.
Show this item on page ID 288
is_page( 288 )
Hide this item on page ID 288
! is_page( 288 )
If you’d prefer to have your one-page links visible throughout your site then there is no need to use Menu Item Visibility. An additional consideration is that users might access your one-page links from another page. To ensure your anchor links work, use absolute URLs when adding Custom Links to your menu. This means that instead of adding anchor links such as
#services, you’ll need to add the page URL in addition to the anchor link. Using our Services example from earlier in this post, we’d add
Page URL: http://demo.siteorigin.com/corp/one-page-demo/
Anchor Link: #services
Combined URL: http://demo.siteorigin.com/corp/one-page-demo/#services
Hopefully, you’ve found this post useful. Please, let us know if you have any questions below, we’ll do our best to assist.