Build a One Page WordPress Website – Step by Step
Articles Blog

Build a One Page WordPress Website – Step by Step

September 2, 2019


– Hey, y’all, it’s another
WordPress Wednesday. I’m Kori Ashton, and
today I’m gonna show you exactly how to build a
one-page WordPress website in just a matter of a few minutes, maybe even less than 15 minutes. Are you ready? Stick around, ’cause I’m gonna show you step-by-step how to
get it done, right now. (electronic music playing) All right, y’all, you’re
here for one reason, and it’s to build a WordPress website, a single page, really
cool, smooth scrolling, looks something like this, right? As you’re looking through,
it looks something like this. How do you build something like this, kind of on the fly, down and dirty, easy, for a client, something
that you can give them that they’re still proud of,
but on a very small budget? What does that look like? Well, I’m gonna show us step-by-step here’s how to get it done. Of course I have to give a shout out to Pressable, who makes
these videos happen by sponsoring them, you guys, they love the WordPress community so much, and they are providing even
better hosting solutions these days than in the past. If you’ve ever checked them out before, stop by, check them out
again, I’ll put a link to them in the description box
below, and I’m gonna give you a coupon code too, ’cause I want you to go experience what true
WordPress hosting should be. These guys offer a great price, huge, like, huge support for you. They’re gonna have staging
environments for you, all the bells and whistles, you get premium Jetpack included, I mean, these guys only do WordPress support, so be sure to check them out and tell them Kori Ashton
sent you their way. I would appreciate that. First thing you’re
gonna do is head on over to Elegant Themes where
you’re gonna pick up a copy of the Divi theme, right? You guys know I’m a huge
fan of the Divi theme. And, I mean, it is a little expensive considering themes are
typically $30 to $40 a pop. I think it’s incredible
that they would be willing to give us the ability to use
this on unlimited websites. Online, all the other licenses you’re ever gonna get are
only good for one install. This Divi theme is great for unlimited, so let’s use it and use it
in cool, different ways. So, you’re gonna purchase a license here, and then once you have that you’re gonna run over to your website and we’re gonna go ahead and install it. You’re gonna go in your dashboard. Go to your appearance, go to themes. And, of course, we’re gonna click add new, and because we’ve purchased it elsewhere we’re gonna be clicking upload theme. Clicking that, you’re gonna be able to choose the zip file that you downloaded once you purchased it from Elegant Themes. You wanna always install the zipped file, and click install now. That’s it, super simple,
it’s ready for us. Let’s go ahead and click activate. And it’s off and running. So, one of the other
steps you’ll need to do is be sure to grab your access code so that basically you’ve set up your theme to communicate over with Elegant Themes. So, let me show you that
quick option right now so that you can go ahead and just put in your license for the updates area. This is where you’ll add your username and your API key from Elegant Themes. You’ll wanna do that step first, just as your due diligence to be certain that you always get alerts whenever the Divi theme needs updates. So, go ahead and jump back
over to Elegant Themes, and go back into your account area and let’s get that done. The other thing this is gonna do for you is it’s gonna give you access to an amazing Divi library,
so are y’all ready, ’cause we can go play and
have all sorts of fun now. I’m gonna click over
and go to the front side of the website so you can see exactly what we’re starting with. This is the absolutely basic Divi design. But one of the ways
I’ve been able to build so quickly is that Divi
has a lot of internal child themes that already exist. So, I’m gonna go in here,
go back to my dashboard. I’m gonna go to my settings area, go to reading, and I just wanna be sure that we go ahead and give our homepage a static homepage. I don’t have any content
really created yet, so I’m just choose the
default sample page for now. Save changes. Go back to the front side of
my website, click refresh. So, now we’ve enabled the visual builder. Clicking on that allows
us to have this really cool popup that happens that tells us would you like to take a tour? If you’ve never used Divi before, I highly recommend taking this quick tour. For the sake of now in this tutorial, I’m gonna click start building. But, it allows me to choose
from these three options. Use an existing bit of content, choose a pre-made layout,
or clone an existing page. I wanna use a pre-made layout. Browse the layouts. So, these are all the
Divi internal layouts that they give you, and each one of these has all sorts of different
designs, even inside of them. All of these are totally free to use. They come included in the license that you just purchased. Makes it kinda easy, huh? Now you’re gonna see how
I build it so quickly. Oh, it gets so exciting! So here’s the theme right here that I showed you my example on. This is the coffeehouse layout that I just think is
really slick and beautiful, and you can look through
all of the different pages that they have designed here, the contact page looks
really nice and clean. They have a little shop
section inside of here too. Really nice, clean,
minimalist type of menu page. I think that’s really nice. But I actually use this
landing page concept here for the mock up that I’m showing you. So, I’m gonna say use this layout. Takes just a matter of a few
seconds for this to upload. Hold on to your hats, ’cause
this is where it gets fun. Done, just like that you guys. Watch this, okay, it
built everything for me. Here it is, everything’s on the page, easy peasy for me to
come in here, click on, make changes to, add a different picture, change the text, do whatever I need to do to make this a little bit more customized for my coffee shop or
for my small restaurant. This would be ideal, I
mean, you can get creative and even figure out how to use this for a different type of solution or different type of company. But I wanted to show you just briefly how to make a couple quick
changes if you wanted to. So, if you didn’t want
a button that says shop because, again, we’re only gonna
have a single page website, you can come in here and actually click on every single element
and make changes to them. So, I wanna make changes to this. The shop button right now, we’re just gonna say find our location, all right. Leave that there and click okay. So, that’s one way to do
it, find our location. Anything else that you might
have down the page here, full menu, we might need
to change that again, since we’re not gonna
have necessarily a menu on this page, or we could, potentially. But, all these different buttons can easily just go away, too, by a click of the delete button, right? Pretty easy to create something
really cool and minimal. You even have a blog area here, and again, if you didn’t
have that content just yet, you can go ahead and click
delete if you’d like to, and it completely zips
it up and goes away. Or, if you didn’t wanna do that, you could even hide it for now. Check out this cool little feature that you can do inside a Divi theme. I’m gonna click on the gear icon, go over to the advanced tab and go
to the visibility section. And for now, since my client doesn’t have any blog content yet, I’m just gonna go ahead and disable this on all three versions, basically meaning, please hide this whole section. Now, if the client comes back and says, I’m ready for my blog, I don’t actually have to remember how to implement this area again, I just come back and make it visible. Kinda cool, huh? All right, all this lives here and it’s ready for us to go
ahead and set the navigation. So, let’s look at these
different sections. This is kind of a really
cool opening section. This here could be a very minimalist type of menu section
if we wanted it to be. This talks a little bit about us, and maybe we have that video that people can click on and open up and hear more of our story. This is a really nice
section just talking again about our products or maybe
what makes us different, so kind of combining it in
with that about us section. What makes us different
again kind of section. Or, maybe this is too much at this point, and you’re saying, gosh, you know, I really don’t need all of this content. It’s a lot of content, so maybe we just wanna go ahead and
get rid of a whole section. Let’s just click on it and get rid of it. Beautiful imagery always brings people into a great restaurant,
so let’s leave that there. This is a hidden section, and then, of course, we have our contact
section here at the bottom. So, with those different sections, we can actually make a single-page website and have a really cool
scrolling capability. So here’s the trick, I’m gonna go ahead and click save so that we save everything we’ve already built. Next, I just wanna go through
each section and kind of tag them or put an anchor
tag naming each section. So, this section here with the menu, I’m gonna come up here to the left side, click on the gear icon, go into the advanced tab again, and here under CSSID, I
wanna open up that area, and in the ID area, I wanna
type in what this section is. I’m gonna call it the menu for now. Oops, spelled correctly
though, probably helps. Menu. Check that box. That’s it, I’m gonna scroll down here, the our story section. I’m gonna go ahead and
open up the gear icon, go into advanced, click on the CSSID, then I’m gonna say, about. You’re gonna need to remember exactly what you called these, and if you capped them or not, so just remember that, you might wanna be writing these down. And this whole section kinda plays to that about us area. If and when we added the blog, we would wanna click on the gear icon to add the blog area, but
since that’s hidden for now, we’re not gonna do that. And then this down here
is kinda the contact, or perhaps even the locations area, if we’d like to add that. So, let’s go to advanced,
click on this, and say contact. Then okay. I think I would like
to add a map over here so that we can have an
our locations area, too. So, if we wanted to do that,
we could easily do that. I’m gonna go ahead and click save, and jump over to Google Maps
for now and grab a quick map. That was pretty simple to add. So, now I’ve got that saved, I’m gonna go back up here to the top, and now I need to actually create the navigation that speaks to those
specific points on my page. Watch the magic happen, you guys. Let’s go back to our dashboard area, go to appearance, and go to menus. This is where we have to remember exactly what we named
those stopping points. So I’m just gonna call this a main menu, create the menu. And we’re actually gonna use
the custom links area here. We’re gonna apply the
first one and say menu, and call it the menu. Now you’re using this hashtag, or the pound sign, to help the code know where to go to on the page. I’ll show you in a minute how it works. Click add to menu. The next one down the page was about. The next one down the page
could’ve been the blog, but we don’t have that currently, right? So, we’re gonna go ahead and say contact. Add to menu. We’re gonna select primary menu, and save menu. Now, going back to the
front side of our website, let’s click refresh. Now we should have our three options that we’ve just created,
menu, about, and contact. So, when we go to menu, zips right down beautifully
with that smooth scroll, click about, scrolls down
to that area on the page. Clicks contact, goes all
the way down to the bottom. If we also wanted that our location button to scroll down here,
you can do that as well by coming back up to that
button here in this section and choosing the link, let’s see, the link option for button one to link down to that contact section. And click okay. You’re gonna go ahead
and click save again. And then we’re gonna
exit the visual builder and test that link to be certain that as you click the button, it’s gonna scroll down to
the beautiful bottom part of the whole website to see our location. Pretty cool, huh, you guys? That’s it, single
scroll, beautiful website with all this content, of course you go in now and just spend time changing content around,
making it very customized for your project or your client. Of course you can change
out your logo right up here. But, it’s always gonna be mobile friendly, beautiful on your screen, let’s show you exactly what that looks like here. Beautiful for a mobile version and iPad, of course, as the Divi theme is fully responsive. Look at that, gorgeous. Let me see what that looks like, you guys. I’d love to hear from you. Be sure to check out Pressable, because if you liked how smoothly this went, I’ve been building this all on Pressable’s hosting right now. They’re a great safety net, too, as they have 24/7 backup, so if anything went wonky or weird, I could roll back my website with just one click. I hope you’re having a
great WordPress Wednesday. This was an outstanding video. If you loved it, let me know. Subscribe, I’ll see y’all next week! Bye, y’all! (electronic chimes playing)

Only registered users can comment.

  1. Hi, I was watching one of your older videos about how to download themes from ThemeForest. I bought a theme from ThemeForest I just haven't downloaded it yet and installed it. I am new to this. I was wondering what"s the best way to change my current website theme to a different ThemeForest theme. I have content on the site and it's 11months old.. What the best way to change my theme? should I use a child theme? The new theme is nothing like the old layout? Or should I import and expert the content and after that erase the content plus erase the theme from my

  2. Hi Kori, love your videos. I learn so much about how I can build a website. I use Divi and I'm looking for a site that represents me and my sports activities. What theme would you recommend?

Leave a Reply

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