Divi WordPress Theme From Install To One Page Scrolling Site In 15 Minutes – Hi guys and welcome to another WordPress Divi theme tutorial. This is Jamie from system 22 and web design and tech tips.com. In this video we got a fresh install of WordPress here and we’re going to actually download and install the Divi theme and see how quickly we can get a site up and running.
So I’ve downloaded WordPress, I’m building this locally on my machine here. if you’re interested in learning how to build sites locally on your machine take our WordPress local install course it’s pretty easy to do this and it’s really useful for building sites offline.
I’ve got WordPress download and I’ve got it installed, just a fresh install of WordPress. As you’ve heard me say before Divi theme is
absolutely awesome just keeps getting better and better and if you’re building any sort of site with WordPress I suggest you take a look at it it’s just
amazing, and you can try it out from a link below this video.
So to download it we need to go to the elegant themes members area or the elegant themes.com site and become a member, it is a premium theme so you do have to pay for it but it’s just unbelievably worthwhile.
Now we’ve got the divi downloaded there so if we go back to our WordPress to appearance and then theme, this is the current one we have which is one of the
default ones with WordPress 2017. you may have a different one, but at the time of recording this is the most current generic WordPress theme it’s actually
okay, it’s not really interesting but you can do a bit of stuff with it, but like I say I’m going to install the Divi and see if we can’t get something put
together very quickly.
I’m going hit add new and I’m going to upload theme, hit upload theme file right here, I can just drag it up to ‘choose file’ there and as you see it’s already in there. okay I’m going to go ahead and activate it. Now tell WordPress it’s the theme we want to use. I’m going to go ahead and delete this other theme’ it’s always a good idea if you’re not using themes in your library here to just delete any ones you don’t want, the lighter you can keep your WordPress install the better really. so we’ve got our Divi installed and activated now and let’s take a look there won’t be anything too exciting I’m sure, because we haven’t given it any information.
okay let’s create a page quickly and I’m going to use some of Divi’s pre-built free templates they got here, I’m going and I’m going to use the Divi Builder, I’m going to simply go the load layout and straight out of the box they’ve got all these fantastic layouts that you can choose here. so I’ll just choose one from random.
all right and as you can see it’s loaded all these modules here, guessing this is our first demo page let’s take a look. what I’m going to do is publish this
page and hit the preview changes button. well that’s pretty cool straight out of the box! obviously these are generic images and filler text, but all you need to do is fill in what you want here with the Divi Builder.
so let’s use this template, all we need to do is give it a logo give it a menu now let’s just turn it into a one page scrolling site. how about that? so let’s
go back to our dashboard here, usual WordPress thing we go down to our settings and theme customizer, Divi theme option down to the theme customizer. What we want to do is go to the homepage settings and tell it that we want to give the homepage those nice settings so it’s a static page and we want to give it the page that we just created called home.
so what I’m going to do is I’m going to publish that and we’ll go back we’ll get out of here. what I want to do is I want to actually go to our page I’ve got it
up right here, here we go I’m going to enable our visual builder and I’m we’re going to turn this into a quick one page scrolling site.
it’s got a nice little tour here I’m going to go ahead and start building. let’s give these sections some ID so we can actually scroll to them. we’ll start here and we’ll hit the little cog there you see as I hover
over a section to edit cog comes available. I’m going to go to CSS ID in classes under the Advanced tab and I’m going to give this an ID of about, keep it nice and simple so I can remember this in a minute when I create the menu. Remember we’re giving those IDs not classes. Okay so I created those IDs which has given these sections a handle if you will, somewhere that we can navigate to, an anchor.
so let’s go back to our dashboard. go to menus appearance menus and create a menu that’s going to do this for us. we need to go to create a new menu I’ll give it a title really thoughtful title like main menubut call yours what you will. now we need to actually add some things to our menu. I’m going to use custom links because we’re not going to any particular page or URL. we’re going to links on the page and because it’s an ID we put in there #about and title about.
as you can see it’s appeared over here. You can call the link text anything you want it doesn’t have to be the same as the actual link name itself.
A lot of people don’t do this anymore, put a home button here. let’s go ahead and put one of those for the URL. because I just wanted to go back to the top I’m just going to put a hashtag and we’ll say home.
Now what I’m going to do I’m going to go down to divi options and make sure smooth scroll is turned on, what that will do is make sure it smoothly scrolls from one section to the other when we hit that menu. so I’ve gone to Divi theme, options general tab and I’m scrolling down. Smooth scrolling is here’ at the moment it’s
disabled so I’m going to go ahead and enable it’ just need to go down save our changes until we get a little green checkmark. there we go, okay next step is to tell the page what menu we want to have at the top. I’m going to turn on the back to the top button as well so we’re still in the theme options, there it is now we’ll put a little button there that you can just click to slide back to the top. I’m going to go ahead and enable it and again save.
alright let’s open our customizer and tell it to use that as our main menu, the menu that we just created, move down to menus location, and as our primary menu which is the one we’re looking at here’ let’s select the menu that we want to use which is the one we just created called main. now let’s go visit our site. It’s scrolling nicely. There’s the back to the top button that we just added, it will take it back to the top.
so there you have it how to create quick one page scrolling site with the Divi theme. what we did takes just 15-20 minutes, something like that from scratch install and of course all you need to do is put in your own content here, and of course with the visual builder it is so easy if you have an existing site you can cut and copy and paste. of course you can just go in with the visual builder any bit of text, just click on it with a cursor and start typing, or of course if you’ve got some text somewhere else you can just select and paste it in there however you want.
so there you have it we’ve completed a one page scrolling site in no time at all. so, like I say that’s the Divi theme just gets better and better and better. it’s so easy to use it’s just crazy. check it out from the link below
TRY OUT THE DIVI THEME FROM HERE
