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. 4 months, 4 days ago Andrew Misplon Hi, I Work Here

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

    • 3 months, 18 hours ago Allen Jessop

      One Page Navigation with Page Builder and Corp

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

      • 3 months, 17 hours ago Andrew Misplon Hi, I Work Here

        Super, glad that helped :)

  2. 2 months, 29 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.

    • 2 months, 29 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.

      • 2 months, 24 days ago Patricia

        Hi Andrew,

        it worked! Thanks a lot for your support!

        • 2 months, 23 days ago Andrew Misplon Hi, I Work Here

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

  3. 2 months, 25 days 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.

    • 2 months, 24 days ago Andrew Misplon Hi, I Work Here

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

  4. 2 months, 23 days ago Guido Meyer

    And how can I add a “smooth scroll”

    • 2 months, 23 days 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?

      • 2 months, 23 days 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?

        • 2 months, 23 days ago Guido Meyer

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

          • 2 months, 23 days 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. 2 months, 17 days ago Ibrahim Rumani

    How good is this theme for SEO?

    • 2 months, 17 days 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 :)

      • 2 months, 17 days 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!

  6. 28 days, 14 hours ago Erwin Zawadil

    Hello Andrew !
    I have done everything as described, unfortunately jumping to a anchor moves the screen below the start point of a row, which is defined via row ID as anchor.
    I can not share a link so far, as I am still designing the site locally using Bitnami to simulate Apache on my windows machine.

    Just to give you an idea:
    1) I have used your one-page-demo and changed the destination of the button from the hero image to jump to the anchor
    2) the anchor is set in ´Blog Section´ – 1st raw within the row ID

    If a press the button the screen moves down till the end of this raw, which means, the two lines of the ´Lorem ipsum´ text are visible but the not the Headline ´FROM OUR BLOG´.
    For full-screen and tablets there is a possible dirty workaround by using an empty row before the raw I want to go, just with the anchor row ID and a bottom margin of 60px, but it does not work with the size of a phone screen. Therefore its not a solution at all.

    It woudl be great if there is a solution for this problem available.

    THX !

    Best regards
    Erwin

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

      Hi Erwin. Thanks for posting, I’m sure we can help. Which theme are you using?

      • 28 days, 54 minutes ago Erwin Zawadil

        Hi Andrew, I am using the CORP theme.
        BR Erwin

        • 28 days, 51 minutes ago Andrew Misplon Hi, I Work Here

          Super. Corp will offset the height of the header if the link is fired from site navigation OR if you give the link a class name of corp-scroll
          Try editing the Button, open Other Attributes and SEO section and insert a class name of:

          corp-scroll

          • 28 days, 29 minutes ago Erwin Zawadil

            Hi Andrew, this works … using the button it scrolls now correctly – THX ! – and I can live with it.
            If I want to have the jump to the anchor also from the starting hero image the scrolling is still wrong. Any idea on this ?
            BR Erwin

          • 28 days, 9 minutes ago Andrew Misplon Hi, I Work Here

            Thanks. I’m not quite following. When you click the button in the Hero with the corp-scroll class added, is the header height offset from anchor when you arrive at the end of the scroll?

            In order for a link to smooth scroll and offset the header, it either needs to be in the main menu or have the class corp-scroll included. Unfortunately, it isn’t possible at the moment to add a class name to the Destination URL field of the Hero frame so we’re a bit stuck with that one.

          • 27 days, 23 hours ago Erwin Zawadil

            Got it … yes you are right, trying to jump to the anchor from the destitnation URL works really with a jump without a smooth scrolling. It´s might be a question of taste, if smooth scrolling is the ´MUST HAVE´ or just going to the right position with the destination URL is more favourable.
            BR Erwin

            a little additional question:
            I tried to use a jpg image for my logo in the headline, which does not looks good together with the setting ´ Header overleap enabled ..´
            Is there a possibility to hide the logo completely on static pages with a hero image and this setting ?

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

            The smooth scroll is combined with header offset. Header offset is only a problem if you’re using the sticky header. To activate this (smooth scrolling with offset) we need to be able to insert a class into the link if that link isn’t in the main menu. Repeating myself a bit.

            You’d need to use Custom CSS to hide the logo,

            .page-id-23 .site-branding { display: none; }

            Replace the ID with the ID of the page you’re working on. ID is in the URL when editing.

            You can also check out: Page: Advanced Customizations. Gets a bit more complicated though.

  7. 27 days, 20 hours ago Erwin Zawadil

    THX ! – I´ll try this later on.

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

      For sure :)

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More