How To Make A WordPress Website
Articles Blog

How To Make A WordPress Website

August 30, 2019


Hi, I’m Greg and if you want to make a website But are a little bit confused by all the information then you’re not alone I too once wanted to make a website But I wondered what everyone was talking in such a strange language about this thing called WordPress And why no one could explain the easiest things to me in simple? Layman’s terms well if you want to make a website This is the perfect video for you because not only are you gonna walk away with your own website creation? But you’re gonna walk away with the understanding of how it all works so whether when you log in each morning You’ll feel like it’s a little bit more simple easy to use and overall it just plain works for you so If that sounds like your kind of tutorial then bust out the computers brew yourself a cup of coffee or whatever it is you like? To drink and hop on over to my screen where I’d like to start with a simple three-step Analogy for all you need to make your website get off the ground all right. Let’s do it so the three parts of a website that will learn how to get you today are number one an Address so that people can find you on the web. That’s your domain name Number two a piece of land so that you can actually build stuff online That’s your web hosting and you can think of that like a flash drive or just some empty space on the internet where we’ll do our creating and Number three a house two can store all of our amazing content We’ll use WordPress for our house because it’s the most popular content management system used by brands like Sony Beyonce Katy Perry and the New York Times This will be the exact steps that a professional web developer would do for you if you hired them in your town. However because we’re DIY it you’ll get a lot more freedom and also save a ton of money We have everything we need here. We’re gonna use GoDaddy today to buy your domain name because they sell them most domain names And they’re experts on that we’re gonna use Hostgator to get your piece of land also known as your web hosting because they host the most web sites And we’re gonna use WordPress as our house You don’t actually need to download WordPress because Hostgator has tools that do that for us So you don’t need to know any code or anything, but it’s nice Just to browse the website and check out the community that you’ll have full access to once we’re done here together Pretty cool community all right, so let’s start at GoDaddy the first step is just to type in your domain name all right So let’s say you search for this one, and this is what you don’t want to do you even though This is available you don’t want to put too many words in the domain name might be true in our case But it’s not gonna work for the long term No one can remember it what you want to register instead is your name com which I’ve already done It’s a great place to start or if you can’t get your name. Maybe try your name Followed by what you do Something like that will almost always be available or maybe you have a really fancy cool name like Twitter And you want to grab that If you have any questions we can always bounce around domain name ideas in the comments because I see tons and tons of them each Day some would work in some which don’t So of course sorry twitter.com is taken unless you search for it on that exact Millisecond in between when the registration ends and when they rear edge’ stir it Or maybe they forgot to register it again or something like that, but that’s unlikely to happen So once you find your domain name that you want to use today? And I’ll just do garden area and web sites calm as an example, then you can just click search and you Want to get to this screen right here where you’ll probably already be and you want to just click Add to Cart All right now we can click continue to cart Alright so your domain name is not officially off the market until you actually pay for it So we want to hurry ahead and get that done So let’s click. No. Thanks here because we’re on a budget and you can always add this stuff later continue with these options Great so now we’ll be on the complete purchase screen here and before we buy just make sure that your cart It looks nice and tidy get rid of any domains that you might have looked forward before you just click trash and Then you’re gonna want to also change the term For probably just one year is a great way to start All right trash that one Great so the standard price of a domain name going forward year after year will be fifteen dollars a year But we get this little discount from GoDaddy in the first term period that we buy it in so if you actually change your trim Period for a longer time you’ll get that discount again in the second year In other words you’ll just pay a discounted price now, and then not have to pay that $15.00 per year until You have to renew it once you’re ready You’re just gonna click complete purchase And I’ve already bought a 6-minute website.com for us to build on today and use that one So you just click complete purchase, but I’m actually gonna hop over to my domain manager Because it’s already been purchased alright, so once you buy at GoDaddy and you click through this screen You’re just going to want to log in when you log in click on my products right here Alright and then click manage all in the upper, right And you’ll get your nice list of domain names all right. Here’s the domain name We’re going to use today, and I’ll give everyone a a few minutes. Just pause here so that everyone can get to this screen Okay, so we’ll come back to this screen to connect our domain name to our hosting once we get our hosting and that means it’s now time to do just that Alright, so hop over to Hostgator now. That’s Host:20 our dot-com and once you’re here. You just click get started Alright so like I said I like using GoDaddy for the domains and Hostgator for the hosting because they are respectively experts in their own trade It’s really cool. They host the most web sites here. I’ve used them without any problems for my business for almost 10 years now They are great for growing with your business And they also have a really nice live chat feature here Where you can actually get on an instant messaging chat with one of their experts? And they’ll talk to you as long as you want about anything hosting related all right, so enough of me talking Let’s go ahead and pick a plan all these plans are really reasonably priced It’s a little edge pennies on the dollar if you think of putting an advertisement on your website You would just need to get three clicks on that ad say it was a Google ad to cover your cost of hosting Right here in the hatchling plan, or you could just sell one product like one t-shirt per month And that’ll then cover your cost of hosting and probably domain name too, so really pennies on the dollar I like going with hatchling plan when I start out. I’m on a new site because it’s just the cheapest And then if you can get the baby plan later They’ll let you do unlimited domains so most people like myself Upgrade from hatchling to baby when we realize we want to make a second blog or host our parents website post the website for the pizza joint down the street or for that jewelry designer in New York or Whatever else you want to do to expand your business, so let’s go ahead and click sign up now and try out the hatchling plan All right the hostgator order form is really easy to fill out But I know I had a few questions on the smaller details when I did it my first time So I’ll walk you through all of it So we can click I already own this domain name Because we already bought one and GoDaddy which is six minute website not six minutes and you got to enter in the extension to like calm down or got net whatever you got and This way we won’t pay Hostgator anything for the domain name all right But you could also register a new one and they have you know all the domain names that any other provider has – they’re all Here as well step one is done. So I’ll move to step two and Hatchling plan is chosen. That’s great We’re gonna change our billing cycle up All right, what happened it jumped up to the number one again alright? So if it does that just make sure you only have one domain name for now because we’re on a budget like we said before And if it asks for a domain privacy protection I usually uncheck that Alright cool, so we’re gonna come down here continue with step two and change billing cycle to twelve months Twelve months perfect amount of time to get a feel free website and make a few bucks on the Internet now I’ll just pop in a username and a four-digit pin And we’re done with step two alright, so by the way like GoDaddy the prices will get a little bit sweeter for longer registration periods But that twelve months is a really nice sweet spot so we can try that today All right, we’re gonna come down. I’m also going to show you a coupon code that will save you more money, so That should work great enter in your billing info just like you would at any other purchase online All right just speeding things up for you guys And now you can put in the credit card or your PayPal if you’d rather go that route I just like paying with credit card always because then you get those points And of course debit card works, too there all right scrolling down guys I know you probably can’t wait to start making a WordPress website almost there now We’re just gonna Uncheck additional services in step four you can always get those later live check and hook them up for you anytime Or I can show you how to set them up You know just with free tools as well like WordPress plugins and now we’re gonna enter a coupon code Alright, step 5 so hostgator has given us a coupon code that works really nice to them. It’s kind of like their own little alligator coupon code that this guy gave us That’s snappy by the way well. We’re gonna do a slightly better code that I know of which is big Or big and then the word bonus with no spaces And once you write that in just validate it Alright, so I don’t know if you saw it, but that green number here for discount went up So we’re now saving 50% on our hosting. It’s kind of fitting that it’s big bonus You get like a big bonus of cash in your pocket? Instead of having to spend it today So you can use that for whatever you want the future save it invest it. You know buy some new cool WordPress t-shirts with it whatever you want to do. This is the biggest coupon I know of of course Let me know right away if this doesn’t work for you Or if like you can’t figure out how to I use the coupon for some reason that is my coupon, too So that if you use it, I get a small credit from Hostgator for referring you to them Which is really nice? That’s just one way that bloggers and youtubers can earn a living online by recommending cool products that we all use alright So that’s just a little Secret tip that you can do stuff like this to once you have a wordpress or a blog And of course, thanks very much if you do use our coupon alright, so just to explain the cost for you You might see a different number here depending on how many months you’re registering hosting for but just like a GoDaddy the longer you registered for the more you’re gonna save upfront and In the long run so the cost of hosting is about ten dollars a month standard cost But as you can see here for twelve months. We’re getting it for fifty three 70s So that’s like well under five dollars a month just pennies on the dollar All right, so that’s how that works, and if you did want to just get hosting for one month Then you could try the coupon code Coffee money which will get you that first month just for one penny all right It’s also our coupon code if you use it we get credit from Hostgator Thanks so much Just wanted to make you aware of that option as well But we’re going to use big bonus here because it has a bigger effect when you get more months Alright with that said we just need to check this box here and then in order to proceed with the tutorial And make a wordpress website and build our house We just need to click this check out Now button and then on the next screen Hostgator will say Thanks welcome to the family And then we’re gonna actually jump over to your Inboxes because Hostgator is gonna email us the steps to proceed and connect the domain name with their hosting all right Just wanted to give you the full picture of what we’re gonna do next Alright so with that said let’s just click the checkout Now button right here. Let’s do it Congratulations and welcome to the Hostgator family when you see this screen it’s now time to check our inboxes Alright so in your inbox you want to look out for two emails that you want to keep forever You’re someone that deletes things Don’t delete these two things. It’s gonna be billing and sales at hostgator.com, and if your emails look slightly different that’s just because they’ve probably updated the software’s and all that Let’s pause and congratulate ourselves because we’re now done getting the address step one and getting our land step 2 Alright, so you’ve done both of those great job Just gonna cross those off So we know what step we’re on cool, and now we just need to do this one little in-between step which is connect address to land In other words connect our domain name to our hosting all right and that we can do it starting in our inboxes So once you’re in your inbox And you found these emails if you didn’t get them by the way just give it a couple more minutes and we’ll kind of pause here and wait for everyone to do that and You can also contact live chat at Hostgator And they’ll send it to you directly if waiting doesn’t work check your spam all that everyone should get these two emails alright so once you have them open up your account info first and We’re gonna see a bunch of good information most importantly first name server and second name server Which we have to enter in at GoDaddy or wherever you bought your domain name all right? So it’s pretty easy to do if you’ve done it before but if not it can be totally confusing so here’s how to do it just Hop over to go Daddy make sure to login and then like we did before click on my products Manage all and then find the domain that you want to use to create your website today All right, so we’re doing 6-minute website comm like we said, and we just want to click on these three dots right here Alright, or you could click on the link itself, but I like clicking on the dots Now it’s going to say manage DNS or domain settings and click manage DNS Alright now we’re going to scroll down To where it says name servers and we have to update these two with the ones that Hostgator gave us to do that just click change and then change it from default on this menu click the menu and change it to custom and Now we have two boxes perfect So we just want to copy the first name server Or you could just you know write it up manually if you’re old-school like that All right the problem with pasting it is you can get the HTTP in there, which we don’t want It has to just look like NS some number hostgator.com and no slash and if you have different letters or numbers that’s fine You very well might Because we probably aren’t hosting our sites on the same server you probably your own server, but yeah Just make sure it starts with the letters and numbers in this format All right once your name servers are in there all you need to do to connect your domain name to your hosting is click Save Very cool and at this point GoDaddy is going to start updating information across the web telling every browser that when someone visits Your domain name that it should go to your hosting this can take up to 72 hours during propagation But nowadays the way servers are so is fast in Modern, you know developed environments. It usually takes only a small portion in that 72 hours it’s sort of like if you sent an email blast to the entire basketball team about a game time change and Then called everyone right after you sent the email Some people might know about it some people might not be updated on the information But if you waited an additional 30 minutes or an hour then it’s likely that Everyone would be updated and in the same way The entire web is going to be updating to show your website when someone visits your domain name But if you visit your domain name right now, and you see something that isn’t What you are intending on seeing? That’s just because we’re in this little in-between period of propagation All right, so you see it, I mean your domain name might show a few random things while everything connects itself All right great job. Everybody. You’ve now connected your address to your land you now own both of those things on the internet It’s pretty cool, and you’re about to become a homeowner once we install WordPress all right so instead of clicking refresh a million times on your domain name wondering why it’s showing a blank screen or some advertisements a Better step. I’ve learned. Is that we can go right ahead and put WordPress on your site And that way people won’t see any random pages from GoDaddy or Hostgator They won’t see ads and you can actually put up your own ads and do literally whatever you want with your WordPress site We don’t need to wait we can do that right now is the point all right very cool so to get your WordPress site up and running and Of course we are on Step three now Finally on the house step, we just need to go back to your inbox all right, so head back to your inbox and open the email that’s from billing at Hostgator comm all right once you open the billing email you’re gonna see a Link to login and then your email address and your password and that’s all we really need right now So just click on the link that says portal hostgator.com and again if your email is structured slightly differently It’s just because they updated their communications and made it all prettier All right, so we’re going to click on that link and we’re going to use the credentials that they sent us to login All right from your my account screen You can see all the packages you have at Hostgator as well as any support tickets and just generally manage your entire account For now though we want to hop over to the hosting tab where we’ll install WordPress So click hosting And then you can scroll down and click launch click install All right clicking launch quick install will actually take us to the Hostgator control panel here Which used to be called cpanel for those of you who may have had projects involving HTML or CSS Or you know old fashioned code, and you used a cPanel This is kind of the new version of that and then from this screen We just want to scroll down and click WordPress right here this box right in the middle All right very cool, so this is the free way to install WordPress and the way to DIY it And I’m just gonna choose our domain name from this list Perfect we can see I have way too many to keep track of Built a lot of sites for a lot of cool people and then leave directory blank right here once You’ve selected your domain name leave the directory box blank now It’s probably also a good time to mention that our in-house designer John is also offering this sort of service for you if you Install WordPress, which of course we’re gonna DIY for free, and then you have other needs like you can’t figure out your theme Or you can’t figure out how to build any one feature from the tutorials Maybe I didn’t explain it well enough then John can log in and do it for you And I’ll of course approve the changes and all that and make sure that it’s all done, right So it’s this sort of wordpress web design service although It comes one step later because i’m confident you guys can install WordPress for you. We don’t need to pay for that That’s just crazy, and we’re more affordable so pretty cool And you can just send an email describing what changes you want help making to John at Deere blogger org if you’re interested in that sort of service after you’ve installed WordPress or before, but like I said I’m confident you guys can get the installation done from helping so when people in the past Alright so with this ready domain name in blank click Next Now it’s time to enter in your blog title so we have Six minute website Admin user this will be your WordPress username so when you write a blog post. It’ll say bye Whatever you put here, so you probably don’t want to put like keek nine nine to four Or. You know whatever your aim was back in middle school course first name last name you can change this stuff later on and make sure you get that admin email in there right because WordPress will send you your login credentials here All right, and then we’re gonna check this box saying We’ve accepted the Terms of Service Agreement And it’s finally time to actually get WordPress going on your piece of land and on your address and make the wordpress website happen All right, so hostgator is gonna. Do all this code and techie stuff for us We want me to know I look of it. We just need to click install all right. Let’s do it All right, so what all of you guys seem to like doing now is leaving the screen open all right So I recommend leaving it open just so you can be sure that nothing went wrong. It says installation completed, so that’s great It’s the first thing done and the next thing is how do we get into your WordPress website? All right, so don’t click on login and don’t click view my installs just leave this window open Because if you click those, it’s gonna take this window away from you all right, so leave it open And we’re gonna go back to our inbox And we’re gonna make sure that we get that WordPress information from hostgator marketplace all right so the her she is click on that email And this is basically a carbon copy of what you had here on your Hostgator WordPress installation window Same link same username same password all right, so let’s do it. Let’s login to WordPress Click on your admin. URL, which is always just your domain name.com forward slash WP admin for future reference All right, and if you don’t see your wordpress login screen right here, that’s just because the domain and the hosting are still connecting themselves So when they’re ready to go you’ll see a screen that looks like Our login screen here at dear blogger with the WordPress logo, and then use your name password alright But we don’t have to wait a little bit longer, so now is it really time to take a break if you’re you know excited and You’re really pumped up then Maybe you can sit at the computer and keep trying to get this screen But I’m gonna take a break because we’ve done a lot of work so far I’m gonna go on a hike and we get a snack and then we’re gonna come back and Of course leave everything open just leave your internet all here connected We’re gonna come back and use our remaining time to create a WordPress website Together with a cool free theme and so on and so forth alright, so I’ll cut you guys in a few Alright, I hope everyone had a good break and didn’t just spend it scrolling through Facebook But if you did you’re gonna have an amazing WordPress website soon that you can share with people and blow them away on their So what we’re gonna do is just click on our admin URL link again and It’s been a few hours now about three and a half hours, so I hope we can get our site up All right, it’s thinking and boom hooray. We got the WordPress login screen That means we can safely close this other window from when our site wasn’t working and we can close Literally every other window including the Hostgator WordPress installation from quick install So we can just close The tabs and that’s great we actually Closed the email tab which we need alright and let’s login, so just copy your password Oops, that’s not gonna be much of a Google search copy our password and then I Don’t want to put our password into Google either But we’ll change that right when we login paste in the password Remember me is always good and login and again if you ever forget your login link or if you lose this email or something It’s just your website com forward slash WP dash a dmin admin Alright in any case welcome to WordPress So let’s get it going so right when you log in WordPress will take you to your dashboard screen Which we’re looking at now, and we can close some of the little notifications like you know we don’t really want that model at the top of our screen and We can also do the coming soon page here So right now our sites like if you look at the home page of our site And you’re logged in to do that you just click on the button on the upper left that has the home icon So if you do that you’ll see your site as you see it when you’re logged in and working on it This is like the content you publish goes here, but because we just installed a fresh copy of WordPress We go back to dashboard and click there our sites actually showing a coming soon page which is different So you can open? This site in incognito And it doesn’t know that we’re logged in so this is how everyone who’s not logged in aka All your readers will see it right now alright If you like this screen go ahead and keep it while you work on your site this Can hide the changes until you’re ready to go ahead and launch your site, and it’s complete But I don’t really like this because it’s the colors and the design And it doesn’t really match my brand and there’s just a lot of information on this page that I personally think could confuse readers So what I like doing is just removing the page right away? And that’s also an incentive for you. If you do that to build the site quickly with our help So we can do that by you doing the click here button Alright now once you do that everyone will see the site like this And your site is wearing the WordPress 2017 theme by the WordPress team. It’s good. It’s got a nice picture of a cactus you know got one of those on the fridge this little cactus guy and It’s pretty trendy. It’s a good site, but we don’t want our site to just be good we want it to be great and standout because why not and hundreds of thousands of people also use this theme we want to be unique so Let’s change our theme to do that we can go to the dashboard. Just click in the upper left up here And now we can click on appearance And We’re in the themes library So you can see the themes that your WordPress site came with right here one two three, and you can add new theme Alright, and I want to search although you might be enticed by these free themes from WordPress like popular latest favorites so on I Want to do a search one called ocean WP Because this is one of the hottest you know most loved themes of the moment And I want to show you how to use it because it’s been proven, and it’s just darn right amazing so to use it, you can just click the blue install button and Then you have to make sure to click activate and just with the click of a couple buttons now when we visit our site again We’ve totally changed it and it’s wearing a new theme, we just have to put in some content now But there’s a way to save ourselves time so we don’t have to upload content Just like a traditional web designer would and you can still DIY so I want to show you that way to save time Let’s go back to the dashboard again, and you can see how this little dashboard icon appears once we’re on the site because we’re gonna click to the dashboard and Then it becomes a home icon because then we click to home anyways a little cute feature So to save some time, I want to show you how to install a plug-in and that? Plugin is recommended by the theme all we need to do is wear this little notification says this seam recommends the following Plugins we can just click begin installing plugins super easy Alright, and then we click install under Elementor This is free Alright return to required plugins installer, and then we can install ocean extra as well. Just make our theme a little more powerful Great job now if you click on your plugins tab and Scroll down we can see elementary that we just got and we also have a bunch of other plugins that our WordPress site came with It’s a good idea to clean up this list to make our site run even faster Make it even more lightweight, and so let’s do that together right now So first off I want to close the notifications at the top alright We’re going to close this one if your diapy forms closed this one for optinmonster and close this one for Jetpack jetpack is if you want to use some of the features from wordpress.com. Maybe you migrate it, then it’s a really good idea Alright, those are great plugins. We just don’t need them at the moment and you can always install plugins again Especially if they’re free there’s no harm in deleting them or getting them later on alright now just follow me down the list so that we all have the same website to start building and we all know where we’re at if anyone needs help So let’s activate that kismet It’s a free spam protector Well of course leave Elementor activated if it’s got the light blue background Then it means it’s activated, and then we can actually get rid of Google Analytics right here. Just deactivate it and deactivate it All right, I’ll show you how to set up Google Analytics for free in another video So we don’t need a plug-in to do it and delete, okay? All right now we’re gonna activate hello, dolly Hello, doll is just a cool plugin by Matt Mullenweg the very handsome very talented founder of WordPress Alright, so now you get a nice little quote here, which is just kind of like nostalgic of the older days And we’re gonna delete jetpack. I don’t know how that snuck in there Do you activate first and then delete and then press ok and? We’re in the activate module marketplace because we aren’t gonna pay for their themes right now, delete Ocean extra leave it optinmonster API deactivate Delete and dave forms late, so these are all amazing plugins that you might like at You know your own discretion later on Like I said before we just don’t need them at the moment and it’s good to have your plugins library clean Alright so your site should have at least four plugins up a cos met a lament or hello deli and ocean extra and now we Can proceed Before we proceed why don’t we change our password though in case you get logged out randomly? to do so click on your users tab and Then just click on yourself Now scroll down and where it says generate password click it and just pop in a new password Alright obviously make it stronger than this and confirm it and update it Great job. Let’s click the button in the upper left to see if our site has looked any different now And it still looks the same because we were really just doing housekeeping changes in the backend although very powerful housekeeping changes So now that we’ve installed Elementor an ocean WP we can change the whole look of our site And we can hand like one of those beautiful layouts We saw me scrolling through at the beginning of the video when we were just flipping through them at the start So we can actually pick one that’s perfect for you and to do so click in the upper left Alright, and then you’re gonna click on your element or tab Next just click on add new at the top And just create a name that will describe the look of your new site and just publish it very good Now to actually make the visual changes happen you need to click Edit with Elementor Now here we are in our elementary canvas and we can easily drag in common website features from left Into the website as things would appear on the right Very cool Easy as that of course we could make it even easier, which we like We can delete that feature with your setup, and we can actually just add template let’s click Add template and let’s look at the beautiful trusted designs that the Elementor people have made for us and We can really start to see the beauty of using good plugins like Elementor and really good themes like ocean WP Call me lazy or call me smart But I just love these looks and I want to set one up on our website right now so that the world can see something Beautiful and professional when your first visitors start checking out your domain name alright, so I think in the past. We’ve used agency But right now. I’m really obsessed with personal all right. I’m gonna do a search actually. I’m gonna do command find Personal and then we have a few options personal trainer And about personal I like this one a lot, but it’s actually just an about page widget, which is totally fine It looks beautiful. I love the layout and maybe we’ll fall in love with it, so let’s click insert on about personal Loading alright, and now I get this really cool template right here So we can clearly make the changes at the top which have to write in your own name Ryann change the picture because that’s clearly not me and So on and so forth but to preview our changes right away, we can just click update Alright next what we want to do is just open the site in a new tab in the browser so We can see how it looks all right? And the interesting thing is no changes were made because we made them on a different page We’re looking at our homepage right now, and this page just didn’t get changed We didn’t change it so we actually have to apply the changes to this page If we go back to Elementor we can click on the stack of pancakes, and then we can exit to dashboard And we can see that what we did there was we just made a template that can be used on other pages So if we click on the Elementary tab again We now have one template here, so that’s great We can use this in the future but to have full control of our site We need to actually make pages and then Assign templates to them if that makes sense, and if it doesn’t just follow along for the next couple minutes And you’ll get it 100% to set up a couple new pages on your site. Let’s click on your pages tab and now we can just click add new and The first page you always make should be just the home page So you might think we have one already and in a way we do But it really helps if you actually make a page called front page or home page and then we’ll actually make the edits within this page and People will see them when they land on your domain name.com or whatever your domain name Is it just makes more sense to have the home page of your site be an actual page in WordPress? Instead of just the default content that appears on your home page again bear with me All right, so once you set the name of this page. Just publish it for now now We’ll click add new at the top one more time And we’re gonna make a page called blog all right and this page will hold all of your blog posts in a nice stylish Hopefully cool looking list of blog posts So we’ll publish that All right now. Add you one more time and let’s set up a page called coming soon in case you’re not done with the site when you leave this tutorial then you can just Put up this page, and we’ll set up like a pretty landing splash page here with some basic information for people Lish all right now. Let’s click on your settings tab and let’s tell those pages where to go if you click on settings Then you click on reading Now we can decide what our homepage displays, which is really important in WordPress We want to click a static page and then for home page We want to actually just put our home page there it might seem redundant But that makes sure that WordPress shows the actual home page. We create and not just this default content on the home page and Of course your post page just select blog And make sure to save changes now When we refresh our site, we’ll see some real changes that we just got rid of that default content great job We also got a new edit page button at the top right here on our home page So let’s make use of that We can click edit page and now we can set up the look of our new home page using elementary, so let’s do it let’s click edit with Elementor and Now let’s click add template which we love We’re gonna be super lazy here, so we can have more time Writing content and creating content, and you know making a living with our site And we’re gonna grab one of the home page templates here that elementary is kindly made for us Alright, so up to you, but I really like study right now. I’m kind of obsessed with it I love all the image overlays and the way the lines are offset super clean lines And I think stylistically it could really fit a lot of different sites and different niches that you might have so for all intents and purposes, let’s try a study just Click on it And then we can check it out real briefly Right very nice very pretty and we can just click insert All right it will take its time here, and so instead of just making a template before now We’re actually assigning it right to a page so you can do either way on your website But assigning an element or template right to a page will save you one or two steps Now we could just update it All right, and now we need to click the pancakes and go back to the dashboard Because we want to make a couple changes to the homepage as it sits right here If we view our site right now we can see that We’ve set up study, but it’s not like fully committed to study It’s just on the left hand side of our screen, and we want to make this whole page study So come on back to our page editor and under template. Let’s click Elementor canvas let’s see what happens then let’s update it, and I think what will happen is that we’ll Make the page inherit everything from our elementary canvas. Which is a study template Where you fresh it up? Beautiful all right now. It’s really working So now the page got rid of all those other default WordPress features, and now you just show everyone this beautiful template Great job if it seems like it was too easy. It’s because it was and in fact you deserve it because you already went through all the hard steps of setting up our address a piece of land our home and All that and now you should be having fun as your own DIY web designer all Right so now that we know how to make a website and build this page here using the study template at Elementor I want to show you some basic skills to customize the content and put in your own pictures your own links Your own text and so on and so forth and these skills should apply to whichever template you chose at Elementor and then if we have time later, I’ll make a full tutorial for you guys on how to edit Elementor templates, so let’s change it up. Let’s click Edit with Elementor at the top And the first thing I’m really focused on adding here is a logo and a navigation menu so at the top we can just click + to add a section at the top and then add new section and We’re going to give it a structure of a little bit on the left and a lot on the right this looks good right here and So now we need a logo for the left and a navigation menu for the right So let’s bring our mouse over to the search widget area. Just type in logo Alright so we have a custom header logo option and we can just drag that in Perfect and click apply and Now let’s do a search for menu, and we’ll take the navigation menu element and drag it over to the rectangle Drop it in perfect and apply it So of course these are just placeholders because we don’t have a logo or a nav menu yet to set up the nav menu just click on the WordPress icon or anywhere in the grey and Then it’s gonna prompt us to create some menus So I want you to right click on this link and open that in a new tab so we don’t lose our work here Alright and now in menus we can get started just by entering a menu name So something like me navigation and then click create menu Alright and this will of course help people navigate our site So they want to see like a pretty landing page they can actually get around to other pages, too So let’s grab our blog page and our home page as an example and add to menu Now we can drag them So we of course want the home page in the far left position which is at the top? And if you open the arrow you can just change the text So it’s nice and simple Perfect now we’re just going to save the menu Ok let’s hop back over to our elementary screen and now we’ve created some menus So if we click apply, maybe it’ll refresh the page And now we can click on our menu area again, and from the drop-down. Let’s just select our main navigation and a plot Alright and sometimes we pick the wrong element here because they have similar names And we’re just getting used to all the elements that are available So I want to actually delete this one we can hover around the pencil and click X Sorry about that, and I want to get us the other menu because it’s a lot more customization options So that’s custom menu We’ll drag it in Alright now. We’ll select menu main nav And it should come in nice and in line like that side-by-side Perfect so that looks good nice and simple, but maybe we’ll bring up the font size a little bit to something like 16 Perfect click apply and then lastly click update Alright now when we look at the site Beautiful to set up a logo on your website go back to elementary and now we’re gonna click on where we put the logo placeholder Alright, so this is our custom header logo its position in the left But we can see this element, aka Widget is just a placeholder to display the logo for the custom header style so similar to how we did menus We have to set up the menu back here in the dashboard We have to set up the logo back here in the dashboard, and then we can display it right here on Elementor Alright, and that logo will go in appearance customize So if you follow me to our it says appearance and click customize Now we can get to the other sort of meat and potatoes main editing area in WordPress So if you don’t have Elementor you usually do most of your main editing here. There’s a lot of theme options that are stored here Alright and in our case We want to click header and then logo and we want to put the logo right here to get our new logo I like going to logo maker. That’s ello geo Mak are without the e.com and Now it’s really easy. We can just click off or you can watch the video you can start by searching graphics So you know maybe we’re sick of winter and we want to go with palm-tree pretty cool alright there obviously a lot of palm trees to choose from But we want one with coconuts cuz good as a palm tree without some coconuts to eat and once you find yours just click on it and Then you can drag to resize Ideally we want our is about 200 to 300 pixels height and width because then WordPress will size it down for us and Of course we can change the color by clicking on the color wheel in the upper over here? So you can just click and adjust to the color that you desire All right that looks good and of course you can also click fatigue to start adding text you know logo name Anything you want, but in our case just the icon is good sort of like apple Or a brand that keeps it very minimal like that once. You’re ready. Just click on the crop button in the lower, right Click enter to actually cop it and now click the save the floppy disk icon in the operate So doing that will give us option one and option two we obviously like option two better And all you need to do is just click on paste this code, which will copy the credits for your logo Then come back to your site click on pages add new and You need to create a credits page that you’ll publish later once your site is ready to launch Alright so we can Put that in the text tab here because it’s got some HTML in it you want to put in the text tab not the visual tab and Then we’re gonna publish it and then just make sure to link it so the whole world knows that Credits that were involved in your website Alright now back on logo maker. We’re going to download and agree to give credit and name it And save it and now back in WordPress in the customize screen not the elementary screen in the customize screen under logo click select logo Upload files select files and Now let’s just grab our logo from Wherever we have our downloads, which is documents. Just select it and then open it Alright WordPress will process your logo and now we just need to select in the lower, right and You can give yourself a little more space here, so you get the whole logo and then crop it And it’ll refresh Beautiful down below in max width and max height we can actually shrink the logo, so it won’t go any bigger than say 100 pixels or maybe better even 60 pixels will fit in our navigation menu better Perfect you could also do the max height, but max width should control the max height as well And we’ll just publish our new logo Alright, we’ve made some pretty good changes there, let’s refresh the site, and see how it looks Beautiful we just want to make that logo a little bit smaller so that our text is still Aligned vertically here because the logo is kind of creating too much white space below the navigation menu text Beautiful, and you can also move these words around in your navigation menu move them up or down in that white space by going back To Elementor and adding some menu padding or changing the line height should work as well all right Pretty cool we’re not done with our logo and our navigation menu and Moving along in our little Elementor wordpress tutorial here. I want to show you how to customize Each of these sections on your home page so that you have that confidence and that true understanding of how your WordPress website Works as you make a wordpress website, and then we’ll also add one new section below and we’ll add an advertisement on the blog page because I Think we mentioned that as a way to earn some income from your website and make back that cost of a domain name and hosting That we spent earlier on and apologies if I’m getting a little cold here All right so let’s just make edits top to bottom here and go through the normal flow that an Expensive web designer would do for you in your town So as you see we can click on an area on the site and the visual editor pops up on the left You can either make changes in that visual editor Or you can make your changes right on top of the page by just clicking and writing Same goes for the smaller text and when you click on a specific area It’ll also tell you what sort of element. That is so we can see that the text when you click It is a text editor in the upper left right here Whereas the big text is a heading and that gives you some hints if you want to recreate this entire section? What these individual features are and what we’re working with it’s funny How the default text here from elementary matches what I’m doing here creating a wordpress website course But I want to give you guys some text it matches your look and your website So we can write our goal is to? Empower you Blah blah blah All right some basic welcome text there And you’ll see that you get the full Microsoft Word set of editing tools here because this is the full version of visual editor So you can change the paragraph size? You can easily bold italic so on and so forth and you can change the colors you can click on this toggle toolbar And it’ll give you more options so then you can really Make the text perfect for your own site like that If we also click on style at the top and Advanced we’ll get additional options for example the padding here controls How much space is above and below this text editor? So we could change that to a larger number like 40 and then you get more space There you go and so on and so forth In a lot of cases though the settings that Elementor creates for us in there widgets and templates will be good enough Next we can easily change the button just click on it like we do with the text, and then you can change the text So right here we might want this to say Check out our services, but we don’t have a services page yet, we have a blog page so We can say check out our blog to learn more Pretty simple We need a link so this button actually goes somewhere when people click it and to get that link you can just visit your site in another tab and You can click to the page where it’s going to go Then you can click in the upper left right here, and I notice one thing off We have this index.php in our link to remove that annoying index.php Which we don’t want because we want our links to be simple because Google like simple you can just click to the dashboard Quick little change here, and then we’re gonna hover on settings and click permalinks And then we’re just gonna choose post name So just the keywords will be in your link that you choose in your post titles or your page titles Save Changes and now our links are google friendly great All right, so let’s check out that home page again Click blog Click in the URL bar to grab the link right click copy Back to elementary and we’ll put that in a link and paste it over that hashtag That will hashbrown great job You can also click link options and make it open a new window or nofollow and Google won’t look at that link pretty cool next in this section We want to change our video, so this is a really cool intro to elementary that they made for us it’s a couple minutes long filled with great music and Really exciting stuff So we already have that at our fingertips, and we know how to do that now because we’re watching the video here and if you want to just change your video just hop over to a site like YouTube I Do think I’m pretty sure that Vimeo and other videos will work here But we want to stick with YouTube because that’s what we’re familiar with to insert a new video on your website Just hover on the pencil icon and click that And you’ll get this link here Alright, so we want to replace the link We can easily go to YouTube where I’ve already picked out a nice soothing background video by a nice guy named Ludovico, Einaudi Get search for a little because video click on it and Then all you need to do to put this video on your website is click on a link Copy it and put that into elementary right here. Just delete and paste Now we can see the video type could also be a Vimeo and now the video will just automatically render And we’re good to go you can also change the display controls like no player control and so on and so forth Alright, let’s update because we just made about four or five changes there Great job and now let’s check out the site click back to our home page by clicking on the palm tree Great job alright so moving down on our page. We can see we have these nice elementary sections here and You might want to know what this section Consists of before you edit and to find out you just hover and then in this little blue tab on the far left click on this little file cabinet logo and Then I’ll show you that. This is a section at its section this whole space with the light blue outline around. It is a section if you wanted to create it again and Inside the section we have if we click here We have an icon box which itself is inside of The column, and I’m just looking in the upper left on this magenta header up here So we can click here. That’s a column click here It’s an icon box inside of a column And then on the left we have an image Then if you want the settings of the entire section like how to change this white space or put a background image in it like Over here, you just click on the little file cabinet And then click style and then it’ll show you what the background image is doing So in our case we have this image of two people drinking coffee here doing some work and that image is in the background it Just has a nice overlay on it as well Which is a setting? You’ll find in style and go down and click background overlay, and you can see there’s an overlay color on the image all right So just increasing your understanding there of this amazing study default template from Elementor Let’s move on with our edits so we can change the header here in the second section on our home page Who are we There you to change our icon. We can just choose icon and Change that up although. I think the default one is really cool But there you go there’s an anchor and then of course we can change the text So that doesn’t make complete sense with who are we heading? but you get the picture you can write whatever you want there to change the image really easy just click on the image and Where it says choose image just click? On top of it And then we can easily grab one of our other default images or we can get a new image from somewhere like Say you wanted a default stock image It’s a great place to go is pix a bit, and we love using this image of the MacBook and camera But you can search your own image like Workspace. There’s a really common one then you just choose the workspace click free download choose the size and then click download and Make sure you’re not a robot Download it and then you just need to do a little save here All right, we can see that downloaded to my computer and now we can go back to WordPress and just click upload files select files Find it in our Downloads or wherever you like getting your downloads for me. That’s usually documents. Just double click on the file. It’ll upload And boom just insert media in the lower, right? Alright great job this section is done now I mean come down and change up the teaching team so maybe we just want this to say like our creative team and like we did above you just need to click around and identify the different type of element this is if You want to recreate this entire section so we click on the file cabinet at the top see this is a section We can click on this file cabinet and see that this is a column we can click on top of the wording and see that it’s a heading and That way you can reverse engineer this whole section if you want to create it on your own however There’s another good option. Which is just to duplicate it if you click on this little double piece of paper icon You can just duplicate the whole thing Easy as that all right I think we’ll leave it with Stella Donald and Gabi because you guys can figure out now how to change the image and just click on top of it click on the image and Upload one of yourself from Facebook or Twitter or instead whether and all the other text can just be easily clicked on and changed to Get those social media buttons working. You just need to click on top of the button and Then you’ll have the list of social icons here you can rearrange them like so and Then you can just edit them by clicking on it and then popping in your link So you just paste that individual social media like right here over What’s written? And then update alright next we can change up this quad picture here in these quadrants Using the same easy WordPress skills that we learned about you just need to click on the text and then make your edits And falling in love with the elementary demo text to you, so we’re gonna use part of it And then this one’s got to go If you ever want to link part of your text editors just highlight it on the left Alright, and this is an email So I’m going to click on the insert edit link button it’ll understand that it’s a mail to link which is pretty cool Or you can insert a normal link with the HTTP colon slash slash and then click the blue arrow for apply Alright, and I really do mean it you can reach out to John, and he’ll go ahead and custom develop your site or help you if anything from our tutorials isn’t quite working right and I’ll oversee the changes to I just should probably give them a heads up now and That could be John right here on his computer, and we love these images from elementor’s, so we’re just gonna keep those And come on down and add the last section on our home page Most importantly here is the map because we already know how to change the header and the text and this little Icon box pretty easy to change just like above just text and then an icon, but to change the map you want to actually click on the pencil icon and Then it’s going to be important to give a good address right here So we’ve been working Or while thinking about renting space here So if I want to give this address you know what do we do could we highlight it let’s try to just highlight it Okay, so that didn’t quite work so we can highlight it directly from Google on this location page. Just copy it and back in elementary Paste and then we’ll see if it shows up Alright so WordPress is pretty smart And it found our location just make sure that you sort of used the right styling from the Google location pages Alright, and then update beautiful, and then I should probably change the location because we’re not in London We are in Minneapolis here All right, and we’re just kind of taking advantage of the information that Google has already made for us, so we don’t have to Write in all this stuff again Which would be annoying the B are in alligator tags is a line break so whenever you insert this? It will go down to the next line All right sometimes WordPress doesn’t understand that that’s a line break You need to actually write in the BR, and those aren’t our phone or fax. So don’t use those All right very cool. Let’s update it and Now let’s refresh our site in a new tab and check out the beautiful changes that we made together All right, but no site is complete without a footer so to create a footer on our site Let’s go back to the elementary editor screen and click add new section We’re just going to keep it the full width and then we’re gonna have a section here Now we can click on the pancakes, and then we can click on the back arrow and choose an element So in our case all we want is just a simple text editor Just click to hold and drag and then pull it into our new section beautiful Next we can change up the text, so it matches our brand. We’ll just delete the dummy text and write copyright 2018 Dear blogger Inc, which is our new company here, and then we’re gonna write all rights reserved All right you can also do fancy stuff like the vertical bar and say it like you know web design by Greg narayan if you want to give me credit on youtube or something like that or you can do you know images from pixabay And Then if you want to create a link there you just highlight it and then click Insert edit link and then you can just get that link from the web and apply it So pretty cool. We’re gonna. Delete that though To get a copyright symbol. We’ll just google it and Then you can just grab it right from the top of Google it’s the easiest way to do it I found And Pop it right in maybe between the word and the date alright very cool. Let’s try to just update it now and See if our footer appears refresh Scroll down and it does very cool and if you’ve watched any of our older tutorials working with other WordPress themes this footer was a Piece of cake to create compared to those footers. We might just want to center that footer vertically so like right now it looks like it’s kind of high up in the white space so we can go back and let’s click on the Element itself and let’s click on the little file cabinet all right now Let’s click advanced and then let’s change the padding on top of it all right And I have a feeling 20 should be good, but we don’t want to link the values Unclick that and that way we can change the padding of the other parts individually and update Great job all right last But certainly not least we want to put an advertisement on our site in a discreet location So that people might click it And then we earn real dollars and real cents for the clicks and for the impressions So a great place for that is our newly minted blog And I get placed on the blog is the sidebar to add an advertisement to your blog sidebar just hover it over the Dashboard button in the top and click widgets, and this is like the old old-fashioned way of putting in a widget Let’s open our site in a new tab also so we can see what we reading because we’re used to seeing as we do it and Now we can just remove things like recent posts. Just open it delete Archives delete Comments delete and meta delete Categories is a good one to have in my opinion as a search and as you get more comments You can put those other widgets back in Refresh All right very good and now to get that ad in there you just need to have an adsense account which is free And we have an awesome tutorial. That’s helped a lot of people get accepted to Adsense All right like I said It’s free to join and once you do so you just go through Adsense go through the Google site like this Click Sign In, and if you’re logged into Gmail it’ll pop up your accounts Alright, and now we can see how I’m doing so pretty minimal because I don’t really put a lot of effort here Although if you look at other blogs like problogger or maybe daily blog tips you can see some really impressive advertising numbers Alright, and now to insert an ad you just click my ads and the section is where you can create ads But I’ve already done so so in ad units on the Left We can just grab one of the ones right here Alright, and I’d walk you through how to create a new ad but that’s super easy you just click new ad unit and then decide If it’s text or content and decide the color the border color Font color all that and then you just create it, and then it takes about a half an hour to start appearing Pretty simple in our case blog content will work great. It’s already created. It’s already active and approved so we just need to get code and Then you just click once and copy it go back to widgets, and we’re gonna choose a widget which is a arbitrary text I’m just gonna choose text choose right sidebar and add widget and Then you click on the text tab because we’re pasting in some HTML And we just paste in that Adsense code and save it Now when we refresh our blog fingers crossed we should see an ad but we don’t Because we have an ad blogger in the upper right now. We’re gonna get rid of that ad blocker Don’t run a page on the site exclude And there you have it, it’s a nice ad for a new blue Yeti microphone that I just bought alright guys so you now know how to put an ad on your blog using Google Adsense and That can earn you some revenue depending on what you write about Whether it’s a more lucrative topic or something that people are willing to pay more for once they click through your ad then you’ll hopefully get paid larger and larger amounts for those clicks that your readers make and the Impressions when they view your ads, it’s really fun and it all adds up Let’s click on the palm to go back to the home page And it breaks my heart to say it But we’re now done with this tutorial you now know how to make a wordpress website in 2018 with all the latest themes plugins Skills and other tools that are necessary area to dominate on the web. I hope you had a lot of fun Because I know I enjoyed making this for you guys If you have any questions or concerns or want to build anything else or just say hello. I’m always available in the YouTube comments can’t respond everyone anymore, but I do read them all and I’m every morning. I do log in and and try to say hello to you guys from our little dear bloggers study over here So I’d love to hear from you if you have a free second make sure to hit that Like button or dislike it if you didn’t like what we did here and make sure to also subscribe And that way we can make sure we stay in touch forever alright I’ll put up some related videos for you guys now along with the cool Exit song and maybe a link to the blog if I can figure out how to do all that YouTube is changing so much these days, but a great place to do work, and I’m on it to make videos for you guys right here It makes me so happy and I hope to empower you with the skills To blog for a living or use your website to make a living in whatever way you’d imagine Alright, so thanks for watching guys. That’s all for now. I’ll see you next time

Only registered users can comment.

  1. Im super excited to watch this. I really appreciate this and you are a great teacher. I watched your how to make a blog and got really really far I am still working on a few things. Is there a way we can connect quicker?

  2. Love this Greg awesome job you did making this one! Elementor looks amazing! Love the theme too! I haven't made a website using Elementor page builder yet! Question: Is the Elementor Page Builder plugin compatible with most WordPress themes?

  3. 100s of people make a WordPress website each day but burn out when they can't pick a theme. So go get OceanWP's best PRO themes here for free: https://goo.gl/MTYmkV …They're really helpful and gorgeous like you 🙂 Enjoy!

  4. Greg, as usual, you do an excellent job! I would love a tutorial on using Elementor on an existing website, say on just changing one page. I am currently using Catch Base Pro. Also, I would like a tutorial on changing to a different theme

  5. this is a good tutorial i've ever seen, well explained and easy to understand, thanks Greg, you saved me from confusion about how to make wordpress website with elementor 😀

  6. Hey Greg Narayan, you did a great job on this tutorial I am WordPress web developer. If you are looking for a web developer.have a look my portfolio
    https://jose-designs.com #Fiverr https://www.fiverr.com/s2/046e9dfcb8

  7. 👍Thank you. Love your positivity & reassurance to people who may feel a little apprehensive about doing this. 💞

  8. I actually have come up with an elementor question. The one thing I didn’t really think about is creating a page from scratch there a lot more choices than template . Do you have a video for this?

  9. I have a question. I have watched a few different videos on Themes and installing them and activating them. How come when I do this mine NEVER look like what the Theme actually is? Very frustrating. I'm trying to follow along to your video and I have something completely different. I have even deleted oceanwp and reinstalled and activated it. Please Help!!! thanks 😉

  10. Hey Greg – Thanks so much, I'm halfway through the video and it is great, really easy to follow! Only problem I am facing is that I bought the VELA theme while back and it seems that some of the basic Elementor Elements are not on offer to me – logo / custom menu…. I'm no good at this jazz so please can you give me a 'twit proof' solution 🙂 Thanks so much

  11. Thank you for these videos. I created a ecommerce site with woocommerce from your previous videos. Now I'm making a personal site. Thanks!

  12. Thanks for the tutorial! You mentioned the coming soon page in the video but didn't really touch on it. Any chance we can get a tutorial for that in the near future?
    Thanks!

  13. Hello Greg. I was following your video and uploaded oceanwp theme but i am facing a problem. When i am editing the contents of the home page with elementor and update it. Nothing really is getting updated. And i am stuck in the same with the old theme blah blah content. Please help

  14. nice tutorial. But the elementor is not working. The default text can't be changed. No matter how much times i have clicked update. But it is not getting updated. Please help

  15. Greg, I cannot thank you enough for your tutorials. I finished the shorter tutorial on using Elementor and OceanWP and completed my very first ever Home page for my new website. I will be finishing up the additional pages by going through the longer tutorial you have on the same subject. This is a huge accomplishment for such a technology-challenged individual! Thanks also for the links in the comments sections of your tutorials that allow us to jump right to the sections we need. So very helpful!

  16. Hi Greg, Please can you tell me if I can make a homepage with feature boxes WITHOUT using Elementor ? I use oceanwp but would like to stop using elementor and can't figure this out.. Thanks for your video ! and thanks for your suggestions 🙂

  17. Hey Greg Narayan… you know what dude I just fell in love with your tutorials…. I have done a lotsa r&d on net and youtube etc. but very less, I quote "Very Less" guys like you are there for others…and not for yourselves. I wish I would have come across your videos before and by now i would have been something else… which I am not currently (at least before I saw this video)… but I am sure i will. I know it may sound too much to ask…as you may be busy….but… is there a way I can directly contact you (skype, snapchat…etc.) ? (wherein I do not have to spend a load – not registrations to webinars and stuff) To be honest I have seen good days but currently … I am on my knees… to make the ends meet… I need one good guardian or just a proper guide who if he/she can just direct me with a part of his/her heart (and not just the brain)…I can also be of use (maybe) since I am from India and I will then do anything for you too. My most used email id is [email protected] It will be highly appreciated …
    regards
    Gautam

Leave a Reply

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