WordPress Tricks

How to create Single Page website using twenty seventeen theme: Click on menus and it will scroll to the target/related content without refreshing

allaboutbasic

Single Page Website
Before i shared you CSS customization of Twenty Seventeen theme. Today I am sharing you how to create Single Page Website using Twenty Seventeen Theme.

In Single Page Website, when you will click on menus, it will go scrolling to the related point or content in homepage.

You can use my shared method and ask question in the comments section.

You can take my personal help in skype : om2000_cuet

Here are the Steps.

1. Install Page Scroll to id plugins. This pluigns will help us to scroll  or go to the targetted / related content in homepage with an scrolling effect.

Page or Menu Scroll to Content

2. For simplicity lets assume  our  page will have   only 3 menus :   “Home”, “About” and “Contact”.  When Clicking on  “About” and  “Contact” menu it will scroll to About and Contact section in Homepage.

Single page menu

3.  Creating Pages for Single page Site in twenty Seventeen theme:

To Create the pages for single page website you have to wrap the  Title with   a little html   like the image attached

<span id=" any id you use">  </span>


Menu click and scroll to page


4.  Adding Created page in Menu to scroll


Click and scroll to content


5. How to show the Created page in Homepage in Twenty Seventeen Theme?


At  First go to   Appearance > Customize  and the   Twenty Seventeen theme Customiztion section will appear


Check the image attached how to add  About Us page  to show in homepage


First Step:


Twenty Seventeen theme option


2nd Step:


Add page in homepage twenty seventeen theme


Viola  you are done  🙂


now Click on  About Menu  and you will see   it is scrolling down and  showing the About us Content


If you have any issue feel free to ask me question here in comments section


OR


You can take my personal help in skype : om2000_cuet

Published by allaboutbasic

22 thoughts on “How to create Single Page website using twenty seventeen theme: Click on menus and it will scroll to the target/related content without refreshing”

  1. I like the information you have here but I am finding the links slide past where they should go. The seem to end halfway through the text section instead of opening to the top of the section. Thoughts?

    Like

    Reply

      1. So what happens when i put in the anchor links, is that clicking on the navigation link brings the user to halfway through the text of the correct section of the one page layout 2017 WP theme.
        Clicking on the link should bring the user to the top of the correct section of the text where the span is located. It does not.

        Like

      3. Hallo,
        did you find a solution? It seems i have the same Problem, it all scrolls very fine to the content of the site but the titel is always hide behind main manu.

        Like

      5. Anchors have always been a problem in HTML – they have never worked correctly and they are worse on the 2017 Theme 😦 No matter where you put them the tool is just faulty and the 2017 theme even more so. smh
        So no I do not have a solution.

        Like

  2. Do you find that sites created with twentyseventeen have jumpy images when scrolling (with internet explorer and edge)?

    Like

    Reply

      1. Sorry. When viewing any site which uses the twentyseventeen theme (including the sample on the wordpress site), using internet explorer or edge, when you scroll down the page, the photos in the background jitter / shake…

        Like

  5. Thing is that when you have a single column selected (time options) the scroll passes the page title and scrolls directly to the page content…

    Like

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. ( Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. ( Log Out /  Change )

Cancel

Connecting to %s