In this one page WordPress tutorial
I'm going to show you how to make this
single page website I was inspired by a
design that I saw and wanted to pull it
apart and figure out how it worked. I then
created my own images and design so that
I can show you how you can make this
type of website design yourself.
The main wow factor in this page design
comes from the use of parallax sections.
If you're interested in building a
WordPress parallax website this would be
a good tutorial to watch. If you want to make
a standard one-page website you can just
choose to use a standard background and
not enable the parallax effects. I
created this site with the Divi theme
Divi is one of my favorite WordPress
themes if you haven't checked out the
Divi theme yet hit the "i" icon at the top
of the screen see my review of it. I'll
also include an affiliate link to Divi
in the description below this video if
you decide you want to get the Divi
theme this link will provide me with a
commission and that helps me to keep
making tutorials like this one right
here. This tutorial assumes that you've
already have your website set up and
that you've configured and have the Divi
theme and everything installed. If you
don't you can learn how to do this step
by step in my how to build a website
beginners wordpress tutorial and I'll
walk you through everything that you
need to know just click on the "i" icon or
look for that in the description below
this video. We're going to cover a lot in
this video and I'm really excited to
show you guys how to do all this stuff.
Let's run down the list of what we're going
to learn in this tutorial in the first
section I'm going to show you how to
take this background image and make it
fill up the full window we're then going
to learn how to make this into a
parallax website, and how to use parallax
to make this illusion of the images
changing on the screen here. We're going
to use a blurb section to create a
bullet list and we're going to learn how
to use a specialty module to place
images or elements next to each other
inside of a row. I'll show you how to add
a gradient background inside the Divi theme then we'll learn about how to optimize a
section for viewing it on desktop or on
mobile devices and finally we will learn
how to make links inside of a single
page to make this a truly one page
WordPress website. So as you can see
we're going to cover a lot in this
tutorial. If you want to skip ahead to
just the sections that you're interested
in scroll down to the description below
this video
where you'll find an index of each topic
that I cover. If you want to get some
websites building
 practice you want to follow along
I'll include a link to the graphics
that I've used on this page. You can look
for that link in the description below
so if you're excited to get started let
me know by hitting that thumbs up button
if you haven't subscribed yet hit that
subscribe button now and let's learn how
to make this awesome one page website.
Let's dive in and get started making our
one page WordPress website. So I've got
everything sort of set up and configured
you already. I've got my folder here where
I've got all the files that I need which
I talked about in my sort of getting
started starting website and thinking
about design video which you can check
out as part of my full tutorial series
so I've got my color palette here I've
got my optimized images here and my raw
images right there. That really helps a
lot in getting started started also
pre-configured the theme which I talked
about and how to configure Divi with
this slide in style of menu and header
so many slides in here of course there's
several different options for headers
in Divi but I think that for this site
this looks really good let's go ahead
and get started and we'll do that by
creating a new page and we'll give this
page a name of one page WordPress website
just to give it a name of something so
we've got one page WordPress website
here and then click publish and then I'm
going to use the Divi builder here and
let's go ahead and switch over to the
front and visual builder which is what I
like to use. Okay so let's go ahead and
start designing the page I like to throw
in the background first especially if I
already have it or at least get close to
the background color or I think I want
for it I've already got the images for
this website let's go ahead and add them
all right so I've selected this image
right here for the background just go
upload image and you can see it's
already in there obviously it's not full
height and for this I want to show you
guys how to do a full height section
using the Divi theme it does take a
little bit of code so I'll show you how
to do that right now since I just want
to see I like to sort of see what my end
result is as I'm working so if I already
know I want this full height which I do
go ahead and put that in there we go
over here we go to the Advanced tab and
then we click on custom css and then in the main
element
you type in this code which is on some
CSS code so that's height: 100vh
semicolon and you can see it already
made it full height here and then can't
really scroll down much we just have the
footer here you can see that it
basically figures out what the window
size is that your viewers looking at it
in and it has the background image fill
up or actually this whole section fill
up that whole browser window size. And
don't think that I'm like some sort of
coding genius and I just know that to
top my head what I did was just went
over here to Google and I searched for
what they call it is 100% viewport
height CSS code and then there's you
know several articles that show you how
to do that so it's not it's not that I'm
like some crazy coding genius that knew
how to do that I just I need a search
for viewport height and then that's
where I find the code and I honestly
don't even remember I wrote it down for
this tutorial but I don't usually
remember what that code is I always just
look it up so you know don't be afraid
to look it up don't think you need to
know everything I mean that's the beauty
of the Internet is anytime you need to
know something you can just look it up
okay so let's go ahead and add a section
here so I want to do a full width
section here and just what's awesome about
Divi is you can just type in so I'm going
to type in text to get the text module
to pop-up and then we're going to type
in the text that we want and you can see
on the text is already showing up here
and let's go ahead and make that a
heading one tag and then below that I'm
going to add just some regular text okay
and then let's go ahead and adjust the
settings for those for the text with the
text color to be light because obviously
we've got a dark background with the
orientation to be centered and you can
of course also in the text section here
when you're typing everything in you can
also highlight it and use this doesn't
matter you can do it do it either way it
just depends on what you're doing do you
know that I want the text to be a little
bit larger so I'm going to adjust so the
header text so this will adjust the h1
size of
there's no other really easy way of
adjusting the size of the other H tags I
think you can do it in the divi settings
or you can do it with a visual builder
when you click on the text and then you
can highlight it and change the color
and change the size a little bit
annoying I wish that they had that in
here but you know for this we can use an
h1 tag and we've got no problems there
ok and then let's also change the
regular text size so I'll get this font
size a little bit larger something like
that okay and then next thing let's add
a button to add a button we just hover
over the grey module push the plus
button you can just type in button right
actually I can see it right here and
then we'll add our button and then let's
get this design going on text color to
be light, button when I use custom
stylings because I rarely do I want the
button to look like that although the
white with the grey is pretty cool text
colors okay let's just change the
background and also on in the Divi
settings I'll just show you guys this
real quick I've already added in these
custom color so I already have all the
colors that I need from my color palette
put into the Divi theme makes changing
colors so quick and simple when you do
that I'll show you guys that in just a
minute let's just get this centered here
whoops not right centered and you know
let's just adjust the text size a little
bit just to make the button a little bit
bigger just like that so there we go we've got
this first section pretty nicely cleaned
up
and you can just see I mean if you
haven't used Divi before which I
imagine most of you have but it can be
so fast and simple to sort of design
design your website really like that let
me show you guys that's setting real
quick for adjusting... for putting in
your own custom color palette let's go
back to the dashboard oops oh yeah
always always save before leaving that
is super important that's something I
always forget and I'm really glad that
they've got that warning in there it
doesn't work a hundred percent of time
but it seems to work like 99 percent of
time to remind you to save so I do
really appreciate that
leave page
so you get out here to Divi and then
you go to theme options and then right
here we've got the color picker so if
you can just you know select on click on
any of the colors that are in there and
add in your own custom colors from your
palette really important to make this
work and it's something I always forget
to do scroll down to the bottom and
click Save Changes because if you don't
click Save Changes the color palette
won't change all right so let's go back
to adjusting that page, let's go back to
the visual builder okay and let's go
ahead and add a new section so we do
that by just clicking the plus here and
this is we're going to start using that
WordPress parallax or the parallax
effect go ahead and we do a regular
section for this and since I know what
the background is it's got that phone
icon like I showed you guys before on
the Left what I want to do is do a
one-third two-third column split here
row with a column split and then we can
just to make sure that this stays in
there we can just put a divider module
in there just to make sure that on all
browsers and everything that works find
will click on that you know add text
module in here I'm not going to edit it
right now until I add the background in
let's put that in there go ahead and add
in our first parallax background click
on the gear icon for the section so the
sections are always blue as you can see
there upload an image I've already got
the image uploaded and ready to go it's
this one here with the dark wood in it
upload image and then here we want to
turn the parallax effect on and that's
going to give sort of sort of zooms in a
little bit on the image as you can see
and that's something you definitely want
to keep in mind when you're using the
parallax effect is that you want to make
sure that your image you can see how
wide I've made this image here with a
lot of space and rattle and make sure
that that image is really wide is it's
going to zoom in to be able to take
effect to make to make the parallax
effect work and so something definitely
again trial and error sometimes you got
to use trial and error to make sure the
image works and looks get good in your
layout but definitely know going into it
you're going to have to have a little
bit more wide spacing and then to make
this specific effect work I know from
testing and that's how design works is
you try and you test things and fiddle
with it until you get it looking right
but that you need to use the CSS method
then we go to consider sort of the
parallax effect already working and
let's go ahead and add in our text here
sort of text module we'll go and you
guys if you're ever having problems with
the with Divi and finding something you
can always click down here they've just
added this recently where you can see
this sort of back and style so you're
ever having a problem finding a section
on manipulating something with the Divi
Builder click on this and you get that
wireframe view and allows you to really
easily move things around and see what's
going on I really like the visual
builder but sometimes you know it gets a
little bit fussy all right so let's go
back here and we'll add in this text so
every page is mobile ready and at the
end this video near to the end in the
last section I'm going to show you guys
how to make modifications to your
website if you find that in testing that
thinks something doesn't look quite
right it looks fine in like desktop view
it doesn't look quite right in on tablets
looks on mobile devices and show you
guys how you can make it so that it'll
look good on both I mean does take a
little bit of extra work but it's
definitely worth it to make sure all of
your viewers are getting that great
experience let's go over to the design
here now the text will make the text
color light because look at the dark
background change the orientation to
Center and then since this is a heading
so quickly close the text there and go
back to the heading size make this
bigger there we go right now I'm going
to show you guys how to use the blurb
module to make sort of a bullet list and
it's really really cool technique I
really like it
so let me just type in the text here
real quick boom and so now we're going
to add an image there's two types of two
positions that we have the image icon
and we're going to see that here in just
a moment let's go ahead and want to use
a little writing icon there we go and
then to change the color of the icon you
can see it pops up here is red because
that's my default highlight color but I
don't want it to be red in this case
go over to design and click on image and
icon and we can just easily change it
already got my colors before in there
see how fast that makes itI want to circle
the icon just goes in for this for this
blurb section I want these to have
circles around them of course you don't
have to have circles around them but
it's a nice option we need to change the
icon color to white so that it shows up
on that background there we go and then
we're going to switch the icon placement
to left and then that's really kind of
tiny there so let's go ahead and use the
icon font size sort of make that a
little bit bigger about like that and
then let's get the text going text color
light and then the header text I also
want to use the same color as the icon
here so we can just do that and let's
make a header font size a bit bigger
that's kind of small and then we'll make
the text font size whoops where is it. Body
text here make that a little bit bigger
so it's easy for our viewers to read
there we go and now I've got two more
bullet points I want to add in and sort
of keep everything consistent there's a
couple different things you can do what
I like to do since I already know what
the design I'm going to use is I like to
just copy it boom boom so now I've got
three different things then I can just
change the text and the icon the other
thing you can do with Divi which is
really cool is you can use a keyboard
shortcut which is question mark which
is question mark and that pulls up
all the shortcuts and one of the ones
that I like or shortcuts rather one of
the ones that I like to use is the copy
module style so you use command alt C
and then you can copy the Styles on all
the modules and paste them onto all the
modules using command alt V and I'll
link in the description below to all the
Divi sort cuts that got it on their
website here but they can come in really
handy especially if you're you know kind
of doing the same thing over and over
again taking out these shortcuts can
really make designing your pages faster
okay so I'm just going to go ahead and
quickly modify all of these because I
think you guys get the ideas on how to
do this module thing so it's going to do
a little fast-forward here
okay so there we go we got that section
out of the way and now we're going to
start to really see the WordPress
parallax or the Divi parallax come up
here as we add this next section in
notice definitely just use the 1/3 2/3
again this definitely is sort of a trick
it's kind of like a sleight of hand with
with this effect basically what I did is
I took I created a template using
Photoshop and let me just go ahead and
add this in so we can sort of talk about
it while looking at what I actually did
and then again we're going to turn the
parallax effect on and as I said before
discover that you need to use the CSS
method I think is it to look right so
you can see how it sort of slides it
looks like the image is changing and the
phone is staying in place but what I did
to get this effect was created a
template in Photoshop I used the exact
same placement of the phone and then the
background and then I just swapped out
the the background image and the image
that I used inside the phone in
Photoshop when I created the different
backgrounds and then since it was a
template made sure everything lined up
exactly right and that's that's I just
sort of like kind of a sleight of hand
here but it's pretty pretty cool pretty
cool effect I look a pretty cool effect
I think add just a divider and here just
there's something in there okay so got
our divider in there and then again just
search for text add this text icon and
here it's going to go ahead and fast
forward through this set up because it's
just sort of a basic module with text
and image so you guys can just uh
and we're get we'll get to the next
section where we talk about using a
specialty section I one more thing I
wanted to point as it sometimes when you
change the text font size you can see
how all of the text got kind of jammed
up together you can adjust that by using
the text line height here don't quite
understand how it works like why am I
making the line height smaller than the
default ah but that's how you would
so if you see like you know you could
change the size of your text and everything is
getting bunched up go down here to text
line height and adjust that okay so
there we go we've got that section there
we've got this cool parallax effect
going on here and now we're going to use
a specialty section if you haven't used
a specialty section before it does some
pretty pretty cool stuff and I mean the
main cool thing that allows you to do is
have one row is have one column just
sort of be steady like this you've got
one column that's just all one size and
then the other columns can have multiple
different columns inside them so you can
have one row that's just straight and
then you have one column that's just
straight and then the next column has
you can have alternating like single
section or basically like 2/3 and then
quarter sections inside that so right
now
one-third sections inside that so I'm
going to go ahead and use this one here
since we're using the 2/3 1/3 just go
ahead and add a row the first row is
going to be full width and then I just
like to add my background in first when
I have it because just makes designing a
lot easier use this one here turn on the
parallax because we're still using the
parallax effect
there we go that's looking cool and then
we'll add some text in here color here
actually I want to change the color and
since this is a header section one
chance to tell her to just straight up
black just to make sure it's as easy for
our viewers to read as possible I think
that's really important is making you're
making everything as easy for your
viewers to read as possible just make
sure that it's centered let's make that
a little bit bigger just for fun there
we go and then I'm going to add another
text section below that I could also
just add the text just regular right
below that I'm just going to add another
text section okay we'll go over to
design fix color Center I want to make
the text black again just make sure it's
really easy for my viewers to read
definitely don't recommend getting too
crazy with the colors you guys use
on text make it as easy to read as
possible for your your viewers don't try
to get too fancy with the text that a
little bit bigger again I'm going to
change the line height whoa change the
line height here
just make sure everything is easy to see
there we go
and now what I want below this is I want
to have two buttons side by side and
this is where the specialty section
comes in handy so we're going to click
on the plus icon here BAM
side by side right there and then we'll
add two buttons and we click on design
so we can design the look of our button
we want to put it centered inside that
column I'm going to change it to light
no reason why I'm changing it to light
but it's going to because that's I'm
going to do and then to add the custom
styles click on button and then use
custom styles I think the size is okay
button text color actually I want to be
this red the actual button background
color I want to be white button so it
doesn't look I think it kind of looks
freakish with well I don't know you
could pobably do it tastefully but I
just like to have the button just be all
one color so either just change the
button border color here to white also
now go and now to add the next button
side by side I'm just going to duplicate
this button put it over here and then
just adjust the settings real quick and
then design button button text color I
want to be white the button background
color I want to be the red just to
contrast with the first button and the
button border color is hiding from me
there it is and then we click check so
there we go and then I'm going to add
one more full width section and put in
another title here and if you guys are
looking for pre-made page templates with
the Divi theme for your website I've got
a whole listing of them on my website I
sort of pulled all the ones to get
from the divi website and from a couple
other places so you guys can easily find
a bunch of cool page templates for your
website and I'll link to that in the
description below this video actually
it's the same texts I have up there
that's fine you guys get the idea
okay and then below that I want to add
another to column section I'm going to
add some images into each one here and
also let me show you guys how to do in
my full tutorial I set the image module
to not automatically do an animation
because I almost never want an animation
when I'm using the image module I really
want to use that really sparingly that
technique I'm just going to duplicate
this check duplicate and then I'll put
one duplicate one more time the one over
here duplicate that and then just go in
here and change the image to the next
one so you guys can see how that works
they're still real quick here - let's
check save and then this is a good time
to save always remember to try to always
try to remember to save every now and
then make sure you don't lose your work
nothing more annoying than having gone
through and designed a bunch of stuff
and then have something happen I mean
Divi does have some fail safes that are
supposed to prevent that from happening
but I think it's just best to just to
make sure alright so we'll do one more
regular section below this add in my
backgrounds
this one here use the parallax effect
CSS and again this is same same thing
that I did before just fast-forward to
this section and we'll get to the next
section where I'm going to talk about
how to set up what we're going to talk
about two things we talked about using
creating a gradient for your background
which is really easy in Divi now it's a 
new feature they added and I really
like that and then how to make a section
so that it works well on mobile and
works well on desktop when it doesn't
seem like it's going to work when it
doesn't work right for one or the other
so we just get to get to that right now
just fast-forward through building this
part okay so now let's go ahead and add
our final section here it's going to be
another regular section and for this one
since we're not using this parallax
background we're going to use a regular
background we want to do 50/50 on this
one and we're going to add an image on
the left and talk about doing the
gradient background and so you see I've
added an animated gif here right we'll
do text actually I'm not going to do
text right now because I won't be able
to see it because text I want is light
colors let's go ahead and do the
gradient background so to do the
gradient background just click on here
click on background we've got this
gradient tab right here we click the
plus button and so for this color I know
I want like a light gray for the first
side maybe something like that and for
this color here I want to use the red we
can change the direction so it's right
now we've got a really soft gradient but
I want to make this like a hard line and
there's two ways to do this the first
way I did it when I made this page
template was I actually used a Photoshop
file that I created and sort of just
played around with getting
the slash from the sizing of it just
right I think that this works just as
well and what we do is we just adjust
the start position and the end position
like this until we get that perfect line
there you might want to know it's up to
you you might want to fuzz it up a
little bit like this by having it be a
little bit different or just have it be
a hard edge like that I guess basically
when you make it even on that's how it
works I sort of like it going right
across this image here so here we go on
some text on this side and then we'll
talk about why I don't think that this
works for mobile and how we can make a
section also look good for mobile give
me a moment here and then the other
thing that I'm seeing here that I want
to do is want to add a little bit of
space but just on this side here so we
can do that by going over to the
settings for this row and if we go to
design and then spacing got the option
of changing the padding on column one
and column two so I'm going to just
change the padding a little bit on the
top let's try it 40 pics
let's try 50 pics there we go just to
get it down so it's going to be centered
a little bit more add a button right
below this and design the button but
size a little bit bigger whoa whoa whoa
too big uh-huh alright and then button
color white whoops actually no the text
text to be red background color to be
white the border color is actually
probably red yeah it was red so just
make it white she couldn't really tell
what color it was
and then just want this to be centered
boom there we go
go on make this will let me make the
font bold to just really stands out
there we go cool so there we go now this
is why I don't think that this
particular design works on you know what
I just want to make this a little bit
well make this a little bit wider a
little bit more padding it's a cool
thing with Divi so you can just drag out
the padding that you want and make it
make things a little bit bigger I just
want to just look up the page here and
just see if there's anything else I want
to change in the padding didn't want to
make the padding a little bit bigger
here too there we go okay okay so now on
we can sort of test this on and isn't a
full test this is sort of a gives you an
idea of what it's going to look like
it's really before your site goes live
if you have time you should definitely
pull it up on an iPad if you have an
iPad or another tablet and pull it up on
a phone just to make sure that you're
not seeing any anything weird that you
didn't notice before
no but this gives you an idea what
that's going to look like so scroll down
here and I guess this is okay but I
think I don't like how this text is
getting into the light grade really like
the slash to be up here more for a
mobile device so let's go ahead and I'll
show you guys how to do that so what we
do is we go back I just like to go back
to the desktop setting I'm going to make
it we're actually going to duplicate
this section since we want everything to
be the same but really the background is
what we want to be different and then
we're going to do is going to make this
slash so it goes the other way I guess
we can edit it right on the tablet mode
so we can see what we're doing here is
I'm going to go to the background of
this section and I'm just going to
adjust the gradient direction so that
all of this text shows up where I want
it let's go a little bit more like that
I'd also want to maybe that's fine
so I think that for mobile this looks a
lot better than this does because sort
of what we kind of lose our text here so
now how do we make it so that this shows
up on mobile and this shows up on
desktop and it's actually really easy
with Divi and you can do this with just
about anything like if for some reason
just the text doesn't look right you can
do it with just the text but I'll show
you guys how to do it with this section
so we're go to the gear icon on the
section here and then we go to advanced
and we click on visibility and click on
disable on phone and tablet because we
don't want that to show up on phone and
tablet which means it will show up on
desktop and we do the opposite for this
second section that we made because this
is does not look good
for desktop so we don't want this to
show up on desktop like that so we just
click on the gear icon and then we go to
advanced visibility and then we do
disabled on desktop and you can see when
we're looking at the desktop view it
gets sort of grayed out so it's just an
indication to us that this is not going
to show up on desktop view and then if
we go and look at tablet you can see
that now the tablet one is showing
properly and the first one the desktop
one that we created is not is grayed out
and it'll be the same for the phone
grayed out
it's not grayed out so there we go so
now the next thing we need to do is turn
this into a one page WordPress website
and it's pretty simple to do that we
need to do two things we need to create
a menu because generally we want to be
able to sort of go up and down between
that and then I like to have a little
bit of the navigation here and Divi has
that option to have the navigation along
the side for each section of your
website so let's save again and I'm just
going to add the navigation first this
really easy something really easy to
show you guys we're going to click on
edit page and then to add that
navigation we just click on the
navigation there and we click on update
and then we can go back to the visual
builder shows what a page looks like so
now we've got the dot navigation and
that's automatically set up to go to
each section
on our website but if we want our menu
to go to each section on our website we
need to add in a little bit of not
really code but just sort of an
indications that when we're making our
menus of where each of these sections
are so what I did when I do this is I
just got a little notepad out and I just
wrote down with each one of these were
so I didn't forget so the first one we
don't need it because that's going to be
just the main link to the page will take
us right to the top of the page but if
we want to have a menu item bring us
down to the second section what we need
to do is click on this section icon here
click on advanced and then CSI CSS ID
and classes we're going to create a CSS
ID so going to call this one Mobile on
since this section refers to mobile just
something that I can remember I'm also
going to write it down on my notepad
because going to need that later we're
going to go to the second section we're
going to do the same thing I'm going to
but we need to call this section
something else so I'm going to call this
one build we're going to the third
section we're going to do the same thing
it doesn't matter what kind of a section
it is we just need to give it an ID if
you are using the specialty section like
this you just want to give that main
section so just the standard one not the
additional columns in ID unless of
course you wanted it to link to those
additional columns and you can do the
exact same thing with text or any other
element on your website for this I think
it just works well to have each section
have its own have its own link to it
basically okay so this one here is going
to be called templates scroll down this
one's going to be called support scroll
down whoops
some reason I duplicated the support one
so we'll just trash one of these I got
to go make sure that didn't trash the
one where I put that csi's ID and I
didn't and then we'll make the last one
here sign up and I definitely think you
should use don't use a space use some
sort of filler in between I like a -
because - is almost always work or just
use one word okay
so now the next thing we need to do is
make our menu here not look like this
which links to the sort of by default
WordPress has it linked to just all the
pages that you create but we want to
have it linked to the pages that we're
creating on our one page WordPress
website here so to do that I'm going to
save don't want our work to get lost and
since this is a one page website we want
to make this the front page so let's
deal with that first so we're going to
go to the dashboard here and by the
front page that means that when people
come to our URL this is the page is
going to show up and so we need to set
that up and so we do that by going to
settings reading and then we want to use
a static page and then we want to use
that page we've just created which was
the one page WordPress website
we click on Save Changes always always
remember to save changes and then we
want to go and we want to adjust the
menus click on appearance menus and
we're going to create a new menu on
since this is a one page website we're
going to call it main menu you can call
it whatever you want and then for the
links to each thing what we're going to
do is we need to go to custom links and
then since in this particular example
the links we want are on the home page
if you were doing this as a landing page
you want to find out the URL of that
actual landing page and then do the URL
and then slash hash symbol whatever you
want to call it and then remember that
we wrote down all of those different
names so the first one was mobile I'm
going to call this link mobile but you
can call the link whatever you want and
then we add it to menu and so are doing
slash because this is the home page of
our website so it's automatically going
to go here again if you're doing this on
a different page as like a landing page
something like that you want to get the
URL of that landing page and then do
slash and then hash whatever the name
you called it okay so we'll just do the
other ones here real quick
so I forget to put the hash in really
important let's make sure I put the hash
in okay again I made you save menu again
always important to remember to save and
then we can do let's do manage locations
for this so we want this to be our
primary menu so main menu that someone
will use created and we'll click Save
Changes really important step there and
then we can go back to our page now
actually we must go back to our home
page since we made this the home page of
our website and if we click on the menu
we can now go between the different
sections that we've created right in our
menu so that's how it whoops
except for apparently I messed up that
link I messed up that link to that's
clear huh
okay let's go figure out what I did here
it's pretty embarrassing we go back to
the dashboard appearance menus just
mobile oh I didn't put the hash in as I
said really important to put the hash in
and didn't put the hash in their ear you
see the reason why you need the hash is
because otherwise it's going to try to
go to the URL of your website slash
templates which doesn't exist so the
hash tells it that it's going to the CSS
ID on that page rather than to an actual
page and again don't forget to save now
when we go back to our site now
everything will be working we'll just
double check boom build templates
everything's there there you go that is
how you make a one-page website with
WordPress and the Divi theme it's a
pretty fun stuff that we covered in this
tutorial I hope that you enjoyed it if
you have any questions let me know by
leaving them in the comments below and
if you liked this tutorial give me a
thumbs up and if you haven't subscribed
to this channel yet go ahead and hit the
subscribe button I'll see you in the
next tutorial
