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

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.

Or can take my personal help.

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

Pay me some, I will help you for CSS Issue PersonallyCLICK HERE….

8 Responses to 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. mogrianne says:

    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

    • HI Mogrianne
      would u mind to clarify me the issue some more please?
      sorry didn’t understand your issue
      Om

      Like

      • mogrianne says:

        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

      • Hi
        would u mind to share me the site url where you are working please?
        Om

        Like

  2. Mike Sealey says:

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

    Like

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: