One Page WordPress Website Tutorial & WordPress Parallax Website Tutorial using the Divi Theme


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

16 Comments

Add a Comment

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