April 6, 2020
Bootstrap change a one page scrolling website into to a multi page bootstrap website

Bootstrap change a one page scrolling website into to a multi page bootstrap website


hi there guys this is Jamie from http://www.system22.net and great web design comm had a great question somebody posted on one of my
videos how do you turn a one page scrolling site into a multi-page website
well actually it’s really easy we’ve got our bootstrap one page site here if I
scroll down you can see it’s all on one site in fact I’ll just use the links
this is part of a course that you can get on udemy about how to customize
bootstrap templates and make bootstrap websites really fast and you can sell
these sites to your customers for a lot of money so we’ve got a 1-1 page
scrolling site here and we want to actually turn it into a multi-page site
with separate pages for the home about us services team etc so here’s our
folder with our actual website in it there’s our index.html which is our
scrolling page that we’re looking at here if you’re doing this I would
recommend you make a copy of this folder just so you’ve still got the original
just in case that way you’ve got a backup if something does go wrong it’s
not likely to because it’s very easy okay well let’s start this process the
first thing that we want to do is take our index.html page and make some copies
of it you can either hit ctrl C to copy or just right-click and copy and then I
just want to paste the copy underneath and I’m gonna do that say three times so
we’ve actually got four pages now we’ve got the original and three copies now
let’s start renaming these copies and the first one will be about and the
second one services and the third one to rename you can hit f2 or right click on
your mouse and rename and contact so now we’ve got four pages effectively and
what we want to do is edit each page and get rid of the content that we don’t
want them keep the content that we do want so let’s open the index page first
which is our front page because when you load a browser loads it always loads the
index dot HTML first or index dot PHP if it’s a word press okay so let’s open
this with our bracket software and anybody that’s been watching my videos
will know that brackets is a free text editing software this program here and
you can download it from a link below this video ok that’s fine that’s our
title for our index page we can leave that as it is what we’re gonna do is
start rolling down and deleting the sections that we don’t want so we don’t
want our about us here let’s have a quick look at the page and see what we
want to keep we’ll keep this big slider here I’ll keep that why choose us or
that that’s our About section I believe yeah okay I’m gonna do this really quickly
and go around go down and chop a bunch of stuff obviously when you do it you’re
gonna want to put a lot more time in there to it so let’s go to our brackets here’s our About section if you select
the opening battle tag it’ll select the closing tag for you as well so let’s
just take that delete that section let’s just tidy that up a little bit and
continue to go through and just delete the sections that you do not want and
ctrl s to save that this will be our first page now what we want to do is do
exactly the same for the next pages so let’s open that with brackets this time we’ll change that to about us
the title up here and I’ll show you how to change these
links in just a moment here’s our Salida again I’m gonna hit
that opening section tag and it’s selected the closing one so let’s just
get rid of that slider save it ctrl s I will see again you’re gonna want to go
through and edit your content a lot more carefully than I’m doing here right
let’s go back to our next page which is contact open it with our brackets and
we’ll just edit the title there this will will appear in your browser tab and
again after the menu I’m going to basically take everything down to the
the contact form there’s a lot of stuff here okay there’s a contact section delete
that save that page and again I’m not going to go through it because there’s
no point but you do exactly the same for the next page I’ll just rename it I’ll
just give it a quick rename at the top services and let’s just get rid of the slider I
guess in fact let’s not no point absolutely no point because it’s all the
same you can i want to edit yours completely differently so we’ve
effectively got four different pages there now so let’s go back to our first
one the index.html now here is where we want to if we go back to the top of the
page now here’s our menu and all we want to do here is home and we’re actually
going to change the href to the name of our page which is index dot HTML because
it’s an HTML page and the next one was about about us that’s fine so we want to
we remember we renamed our pages about contact and services they are actually
HTML it’s dot HTML after all these pages here so what about dot HTML services guess what we want to put here
yeah that’s it services dot html’ and contacts the last one is to contact and
let’s just delete the ones that we don’t want and of course if you’ve got more
pages you can just add more so we’ve got four pages let’s just have a look here
home about our services contact which is fine which will bring up the other pages
well we need to copy this from the beginning of the unordered list here to
the bottom there and we want to paste it into all our other pages so they’ve got
the similar menu structure so ctrl C to copy just save this ctrl s go to our
about page down to the menu there’s our unordered list let’s select the whole
thing and just paste ctrl V or right-click and paste there’s our new
menu save we just repeat that for all of our pages here and services oops liked it too much there you’re
selecting these make sure you don’t clip off any of these little tags at all
brackets here because if you do things will not work correctly control s okay
so we’ve now done that for all four of our pages now if we go back to our site
let’s go back to the top I’m gonna refresh and this should just have our
four links up at the top here and now it should have four separate pages as well
so let’s just refresh the browser there we have it there’s our four little links
here’s our regular page now if we hit the about us it’ll take us to a separate
page or about Us page saying with the services which I don’t think I made any
changes it’ll be the same as the index and the same with a contact which is
basically just our contact form that we’ve got left here okay one last thing
that we just want to do if we go back to our pages we’ll start from the top here
we’ve just got to edit this menu and on each page this is our index page we want
to make sure that our index or whatever page we’re on is marked as active there
we can get rid of the scroll because we don’t want it to scroll anymore
so there we go we’ve got the class of active on our index it’s save that I’ll
show you what this is going to do in a moment go to our about page and this
time I’m just going to copy that active right there or make our about active and we just go
through and do this for each page it doesn’t matter if you don’t get rid of
the scroll it really you know it just won’t scroll anyway that’s fine active
honor are about control s do the same thing for your contact as I say I’ll
just leave that in there you can get rid of it because we don’t need it because
it’s not gonna be scrolling anymore oops I got the wrong one that’s services
we got there that on the correct one you’ll see why that makes a difference
in a moment and last but not least services and remembering to delete any
other actives there because we only want one active in the menus Chow saying just
make sure I did that with this one yep that’s fine so we’re all saved there if
we go back to the site now when we click on here what that’s done is now when we
go to each page you’ll see how it remains highlighted on the page we’re on
there that’s all they’re active things done they will that is how easy it is to turn
a one page scrolling site into a multi-page site with separate pages on
it I hope you found that interesting if you did please subscribe to our Channel
and like I say this is this PC fixed site is part of a bootstrap design
course that we’ve got on udemy you can find a coupon for it down below it
teaches you how to build bootstrap sites really fast from start to finish and
includes upload process to your server so once again this has been Jamie from
http://www.system22.net and http://web-design-and-tech-tips.com thanks for watching have a great day

6 thoughts on “Bootstrap change a one page scrolling website into to a multi page bootstrap website

Leave a Reply

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