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
