How to Make a WordPress Website for FREE - Build Your Website Locally on PC or MAC!

hey guys my name is Hogan and welcome to this tutorial where I'm gonna be showing you how to create a website step by step so this video is a little bit different from the tutorials that I've normally created in the past and it's also different from other videos as well so normally when you actually have to build a website you normally have to buy software you normally have to purchase your hosting and a domain name before you can actually start building but in this video I'm gonna be showing you how to start completely for free so you can build your website you can practice make sure it is 100% what you want and then I'll show you actually how to take it on lion okay so anyone can actually view your website from all around the world so in a few minutes I'll be going through exactly how to actually get set up and actually how to actually build your website step-by-step so this tutorial is for absolute beginners you don't actually need to know anything to do with programming or you don't need to have any experience you can be 15 or 55 it doesn't really matter how old you are because I'm gonna be actually showing you step by step in the computer basically you just have to follow exactly what I do and you'll have a really nice and mobile responsive website so this video is quite long so you might you might need to be a little bit patient but I really think it's worth it because I'm gonna be going through all the steps so you actually build like a three thousand dollar website so you can also speed up the video if I'm going too slow you can also slow it down if I am going too fast by clicking on these settings gear icon on the video and I've also listed everything down in the description below so you can come back to the video and you can re-watch certain parts you can skip to certain parts it's really up to you how you use this video but this video is perfect for anyone who wants to actually build a website okay basically I think that's it if you have any questions make sure to drop it down below in the comment section and I normally will get back to you within 24 hours so I'm here to help you guys to build your website and hopefully you're gonna really enjoy the process as well so without much further ado maybe grab a tea or a coffee or water if that's where you drink and we're gonna get started by jumping into the screen okay so open up your browser and here we're gonna start type into Google I'm going to type it na me so vit and ami space and then type in WordPress so WR d PR e SS hit on enter and we're gonna click on to the first result here all right so we're gonna install WordPress on to our local PC or Mac computer and that's gonna allow us to build our website okay so WordPress is actually used by 30% of the Internet okay so I use WordPress as well a lot of top companies such as Forbes CNN TechCrunch they also use WordPress to build their websites okay so WordPress allows us to build it without code so it's going to be super easy so here you can actually click on the win Mac and Linux okay and it's going to take you to this page here scroll down and we're going to download the installers right so if you're using Windows then you have to download the Windows one if you're using the Mac then download Mac okay so I'm gonna use this one here and I'm just gonna go no thanks take me to the download okay so we're going to save that onto our desktop and that might take a minute or two depending on your download speeds alright so once that's finished downloading then we're gonna open the file so I'm gonna click on the file and open that ok so just double click to install it and it should be pretty similar for your Windows computer so make sure you install that onto your computer ok and then this will pop up click on OK click on next make sure these three are checked click on next and here is where the folder is going to be saved all right so what I do recommend is clicking here on the right and saving it on you Desktop okay so you can actually create a new folder by clicking on the left here okay so this might be just called word press create okay and then click on open okay so that's gonna create a new folder on your desktop okay so if you know you can't find that new folder thing then just right-click your desktop and setup a new folder and save it there okay click on next here put in your real name so Hogan sure make sure to put in your real email address as well okay and your login details so I'm gonna put in my name and a password okay so make sure to remember your login details and also your password and make sure to put in a real email okay and then click on next here is gonna be your blog's name so I'm just gonna name it a logo but you can change this later on click on next here we're going to just leave that as is next and I'm not gonna launch it on the cloud so I'm going to deselect that click on next and then click on next to actually install so that's gonna take a few minutes to install that onto your computer so I'll come back in a second alright so after a few minutes that is done and what we're gonna do is make sure we're gonna launch it alright so select that and then click on finish alright so any time that you actually want to access your WordPress website then you'll need to go to this address alright and then here you can click on access WordPress and that's gonna take you to your WordPress website where we can actually start to log into our website alright so if you actually let's say you turn off your computer this program will be off alright so when this program is off then these programs here is gonna actually stop running alright so if we actually let's say we stop all of these okay so this is what happens when you have turn off your computer okay and the program is not running then this website here click on enter it's not gonna actually show up right so every time you actually want to launch your WordPress website and start building a website on your computer you're going to make sure that this program here is running right so you can go back to the folder right so let's just close that so if you open that folder then if you double click manage your - OS X then that's gonna open this up here and then you want to make sure that for the managed service that the servers are actually on all right so you can click on start all and that's going to start it up and only when they are actually all running then you can actually access your WordPress website ok so let's click on refresh and that is up ok so to actually log into your website you can type in WP dash admin and that's gonna take you to the login dashboard alright so here you need to enter in the username and the password they put in before and then log in so we're gonna close this ok update that so what you're gonna notice is that here you actually don't see like you know your name com ok so right now we're building the website on our local computers right it's not actually online so people can't actually see that yet right so after when we finish building the website I'm gonna show you how to take it online so I'm gonna show you how to get your domain name which is your website address and also get a hosting account so you can actually transfer this website onto a live website that people can actually view all around the world 24/7 so don't worry about this now ok so just pretend this is like your website com we're gonna actually start building right now all right so this is your WordPress dashboard or the backend of your dashboard area and here you can actually visit the site and the front-end is like this alright so we're gonna go back here and I'm going to configure some basic settings ok so what we're gonna do is hover over settings and then click on permalinks and what we want to do is change the permalink structure to post name okay so this is good for search engine purposes all right so just change that there so that when you actually create pages you'll actually have the page name in the URL of your websites okay so you don't want something like this you know question mark P equals one two three you want to have the name of the page or the post in the URL okay scroll down and save changes all right so once that is done then what we're gonna do is we're going to hover over appearance and click on themes click on add new okay so here you'll find you know thousands of different free themes that you can actually use to actually you know build your blog or a build your website so what I do recommend and the theme that I use is in the actual description so make sure you download that theme okay that theme is called themify ultra and once you actually download that onto your computer it's gonna look something like this themify - ultra zip right if it actually turns into a folder what I want you to do is right-click and compress it back into the zip file okay so here you need to upload the theme choose file and we're going to install the theme here okay themify ultra dot zip and then click on Install Now and then click on activate okay for the skins and demos we're gonna click on the cross here and then if we actually view the website right now and refresh it then the appearance has changed so the theme is basically the look of the website and it also includes a drag-and-drop builder so we can actually build the website without any code and it's gonna be really easy okay so if we actually go back here what I'm gonna show you now is how to add in some pages alright so click on pages and right now by default there is to draft pages or sample pages we're gonna select this top one here and we're gonna move them to the trash first okay click on the trash here and we're going to delete it alright so we're going to delete it permanently and then next we're going to click on add new and the first page we're going to create is our home page alright so we can type in home on the top here and then we're gonna click on publish so you can create as many pages as you want like for example your about pages your contact pages your different service pages or anything like that but for now we're going to create just the home page alright so once we've created the home page if we actually go back here and to refresh the page you'll see the home page here right and if you actually click on that home page so it actually takes us to the actual home page but what we want to do is for this home page we want to set it to be just our domain front page so I'm not quite sure if you actually understand what we're gonna do but if you actually do it then you probably understand so we're gonna click on customize first and then what we're gonna do is click on the back here and then click on home page settings set a static page for our home page we're gonna select home ok and then click on publish and then close that alright so if you actually click on the home page now then it's just gonna be our basically our domain URL so it will be your name com right that's what we want okay so right now I'm gonna show you how to configure the settings the basic theme settings for example if you want to change the header section or if you want to change the footer section I'm gonna show you where you can do that so I'm gonna close that one for now let's head back to our dashboard and you can go to themify ultra and themify settings and what we want to do is want to look for the theme settings and click on theme appearance so here is where you can actually change to different header designs and also different footer designs right so what I generally like to do is open a new tab up so we can see what we're doing alright so here we've got the default header right I want to select maybe the head atop bar okay and then click on save and then if we go back here and refresh that then you'll see that the header design is just a nice and simple header design okay so I really like that and I'm gonna keep that but what I want to do is I want to remove the text here okay which is a site tagline the RSS icon and also the search bar okay so we're gonna go back here to the theme settings and then we want to exclude the site tagline exclude the search and exclude the RSS so you can keep those if you want to you can play around with the settings later okay but these are the settings that I want so I'm gonna click on save and then once that is done you refresh that then it should be gone okay now the next thing that we want to do is we want to make sure that we have a blank page so we can build our website right now there's like a title here and then there's a sidebar here but we don't want that right we want to have a clean and blank canvas so we can build out any website we want we don't want this stuff here all right so to do that go back here click on default layouts okay because that's a page we're gonna click on default page layout and for the page sidebar we want to select no side part okay save it and then if we refresh it then the sidebar is gonna disappear but we still want to remove the title so go back and hide title okay I also want to remove the page comments if there is any okay and then save refresh that page and we're pretty much good to go alright so now we have a blank canvas to build our website we can actually let's say we can turn on the Builder and then here you're going to notice a purple line and also a orange line alright so the orange line represents the columns the purple line represents the rows so the rows go from left to right columns go you know up to down right or down to up so here you can actually set you know however many columns you want for example two columns like that you can also select you know three columns but the cool thing is you can actually readjust the columns like for example just drag it and you know just move it across like that alright so for me we're gonna click on that one there alright and what we're gonna be doing is we're gonna be creating a demo website which looks like this so go to blue demo one two three so this is the demo website that we're going to be creating it's just a really really simple design website and basically gives a good sort of overview of how to actually use the Builder okay so what gonna do is going to create an image add some text learn how to add in the button and things like that so we're gonna go back here to our website okay so what we need first is an image right so to get an image what I recommend is going to unsplash.com okay so you can scroll down here and there are a ton of high-quality images that you can use for your website I don't have to credit the people but what I do like to look for is a sort of a landscape image work and put text over something like this you want to scroll down and pick a really nice image that sort of relates to your business okay so this one is pretty good here but I've already found one before and I think the the photographer was Adam let's just type in the name okay so this is the photographer and the image that I want is this one here okay so you have to download it just click on the download icon and download that onto your computer or a folder okay so we're gonna click on save and once you've got that image then what you're going to notice is that that image is actually quite large right so if you actually want to follow along exactly with this tutorial then click on the download link for the images and I've included all the images that we're going to be using in the tutorial so it's gonna be a lot easier if you do you know download it and follow along alright so this is the image and if we actually get the information right you'll notice that the image is like quite large like 2.6 megabytes that's too big to just you know upload onto our website otherwise it's gonna load really slowly right so what we actually need to do is to crop the image first so what I recommend is going to a website called photo comm and you can use Photoshop or any other software that you use but you can use this software for free so it's pretty cool click on edit and then what we're gonna do is upload the image and crop it right so click on open computer okay find the image which is this one here open alright so here we're gonna click on resize okay so you're going to notice the size of the image here four thousand times 2246 we want to make sure the lock icon is closed like that okay so if we type in 1600 then you'll notice that the size here changes as well okay so what I want to do is change it to 1600 and - all right and then this one is 900 and height we're gonna apply and then what I'm gonna do is I'm gonna crop it okay I'm gonna try and crop it to 1600 okay keep it as 900 here you can also move it up and down like that okay if the image is a lot bigger we're gonna play and then the size of the image is here okay that's the final size and then click on save and then you can name this image like a hero image okay save it as normal I think you might need to actually log into your Facebook to download it so log into your Facebook or create an account and then download that and then save it into your images folder okay and once you've done that come back to your website and then I'm gonna close that and then to upload that image what I want you to do is hover over the the purple okay hover over the Year icon and we're gonna do a full width image so we're gonna select full width' okay so that goes all the way across all right and then you can click on styling click on background and for the background image we can click on browse library alright so don't click on upload otherwise it might automatically crop the image and sometimes the WordPress it crops it to be like really small so it's gonna be like blurry and stuff like that so click on browse library select files and then upload that image alright so once you've done that insert file URL for the background mode select either full cover or a parallax I'm gonna say full cover and then once that is done we want to sort of add some spacing so we can actually see that image so scroll down and then click on padding so padding is basically like another word for spacing alright so we want to click on this sort of link icon okay and then we're gonna type in maybe 15% to the top I guess so 15% space to the top and maybe the same for the bottom so 15% for the bottom alright so if you want to stretch it further you can also just click on it and sort of drag it up like that so if you do 20% like that 20% for the bottom okay so we're gonna leave it as that because we're gonna add in some text and that's gonna stretch it further all right so what you can actually do you can also add in you know gradients you know selecting different colors here you can also add in a video as well so what I do recommend is uploading the video that you want onto YouTube because that's going to load the video a lot quicker since it's loading on the YouTube servers right so let's just say if you like this video here you can copy the URL and you can paste it into there okay and hopefully that's gonna actually start loading but I think because the websites on our local server it doesn't actually load but once we actually transfer it onto a live server then the video background will actually start playing ok so we're going to just delete that for now and then we're gonna just put in the image for now right click on done and then we're gonna add in some text so hover over the green icon and let's drop in a text module and here we're gonna type in maybe welcome okay so the text is on the left you probably can't really see it so I'm gonna highlight the text and set it to heading one so what I do recommend is only having one heading one tag all right so if you actually click on the text here this is the heading 1 tag make sure to only have one per page all right so this is for search engine optimization purposes but I'm not really going to cover that in this video I actually have another video which talks about SEO and stuff like that so you can also check that out on my channel as well so if you actually want to change the color go to styling go to font change the font color here to white okay so that makes a little bit more visible you can also text the line to the center just like that okay and you can also click on heading heading one font okay so we've actually set this to heading one alright so if you go to styling heading heading one you can change the size to let's say 100 pixels okay and then click on done alright so that's really simple now if you actually want to add in another text module you can hover over here you can also click on the lock okay so that's gonna lock it there so it's gonna always be on the left alright you can drag in another text module like that and we could do like actually I'm just gonna copy it from this demo website sir find all the latest travel stories and adventures here so when you're actually pasting text from another website you want to right-click and you want to click on pad and paste and match style or paste as plain text okay because you don't want to copy over the styling alright so here you can click on styling font let's change that to white again okay so that's visible and maybe let's change the font size to 24 okay or let's do 20 and then we're gonna text align it to the centre like that okay click on done and that's looking pretty good right so the next thing we want to do is we're gonna add in a button so let's look for beef button and drop one into there so you can select the button size okay so and I keep it as default and I'm gonna scroll down here for the button text I'm gonna put it to be like our story okay so you can link it anywhere you like right so when Sun actually clicks on that button it's going to link to whatever link you put into here so let's just say you are linking it to Google alright so you do like HTTP /gu com that link is gonna link to Google right and let's say if you want to link it to this YouTube alright you would copy the URL and then you would paste YouTube into here alright so once that is done then once someone clicks on it it's gonna directly go to that thing alright so what I'm gonna do here instead is I'm gonna link it to a different section of my website so I'm gonna actually put in hash about okay so I'm gonna show you how to actually link it click on the black one okay so you can change the color here I'm gonna select the black one you can also insert an icon if you actually want to change to a custom color go to styling button link and you can change the background color and the hover over color as well okay so I'm just gonna leave it as default and we're gonna click on done okay so I might actually need to double click that and move that into the center so styling font and move that into the middle all right click on done so what I do recommend right now is not to play around with the colors and styling so much because I'm gonna be going through that later and I think that's a really important part as well because otherwise your websites gonna look sort of messy okay so I'm gonna go through the colors and where you can change the colors for everything alright so what you going to notice is you can actually click on the preview and you're going to notice that there is some white space there so we're going to remove that so to do that you can click on the back end and you want to scroll down to themify custom panel page options content width to be full width all right click on update and once that is done you can click on View page and the spacing is gone alright so that was pretty easy right for a hero image homepage those pretty cool so the next part we're gonna do is we're gonna create our small little About section so this could be about yourself about the company or just a little bit about your website ok so we're gonna go back here turn on the Builder and what we want to do is I want to deselect that actually okay because that keeps popping up we're gonna do a two columns so we might do this one here the last one alright and in the first column we're gonna drop in an image module so we just drop that in and here you can select the different image layouts basically and here we're going to input a image URL so I'm gonna delete that click on browse library upload files select files and here I've already cropped an image okay so click on the about me jpg click on open and then insert file URL okay so the size that I crop the tool is about 400 in width times 267 insert that in there you can also play around with the different image appearance like that okay so I think that's pretty cool you can do that I'm gonna leave everything just as is and then click on done all right so we're gonna drop in a text module so drop in a text into there so for the title you might do like about me or you know about the company or something like that okay so here I'm gonna put in the heading to text okay and then here I'm gonna click on enter and I'm gonna grab some text from my demo website okay you can also go to a website called lorem ipsum okay and just grab some random text that you can actually just you know paste into your website so generate long Epsom and let's say you want to paste in some random text for now so paste that into there something like that I might paste in maybe like another line or something like that so just copy that and paste into there click on done and I think that is good enough okay so what I want to do is you know add some spacing right otherwise it's just way too close to the hero image so to do that we're gonna add some spacing to the row so you can double click on these white space here and that's gonna take you to the row options click on styling and click on padding click on the link icon and then I'm gonna add five percents at the top and five percents at the bottom just like that alright and once that is done you can click on done and what I like to do is I want to make sure that image is also aligned with the text here alright so to do that you can hover over the purple again and select the middle column alignment okay so it's gonna align the text to the image and it just looks a lot better like that alright so what you can also do is you can also change the size of the columns by clicking the column line and sort of dragging it like that okay so you can play around with that I'm just gonna leave it just like that all right so for the next section we're gonna do the Services section all right so the first thing that we want to do for the Services section is to actually add in a background color right so we're going to go over here to styling and click on background and the background color that I want to put in is f6 f6 f6 so it's a really light and subtle gray right so why do we actually do that the reason why we do that is because we want to sort of separate each of the different sections of the website right you don't want to just have one huge block of you know a white background and the sections don't look like they're separated right so if you actually let's say we go to you know Apple comm right and if you actually click on one of the pages you'll see that each of the different sections is separated right so here they've got I think either a white background or a really light gray and then they separate it with this dark or black background okay everything is separated really nicely okay so everything is separated that's why that's a really light gray it's not just all white hair so if you scroll down here and they're separated with a background image as well okay and that's what we want to do for our website and it makes it look really good so the next thing we want to do is maybe drop in a text module and we're gonna label it services all right said it's your heading 2 and then click on done all right so once we've done that then we want to add in some featured modules so over over here let's look for a feature drop it below there here let's just say you offer web design okay and we're gonna add some text so I'm just gonna grab some lorem ipsum text paste that into there just like that and you can also select a different layout I'm gonna remove this circle so I'm just gonna delete it okay and maybe delete the strokes as well also I might delete the color so select it and delete it the size I'm going to change it to medium okay and for web design I might change it to a different icon so you can click on insert icon and we're gonna select maybe something to do with design okay so let's say look maybe this one might be okay web design a computer okay so here you can also change the color of the logo so what I do recommend just leaving it as this okay nice and neutral you don't want it to stand out too much you know what I mean so we're gonna keep it as neutral and delete that you can also link it to a specific page that you've created or a external page like if you want only get to Apple so if you link that here and when people click into that then it's going to link to Apple's website all right so I'm gonna just you know yeah I delete it for now and then we're gonna click on done alright so let's just say I want to create three different sections three different feature modules so to do that I sort of want to have three rows right so what you can do is hover over the green here and click on rows and I'm gonna select this one here I can click it and drag it and put it below services once you've done that then drag the featured module click on it and put it into one of those columns just like that okay and then to actually create another one then you can actually hover over the blue and duplicate it two times alright and then should drag it and put it into here like that alright so to change it you can double click and perhaps this one might be you know free tutorials okay and maybe you scroll down here you probably want to change the icon so insert icon let's look for a play button or something like that I think this one might be okay okay and then double click on the third one okay let's double click in here this one might be maybe 24/7 support okay and I'm gonna scroll down here we're gonna change the icon - I think user like that okay and then click on done so what you can also do is instead of actually just you know double-clicking the module here and styling clicking the font and align this to the center or you can actually do is you can actually double click the row go to styling font and text align to the center so that's gonna align everything within the row into the center all right so we're gonna click on done so what that means is if actually moved the text you know down to a new row then it's not going to be in the center anymore but if we move it back here hopefully if I can really back actually what I can do is we can actually redo undo so click on undo ok and that's gonna you know bring you back where you were before right double-click the row and go to styling padding click on the link icon let's add five percents at the top 5% to the bottom click on done and I might want to add some space here okay below services so double-click the text module styling padding click on the link and we're gonna add some padding to the bottom of that text module okay so padding you're gonna be using it pretty much all the time when you're actually building layouts because you can probably need to add spacing to everything to make it look good alright and that is that section done so you can click on save now the next section that we're going to create is the gallery section so we're gonna create the gallery section so you can actually showcase your work in a lightbox or you can add in a slider as well or you know anything like that so here we're gonna do is we're going to let's drop in a text module click on modules let's drop in a text module here let's label it gallery let's set it to heading to styling font and align to the center okay and we're gonna hover over here again and we're gonna look for maybe they gallery module upload files select files and I'm gonna upload the images which I have cropped all right so gallery one two three four five and six open and what I do recommend is cropping it beforehand as well so you don't have to crop it to the same size that I have done against 600 by 400 pixels in height you can crop it to it pretty much any size between maybe I'd say six hundred to a thousand in width to about you know whatever height that you want okay because you don't really need that big of the image otherwise his sites gonna load really slowly but what I do recommend is making sure that each of these are the same size all right so your gallery images should be all the same size so that makes sure that you know everything is proportional so at the gallery update gallery so I think I added these ones by mistake so in circular again it's gonna delete these ones update gallery all right so we've got six images so I'm gonna scroll down here and I'm gonna change it to three columns like that which is cool so for the thumbnail width okay so how do you actually calculate the thumbnail width all right so to calculate it all right what I generally do is I actually divide it by divide the original image by two or three okay and you want to do the same for the width and also same for the height so if you actually divide the width by two so 600 divided by two equals 300 and you're gonna make sure you do it the same for the height so 400 divided by two equals 200 right so if you do it like you know if you do it like let's say put 100 then it's not gonna be cropped properly right so you want to make sure always to divide it by this same number for the width and the height okay hopefully you guys know what I mean so let's say if you divide 600 you divide that by three right so 600 divided by three equals 200 and 400 divided by three I think that equals 133 or something like that like that right so that the image still looks really good and crisp okay but I'm gonna change it back to 300 by 200 loose and then once you've done that then you can click on done all right I'm also gonna add some padding below gallery so you go to styling padding and then maybe do five percent or something like that right and then I'm gonna add some padding to the row okay so double click the row styling padding okay five percent to the top and five percent to the bottom I'm done so what you can also do is you can actually zoom out a little bit like that that makes it a lot easier to sort of see how the website looks all right everything looks good for now I think maybe this is probably a bit too close to the title so you can double click that and you can click go on maybe enter do something like that you know add some spacing and then click on done okay that might look a lot better now if you actually want to add in maybe let's say a slider you can do that so you can drop in the slider module below that and you can either slide your post your images or your video just need to browse library and upload it okay so for your video you can just put in a video url and that can be displayed in the slider you can also do the same for text so if you have like a testimonial or something like that you can do that as well okay you can also add in maybe a testimonial slider here that looks som like this and then you can add in a title the content and a picture of a person as well okay so the next section we're gonna create is the video section right so how do you actually add in a video that is super super simple so just drag in the video and here you want to grab your favorite YouTube URL so I'm just gonna make sure that okay so you can just grab that URL there and then paste in the URL into there okay just like that and you can also set it to auto play but I'm just gonna leave it as that click on done and the only thing I want to do is I want to add in a background because I want to sort of separate each of the sections okay so here we've got a here image we've got a white background light gray white background and here I'm gonna do a dark gray so double click the row click on styling background background color I'm gonna do maybe a dark grey which is two to two which is cool we might add a little bit of padding okay so we might do let's say 5% of the top 5% to the bottom I think that is pretty good okay and I think once you've done that click on done let's bring it back to 100% again I think that looks pretty good what you can also do is double click the row again styling you can do a row overlay so a row overlay you can actually overlay a different color as well so if someone actually hovers over the row you can set it in an overlay hover color so I might set in maybe let's say 1 1 1 okay so when someone hovers over that right so if you notice if I actually hover over that then it goes darker okay so people can click on the video hold on I'm gonna save it first and close it then if someone actually let's say they click and play the video it's not working right now but if they actually play the video then they sort of in a cinematic mode all right which is pretty cool so the next section I'm gonna share to create is the blog section alright so creating a blog like for example if you click into that is really important because you can actually create content that people actually searching for on Google and that's gonna drive traffic or awareness to your website ok so that's why adding your blog post is really important and I'm going to show you exactly how to do that all right so before we can actually display the blog post we need to actually you know add in the text all right so to do that you need to go back to your dashboard so let's hover over post and you can click on all posts and if you actually click into this one here so you can view it and that is a hello world or a sample post so you can go back and we're going to delete this one and add some new ones so first thing we're going to click on trash and then click on trash again and delete that permanently okay and then click on add new so here is we're going to add the title of your blog post right and this is the body okay so what I'm gonna do is just grab some lorem ipsum and show you how to add in a blog post so copy over the text and just paste in the text here I'm gonna grab the first few words as a title okay here is the blog post and if you actually want to link it to another website they can select the text and he can click on the insert link and let's say you want to link it to the lorem ipsum copy the URL and paste it into here okay you can also click on link options and select it to open up in a new tab you can also select different pages on your website already so this makes it a lot easier but we don't have many blog posts or pages yet so you're not gonna see that right so we're gonna click on update and that creates a link so if you want to add in a video you can just copy over the URL and then you can copy over that and let's see if that works it paste it into there you can also scroll down let's say if you want to add an image then you can click on add media and then you can select the image and add it in okay so you can also click on the toggle toolbar and that's going to give you more options to change the colors and things like that so I think you guys know how to you know edit this part I think it's pretty similar to most word editors so if we scroll down here we're gonna click on add new category so this category is called travel okay so you can add that in you can add some tags you can also set in a featured image so we're going to click on set featured image upload files select files and I'm gonna select block number one I'm actually going to upload these three together right now so if we're gonna open select this image here block number one set featured image and then once that is all done we're going to click on publish alright so if we actually view the post so let's open that in a new tab then this is a featured image this is the title text link video and you can also add an image here and people can also leave a comment as well down here alright on the right hand side this is the sidebar so you might have your recent post you might have a little picture of you you might have your email opt-in or things like that so I'm gonna show how to sort of configure this section later on so what I'm gonna do is add in two more blog posts because if I don't then I'm only gonna have one post to display here so it doesn't look very good so I'm gonna quickly come back here and let's add in a new one okay and then let's just grab some text let's just do this really quickly so just paste that in here okay and then I set it a new category add a category set in a featured image I'm gonna set this one here and then publish okay so let's view that post to make sure that's in oh good you can also click on add from here you get the the plus icon and then click on post and then that's the shortcut basically alright so copy over the text paste in the text paste in a title add a new category add new and then you can set featured image which is I think this one here set a featured image and publish okay so once that is done you can click on all post so this is where you manage all your post ok so you can edit them you can delete them as well alright so let's go back to our home page and scroll down to the bottom ok so what we can do is turn on the Builder and the first thing we want to do is maybe add in a text so drag it up here and then we're going to just put blog or you can put in featured blog post or news or whatever you want set it to heading 2 and styling go to fonts and align to the center okay I also want to scroll down to padding and I'm gonna add 5% to the bottom okay like that so it adds spacing click on done and then I'm gonna hover over the green and I'm gonna drop in a post module so look for P post module drop it below there okay so here you can select the layout so depending on how many you know blog posts you have you can select a different layout if you want I'm gonna select grid number three and I want to remove the summary of that right so you can actually change that by going to the display and changing the display to none you can also display all the content as well but I like to display none for my home page otherwise it's just too much stuff it makes it a lot simpler like this and I want to remove the author also the categories and comments as well so here scroll to hide post-metal select yes and then that will disappear okay so it's really that simple you can also hide the post date if you want to and play around the display settings here for the post content layout you can actually select you know different layouts for example overlay which is cool you can also select maybe boxed okay or maybe a flip okay that's pretty cool as well I'm just gonna select you know default for now all right and you can also choose to you know select specific categories or exclude certain categories as well so we're gonna click on done and we want to add some padding to the row so double click the row it's just some empty space here and then click on the styling padding and let's do let's do maybe 5% to the top and 5% to the bottom click on done then we can view the page by clicking on 50% okay I think that is looking very very awesome very good and what I want to do now is I actually want to create a contact section so I'm gonna add in a contact form so people can actually contact you and get in touch with you so click on save here you're gonna notice that there is no contact module so to add a contact form we're gonna have to close the Builder first and we have to go back to our dashboard and we need to actually add in some plugins so here if we click on the plug-in plugins are sort of like applications which add extra functionality to our website so for example on your mobile phone you might have you know social media apps or you might have productivity apps you might have like accounting apps you know budgeting apps anything like that plugins are exactly the same thing but for websites and there are thousands and thousands of plugins and we're gonna add in a contact form plug-in so click on add new and here on the search plugins we're gonna search for contacts form 7 so this is just a really really simple contact form plug-in there's also other ones that you can check out as well but this is the one that I've been using for a quite a long time so we're gonna just use this one install and then click on activate ok so once you've actually activated the contact will actually pop up on the left here and then you can click on contact forms all right so this is the contact form number one that's been created and here is the shortcode so it can actually copy this shortcode to your clipboard and paste his code anywhere on your website by using a text module and that contact form will pop up okay but what you want to make sure is if you actually click on edits you want to make sure that the email is set to your email address so here you've got different tabs you want to click on mail and you want to make sure that you're put in the correct email address okay so the contact form message will be sent to this email here you can also configure you know the messages as well here you can also click and edit the form here if you learn more you can click on the support here okay FAQ and Doc's okay so once you've actually done that you can click on save and I'm gonna go back to their home page and I'm gonna maybe delete some of these other pages okay and then scroll down and turn on the Builder let's drop in maybe a text module first so drop it in let's put in contact set it to your heading two okay and then let's drop in another text module and this time we're gonna paste in the shortcode so pasting the shortcode there and then the contact form will pop up alright click on done and what I want to do is I want to add some spacing the top add some spacing here and I also want to sort of make this box a little bit smaller alright so what I'm gonna do first is make the Box smaller so you can choose the different columns here I might choose this one here and I'm gonna move the contact in there and also the contact form into there okay next I'm gonna double click the row styling so I'm gonna add maybe some padding so maybe 5% to the top 5% at the bottom and then next I'm going to add some padding below contacts so double click contact styling padding okay and then I'm gonna select five sent to the bottom here I'm done all right so I think I forgot to actually Center everything so I'm gonna double click the row again and then go to styling fonts and align Center all right so we want to actually separate the content here so how we're going to do that what I recommend is maybe putting in a background okay which looks really good so let's double click the row again go to styling the background and for the background image here we're gonna click on browse library and upload files select files and I'm gonna upload this one here contact BG all right so click on insert file URL and there you go okay so I think that looks pretty good what do you want to do maybe I want to I want to actually set the background mode to parallax okay so it's like that which is really cool and what I'm gonna do is I'm gonna click on row overlay and then I'm gonna add a little bit of black to that background all right so it makes the text pop out a little bit more so let's just change the color to black okay like that and then you can change the opacity down on the right hand side so I'm gonna change it to about maybe 20% or let's just say yeah 20% should be fine like 0.2 all right so you can also change and add a background hover as well if you want to but I want to do is I'm gonna change the font color to Y okay so change it to white and I think that looks pretty good let's just add in a overlay hover as well so let's just change the color to black so triple zero and then I'm gonna change it to 0.25 okay and then click on done okay so I think that's pretty cool when people hover over that it becomes darker and I'm gonna show you how to edit the form button as well as well as the the fields here okay so we're gonna click on save I'm going to close at first so let's just have a quick little look on our website okay so everything looks pretty good what I'm gonna show you is actually how to add in a menu right now okay so right now you don't have any pages we've only got one page but what I'm gonna show you how to do is if actually go to the demo website is if people click on the about it's gonna scroll to the about if they click on services it's gonna scroll down and so on okay so to do that we can go back here to customize and then we're gonna click on back and then we're gonna click on the menus create a new menu and the menu name is going to be top nav so this can be any name that you want but it's just easy for me to sort of identify so we're gonna click on main navigation click on next and we're gonna add in some items alright so you can click on add items and then we're going to do is click on custom links and for the URL what we're gonna do is I'm gonna copy everything before WP dash admin okay so this is your IP and then 808 and then the WordPress just copy that except the WP admin so copy that and paste it into here okay and then what I want you to do is type in hash about okay in lower case the link text put in about and add to menu all right we're gonna paste in the URL again the next one is hash and this might be the services section so services in lower case the link text should be services Add to menu okay pasting the URL again hash this might be a gallery I guess they're lower case sorry a to menu and paste it in again the next one might be a blog so hash blog link text blog add to menu and pasting the URL again hash contacting lowercase and contact for the link text add to menu okay so once we've actually done that then we can click on publish as you can see the menu has been added all right we're gonna click on close okay so if actually click on the about it doesn't actually do anything so if we click on these things it doesn't do anything because we haven't set in the location name yet alright so we can turn on the Builder scroll down to about me okay so double click the row and then here you'll say row anchor okay so we're gonna label this about in lowercase and then click on done so it has to be a lowercase alright so it has to be exactly the same as the the name that you put in before okay otherwise it's not gonna link properly alright so if you put double click it if you put like row anchor it is like a capital A then it's not gonna link alright so it has to be exactly the same as the one eighth point before click on done ok services double click the row row anchor should be called services done scroll down to gallery double click the row row anchor is gallery done and the video I don't really have a menu item on the top so I'm gonna leave it as is and for the blog section double click the row row anchor should be blog ok done and scroll down to the contact double click the row this one is gonna be contact and then click on done so let's save it and let's close it alright so if we click on the about it's gonna actually scroll down click on services gallery blog and contact ok so you're gonna see the URL actually change right and that's gonna link it to each of the sections so with the actual button here our story we've actually linked it to our About section as well alright so if we turn on the Builder if we double click the button you'll see that the link is hash about so that links it together alright so we're gonna click on save now the next thing that we're gonna do is before we actually customize the footer section is we want to make sure that our page is actually 100% mobile responsive so to do that you can actually just drag in your window and make it as small as you can okay so you can scroll down as you can see the text here it's you know it's a bit too big okay so we're gonna make that a little bit smaller for mobile devices and you're also gonna see that you know this one doesn't really look that great right it's going down most of the stuff is actually okay okay most of the stuff will respond perfectly but sometimes we might need to edit the layout so we're gonna make that bigger again and put that back alright so we're gonna turn on the Builder and to do that here you've got actually the responsive styling buttons so you can change the different layout on different sizes for the tablet landscape for the tablet and for the mobile but we're just going to edit the mobile okay that's the most important one so select mobile and the first thing that we want to do is we want to arrange the layout here to something that looks better right so to do that you can hover over the row the purple okay and then you can change the column to just one column and basically that's gonna display the image on top like that okay you might want to actually change the ordering so hover over here change the column direction to the second one okay so we've got the text there and then you've got the image here okay so if you want to make the image in the center you might want to double click the image and maybe it's like maybe image center okay so just like that and then click on done and let's see let's see what we can do here we're gonna go up here change the text size a double click here go to styling so make sure the mobile icon is selected go to heading heading one and we're going to change the font size to maybe 80 pixels right and then click on done so what happens is if we actually click double click the text again go to styling if you actually select the mobile I mean the desktop and click on the heading you'll see that the heading font is hundred pixels so when you click on the mobile it's gonna change to 80 right so if you click on the tablet you can change this to maybe let's say for example 90 okay so you can set in specific sizes and specific layouts for each specific device right so you definitely sometimes you need to sort of play around and you know experiment a little bit to make you know the perfect layout for each of the devices but that's how you can do it and another cool thing is that sometimes you might not want things to appear on mobile devices because you know you don't want to have too much content on mobile devices otherwise it's gonna take a long time to load you can actually change the visibility settings all right so let's just say you don't want the this section this video to appear okay this whole entire row you can actually go over here okay move to the last icon here and then click on visibility you can set the visibility so you can hide this entire section on mobiles you can also hide it on tablet or hide around desktop so you can set in the visibility for each of these different sections as well so if you click on hide let's just save it close it let's try to resize this screen - maybe mobile device I think that video is gone okay so that video is going let's just move it back to normal size okay and then back on desktop the video will appear alright so that is how to make the website super mobile responsive now what we're gonna do is we're going to add in some social links and show you how to customize your footer section okay so let's go here to the dashboard and I'm just gonna pause the video and open up some my social profiles so let's go to themify ultra themify settings and we're gonna go to social links okay so what you want to do is copy over your Twitter profile URL so you can grab your Twitter profile URL and paste that into here you can grab your Facebook one so your Facebook page URL copy that paste it into here if you have Google+ you can paste in the URL as well for example your YouTube channel URL so copy that and paste it into here if you have Pinterest you can paste in Pinterest but maybe let's say you have Instagram but you don't see it here you can click on the add link and type in let's say Instagram and we're gonna put in maybe the Instagram URL so let's just type in the URL HTTP Instagram comm and then forward slash your you know URL okay so here we're gonna insert an icon so insert icon we're gonna search for Instagram so install and select that one there and then we can save it okay so to actually display it on our website we actually need to go to appearance and go to widgets scroll down so these are the available widgets so scroll down to themify social links click it and drag it and sort of wiggle it up alright so put it into maybe the footer social widget section okay select open link in a new window icon size I'm going to keep it as medium and safe okay so if we're actually let's say we view the website again then you're gonna see your social links appear on the bottom okay so I'm going to show you how to remove this because I think that's a little bit annoying you probably don't want it to say powered by WordPress so to remove that you can go back to your dashboard area go to themify ultra themify settings and then what you want to do is you want to look for theme settings okay and then scroll down to footer text alright and for the footer text too you want to hide that okay and save so if we refresh that again then it's going to disappear hopefully alright you can also remove the logo if you want to as well so if you go back to theme appearance you can change your footer designs as well okay so as you can see in these footer designs you're gonna see like the little whites little grey boxes okay so these are different widget areas right so if you want to have maybe like let's say different menus and different things here then you can actually go back to the appearance the widget area and we've got the footer widget area one two and three and you can drop in anything that you want like for example you might want to add an image you might want to add a search bar you might want to add some text like for example if you're a local business you might want to have your address and you might put it into there okay so you've also gods I think you can also create a menu so you can drop in I think there's a menu so look for navigation menu and then you can drop that into here as well okay so if you actually want to configure the sidebar and the blog sidebar so if we go back to our so if we click into one of the blog post this is the sidebar right and these are the widgets which are in there I'm gonna delete the middle so delete that one you can keep the categories archived I'm going to delete recent comments delete recent posts delete okay I'm going to scroll down and I'm gonna drag in maybe let's see themify feature post pasted it in and this one might be like popular posts okay and then you can also set in a post thumbnail as well I'm just gonna click on save click done you might want to add some text so let's just say maybe a text so about me and then you can add in you know maybe a little bit about yourself so I'm just gonna paste in some random text to show you okay save it you can also add in I think a image or a video as well so we're gonna go back here and let's say if we refresh it then yeah okay so that's how you edit this sidebar section alright so now we're going to show you is how to add in additional pages and I'll show you something really cool as well so let's just close some of these things on the top so what if you actually want to add in an actual page rather than you know just a single page so you can hover over plus here and click on page so let's say we create a web design page so oops just delete that web design page click on publish click on View page so this is basically a blank page and then you can build you know your layout and stuff like that so you can actually turn the Builder and you can actually import layouts which are pre-built so if you actually hover over here you can click on load layout and there are a few dozen different layouts which you can definitely import and use so let's just say you might want to add this one here click on append so this is going to help you sort of speed up the process of website building if you don't want to show certain areas you might want to delete it so you might delete this menu area here so I think we can just delete that row like that okay you can double click it the text module let's just say web design you can change it like that and you can change the text by double-clicking so you can change the image as well add in different images and delete different sections as well but I showed you sort of how to create the layout so now that you know how to do it it it's probably better otherwise if I showed you this at first then you probably won't know how to edit the page and it's sort of I I think you won't really enjoy it right so what you can do is do that but you can also hover over the green icon here click on that you can click on rows and you can import specific sections right so let's say you want to Inc add this call to action just drop it into there I think that didn't really work did it because that didn't really work so let's just try again let's see drop it into there let's zoom out a little bit and then that just imports a specific section okay so you can do that and then you can click on save right so let's just say we close it right you're gonna see you're not going to see it on the top menu section up here alright so to do that go to customize and click on back here click on menus and click on the top nav if you want to display it here click on add items and here this is an actual page so you don't have to create a custom link just create and add the web design page and it's going to show up on the top okay so if we let's say publish it then it's gonna display there if you want to create it to be a drop down like it drops down from services then you can click it and sort of drag it and indent it below services so what that's gonna do is if hover over services is gonna drop down like that alright so you can even drop down like even further like let's say you want to drop down gallery from web design you can do that as well okay so I'm gonna put that back and then publish and close it and something that's really important as well is I'm gonna show you how to actually save layout so if we go back to our home page let's turn on the Builder again and sometimes you might make a mistake or whatever you whatever you might be doing you might accidentally delete something what I do recommend is once you create and finish a page or a section then you can actually click on the down arrow here save as a revision so let's say we click completed our home page on today's November the 7th ok click on OK and that's gonna save this page layout right so if you make a mistake then you can load the revision from that specific time frame right so I think that's pretty cool you can also undo and redo which I showed you before and you can also save the entire layout so you can save the entire layout home page done save it and then we can close it you can actually go here turn on the Builder load layout and then you've got your custom one ok so you can load your layout on specific pages as well ok so I think that is pretty much it for the building part now I'm going to show you how to add in your logos your favicon and how to customize the color for your website ok ok so if you actually want to add an logo then click on the customize and then that's going to take you to themify options click on the Advanced tab so it's going to show a lot more options here you can click on site logo and tagline click on site logo and here if you don't have a logo yet then you might set a site title for now so you can name it your name or your brand's name I'm gonna put in logo and here you can select you know different fonts as well alright so you can look through the different fonts and choose one for the time being you can change the size here and you can also change the font weight okay so you want to make it a little bit thinner or you want to make it a little bit bolder all right so if you do have a logo ready you can click on logo image and then you can click on the plus icon and actually upload files select files and then you can upload your logo all right so with your logo what I do recommend is a PNG file so that means that logo is transparent and if you actually want to get a logo then a really good place to start is going to fiverr.com so I'm gonna leave a link down below and that's gonna take you to this website here and you can find logo starting from $10 so I think some of them might be a little bit more expensive some of them I think you can find for five bills as well so make sure to read over the reviews and when you're actually creating a logo right you can also ask for a fab icon so a favicon is basically like a smaller version of a logo so which is the icon here as you can see that's my 1 this is 5 is 5 icon ok and when she actually uploaded a logo you can actually edit the sizing here alright so you can change the sizing to fit this area right so upload the thing and then you can change the size you can also change the logo position okay so you can set it to I believe is relative and then you can move the logo up and down you can do - like 10 pixels or something like that and then you can move it wherever you like okay so let's just - that's and you can also add in a site tagline if you do have one I'm gonna select site title and maybe I'm gonna select open sans okay which is the default font on this website and I'm gonna select maybe bold okay and then you can publish right so to add in a fab icon I'm gonna show you that right now so let's just close that for now and you can go to your dashboard area and then what you want to do is hover over a theme of our ultra themify settings and you can click on the fab icon here in the general tab upload and you can select the fab icon so for the favicon I normally recommend sort of like a square dimension so the one that I'm uploading is 64 x 64 pixels okay and it's also a PNG open and then you can save it and then if you go back to visit your website then the logo should show up there your fav icon alright so I'm going to show you how to edit the fonts and colors for each of the sections right so we're gonna click on customize and here we're gonna click on body okay so body is gonna edit all the fonts between the header and also the footer right so if you actually change let's say the body font to say maybe this one here then that's gonna change alright so what I do recommend is just selecting one font for your entire website because you don't really need that many fonts to make a website look good so I think that's a big misconception I've see a lot of people actually build a website and they have you know three or four different you know fonts and it looks kind of messy right so if you actually go to a website like Apple or you know Google website you notice that they are very consistent with the font they use so I'm gonna use this Chrome extension it's called what font and if you hover over the fonts it's gonna tell you what fonts each of the text is alright and what you're going to notice is they are pretty much the using the same font but what they're doing is they are changing the font weight right so the front way it means like the boldness and the thinness okay so this one's bold this one's a little bit thinner and smaller in text all right so that's what I recommend you know using different font weights to sort of bring attention to your titles and things like that rather than actually changing to like italic or a different font alright so here for your font body font I'm gonna select open sans writes or open sans is a really good google font and open sans' is something that we called sans-serif typeface right so I think it's really important to understand this because if you choose like a different typeface like for example a serif typeface it's gonna look a lot different okay so sans-serif typeface has like plain edges and the strokes are even and that sort of makes your website look really modern and clean right so most modern websites actually use a sans-serif typeface you know like Google Tesla Apple they use the sans-serif typeface so some really good ones to start off with is these ones here okay and you can choose these ones to use for your website if you don't know what to use these serif typeface it makes it look a lot more traditional and sort of it has a classic look to it right so this is good for long reading and blogs as well so if you click on an example for example this one here then you're gonna notice that they use the serif typeface right and it just looks like completely different right this one's really suits this website because it's selling like you know bed linen and stuff like that so you gotta really take into account like what your brand and your business is about then you can select the right type face for your website okay so here I'm just gonna select open sans and as you can see the font weight is 300 right if I select it to be normal it's gonna be a little bit thicker but if you actually select something thinner it's gonna make the website look really modern as well so that's what I'm gonna do okay and for the body link this is the links on your website and you can change the color as well alright so generally you know the normal link color is like the blue right so if you notice like on a lot of website the link color is blue right so you can use this blue if you want to and and put it onto your website but you know for our website I'm gonna select a more sort of neutral sort of look to it okay and let's just say we click into this blog post I think this one was the first one we added all right and here's the link okay so currently it's red all right so you can change it to a blue and if you want to know it like what color blue they're using you can also use something called colorzilla as a Chrome extension as well and I think you can try to click into that see if it actually shows up okay so this is the color code here right so you can do 0 0 7 0 c9 okay so let's just say 0 is your 7 0 c9 so that's essentially the same blue that Apple uses alright so you can choose that if you want to or for me I'm just gonna keep it like really neutral just the black one just a little bit darker than what I'm currently using for my text ok and the body link hover is when you actually hover over it right so you're gonna change a specific color okay so for example if you hover over I think certain items for example the Apple website you see a really subtle effect okay um okay this one I think it goes a little bit darker okay I think it does but definitely when you're hover over here it goes a little bit darker as well so that's showing you that it's a link okay so what I generally like to do is go to a website called 0 to 255 calm and then what I do is enter in a color so the color of my link is the dark gray and what I like to do is either you can go like you know two shades darker or maybe you know three shades lighter or something like that so I'm gonna select three shades lighter for this one and just paste that in okay so for all body uh hover effects I'm going to use this same color so it keeps everything really consistent okay so it's just a really light and subtle effect you can make it a little bit lighter if you want to as well so let's just say this one here 444 then you can see that when people hover over it then it gives a nice subtle effect and show that it's a link so once you've done that then we can minimize it and we're going to go to headings all right so if we actually go back to our home page we've set this one to heading one tag these ones to heading two so if you click on headings you can actually change the defaults of it okay so I'm going to leave that to you for the forms the forms are things such as your contact forms and also your comment forms as well okay so I'm gonna open that okay so it also effects the forms area here as well okay so if we actually want to change let's say this thing here then you can click on form fields you can change the background color okay so the background color let's just change that to white you can change that to any color and then we're gonna move the opacity down okay so that sort of makes it look a lot cooler okay so we're gonna change it to maybe like you know 80 percents fine like that eighty percent opacity you can still see the background a little bit okay and the color here is the text color so I'm gonna change it to two to make it a little bit darker okay that's pretty cool and I might make it a little bit later all right and here you can change the fonts and everything but we want to keep everything just one font so you don't really need to change it here and I think that is pretty good so you can also change it to a line in the center okay so it's straight away and this is the text into the center okay and here you can also change the bottom color all right so you can click on form buttons you can change the background color I'm going to change it to two to two okay so a dark gray okay and then for the button hover I'm gonna change that too so click on here and then change the button background hover to let's say four four four and when you hover over that then it gives a slight effect like that and then here you can click on the header the header wrap is basically the background color right so what I recommend is keeping the background color of your header to a either a white or a dark gray all right so if you actually change let's say you change it to a random like a red color right like that then it's sort of gonna be hard to match with your here image all right so this is basically similar to like let's say if you're wearing like a white t-shirt or something like that then you're going to sort of find it hard to match if let's say you're wearing a red t-shirt like it's gonna be hard to match your pants right so if you're wearing like a white t-shirt or maybe a dark t-shirt then you can wear any color pants or any color shoes and you'll still look good right so so if we actually change to white then it looks good if you change it to let's say a dark grey let's say 2 to 2 again then it still looks very good all right so let's just say we keep that as that okay and you can also change the header links okay the header link colors here header link hover but what we have here is our main navigation right so the site logo I think that might be a header link so let's just change that to white anyway okay and you can also just set in a header link hover okay we're gonna click on the sticky header sticky header is when you actually scroll down okay so that's the sticky so sticky header wrap I'm gonna set it to 2 to 2 as well but I might make it a little bit transparent like that so it Scrolls down and you can still sort of see the background which is I think pretty cool right like that which is cool and then you can change the colors as well so scrolling down click on the main navigation okay so this is the main navigation area and you want to click on you can change the menu link here as well to let's say white okay and the menu link hover when you're hovering over to that okay so I'm going to change that to a light gray so EEE okay so let's just see the effect so you can't really see it so you might make it a little bit darker maybe like something like that okay I think you'd see it now which is pretty cool okay you can also change the active link color so whatever page that you're on or whatever section you're on that's the active link so you can change the active link color to the same hover color okay so copy that and paste that into here don't paste it into background I get a paste it into here then it gives a light great effect so it tells you you know what section you're on right and you can also set the active link hover as well this one I'm going to set that back to white and if you have a drop-down menu then you can also edit the drop-down a link link color as well so dropdown-link hover is white right now so I might change it to let's say just a dark gray let's try maybe four four four okay let's click on publish and then close that first to make sure that is you know that works it's probably a little bit too light so I'm gonna go back and make a little bit darker so let's go to the main navigation the menu actually the drop-down link hover probably too dark to light sorry so make it maybe something like that okay hopefully that when it doesn't update yet so don't want to just keep click on publish and that will change later so you can also edit the mobile menu as well so you can edit the colors here you can play around with the settings I'm gonna leave it right now you can do that on by yourself so here you can also edit the post okay so for your blog post you can edit the post titles and everything they need basically write the post dates yeah okay so let's just make that smaller and then you can also edit the sidebar section as well so here is the sidebar section you can edit the fonts and the colors here okay and lastly is the footer section so this is the footer section you can also change the footer wrap color change the logo as well specifically okay you might select none like that okay and yeah you can play around with all these different color settings and things like that but generally I just like to keep it nice and neutral and professional because you don't really need that many colors to make it nice okay so here you can click on custom.css now custom CSS is basically you can edit the styling like for example sometimes you can't change the styling with the Builder you'll need to add some custom CSS to edit the website okay so if you actually see on the website on the footer there's like a slight boarder and there's also a slight border for the header section as well so to show you what I mean is I'm gonna show you some CSS or do hash type in header wrap okay and then space and then go shift the square bracket squiggly bracket and he don't enter and then type in border and then this one is the colon I think and then here have been none semicolon okay that's gonna remove the border on the top right so here put your thing there cursor and then click on enter and then type in hash footer wrap and then the squiggly brackets again enter border : none and then semicolon and then that border will be gone alright so for example that's there and if you type in none it's gonna disappear okay so that's custom CSS and you can click on publish and then what you can do is close okay so here this website looks really really cool and really really modern okay and let's just say if you want to maybe add a transparent header like what would you do right to add in a transparent header normally I don't recommend changing it for your entire website because sometimes you're not gonna have a hero image like for example you click into a blog post if you have the transparent header then you're not going to be able to see the header links and stuff like that right so if we go back here I normally just said it may be for my homepage click on edit page and what you could do is let's say scrolling down you can do the theme of our custom panel page appearance okay header background type transparent and then you can set a specific link color they go for sometimes you might have a background color which is maybe like lighter or darker and you might need to change the color there so if we go back to view the page let's see then we've got a really nice transparent header right and if you want to boost it a little bit more like you know it's not very visible then you can either go to the customize and maybe change the font weight for your header section or you can also add in a slight background color so main navigation and then for the menu link let's just change that to a normal font weight okay let's make sure to sit in the open sans font change it to normal okay and that's gonna boost your your menu navigation to make a little bit bolder alright or you can go turn on builder and you can add a gradient to the background so double-click the background styling do a row overlay select gradient alright and here you want to select a black background and reduce it to 50% okay and let's try and drag this up to about 15% here and set the opacity down to zero alright so what's that gonna do is gonna make this part darker on the top okay done save it close it and that's a really nice effect right so it makes this top part darker and it boosts the white a little bit more and you're able to see it better okay so I think there's a little mistake there but I think you guys know how to fix that you just need to go back to the customize to the menu drop-down alright so basically we've completed the website congratulations hopefully you guys have enjoyed it but right now this website is only viewable on your computer right you want to make sure that your website is online so maybe your friends can see it you know people all around the world can actually see it so what we need is actually to get a domain and hosting account and then also we need to transfer this website on to the live hosting account so I'm going to show you exactly how to do it right now so to get our hosting we're gonna go to a website called host Gator com and we can also get our domain name here as well so our website hosting is basically where our website files like such as our images and texts are stored so it's basically like a virtual piece of land on the Internet and so that allows people to actually access your website and for your domain name that is basically your website address that is what people type in here and that's gonna take them to your website okay so Hostgator is the service that i use so that's why i recommend them and they've also got really good live chat support so if you have any issues you can click on the live chat here and get in touch with them so I'm gonna explain a little bit you know what plan you should actually get I normally recommend for a beginner to get the web hosting plan there's other plans such as the cloud hosting which is also good and also the you know dedicated hosting as well so as a beginner I recommend this one okay if you actually start getting more traffic to your website then I would recommend upgrading to the cloud hosting plans all right so we're gonna click into the first results and within the shared hosting plans there's another three different plans alright so the business plan is probably a little bit too much for what you need at the moment if it's your first website ok so as you can see it's $6 per month but that normally renews at a higher rate okay so for these two plans here the only difference is that this one only hosts one domain so your website com whereas the baby plan can have your website your friend's website and maybe your clients website as well okay so if you know that you know you're gonna host other sites as well then I would go for the baby plan okay but for this one for this tutorial I'm just gonna click on the single hatchling plan okay and then here is where you can enter in your domain name so for example i'm gonna choose something like the creative way and then you can click on the outside here to see if it's available okay so if it's not available then it's gonna be highlighted in red okay and these are the available ones right but I normally like to go for the dot-com okay cuz that's what most people actually type in in their browser but you can definitely go for something like info or me that's totally up to you so I might do like the creative way demo click on the outside and then you know that's selected all right so if you have a domain so for example you might have bought a domain on GoDaddy or Namecheap and you don't have hosting yet then I would select already own this domain and entering your domain name in here okay and then you'll have to actually connect them to later on okay so we're gonna scroll down here so for the domain privacy that basically means it hides your name and also your address and also contact details so it really protects you from like email spam and junk mail and also people calling you so I normally recommend it but it's not necessary okay so it's gonna add a little bit more but you're gonna get less spam okay so we're gonna scroll down here to choose our hosting plan and the package type we're gonna select hatchling here you can select the billing cycle okay so the longer you actually select the more you're gonna save right so I normally recommend twelve months right because if you actually go months a month then it's 11 dollars whereas if you go to twelve months then it's only six dollars per month okay so here entering a username and also security pin so I've already gotten accounts I actually got several accounts so I'm not gonna actually fill this in and pay because otherwise you know I've got too many accounts already but you need to actually fill in the details here as well as your credit card details so make sure that the name here is the same for your credit card you can also pay via PayPal and you can scroll down here and SSL Certificates included for free okay for the SiteLock are monitoring I normally deselect that because you can actually secure your website using a few plugins okay I've got a tutorial on my channel for that and for an email I've got tutorial on my channel as well so backup I've also got a tutorial as well we're gonna scroll down here here you can actually enter in a coupon code hogan schewe so hecho GaN si hua and click on validate and that's gonna give you a bigger discount so if you actually do use that code then I may actually get a commission for that but you guys actually save some money as well and it actually helps support this channel so that's greatly appreciated alright so here is the total cost okay nineteen dollars so that comes to about $8 or $9 a month which is pretty good for starting a website here you can select on this so that is all good once that is all good you can click on checkout now so once you've actually completed the checkout and then within a minute you should receive your Hostgator account information okay and the email should look something like this so what you want to look for is your control panel login link okay so just click into that and you'll need your username and also your password to log in to your cPanel alright and then click on login so this is where we're gonna actually install WordPress on to the actual website that we just bought alright it's basically going to connect your your domain your hosting and your WordPress all-in-one okay so here you need to select build a new WordPress website if you don't see it then try to look for quick install so scroll down and click on quick install and then you can click on WordPress all right so I'm gonna click on this one build a new WordPress website and here I'm gonna select a domain so I've got several domains I'm gonna select this one here and leave the directory part empty in case you didn't want anything here click on next so a blog title just enter in a random one for now put in a user name and put in your first name last name and we'll see your email address okay so for your username and also your email that's going to change to the old one after we actually import the website okay so try to keep them the same one okay so you remember your username and email click on install and then that's gonna take a minute or two okay so that's completed now if we actually sometimes if you actually click on to this website here it might not actually be up yet so if you've just bought your domain and hosting it might be setting up in the background so it might take like 15 20 minutes sometimes 1 or 2 hours so maybe if it's not up then take a little break and then come back but since I've actually purchased this a while back then it should be up so I'm gonna copy over the password and then you can actually click on login or the URL so let's try login ok so put in your username and also paste in your password and then click on login so you should also be sent the login credentials as well if you accidentally didn't paste it okay so we're gonna close all this stuff here we don't need all this okay so if you actually visit our WordPress website now then it's gonna look like the one that we just created on our local server alright so what we need to do is actually transfer it onto this website right now so that's only gonna take a few minutes so make sure to follow along and you're gonna be up and running in just like 5 minutes ok so if you actually go back to our old website ok so this should be you're on your local computer alright and you're going to make sure that you've actually got the benami wordpress on okay so you can manage servers and make sure it's actually running okay so if we actually go back to the folder that we installed it in you're going to make sure you double click on the manager - OS X okay you might be different on Windows but it should be pretty similar double click on it and this should open up and make sure to start all the servers all right otherwise this website's not going to be up there so we're gonna actually log in to our old website by typing WP dash admin alright so login okay so what I want you to make sure is that you go to users and make sure you actually click on edit here and make sure the email is actually correct okay so in case you forget your your password then you can use an email to actually get your password back or make sure to actually generate a new password if you forgot your password because on our new website here we're gonna be using the old password to log in all right so what we need to do is go to plugins and here you should see all in one WP migration so should already be installed but not activated yet if you don't see it then click on add new ok and then you don't actually need to search for that plug-in so you would type in all-in-one of EPA click on enter and then you'll need to download and then once that is downloaded and installed then you need to click on activate alright so here is the plug-in alright and we need to export this website so click on export and what you need to do is hover over or click on export and export to file and that's going to download the website into a file ok and once completed click on download and just save that file onto your desktop okay and then you can close that all right so now what you need to do is you need to go back to your new WordPress website on your new domain and we need to actually download the same plugin so click on plug-in click on add new and then here we're going to search for all in one WP ok so this one here click on Install Now and then click on activate alright so here it should appear and then instead of export we'll go to import so click on import ok so before we actually import from file sometimes the maximum upload file limit might be set to 64 and sometimes your site might be bigger than that ok so what I recommend is clicking on this and that's gonna open up another window ok and we're gonna install a plugin so you can actually increase the maximum upload size by doing these few things here but I think the easiest one for us is to actually use a plugin so click into that and just download that onto your desktop ok and come back here and then we're gonna click on add new on the plugins and then we're gonna upload that plug-in alright so upload choose file ok select this one here and then click on open Install Now activate alright once it is activated then you can go back here and click on import and your maximum file size to upload should be extended to 512 so that should be plenty ok so click on import from file and we're gonna select the file that we downloaded before ok and then click on open and that's probably gonna take a few minutes so I'm gonna let that run in the background and I'm gonna come back 2,000 years later so that took a little while cuz my upload speeds are quite slow in Australia but anyways we're gonna click on proceed and that's gonna override the current website okay and then we can click on close all right so if you actually refresh it now then you'll have to log in again using your old username and old password so make sure that is done click on login all right and I'm gonna close all of that let's click on visit website and your website should be up and running alright so that looks really really good really awesome for some reason if your website background image isn't showing engages for some reason turn on the Builder again and try to delete that hero image so you can actually just double click it styling background delete this hero image and click on browse library and try to upload it again onto your website okay that's in case if it doesn't work but generally it should work fine but just a precaution all right so I'm gonna close it and if you actually got your domain from Hostgator and hosting then you should have also got the SSL certificate so I'm gonna show you how to activate that and that's gonna give you the secure lock icon on your browser on the top there so go to plugins and click on add new ok we're gonna search for really simple SSL click on enter ok we're gonna install this one ok should have over a million active installations activate it ok and then click go ahead and activate SSL ok so you're gonna make sure that you do have the SSL certificate if you bought it from like another domain and other host so if we actually refresh it then it's probably going to ask you to read login a well so we're gonna do that okay so you should get the HTTP with the lock icon alright so make sure that it does have a lock icon again if it doesn't show it shows like a little eye icon and then you might need to you know turn on the Builder and re-upload the images and then it should be fine anyways my name is Hogan and congratulations on your first website or it might be a second website hopefully you guys enjoyed it and found a lot of value if you did make sure to LIKE and subscribe I've also going to actually put you know the FAQ questions and stuff like that in the description below and if I actually create any videos that I think are useful and any links I'm gonna drop it in the description down below so make sure to check that out if you have any questions drop it in the comment section and I'll get back to you ASAP thank you and see you guys in the next video

Channel: Hogan Chua

Views: 227,287

Keywords: how to make a website, how to create a website, wordpress, wordpress tutorial, how to make a website for free, how to create a website for free, bitnami wordpress, how to install wordpress locally, hogan chua, create a website, make a website using wordpress

Id: MFgZ5Vm-LU8

Length: 113min 1sec (6781 seconds)

Published: Fri Nov 09 2018