Kori Ashton teaches you how to build a one page WordPress website in less than 15 minutes using the Divi theme from Elegant Themes.
Brought to you by Pressable. WordPress Hosting & Support. Use ASKKORI for a free 30-day trial!
Full Transcript
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.
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.
Divi Theme Purchase
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.
Divi Theme Installation
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.
Enable Visual Builder
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.
Internal Layouts
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.
Choosing Landing Page Mockup
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 a different type of company.
Making Layout Changes
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!
