Today I’m gonna show you how to create a beautiful website in just 20 minutes Hi guys, my name is Hogan and welcome to this tutorial So I realized that there quite a lot of two hour tutorials showing you how to create a website But no one actually finishes those So I decided to make a 20 minute tutorial to show you how you can get the same or even a better result So by the end of this video you’ll have a fully mobile responsive website Similar to top websites like Apple Spotify and Tesla and you’ll be able to easily edit the website so for example if you want to change the text you can and if you want to move the text to different areas of the website, you just click and you drag and Let’s zoom out of the website a little bit Okay, you can also adjust the columns just by dragging like that and you can also move the modules around and You can undo So you can also add video modules and if you hover over this green icon here, you can add all sorts of modules for example gallery modules SoundCloud or even add a blog or a shop So this video is perfect for beginners or even if you want to create websites for clients And this is actually the same video that a lot of people actually follow to start their own web design agency on places like Fiverr So if you want to create a website then make sure to watch this video to the very end So what I want you to do is click on the link below this video So this is the page that’s going to take you to and we’re going to be completing the website in just seven steps So the first step is choosing a name for your website So for example, my one would be create a website 23 dot com and then you’d click on check availability So if it’s available, then you can scroll down and proceed to get your domain and hosting So the hosting is where all your website files such as the images and the text are stored so it’s sort of like a Housing platform for your content and this allows everyone to view your website all around the world 24/7 So click on get domain and hosting and it’s gonna direct you to Hostgator So Hostgator is what I use but you can use other web hosts as well So we’re gonna click on web hosting up here and you’ve got three different plans to choose from as a beginner I recommend choosing the hatchling plan because it’s cheapest want to start off with and you also get a free SSL certificate SSL basically means you get the HTTPS and you have the secure icon and then click on buy now So here you would enter in the domain name that you put in before so create a website 23 and then you’ll click on the outside So that should show that it’s available. So you want to scroll down For domain privacy. This is optional. I’m gonna deselect it for this video. We’re gonna scroll down For the package type, you can select hatchling here. So for the billing cycle Click here, and you can select month to month or you can select a longer term which gives you a much bigger discount So for this video, I’m going to choose month to month But if you know that you’re gonna have a website for a long term then choose a longer term for a username and I’m gonna enter a security pin and Then scroll down so I’m gonna fill in my billing information and my credit card details Scroll down so as you can see you get the free SSL for These ones you want to uncheck these because you can do these for free later with plugins scroll down and for the coupon code and to learn to create and Then click on validate So this is going to give you a bigger discount and also discount on the domain registration So if you use this code, I will get a small commission which helps me create these free videos so you want to take your read and agreed and Then you want to scroll down and then click on checkout now Okay, so once you’ve actually paid for that Then I’ll say Auto completed and you’ll also get an email which looks something like this your account information now the next step is to click on the control panel link and This is where we’re going to install WordPress so grab your user name here and also your password and then Click on login. And then what you want to do is click on build a new WordPress website and Then select your domain Leave the directory part empty and then click on next So for your blog title, I’m just gonna enter in logo and I’m gonna put in my user name first name last name and Also my email address and then agree to the Terms of Service and then click on Install Now So once that is installed you should get a notification Installation is completed What I like to do is I like to copy the password to my clipboard first And then what you want to do is click on log in so this is your WordPress dashboard log in so here you’ll need to enter in your username and your Details will also be sent in email as well Paste in the password and then click on log in so to reach this page again You’ll need to go to your website comm forward slash Wp-admin what I recommend is bookmarking the page So what we’re gonna do now is do a little housekeeping first So we’re going to dismiss all these messages the first thing you want to do is hover over users and then you can click on all users and then you want to click on edit and then You want to scroll down and click? On generate password and generate a password that you remember Confirm that update profile The next thing you want to do is you want to hover over settings and then click on permalinks so what we’re doing here is Selecting post name you want the title of your page and your posts to reflect in your URL Ok, and then scroll down. This is for search engine purposes The next thing you want to do is click on plugins Ok, scroll down. So plugins are sort of applications to add additional functionality to your website and it comes pre-installed with quite a few what we’re gonna do is select all up here and Then we’re gonna deactivate it for now and click on apply So there’s just too many things popping up and about so I just want to deactivate them all ok Now what can do is hover over the house icon here? And we’re gonna visit our website. So right-click and open in a new tab So this is what our website looks like right now It doesn’t look like much now what you want to do is we want to actually install a theme so go back to my website and scroll down to step number 4 and we’re gonna download a theme so click to download onto your computer and Save it into your desktop. Ok the next thing you want to do is you want to go back to your website and Then you want to hover over appearance click on themes so this is a default theme we’re going to add new and We’re gonna click on upload theme choose file and You want to make sure you upload themify – ultra zip. Ok. Sometimes you might have The Safari might automatically unzip into a folder you’ll need to right-click and compress it back into the zip file click on open install now Click on activate For these skins and demos you want to click on the square of the cross icon To close that now if we go and refresh our website This is what it looks like Ok, so we’re going to basically set in the structure of the website So the first thing you want to do is go back to your dashboard area and we’re going to add in some pages so you can click on pages here and This is the sample pages, we’re going to select all and just move those to the trash first Next step is to add new So here we’re going to add in our pages for example our home page so type in home click on publish Ok, make sure that it says page published before you click on add new Next page we’re going to add in about page Add new We’re going to add a services page Publish Click on add new and we’re going to add a contact page so you can add as many pages as you want. Later Once that is done we can go to our website Ok, so if you actually click on the home page by selecting there Then you’ll see that it says forward slash home What we want to do is we want to make sure this home page is just set as our domain URL only so click on customize and then Click on the back icon Click on home page settings and select a static page for the home page. We want to select home and Then you want to click on publish Now what we can do is set in our menus. So click on the back icon again and Then click on menus and then as you can see can’t really see the menu so you can actually zoom out of your browser So I’m gonna zoom out one time. Okay, so you can see our menu here and Then click on create a new menu. We’re gonna name this menu Top nav for top navigation and we’re gonna select main navigation here So it appears on the top if you select footer it’s gonna appear on the bottom click on next and then click on add items So gonna add in our about page our services page and our contact page Okay, so if you want to create a drop-down menu You can sort of click it and select it and sort of pull it in It’s called indenting and what happens there is when you hover over about services will pop out okay, so we’re gonna put that back and then click on publish and Then we can close that now the next step is setting the basic layout of the page so what we need to do is we can go back to our dashboard area and We can go to themify ultra themify settings So this is where you edit the structure of your website The first thing that you want to do is we can go to the theme settings Scroll down now for the header design. I’m gonna select the header top bar design So then you want to go back up here and click on save Now you can go to your website and click on refresh and you can see the changes being made alright, so I want to remove this tagline this RSS icon and this search bar so we can go back to our settings here and we can exclude the site tagline search form and RSS and then what we also want to do is You can also edit the footer design. Okay, you want to scroll down to the very bottom? Okay, if we go back to our website here, you’ll see that there is footer one and footer two So I want to remove powered by WordPress to do that. Go back here and select hide footer text two click on save Now to view a website just refresh it and it should look pretty good now We want to set in the default two page layouts. So this is the page we can go back here and click on default layouts Then scroll down to the very bottom to default page layout We’re gonna select no sidebar and we want to hide the title as well as disable comments Save it. All right So for the fun part, we’re gonna first turn on the builder and I’m gonna show you the basics of how to use it So when you actually hover over it, this is what you call a row and when you hover on the left This is where you actually set in columns as you can see right and they can drag specific modules inside So what we want to do to start off with is to actually create a hero image because that’s the best way to Showcase what your website is about in a second to your visitor so click on the pencil icon options and You want to select the row width to go all the way from one side to the other? so select this one full width content and what you can do for this thing here is drag it and Drag it to the right hand side and place it there alright now the next thing you want to do is click on styling and Want to set in a background image so click on background For the background type for this one We’re gonna select just an image and we’re going to click on browse library instead of upload because if you click on upload it’s gonna automatically crop an image and sometimes it’s not cropped properly click on browse library and We’re gonna upload a image so you can click on upload files to upload an image I’m gonna select this one here, and I’ve cropped this image to 1,800 times 1000 and then you want to insert file URL So to get really good free images. You can go to And you can use these images for business or personal and then you can go to photo to actually crop it. Alright Go back here. And as you can see the image is loaded in then for the background mode. We want to set full cover Alright, and then what you want to do is you want to stretch that image out a little bit You want to add some spacing so you can see that whole image? So what we need to do is Click on padding. Padding is just another word for spacing deselect applied to all So what we want to do is apply 15% to the top and also 15% to the bottom Because I’m going to add some text in there and it’s going to stretch out a little bit more so I’m just gonna set in 15 and Then you can click on done So once you have done that, then you can hover over the green icon and we want to drop in maybe a text So drop that into the middle For the content, I’m gonna type in welcome All right, and I want to highlight the text. I want to set this text to heading 1 So normally there’s only one heading one font for a specific page. And then what you want to do is we want to go to styling and then click on font and We want to change the color here to white Okay. Now you can also change the size of the heading one by clicking on heading 1 yeah, and Then you can set the size to maybe you’ll say 80. Maybe that’s a good size and Then you can go back to general and we want to make sure the text is in the middle so right here if you scroll down to text align click on center and that will align your text and then You can click on done now if you want to add a sub-headline because it’s also a text module you can hover over the module and click on duplicate and that will create two layers basically double click on that and Then let’s just say maybe Create a beautiful Website and for this one you want to select the text and select it to paragraph. All right So to change the size of that text you can go back to styling again font and Then for the font size we might try 22. I think that looks okay and Then you can click on done All right. Now the next step is to add a button so to do that hover over the green icon Look for the button and drop that in below there So here you can select the style of the button. Okay, I’m gonna select maybe outlined and for the button text I’m gonna type in Start here Now the link is actually where you want that button To link to so when someone clicks on that what page do they end up on? So I want people to go to my services page So on the bottom left, you’ll see the URL. So what you can do is you can copy the URL from the top here paste it in and then type in services Okay, and then you can also select the button colors and things like that add an icon You can also go to styling and click on button link To select some custom colors for your button colors, right? And then what you can do is click on done Okay, as you can see that’s on the left. So if we actually go back to the row options and click on that styling font For the text align we click on Center. So what that basically does is Everything inside this row will be aligned into the center. Okay? so what we can do to preview the website is click on the preview icon here and There you go, so as you’ll see there is a gap here and we want to remove that to do that We can click on save first and then click on back end Now you want to scroll down to themify custom panel page options and select full width’ and then update Now we can head back to our page by clicking on view page and You’ll see that gap is gone Okay, so it’s fairly easy to you know, add in a background image and also adding some text Let’s say we turn on the Builder again So what I’ve actually done is I’ve actually made a demo layout for you guys. So if you actually go back to My website scroll down to step 7 and then click on download the demo layout and then download that onto your desktop, okay, and Then go back to your website here. And then what you can do is you can see this little icon here Which is got the down arrow click on import from file Okay Upload and Then what we’re gonna do is we’re going to look for that file, which is this one here homepage v1 dot zip Open and that’s gonna import the layout I created for you guys so as you can see if we actually zoom out of the page you see that I’ve created the entire layout for you guys and All you really need to do is sort of replace the content. Okay? So for some areas, for example, your Instagram feed that doesn’t show up because you actually need to Download a plug-in and connect that to your Instagram account Same with your Google Maps and contact forms, but what I’ve actually done is so for example, this Instagram feed here, press play and I’ve created a video showing you guys exactly how to set up your Instagram feed So one of this tutorial to be short and like straight to the point Sort of like a budget airline where you’ve got all the essentials But if you want to add on different things then I’ve got all the videos for you guys to do that, right? So if we actually turn on the Builder again And I’ll show you quickly how you can actually edit it really easily What I’d do is zoom out and for example, you might not want to testimonial Section then you can click on the delete icon and delete that Okay, you might not need a SoundCloud thing here. Then you can delete it as well You can also rearrange The you know layouts and everything for example Let’s zoom in a little bit more. You can also rearrange the layout just like that and move things about you can double click each Section and change the text So it’s really easy to use and if you have any questions drop it down below but right now I’m going to show you how to change the colors of your website and Adding your logos and all your social icon on the bottom So we’re going to click on save and we’re going to close so what you want to do is click on customize and Then this will take you to themify options, I’m gonna select the Advanced tab with more options So your themify options is basically where you change the font and also the color and the styling for? Your website structure. Alright, so let me explain a little bit for example the header This is the header section. So anything they edit in here will control this section here if You for example edit the footer. It’s gonna control – down here. Okay, if you edit the sticky header, this is actually when you actually scroll The header actually follows you like it stays there that is your sticky header and then your links over here that is actually called your main navigation and you can also set in your mobile menu and edit every section of your website and also the body section is Anywhere in between your header and your footer section, let me show you an example by clicking on header The header wrap is basically the background of your header section okay, so What I do recommend if you change your header background is stick to a neutral color Because let’s say if you actually change that to you know a random Color like a blue then you’re gonna see that it’s not gonna match really well with your website and the images Okay, so when you actually have a neutral color, for example a white color for your header, it’s gonna look a lot nicer It’s sort of like wearing a white t-shirt It pairs really well with you know any pants or any shoes that you’re wearing if you actually want to edit the links here you go to main navigation and You would select a menu link. Okay, so that’s the link here and For example, you can change the color here. Let’s change it to a dark grey. So this is the code and When you actually hover over that and that is actually the menu link hover. Okay, the hover link color so what I’ll do is I actually grab the URL here. Sorry the hex code Copy that to my clipboard I go to a website called 0 to 255 click on enter color paste it in and Enter that color So what I like to do is I choose two shades darker or two shades lighter as my hover color Okay, and I use that same formula consistently throughout the entire website, so I might try this one here copy that and Then here go back to menu link over Paste that in there, right? So what that does is if you actually hover over The link it’s gonna give you a really really slight effect. If you can’t really see it. You might want to go Three shades. Okay three shades lighter Okay, that’s a little bit better now This is basically the same formula that top websites like Apple use for example When you’re hover over the link, it goes a little bit gray. Okay, so it gives that effect of okay That’s a link. I can click on that Okay, so we’re gonna go back here and you can play around with all the different settings and colors here So if you want to change the site logo click on site logo Click on site logo here, and then you can change the title Okay, so you can change the title change the fonts here, you know, there are hundreds of different fonts You can choose from if you have a logo you’d select logo image and you’ll click on plus to upload it So I recommend going to to get logos for $5 It’s really cheap and you can also ask for our fav icon which is the icon up here Then click on publish. I’m gonna show you how to add in your favicon and social media. So click on X now Let’s go back to our dashboard section click on themify ultra themify settings here you’ll see five icon and you would click on upload and Basically I have created a favicon It has to be a PNG file which means it’s a transparent file and the size of it is 32 times 32 pixels open and Then you can click on save to add in your social links. Click on social links here and here you can add in let’s say your Facebook profile URL copy that and you can paste that in here. Okay, and select the icon So for example, if you don’t find Instagram you can click on add link and add an Instagram there if you want to click on save and then What you do is we want to display it. So go to appearance Click on widgets and then scroll here down to the very bottom to look for themify social links Drag it and pull it up and drop it into footer social widget ok, and then click on open link in a new window and Icon size set to medium save it let’s go back to our website by clicking on visit site and There you go. You’ve added in your social links and Your website is pretty much complete. So thank you guys for following this video Hope you guys enjoyed it. If you have any questions drop it down below. I’ll also include the FAQ So for example if you have any questions I will include the most frequently asked questions on my website so you can check that out if you liked it Please give it a thumbs up and subscribe See you guys in the next video