Home>Blog>One Page Navigation with Page Builder and Corp

One Page Navigation with Page Builder and Corp

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.

View the demo.

Create Your Page

In this tutorial, we’ll be using the WordPress plugin Page Builder by SiteOrigin and theme, SiteOrigin Corp.

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). Import the JSON file from LayoutsImport/ExportSelect Import File.

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 http://demo.siteorigin.com/corp/one-page-demo/#services.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments

  1. 2 months, 8 days ago Andrew Misplon Hi, I Work Here

    Thanks for reading. If you have any questions or comments, please let us know.

    • 1 month, 4 days ago Allen Jessop

      One Page Navigation with Page Builder and Corp

      Perfect. Just what I wanted and just at the right time.

      • 1 month, 4 days ago Andrew Misplon Hi, I Work Here

        Super, glad that helped :)

  2. 1 month, 3 days ago Patricia

    Hello,
    Thanks for this tutorial. I’m using the Site Origing Theme “Vantage”. I manged to creat a One Page Site but it isn’t displayed correctly. When I click on the menu, I am redirected to the section in the page. But the beginning of the section it is not shown. I see the section “moved” (out of alignment). It would be great if you could give a tip on this. Thanks a lot.

    • 1 month, 3 days ago Andrew Misplon Hi, I Work Here

      Hi Patricia, I haven’t tested this but do you perhaps want to give this plugin a try: https://wordpress.org/plugins/hash-link-scroll-offset/. Vantage doesn’t yet have the same functionality as Corp so there is nothing offsetting the scroll. The plugin linked here will let you offset the scroll point by the height of the navigation. Let us know how that goes.

      • 28 days, 2 hours ago Patricia

        Hi Andrew,

        it worked! Thanks a lot for your support!

        • 27 days, 22 hours ago Andrew Misplon Hi, I Work Here

          Super :) Glad to hear you’ve made progress. All the best.

  3. 29 days, 15 hours ago David LeBlanc

    Thanks for the one-pager article and thanks for the tip on the Menu Items Visibility control plugin. That could very useful.

    • 28 days, 17 hours ago Andrew Misplon Hi, I Work Here

      For sure :) Glad it helped. All the best.

  4. 27 days, 20 hours ago Guido Meyer

    And how can I add a “smooth scroll”

    • 27 days, 19 hours ago Andrew Misplon Hi, I Work Here

      Hi Guido, Corp will smooth scroll if you’re scrolling to a Page Builder by SiteOrigin row ID or if you are scrolling to a link with the class ‘corp-scroll’. Which theme are you using?

      • 27 days, 19 hours ago Guido Meyer

        Hi Andrew, I’m using CORP. So I will try the ‘corp-scroll’ class. Hope to find the right place to add these class, should be the “row”, should’t?

        I try to do a little bit strange thing: I need a menu for “anchors” between two Headline-Widgets.
        I build a row, for example with 5 colums and add a Button-Widget to each. The buttons are linked to the row-IDs. Rough and dirty – a bit crazy, but works!
        Any better idea, Andrew?

        • 27 days, 19 hours ago Guido Meyer

          Ok, find the right Button Class under SEO etc within the Button-Widget

          • 27 days, 17 hours ago Andrew Misplon Hi, I Work Here

            Super, glad to hear you’ve made progress :) I’ve edited this reply as I wasn’t making sense initially. Anchor links in the menu will automatically smooth scroll. If you have an anchor link but it isn’t in the main menu and you still want that link to smooth scroll down to the anchor then you’d need to add a class of corp-scroll to the link. You’ve correctly added that class within the Button widget. Perfect. There is a brief example of using this class contained in the documentation here.

  5. 21 days, 4 hours ago Ibrahim Rumani

    How good is this theme for SEO?

    • 21 days, 2 hours ago Andrew Misplon Hi, I Work Here

      Hi Ibrahim, good to hear from. Corp is built using the _s starter theme which incorporates best practices. Alex mentioned he’s been assisting via email. If you have any follow-up questions, feel free to let Alex know. Thanks :)

      • 21 days, 2 hours ago Andrew Misplon Hi, I Work Here

        Ahh sorry, correction, Alex mentioned he recognised your name. If you have any follow-up questions, feel free to reach out via email on [email protected]. Thanks!

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More