One Page WordPress Smooth Scrolling Menu – How to Use Page Scroll to ID Plugin 2017


Greetings WordPress-ers, in today’s show we are going to set up a one-page smooth scrolling website in WordPress Jackson here welcome to the channel this is where i share tips tricks and tutorials or about WordPress and if that is your thing please do go ahead and consider subscribing if you’re new here and definitely check out the description below it’s got all the information about all the stuff that we’re going to be talking about today at last the show notes and it’s also got a link to download a list of my all-time favorite plug-ins for WordPress, a top 10, but anyway on with the show one-page smooth scrolling you know the stuff it’s good when you click a link at the top navigation it smoothly scrolls down to the place you want to be super slick especially for one page sites, and it couldn’t be easier than with plugin that is free to use off the wordpress repository, a plugin called page scroll to ID, it’s killer it sets up in a few seconds and it’s almost immediately ready to use as soon as you activate it, so let’s get on with the tutorial smooth one page scrolling navigation in WordPress with the Page Scroll to ID Plugin OK, so let’s make a one-page scrolling website, so here we have a standard website demo template site made with the Cento Theme, and we’ve got three pages: home about and contact and what we’re going to do is put all of these onto the single-page the homepage and have a nice little scrolling action when we click the links to take it to the various parts of the page, so let’s go and install the plug-in, we’re going to go to plugins add new and grab the text that we need the name of our plug-in is Page Scroll To ID fine fine plugin that install that now and activate it and once it’s activated you see you got a link here on the plugins page to the setting that’s just under the settings page scroll to ID and to be honest there’s actually a ton of settings to muck around with but to be fair all the settings are perfect straight out-of-the-box so we’re just going to leave that open and go to our pages and open them in a new tab and go to our homepage where we’ve got this text for our welcome text there is on the front end just some lorem ipsum, and we’re going to put in a couple more sections so we’re going to copy this and turn that into “about” and paste it in again and turn that into.. give that another carriage return, turn that into contact so we’ll update that and take a look on the front end we’ve got our three sections of page now okay so the next thing we want to do on the home page itself is put in our little links that will tell our menu the menu we haven’t created yet where to go when you click it and it couldn’t be easier because Page Scroll to ID plug-in actually gives you a little icon that allows you to set an ID target for your page, so what you want to do is put your cursor next to where you want that to be click the insert page scroll to ID target and then you just type in a name for your target ID will say that say about and that one will do the same with I we’ll call that “contact” and then we’ll just make this the “welcome” OK cool, so now we’ve done that we’ll just save that up you won’t see the shortcut on the front end let me show you here we’ve got our new page and there’s our different sections go back to the Settings tab and we’re going to grab the little bit code here this is required on the menu that were about to create so we’ve copied that we’re going to go to appearance menus and we’re going to right click and open a new tab and here is our main menu currently now we’re going to create a new menu ands we’re going to call it “main scroll” create that menu, and we need to add some items do not need a custom links and you see we’ve got the option here for custom links and that the URL will be our ID that we just put onto our page so we put a hashtag and we put in “welcome” and the link text is home so we’ll keep the home text the same, we’ll add that to the menu the next one will be about and we’ll add that the menu and the last one is “contact” and we’ll add that to the menu. So we’ve got three links now and let’s go take a look at the front and will refresh that, oh hang on, we need to change this to the primary menu so that it showed in that many position of whatever theme you’re using now we refresh that front page and try these links out now you see it is jumps it’s just jumps there that’s because we need that little bit of code remember that little bit of code that we copied, now where the code goes is not visible by default on WordPress you need to open up your screen options on your menu and show the CSS classes and then you see you get this box, so we’re going to paste-in our little bit of code from Scroll to ID on all of them and save that menu and now refresh the front page / the homepage let’s get to the top we do in fact get a nicely scrolling page, lets use the defaults scroll up thats in this theme, Cento Theme, scroll down to the contact amazing beautifully scrolling one-page website with the Page Scroll to ID plug-in, now what would be even nicer would be the menu that you see here at the top to stay sticky so when you scroll down the menu pops down so that you could use it for the navigation through a longer page and that tutorial is coming up right after this one. So they go a beautiful piece of kit there this Page Scroll to ID plugin and don’t forget to the next tutorial the link to it there is all about how to put in a sticky menu like i mentioned in the tutorial, but what is your experience with strolling websites do you have any Themes or Plugins that you use specifically for that type of thing please go ahead and get some comments down below and if you like what you’ve seen please please do go ahead and consider subscribing but until next time…. I’ll see you later

Add a Comment

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