Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

Home Forums Support Single Landing Page

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #186415
    Damien

    Hi There

    Is there any way of setting the generatepress theme to work as a single landing page for the whole site? So rather than each link going to a new page, it simply scrolls down to a section on that page?

    Many thanks.

    #186438
    Hamish

    Hi there,

    I just saw this while browsing. There are plenty of tutorials around for this as it is a wordpress method that works with GP. It involves anchor links and custom menus…

    For example https://wordpress.org/support/topic/how-do-i-create-page-anchors-from-wordpress-menus

    Last poster:
    In HTML this is called a document fragment.
    There are two steps. First you insert an anchor in your webpage:
    <h2>Reviews</h2>
    Then in Appearance > Menus, in the Custom Links box you put in the URL plus a pound sign plus the fragment name:
    http://www.casafuturatech.com/smalltalk/#smalltalk-reviews
    Then you can put the menu item anywhere in your menus.

    #186457
    Roberto Enrique

    Ok, to accomplish this you should first understand that the basic idea of this functionality is that you links points to an ID on that same page.
    So, in a page like this:

    
    <h1 id="first-title">I'm a tittle and my ID is "first-title"</h1>
    <p>Here's a bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content </p>
    
    <h1 id="second-title">I'm a tittle and my ID is "second-title"</h1>
    <p>Here's a bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content </p>
    
    <h1 id="third-title">I'm a tittle and my ID is "third-title"</h1>
    <p>Here's a bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content bunch of content </p>
    
    

    You want a navigation like this (this is just for demo purposes, you should do this using the “custom link” in the WordPress menu editor):

    
    <ul>
    <li><a href="http://www.mywebsite.com/#first-title">Go to Title One</a></li>
    <li><a href="http://www.mywebsite.com/#second-title">Go to Title Two</a></li>
    <li><a href="http://www.mywebsite.com/#third-title">Go to Title Three</a></li>
    </ul>
    

    Clicking on each of the link will take you to the relative element with that ID
    Read this to get better info on how this works (pretty simple but useful stuff):
    http://www.webweaver.nu/html-tips/link-within-a-page.shtml

    I prefer to use the full URL rather than just the “#ID” because sometimes you want to add another page (like “blog” or something…) and you want your menu to behave correctly.

    ——————————————————————-
    EXTRA: SMOOTH SCROLLING

    One really nice thing to have when using this kind of one page websites is to have smooth scrolling.
    You can easily add this functionality if you’re using the GP-Hooks Add-on

    Just add this to wp-footer hook

    
    <script>
    
    // scrolling thanks to https://css-tricks.com/snippets/jquery/smooth-scrolling/
    
    jQuery(function() {
      jQuery('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = jQuery(this.hash);
          target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            jQuery('html, body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });
    
    </script>
    

    And it should just work

    Hope my explanation was clear enough.

    • This reply was modified 5 years, 7 months ago by Roberto Enrique.
    #186572
    Tom
    Lead Developer
    Lead Developer

    Beautiful, you guys are awesome 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.