how to create a parallax website in wordpress-2021

Parallax WordPress Website 

 how to create a parallax website in wordpress-2021: I'm going to be showing you how to create this amazing and beautiful parallax website using WordPress So WordPress is the most popular way to create a website and it allows anyone to create a website without any coding So it's used by millions of small business owners and individuals like you and me But it's also used by some of the biggest companies in the world for example CNN Forbes UPS eBay Sony and some celebrities use it as well like jay-z and Katy Perry So it's extremely flexible and customizable and you can create any website using it So in this tutorial, I'll be showing you step-by-step how to create this website for example I'll show you how to get your domain name and hosting which is basically like your website's address.com or yourbrandname.com And then I'll show you how to install WordPress and login and then I'll show you how to install a amazing drag-and-drop builder 


So you can literally create any website and you have total control of your website so for example right now we're inside the Builder and if you want to change the text we can click it and then we can just change it like a word editor so inspire and then we can also move things around like we can drag and drop like that we can also undo Like that, and we can also scroll down over here. We can adjust the column sizing So this is perfect for people who want to create their first website but it's also great for people who want to learn a new skill and Maybe help their friend or maybe a client to create a website as well And you can also move these different modules around just by dragging and dropping on the Left here You've got all these different types of modules from like buttons images Maps Like an opt-in form as well testimonial modules It's super easy to create a website these days So we can scroll down over here and I'll also show you how to add in a gallery So that you can basically like sort of showcase your work as well So people can click into that and that opens up in a lightbox, right? So it's super cool and you can also add in a video which is really cool And then you can also add in blog posts so blog posts are great for driving traffic to your website because you can create content and you can also add in a contact form and People can also upload like an image so you can give them like a quote or anything like that And you can also add it in map as well so people can find your business and you can also add in your social media links and you can customize the bottom section here as Well, so this is also a one page website So your customers can click?


 Into the different sections like your services your gallery your blog and your contact as well You can also create as many pages as you need But I'm going to be showing you how to create this website So you can learn the basics of creating a website and then you can really expand it later on So the best thing about this tutorial is that you don't have to purchase anything expensive Everything that we're gonna be needing is online and you can create this website using a Mac or a PC And it's also going to be fully mobile responsive Which is important because fifty percent of the traffic these days come from mobiles, so it's going to fit on mobile It's gonna fit on your tablet, your laptops and also desktops as well. So that's pretty much it So if you do have any questions or you have any issues Then you can always comment down below and I'll try and get back to you as soon as possible I've also got the timestamps listed in the description as well So before you begin, I also want to thank people who follow my video four years ago I really appreciate all the kind of feedback and it really inspires me to keep on creating these tutorials for you guys So hopefully we can inspire more people to create websites and it's gonna be super amazing. So let's get started So let's go over exactly what we need it to create our website and also the cost to create our website So step number one is we need to get a domain name and a domain name is essentially just your website's address For example your business name com your brand name com. The second step is to get hosting So hosting is like a computer that is on 24/7 and that allows us to save all our website files, for example Our text and images and all the content related to our website step number three is we'll need to install WordPress So WordPress is a open source content management system and it's the most popular way to create a website and that allows anyone to create a website without learning how to code and It's also extremely versatile and customizable. For example, you can create a website You can also create a blog and also an e-commerce website on WordPress as well Step number four is I'll show you how to create your website and also design your website Step-by-step. 


So how much does the main name cost normally a domain name cost around fifteen dollars every year hosting cost around ten a month But I do have a discount link below WordPress is going to be completely free and creating our website is also going to be free as well So hopefully we going to be saving a few hundred or even a few thousand dollars to create this website Ourself and it's gonna be super amazing So what we're going to do now is to do step number one and two and we can do that at the same place So you can click the link down in the description below or you can open up your browser and here we can type in  siteground.com forward slash go forward slash unlock So this is a discount affiliate link So if you do purchase through it You'll get a discount and I'll get a commission for that sale and that basically just helps me to create these free tutorials for you guys so there's mainly three different plans that we can choose from we've got the startup plan and the grow big plan and also the go geek plan So generally the go geek client is probably a little bit too much for what you need unless you are building an agency So with a grow big plan, this is also a really great value as well where you can create unlimited websites So if you want to create a website for yourself your family, maybe a few business clients as well You can host it under one account So generally what I recommend most beginners is just the startup plan Because it's the cheapest and you can also upgrade later on So one of the main biggest benefits of siteground is that you can choose a data center closest to your audience So for example if you are located in Australia, they have a data center in Australia So that basically means that your website's going to load super quick for your audience They've also got multiple data centers like in Asia, United States and also Europe as well. So it's super amazing so what we're going to do is just click the get plan for the startup plan over here and Here we're going to select register a new domain now If you do have a domain already, for example, you purchased it through like Namecheap or like GoDaddy Then you can select I already have a domain. 


So here we're gonna put in our new domain name. So for example parallax tutorial and Then once you have that you can click over here and you can also select a country specific domain name for example.com .au or .co.uk in this case? I'm just going to go with the dot-com extension and Then we're going to click on proceed So over here for the account information you just need to put in your email as well as your client information As well your payment information. So I'm going to pause the video and quickly fill that out Okay, so I just filled out all my information So for the data center, you want to select a data center, which is closest to your audience So for example, I'm located in Australia I would go Australia if your main audience is the United States you go with the United States data center So I'm going to select that one and for the period I generally recommend 12 months or more That way you're gonna get the biggest discount, but you can also go month-to-month as well So normally I would select twelve months but for this tutorial because I already have a few accounts in siteground I'm just gonna select a month plan over here. Domain privacy is basically it's going to hide your information from the public so sometimes people can find your information for example your email and also your name if they search up your domain name and That's gonna basically help prevent any spam Like normally there's a lot of marketing companies that might contact you if you do want to Sort of hide your information then I recommend it but it's not necessary so we always going to keep that as empty we're gonna scroll down and confirm all these and Then we're going to click on Pay Now Okay, so the account was successfully created click on proceed to customer area So from here, we're gonna click on setup site and then we're gonna click on start a new website. Click on select scroll down and we're gonna select WordPress click on select and Here we're going to enter in our email address that we're going to create our login to our wordpress account 


So here i'm gonna type in parallaxdemo 91@gmail.com then i'm gonna set in a login password and Then here we're gonna click on continue and it's asking us if you want to add in this thing over here We're not going to do that. So we're gonna click on finish and That's going to take a few minutes to create our website installation So while Siteground is creating a new WordPress installation What I recommend is going back to your email and you get two different emails one Which is asking you to verify the domain name and one to set in the data use consent preferences So make sure you verify the domain name and make sure you set in your data consent preferences And normally I just save the consent preferences without consenting and should be all good to go okay, so we're basically all done and here we're gonna click on manage site and Then we can click on WordPress on the left and We can click on install and manage So scrolling down here Your WordPress installation has been created on our new domain name so over here we can click on login to admin panel so click on that and What you want to do is you want to scroll down and We want to exit out of this WordPress starter because I'll show you everything that we need to know step-by-step. So click on exit Congratulations, we've installed WordPress and this is your dashboard area So this is basically what you'll see So what your customers will see or your visitors will see is you can hover it over on the top here and click on visit site and This is what they'll see So obviously it doesn't look anything like what we want it to look like at the moment and that's because we haven't installed the theme Yet So what I do want to show you guys is how to log out and how to log back in to your dashboard area so on the right over here click on logout and This is your login panel. So for example, if we share our URL this is going to be live So to log back in to our dashboard to our WordPress dashboard type in forward slash WP dash admin and then click on enter and We'll be back here. So just put in your email that you signed up with before as well as your password So fill that in and then click on login, and it will basically log you back into your WordPress website So I'm just gonna save that password so what I recommend you guys do is to just bookmark your page so that whenever you want to log in you don't have to Login to siteground and then click into that button Right you just log in directly via the WP dash admin login area So what we going to do first is basically just go through some basic settings to get you guys on the right page so the first thing I recommend is going to settings and then Going to permalinks and we always want to make sure for the permalinks settings That we've set in the sample post or the post name So basically what that means is if we like a about page or services page The title for example about or the services will be included in the URL. So this is great for search engine purposes We don't want our page to be like equals P equals. 


One, two, three, that's not very good, right? So make sure that it's set at post name scroll down and save changes The next thing we're going to do is go and click on plugins So plugins are essentially apps that add extra functionality For our website. So for example on your phone, you've got apps to like, you know Dating apps you've got social media apps you've got apps to edit photos or videos Anything like that plugins are essentially the same thing but for our website So what I recommend you guys do is to deactivate all your plugins so we're gonna deactivate the WordPress startup and I know a lot of people are following another video or something like that and you might have a lot of plugins What I do recommend is selecting all and then clicking on deactivate and clicking on apply because sometimes you might conflict with building our website and Sometimes it might just be really really overwhelming your dashboard area. So you do want to clean it up a little bit. So because We've installed SiteGround this is the Siteground optimizer plugin I'm just going to keep that activated for now so we can click back on our dashboard area You can also click on the screen options here. We can hide certain things on our dashboard so it is a little bit messy so we can click on that to sort of close it or what we can do is go back over here and we can just Hide the display settings. All right, so I just want to keep that one That's fine and close that like that Now the next thing we want to go to pages and we just want to delete the pages which were pre created Just move that to trash and click on apply click on trash again and let's just delete that permanently and then we're gonna go to post over here and If you have a sample post, then you might want to delete that as well So I'm gonna go to trash over here and I'm gonna delete that permanently And close that and click back onto our dashboard and there we're pretty much good to go I'll show you how to install the theme now 


So to install the theme what you want to do is hover over appearance and click on themes And then click on add new so below this video there's a link to download the theme so this is the themify ultra theme and Once you download it onto your computer It should look something like this themify - ultra dot zip and if it does come into like a folder you might need to right-click and Compress it back into the zip file because we have to upload the zip file as our theme over here So click back over here and click on upload theme choose file and select the theme open and Then install now so on the left it is uploading and once it is uploaded we need to activate our theme Ok, so what you want to do is click on activate So for the skins in demo I don't recommend selecting it So if you do select it It will basically import the skin Onto your website and your website will look like this but sometimes I think you know for most beginners It's a bit overwhelming because you don't really know how to use it yet So what I'm going to show you is how to create your website from scratch and it's going to be super easy anyway, so click on X over here and Then let's go and view our website. So click on visit site Alright, so website is taking shape. Now. This is an amazing theme. It is a premium theme themify ultra in my opinion It is a lot simpler to use than Elementor and Astro mainly because you've got all the features that you need so you don't really need to download anything additional and I feel like it's a little bit overwhelming when you have so many different plugins and additional things on your website So I partnered up with themify to share with you guys for free If you do have any problems installing the theme then make sure you drop a comment down in the comment section I'll also leave an FAQ link in the description below as well So what I'm going to show you now is how to add in your pages. So we're gonna click on pages over here So to add a page we want to click on add new And We want to close this so here we're going to add in a title server For example, we're gonna add in home a home page. Then we're gonna click on publish and publish again So that should say page published. So what I recommend doing is closing this over here and over here They've got three dots so click on that and then click on full screen mode. So deactivate it So basically we can see the left panel now and I think that's a little bit easier so that you guys don't get confused So click on the title one more time And then you can click on the link and that's going to take you to that specific page So if you want to create more pages You can also hover on the toolbar on the top here and click on page to create a new page So let's go back over here. And what you're going to notice is that home is going to have forward slash home so what we want to do is we want to take this home page and just have it as our Com like that. 


Ok. So what we need to do is hover over here click on customize and We need to set the home page settings. So we want to click on back here and then we want to click on home page settings and set a static page and then for the home page you want to select home and then click on publish again and Then we can close it. So what we're going to be creating is just a one-page website for this tutorial But we can actually create more pages if you do want to as well So we're just gonna stick with this for now and let's go back over here So again, if you do want to create more pages You can click on all pages as well and you can also manage all the pages over here So for example if you want to create additional services page Then you can create and click on add new and that will be added in so what we're going to do is we want to make sure that we have a blank canvas to work with so if we turn The builder right now, then what's going to happen is we have the modules on the left we can drag it over here but if we start building We've only got this section to work with we don't want the sidebar and we don't want the heading over here So I'm gonna show you how to remove it. So let's just close the builder Let's go back to here to our dashboard and go hover over themify ultra themify settings and You want to scroll down to default layouts, so essentially you just want to set in a default layout for our pages so default page layout And what I like to do is just open it in a new tab So I like to show you guys with what we're doing. So let's remove this and remove sidebar so over here remove sidebar No sidebar hide the title. It's like yes, and you do also want to hide the page comments as well So set that one in and click on save So if we go back over here Refresh the page then it should be gone.


 Okay So while we're here, I do want to show you how to edit your header section your header layout as well so let's go back over here and Scroll down a little bit and click on theme settings. So click on that and then click on theme appearance Scroll down and over here We've got over a dozen different header designs, but generally what I recommend is sticking to the second one or the header top bar Okay, so generally this is probably the best option the other ones aren't as great in my opinion and This one is just the best for user experience as well and a lot of top websites use this one over here So select that one over there and we can just click on save We're back and refresh it. Okay, that's done So I'm gonna remove this tagline and maybe the search icon over here as well So people can search things if you do want to keep that, but I want to remove that so go back scroll down and let's remove let's say that the tagline and remove the search form and let's click on save again and Refresh it. Okay looking really great. So here this is the footer section. This is the header section So I want to remove this over here as well as the logo. So let's go back scroll down to the bottom arrow over here and remove site logo and Let's scroll down over here to the footer text. So the very bottom and I want to remove footer text - okay. So footer text - is this so let's select that and hide it and Save, so we have that then we can go back over here and just refresh the page So I think I want to change this layout as well for the footer so you can go back And let's go back over here and you can also adjust the footer design as well So I'm going to select the footer block and click on that and click on save So let's go back over here and refresh the page and this is looking really really awesome So now we've got a blank canvas where we can start building our website so what I want to show you guys first is we can set in your logo and Also how to set in your main sort of navigation links as well So for example, if you go back over here, how do we set in the links that scroll down to each of the different sections? So this is very simple. So I'm gonna close this one over here and close this as well so here we're gonna click on customize and then we're going to click on back and then click on menus and Then going to create a new menu. So this is going to be our sort of top navigation menu. 


So I'm gonna name it top Now it doesn't really matter what you name it, but this is just for your own reference You want to make sure you set in the main navigation, which is the top over here The footer navigation is if you want to create a menu for your footer section so if you want to create a new one, then you want to select footer click on next and Then you want to add your items in so you can add that in Like that now if you want to add in the homepage So basically you can click on that and that's gonna add it to the menu on here, right? So it's not showing right now, but if we added in so let's say for example When people click on it, then it's gonna navigate to the homepage So I generally don't do that because when people click on the logo, then it will take them to the homepage anyway So it's a waste of space So what I want to do is I want to create these links here So about services gallery blog and contact so go back over here and that is a custom link So that is not a page because it's linking down to each of the different sections on the page So what we want to do is you want to copy your URL So copy the URL from the top here without the other stuff. So copy that so ctrl C Or you can just copy it like that Paste it in so control V paste it in like that and then here I want to put hash and then the first section is gonna be about and Then for the link text is going to be about So we're going to add to menu so, just in the url again and Then this one is going to be hash the next section maybe Services, so make sure to keep this lowercase all lowercase link text is gonna be Services add to menu. The next one is going to be we're gonna paste that in again Hash so the next one might be let's say blog or maybe gallery so gallery and then put in the link text add to menu and Let's paste it in again Hash and then this one could be I think blog so the link text is blog add to menu and Then paste it in again. So last one so hash contact okay, make sure that's lowercase and Add some menu So once you have that we're gonna click on publish and you'll see the links up here So if you ever want to create a drop-down menu you want to click it and then just indent it below Whichever you want to drop down from so for example, if you want the link to drop down from about Then that's how you do it, right? So if you want it to drop down from gallery So you just put it under like that and you can also do another drop down if you do it like that. So it goes Services and then like that. 


Okay, so let's put it all back and That is pretty much it for our menu, okay. So once you've done that we can click on publish and we can go back let's go back again, and then we can go to themify options and Then I want to click on advanced more options over here So here we can navigate to site logo and tagline so this is where you enter in or put in your logo So click on that click on site logo and then here we can change the site title so for example I'm just gonna put in logo for now and I'll show you guys how to create a free logo as well as a favicon So for example the icon up here how to create that for free and add it in a little bit later We're not gonna do it now, but you can add it in here if you do have one right now But I'll show you how to do it later because we do need a set in the sizes and things like that So just leave it for now. So let's go back over here and Just put it in a logo right now and you can also choose a font as well Okay, so there's 100 different fonts to choose from now I think one of the most important things about designing a website is knowing which font to choose So what I want you guys to do is go to my website. So Hoganchua.com and hit on enter. I Want you here you can hover over resources and then click on website design guide and this is just a simple guide that I created for you guys so that you can Sort of refer back to it and sort of understand a little bit more about Web Design Because I think that when we're creating a website in WordPress You know years and years ago it was about we didn't have the tools to create it now We have like so many different drag and drop tools. It's not really about the tools that we use to create it It's more about you know, how do we design it? Like how do we make it look good every single time? so with this design guide you can actually use it for Designing other things as well like for your business card or maybe like your logo you can use the same tips For it as well. So it's really really important to understand So the first tip that I recommend is to just choose one font now the reason why I recommend it is because years ago when I was creating my first tutorial everyone choose like You know three four different fonts, and it didn't look very good. So I do want to explain it So if we go to like apple or some of the top websites in the world and you can actually download a Chrome extension it's called wha font so you can download that and you can hover over the websites that you like and What you're going to notice is that they basically just use one font and maximum probably two fonts on their website So they just use the size as well, as you know, the boldness of the text to sort of differentiate the text a bit So as you can see, it's very very consistent. 


They don't use, you know, a lot of different fonts So same thing if you go to like Rolex as well. So click on that you hover over here, right? So the same as well scrolling down same and The same as well. So let's go to Tiffany and Co and let's click on that and over here They do have two so they've got a different one for their heading and a different one for like that body text as well So I'll explain a little bit about that Second so same thing with uber it's a table over here uber move. It's pretty much the same one. So these two Yep, so they use the same as well. So here so you want to go back over here? There's two different typefaces that you have to understand So these are the main ones now, there's a sans serif and also a serif typeface So if you follow my other videos older videos I have explained it before but Everyone's probably you know new so I do want to explain it now If you look at the text on the edges It's plain and also the strokes are even with So on the other hand, the serif typeface is they've got curves on the side and also it's thick and thin strokes So this one looks a little bit more traditional elegant and it's got a handcrafted look so if you go to Tiffany and Co you're going to notice that they have it for their logo and also for their heading because Mainly because they want to appear elegant and maybe it's like a handcrafted feel to it. So that's why they have it So same thing with Rolex how they have it in their logo So that is a serif typeface let us  go to Apple right they obviously want to appear modern It's not really like a elegant type of handcrafted thing. Right? It's more about tech. So they use a sans-serif typeface so you have to think about your brand and think about how you want to appeal to your audience like is What you're creating maybe something you are creating by hand. Maybe you want to use the serif typeface Maybe if you just want to have a simple and clean website I personally just recommend its answer for 80% of the websites that you guys can create So this is your simple clean and modern and most websites actually uses. Okay so these are some of the top five that you can actually use that I recommend for most beginners that start off with and you've Also got some to start off with as well for the serif typeface, okay? So now if you do want to choose like let's say this one over here What I do recommend is only using it free headings like for example If you go to Tiffany and Co using it for your headings down here headings scrolling down Again headings over here and then also for your logo as well. So same thing for Rolex They only use it for their logo and they just use the sans-serif for their body heading Fonts and everything like that Okay, because if you have too much of that font Then it's just going to look really sort of old and I don't think that personally looks very very good.


 So that's why I recommend But what I do recommend, most of the time is probably sticking with a sans-serif and then you won't go wrong So scrolling down over here. So for the body font size you do want to keep it between 14 and 18 You don't want it to be too small or too large too large is this gonna look really really ugly? Especially if you have a large body of text like this, so this one is pretty good. Right sixteen fifteen That's very very good and also for the line length so Sometimes I see a lot of people create a website and you've got one huge block of text and that doesn't look very good So you want to try and break that up into? Maybe two different sections like this or you could have maybe a little bit wider but I guess you guys get the picture but just don't have like You know huge paragraphs from left to right so you want to break it up Now the next thing is which is really really important is the text hierarchy so if for example you want to create a heading and a subheading You don't want something like this because you want something where when people look at it. They know what to focus on so first of all You want to focus on the headline and then the sub headline, right? If you look at that one you like looking at two different things at the same time Okay, so same thing over here. So you do want to differentiate this a little bit better By maybe having something like this Having a color and maybe you can also increase the line or letter spacing and then scrolling down You can also do something like this where you've got the heading where it's sort of a little bit more neutral color a little bit lighter than the heading over here and You've also capitalized it as well. Alright, so it just looks a lot better So if you go to Apple, they've got really really good hierarchy. So new and then smaller big and then not so big alright so people focus on this first then this and then maybe over here and then the button you don't want something like This over here, okay So let's go back over here and scroll down and what I personally do recommend is just choosing one accent color to start off with because a lot of people you don't know which color to choose right and then a lot of people choose like three different colors and Use it not consistently throughout your website and that just looks really bad So what I do recommend is maybe reading up on color meanings? So like google it and find out you know, which color suits your brand. You also got to think about your competition as well So you can go to this website over here and let's say for example, I want to choose maybe this pink color over here Just copy that and then you've got the color code so you can just basically choose sort of one color and use sort of different shades of that color on that website so you can actually go over here and you can also go to Adobe and what you can do is find an image on unsplash and Let's say if you like Classic and We scroll down and maybe you'll like a certain picture with a certain mood so you can download that image download that image Let's say for example, let's just download that and I'll show you quickly and the head back over here. 


Close it select file and then we can select that file open and Then we can choose a color palette basically by selecting on the left here, right? Different moods that we can extract from the picture and then we can use these colors consistently on our website So that's what I recommend if you do want to go that route, but if you're just starting out Maybe just choose one color and then use sort of the same shade, right? It's going to make your website look more consistent and gonna look really good Now if you don't know which color to choose like for example when you're building a website You might be thinking what color to choose now generally for the header section and for the footer section You want to keep these? neutral colored like for example header and footer you want to either keep it white or maybe like a dark gray or something like that or a Transparent header because you don't want to choose. Let's say a color Let's say if you do choose a color, for example, we choose a random pink color and when we add an image over here It's gonna be harder to match Alright, so think about if you're building out your own house if you're painting your room pink Then it's going to be harder to match with the furniture But if you have just a white wall, and you have a very very neutral color, you know, flooring and things like that It's gonna be very very easy to match. So any picture would be good So that's what I don't recommend, you know choosing like a colored Header and footer section. So if you go to the top website same thing very neutral colored. The Rolex is transparent Which I'll show you how to make Tiffany and Co is white it's uber neutral. Well, it's not like some pink color or orange color That's gonna be really good ugly. So that's when you use a neutral color If you don't know which color to use especially for like buttons or you can also use it to separate content So if you go back on my web site over here So I use a neutral color to create a background to separate content. So this is very very useful so if we zoom out of our website a little bit more So you can see that I sort of break up Each of the different sections with either a neutral background color or an image and then white color and then image like that same thing for Apple and we scroll down over here and They break it up with some neutral colors like that Same thing and a lot of websites do it. So that is the basics of it and for the button styles and colors I'll show you that a little bit later on. So let's get back into Creating our website. 


So let's go back over here So right now we're on the header section and the header wrap So here I would either keep it a white background or maybe a dark background So in my case, I'm going to change it to a dark gray So the color code for this dark gray is maybe two to two. So type that in like that So that looks really really good. Now. Obviously we need to change this to blue white and also the links to be white So to do that we can minimize that and First of all, we can change the header link, which I will leave is over here so here we're gonna change that to white so bring that to white now if you have like let's say a White background you might need to change this to a dark gray. So scrolling down over here You can also change the link hover as well to something like a lighter gray So when people hover over that then people know that's a link So here once you've got that we can minimize it we can minimize that as well. Here is a menu navigation so you want to navigate to main navigation so click on that and These should be your menu links over here so we can change it over here But I do think these are the active links as well So let's say if we changed the main link scroll down over here Let's change it to white Oops, let's just type in the color code white ffffff. Right so it's not going to change now the reason why it doesn't change is because this is the active link and Basically what that means is that let's say if I am Let's say I clicked on iPad over here. So I'm gonna close this for a second click on iPad and You'll see that this is the active link color. So I'm on the iPad page. The active link color is a light gray So these ones are white So if I click on iPhone active link color is gray because I'm on that actual page So if you go back over here we are on this page for these links so we want to go and click on menu active link and If we want to change it probably to a white color so you can type in FFF and that's going to change So once you do that, we're going to click on this one over here. So I'm not sure why that is not removing Give me a second to publish that so let's close that for a second and we want to change the active link hover So when we went back over here when we set the header link hover So we can click back over here And what we can do is click on plus that's going to add this to our sort of color palette thing on our website So we can reuse that same color. That way we can keep our design consistent throughout our website So we can go back over here. Click on color. Okay, so I'm not sure what is going on Okay, so you can't actually click it. 


I'm gonna close it for a second and let's come back and click on customize Let's go back to where we were so we were at the main navigation So let's click on that again and click on active link over click it back over here. Ok, that should appear now Let's select that. So when we hover over that then it should give a light effect So this is the same effect that we see on Apple So when you hover over it, it gives a white color a little bit. Right so it's very very subtle and That's very very nice. So let's go back over here and then We can also change the drop-down container So if you have a drop-down container or the links, you can edit the colors over here as well so let's just close that for now and What we can do is you can also scroll down To the footer section over here and click on footer you can change the footer wrap color so for example You want to change it to a darker as well, and you can change it like that So we can keep it like that or you can keep it white Sometimes the white color looks a little bit more friendlier as well, so, scrolling down over here. We can change the footer font to white because we want to make sure that's visible so we can type or just pull that in like that and For the link, let's just change that to white as well pull that in and I think that looks pretty good So once you have that we can click on publish and we can close that So so far that is pretty good What I'm gonna show you now is how to have in your social media links down in the footer section So let's go over to our dashboard section themify ultra themify settings scroll down and click on social links So all we need to do is paste in our Twitter profile or Facebook profile and all our social media profiles in the link area so, for example, we can copy over our Facebook profile URL just copy that like that come back over here and Paste it in like that. All right, so obviously this won't be Twitter I'm just gonna paste in a dummy URL so paste that all in and paste it in for Pinterest as well So now if we don't see let's say you want to add an Instagram. 


You don't see it. We can click on add link and Instead we can type in our own title. So Instagram and paste in your Instagram profile and for the icon click on insert icon and We can search for Instagram So hopefully we can find it that does look a little bit old I think that's the old version of it, but we can click on front awesome and we can select the new version here So click on that and that should be good So for the icon color and background, we're going to leave it as default for now. Click on save now That's not going to display yet on our page What we want to do is we want to navigate to a widget section to display it. So Hover over appearance and then click on widgets Scroll down So we want to look for Themify social links, which is over here on the bottom so click it and we're gonna try and drag it up sort of wiggle it up and put it into the footer social widget drop it in and Then what I recommend doing is selecting open link in a new window So when people click on that, it's going to open up in a new tab Right because I don't want people leaving my website and I want people to stay on my website So that's probably what I recommend and is best. So let's click on save Then we can head back onto our website and then we've got our social links down here as well So that is looking really really great what I want to show you guys now is how to add in your hero image so I'll add hero image over here and also show you how to crop your image and also how to add in text and Really build out your website for this part is gonna be really fun. So make sure you stick around So what I want to show you guys now is how to create this hero image section over here So the first step is to find our image I've also got all the images that we're going to be using in the tutorial in the description below So if you do want to download it, then it is in the description so if you want to find your own image, you can go to a website called unsplash.com and Here you can find free images that you can use for your personal or commercial projects as well so let's say for example, we want to search for nature and then click on enter and I'll show you how we need to download the images because we can't download an image, which is too big So let's say for example, you want to download this image over here. 


So just click into it first and instead of downloading free here You want to click on the drop down and you want to select on the medium size? Because if we download like this Original size is probably a little bit too big for our website and that's gonna make it load really slowly. So click on download and That can be your hero image So now if you do have your own images then what I recommend you guys do is to make sure to crop your images So go to fotor.com and this is a free sort of image editor, which allows you to easily crop your images so click on edit photo and then for example, we can drag in our image from our desktop into here and We can crop the image easily So step number one is scrolling down the resize so for example on my web design guide I've also got a image size guide which you can follow so you don't need to get exactly that size But it is sort of a good sort of guideline that you can go by so for the hero image This is probably a good size. So 1,800 times about a thousand then we can go back over here. So here click on resize and we can change the size So here make sure this lock is selected. So that resizes Proportionally, so let's say for example, we crop it to 1,800 like that and then as you can see, it's 1072. So I show how to crop that off. So click on apply and then we'll go back over here to crop and then we need to change this number over here on the right to be 1000 like that's and I'm gonna click on got it and Here we can arrange it to where we want to crop it So it's really really important that we do crop out images Because creating a website is sort of like building a house and your images are sort of like the wood or the bricks So if you can't really cut the wood to the right size and you put onto your website, it's not gonna be good Especially if it's like not big enough, right because it's gonna be super blurry and your website's gonna look low-quality so save it onto your computer so we can just save it as 0 and then click on download and then that's fine. So that's the basics of cropping an image Then we can go back onto our website over here. And I do also want to show you guys another resource, which is important so if you can't find free images on Unsplash then what I do recommend is if you do have the budget then go and pay for some images Because you're gonna find a larger variety of images So for example, if you are a carpet cleaning business or any type of sort of more Specific business you won't really be able to find the right images on unsplash and you'll be able to find much better Images here as well. 


So let's go back over here. Click on turn on builder You can also turn on the Builder on the top over here as well So when you hover over here, this is your row. So the purple is your row so what we want to do is add a row background so hover over here and Then click on the paintbrush styling. So click into that On background and here for the background type. You can select image. You can select gradient You can also upload a YouTube video so you can paste in your YouTube URL into here and that video will start playing So let's go back and you can click on slider as well to add that in but what I recommend is just adding a static image like that and click on plus to upload your image select files and Then I'm going to upload the images which I've prepared already so you can download it in the description and what I'm gonna do is I'm just gonna Sort of hold and select all so I'm gonna upload all these images because we're going to be using it anyway So I want to upload it all at once so click on open So once that is done, I'm gonna select this image over here So the here image and this is the size So it doesn't exactly have to be like 1800 if it's below sort of 500 kilobytes. That should be good to go So click on insert file URL and that's going to add in our image So what we're going to do for the background mode is you either want to select full cover or you want to select parallax scrolling? So we're going to select parallax scrolling because it looks quite nice So what we need to do is we need to stretch that image because we can't see him right so we need to hover over The row and if you see it, it's like this light sort of opaque Purple color and that's the row and we can click it and drag it So that's going to add some padding or some spacing to that image. So we're able to see that image a little bit more So I'm gonna do it to about 150. So that's about a hundred fifty one. 


That's fine. And what do you want to do? So that's the top what you want to do is hover over the bottom and click it and drag it as well So make sure you try to keep the spacing even so we're going to drag it down and make it maybe 250 as well So let's scroll down and drag it down to 250 Okay, so that looks really really nice Now the next thing that you want to do is you want to make sure that you stretch the image from left to right? so what we need to do is hover over the row again and hover over the gear icon click on row options and For the row width it's like full width so that essentially means it goes from left to right so over here the gear Icon and row options for width then the next thing that we want to do is we can add in our text module So we can click on done. So that's our background image done. We can scroll down and we can look for the text module So click it and just drag it and drop it. So very very easy So here we're going to add in a text. So parallax like that Highlight the text and what I recommend is setting its a heading one so normally for each page I only recommend one heading one font Okay So make sure to set that in and then we can also click on Styling and this is where you can change the style of it So for example the color and everything like that, but what we gonna do is just click on done So I'll show you that in a second. So the next thing we want to do is add a sub headline so drop it below there like that and let go and I'm just gonna copy over the text cuz I'm kind of lazy. So copy that and let's just paste that in So learn how to create a beautiful website and then click on done So to add a button very simple again. So look for button somewhere over here and Drag it below that so here. You can change the button size. I'm going to leave it as default You can also choose the shape. So generally if you choose like a circle sort of button, it does look a little bit more friendlier Rounded as well. This one looks very very modern So if we go to like let's say uber.com they use the sort of they're the square one over here So it looks very very professional and modern So we're gonna go back over here and that really depends on your brand So I'm gonna keep it maybe round it right a little bit more friendlier and here you can select the background type I'm gonna keep it as solid and then we can scroll down and for the button text I want to type in begin now. So this could be like shock now or contact me or get a quote here We need to put in the link. 


So basically what I want to do is I want to link it to Maybe my contact section on the page or a different page so to do that we need to hover over contact and then right-click and then We can copy the link address. So copy that and Go over here and just paste that in So basically when people click that it's going to link to the contact section. So if we That it's gonna link down over here. Now, you can link it to any page that you want. This is just an example So we can go over here and we can change the button color But personally I don't like to change the color of your here because the colors don't look that great I'll show you that in a second. So click on done now. The next step is to style it so what we're gonna do is we're going to hover over the row again click on styling and we're going to click on the font and Then we're going to scroll down and click on text align. So we're going to align everything into the center. So Basically what that means is that if we sort of set in like the font for the row It's going to affect everything within that row so we don't have to set it individually for each of the modules here So sometimes that can be a lot easier and it's a little bit less confusing So here we can set the color to be white and that just make sure that it's visible So let's go back over here and click on done So let's click on save first and you can also click on here on the drop-down to save as revision so for example, if you finish like a section and your home page we can do like here done and then you can put like a date or something like that and then click on OK and If you do make a big mistake then you can go over here and load that revision so we can click on save and close it and What you're going to notice is there is a gap on the top over here so to remove that gap we can go to edit page and We need to remove the gap every time if we do want to have a full width Content width, right? So we want to set here to full width like that and then click on update and Then we can scroll back up and click over here and then click back. It's our new page and Then that should be done. So you guys are probably wondering how do you change it to a transparent header? So I do want to show you that really quickly since we're here already. So go back over here and Scroll down to themify custom panel again. 


Click on the page appearance and click on header scroll down to header background type over here click on transparent so sometimes you do need to edit the header text color because the background Is a different color you might need to make sure your links are visible. So keep that in mind click on update Let's refresh that page and that's looking really good. So the next thing I want to show you is how to change the size of the text and also the button color so click on turn on build up and Then click into the module so that one over here. So what you can do is we can change the heading one size so go back to styling and Click on the tab and click on heading and here you can change the heading 1 font So generally there's two ways of doing it and personally I recommend the second way which I'll show you later but this is the first way so click into that and Here we can change the font family because we reset the body fonts and once around I don't really need to change that again So we do want to change the size. So make it a little bit bigger maybe like 70 let's just click it and drag it maybe a little bit bigger. Let's try 80 so 80's decent-size here We can also change the letter spacing so I might want to make it a little bit more modern so we can change it to 1 letter spacing like that and you can also text transform it like that looks really good Scrolling down to the text shadow. So the text shot is very very useful So try to keep this in mind when you're building your website because you always want to make sure the text is visible When you're putting it on top of images and this is a really great way of doing it so you can do 1 1 Oops, so that's meant to be that's meant to be one so it's good to leave that that's 1 and then for the blur we're gonna set 5 and As you can see it adds sort of like a white Shadow, and that does look really really nice it sort of enhances the text a little bit and what we can do is click on the color and we can select black and then that just creates a really really nice shadow so we can see the text drop the opacity or the transparency down to like maybe 0.1 something like that, and then that looks really really great so what we're going to do is sort of want to reduce the spacing over here and We can sort of click on the bottom here so we can change it to 1 for the margin for the bottom area like that So we can click on done and that's going to reduce the spacing so you can actually click The next text module and we can change the sizing over here as well. 


So click styling font and Then here we can just type in the size. So like 24 Maybe a little bit too big so maybe 22 something like that looks pretty good. Then we can scroll down We could also go back over here To the margin. So let's say you want to move the spacing over here so you can reduce the margin like this as well so - maybe like 3 and maybe minus 5 so that's going to move the button up a little bit because it's going to Create a negative margin. So padding is Similar. So padding for example is let's say we do 100 So basically think of the padding as the space inside the box, so that's padding Margin is sort of outside of the box. So for example, we do like top sort of top margin 100 that's gonna appear outside of that box over there okay, so sometimes that does take time to get used to but generally I only do sort of margin when I need to reduce the Spacing like that and padding. Normally I only add it like when I need to add spacing like that. Let's click on done and We can click on save and then For the button we can click into that Click on the styling click on button link click on background and here we can change the color so before when I was talking about the web design what I recommend is either using a neutral color like a neutral dark gray or maybe a white color or Just a sort of ghost button like this or you can just go to the website over here and pick an accent color So let's say for example I want to pick this maybe pink one or maybe let's try maybe yeah this one over here sort of red color Okay, and then we can go back over here Oops, go back over here Paste that in so that might look okay. Maybe let's change it to pink. I think it does look a little bit nicer We're back and close it paste it in and Then you can add the color like that. And then for the link we do need to change that to white so it's visible Okay, then we must set a whole the color. So when people hover over what color does it turn into? So generally what I recommend is either hovering it back into a neutral color or a different shade of the same color All right, so you don't want to hover it into like a random color at all Because this is gonna look really bad So what we're going to do is make a lighter version of it. So click on there Come back and let's paste that in Like that, so when people hover over it's going to be a lighter effect So this is essentially the same effect that you see on uber as well like that. It goes lighter So on a lot of websites, that's what they do. So you don't pick a random color. Otherwise, it's gonna have a bad design So once that is done, I might change the sort of font as well within there

 So let's go back and click on general. Click on the font Here, I'm gonna change it to text transform maybe make this size a little bit smaller if I can maybe 14 and Then I'm going to let's add some letter spacing. So let's try one. Maybe two like that Okay, so that looks nice and modern in my opinion looks really really good So we're gonna click on done and then we're gonna click on done and close Okay, so that looks really great. And that's probably the hardest part of the tutorial The rest of the stuff is going to be super easy So we're going to speed through that but the next section that we're going to create is where we're going to put in our quote This can be like a mission statement or a quote that you believe in. So I'm just going to copy it over the text and Come back over here. So what we're gonna do is add a new row so we can click on the plus icon and Select the row with just one column so you can select two columns three columns as well So for example, this one will be one column and two columns. This one is just one So let's go back over here and click on that and that's a column so to add in a text drop in a text module So what we're going to do is we're going to paste the text and match style or paste as plain text So there's no styling to it Okay So you can also click on toggle toolbar over here and click on that and paste it in as well So you don't copy any styling over? So the first thing that we can do is maybe add some spacing so we can add some spacing we're gonna hover over the top Here and sort of drag it down - maybe 75 and then we're gonna do the same thing for the bottom 75 as well That's all good. Then what we could do is maybe we can align the text into the middle So let's click over here and click on font and then we can align it into the center So what we're going to do is adjust the size as well. So we're going to adjust the size for the quote so we're going to change the font to 20 - I think that looks okay and Maybe we can leave it as that The only thing that I do want to change is if we go to text is I want to change the font size over here So sometimes if you have you want to have two different sizes, for example, this one over here and this one over here You want it to be different then? What you need to do is go back over here We're gonna set this one to maybe heading 6 like that so then what we could do is go back to styling and Then click on general click on heading and then click on heading 6 font So that basically means we can edit the heading 6 font in here as well So I'm going to adjust the size a little bit. So maybe let's say 12 I think that looks okay and maybe adjust the letter spacing to 1 like that So that just adds some nice sort of hierarchy in terms of the text because we sort of want to differentiate it So remember, I sort of mentioned it before something like this So we do want to make sure it looks really nice by doing something like this. Okay Let's go back over here.


 And I think that looks okay So the only thing I don't want to do is maybe change the font color. So let's go back to the general So here for the font color. I might change this to a dark grape So to do - and I think that looks a little bit better Okay, so let's go back over here and compare it Maybe let's try and make it a little bit smaller or maybe add some letter spacing Something like that. Okay. I think that looks really really nice So here we can click on done and that is done So to add in the next section we can click on plus and click on two columns So on the Left we're going to add an image. So drop that in here and then we're going to select let's say I think this one over here and I've cropped the size to about 800 to 533 click on insert file And then we've got her image so then we can go over here click on done we can drop in a text module into The right-hand side like that and I'm gonna come back over here and just paste in everything. So copy that and Come back here. And let's just paste that in Like that, and I want to change this one to heading 2, so let's change this to heading 2 Like that's okay. So as you can see it might have edited everything So I'm going to ctrl Z or command Z to undo and I want to hit on enter one time So I think I accidentally set heading 2 to the whole entire paragraph So let's set it hanging - like that and that should be fine Now the next step that I want to do is I sort of want to align this into the middle of the image so what you can do is hover over here and Hover over the gear icon and then select align into the middle so over there and that looks quite nice already so the next thing that we can do is we can zoom out of the page a little bit and We can also rearrange the column sort of width of that so we can hover over the image Just on the outer line and then we can sort of drag it inwards like that So I think that looks a little bit more balanced. So maybe let's try around 35% like that so we can zoom back in and That's looking really really good so the only thing that I want to show you to do is maybe add in a Divider line to sort of separate our content a little bit so as I said before we sort of want to separate our content with divider lines and maybe like a background and then white space and then a Image so here we're gonna add a divider line. So let's go back over here and let's drop in a divider so click on done look for a divider drop that below that like that and Here what we're gonna do is change the color. 


So basically what we want to do is either keep it like a neutral color So like a maybe a dark gray or light gray, but in this case, I'm gonna use this color over here So let's click back over here So the button so I forgot to actually click on the styling and the button link. I forgot to set in that color so What you probably want to do is click into it and add it to your color palette like that so we can reuse the color anytime let's go back over here and Let's click back into the divided line Sometimes it can be quite challenging but you should be able to get it and let's click back onto that line just like that set the thickness to two and then what we're going to do is we're going to change the divider width to custom and Then we're going to align it into the middle like that. So I do want to add maybe some spacing So what we going to do is hover over that and click It and sort of drag it. So we're going to add maybe Mm a be 20 or 30 pixels. I think that looks okay Sometimes you need to play around with it a little bit. So let's have a look. Okay, so I think that looks quite decent Let's click on save and that's done. So the next section is over here We're scrolling down and you can see this section over here. I'm also going to show how to add in a link so let's just add in the link go back over here and then let's Create a link so hover and select the link that you want to create the text and then click on insert link and Then depending on what you want to link it to So for example if you want to link it to my website so copy it from URL copy that and then we can go back and Paste it in like that. So generally what I personally like to do is click on link options and open link in a new tab Especially if it's linking outside of my website and then click on update. So that's done So here we're going to zoom back in to our page and we're going to create the next section so the next section is we need one two three, so we need three different columns and What we can do is let's go and drag select this one first So one column first and what we're going to do is create a text module Drag it in and there like that change the two services Set it to heading two like that and then I might add some spacing above that to that row, so maybe 75 again and Then the next section that we're gonna do is click on Come back over here. We're going to drop in three rows. So on the left here rows We're going to select three and drag it below services like that So you got one two, and three then what we're going to do is add in the feature module.


 So drop that in Like that, and I'm going to come back over here and just copy over some of that lorem ipsum text Web design sort of come back over here. So for the feature title, this can be like the services that you offer so web design paste that in And we're going to scroll down For the layout we can change it. I'm going to keep it as default I'm gonna sort of remove that circle because personally I don't really like it and remove the stroke as well as Well as the color and then we're gonna scroll down over here and you can change the icon so you can click on the icon and Then we can search for desktop So this is maybe something to do with web design so find an icon that relates to your title You can also upload your own image as well Then once you've done that then we can simply just you can link it to your specific page as well But we don't have any links at the moment. Now, we can simply just duplicate the module two times like that and Drag it in to the respective sections so here what we're going to do is we're going to first we're going to go to the styling and then we're going to go to font and we're gonna make sure we aligned everything in the center first and Maybe we could let's add some padding to the bottom seventy five like that So what we can do now is what I recommend is maybe adding some sort of divider background to it So since we're here we can go to the background and instead of image we can put in background color so what I recommend is a light gray so f6 f6 f6 and That can really separate your content area. So Let's refer back to the top module again over here. We do want to add some spacing over here. So make sure everything's even Just like that Should be pretty simple to do so Whenever you have trouble then you can zoom out and you can look at your Sort of page from a bird's eye view and that way you can sort of adjust it to what you need it to do So what you can do is obviously just click into that and maybe change it to you know Whatever service you offer it and change the icon as well that is done the next section. We're going to add in our gallery So we can just duplicate the text module over here and let's just zoom back in to maybe 75% So here we can add in a new row so over here. 


We're just going to add one and Then we can drag this and drop it into here like that And let's just change the title so gallery so this could be like your work your portfolio It doesn't really matter We can also align it into the center over here as well if you do want to so we can also add some spacing so 75 and Then we can drop in a gallery module so click on done and Over here you can drag in like an image module maybe a gallery you can also Use let's say video as well as a slider as well to display your sort of work So we're going to use a gallery module so drag that in and put it below and I'm gonna select my images so I'm going to use let's say this one over here gallery 5 and I've already cropped these ones for you to about a thousand and six hundred so generally that's a pretty good size and I recommend cropping them to the same size if you do want to sort of upload a Gallery, so we're gonna select this one over here. And I think this one over here and then Maybe this one and this one so one two, three four Five six images click on add to gallery and then click on update gallery and that's going to share out images So what what I want to do is I want to change the columns to maybe three because I've only got six images so let's change it to 3 and That's displaying good. So the only thing I want to change is a thumbnail width and also the thumbnail height so if we go back to the gallery and If you notice that I've uploaded as 1000 in width and 600 in height so what I want to do is Harvard, so that'll be 500 and that will be 300 and Then what we could do here is change the thumbnail width so I don't want it to be let's 300 and 200 I want it to be 500 and also 300 so that's going to ensure that the quality of the images is retained because it's cropped sort of proportionally to how I Resized it. So let's say if you upload the image to be 800 and maybe 600 or something like that, then you still want to have it. So be 400 and 300 okay, so let's scroll down and that's done. Let's add some extra padding on to that as well if you do need to so that's all good and Let's add some over here on the top if you can So accidentally added the sort of the top margin over here So I do want to click on this one and click on styling And I think I accidentally added to the margin on the top. 


So it maybe let's just remove that anyway like that Okay, so I think that's done. Now. The next section is we're going to add the video so this is really great because you can put in a video here and you can also Do a sort of really really nice parallax on the background just showcase your work. Let's go back over here And this is just one column as well. So click on that and We can add in a background first. So click on styling background image and select background image and we're going to select this one if you so for video background section and then insert and Then that's done. So here we're gonna select the background type to be parallax scrolling and Then we're going to stretch the image a tad to maybe let's say 50 or 75 again So same for the bottom 50 Then once you've done that then all you need to do is click on done and drag in a video module so, for example, we can just grab a video drop it in there and Then we can paste in the YouTube URL. So we're gonna paste in this one over here. So I'm gonna grab the URL So copy that you can also click on share and grab the URL as well. Let's go and paste that into here just like that and then we've got the video and Sometimes when you upload a video sometimes you have different thumbnails, right? Because when you upload to YouTube you want to create a thumbnail that stands out and a lot of times people add text over it and if you do want to cover over that which I do recommend is clicking on overlay image and Clicking on select and then you can overlay it with your own sort of background image So for example, I might overlay it with the same one like that And click on it and I think that just looks really a lot better Right so you can overlay it with a nice image and it's gonna look a lot more cleaner and professional so it suits influencing with your website design so what we're gonna do is click on done and I want to create sort of a background overlay, so I want to go to styling and wrote overlay So here I'm going to select a black so it covers that and then I want to drop the opacity down to maybe let's say 0.5 like that, so it's a little bit darker right because you don't want it to be that's Colorful, like if you leave it like that, it's just too much. Let's do it 3.5 and Then we can also set a hover overlay.


 So click on that let's drag that back through black and Maybe let's drag that down a tad to 0.8 so let's click on done and We're gonna click on save and close it so scrolling down to our video section So let's say when we hover over it when someone is viewing that video then it sort of creates a cinematic effect which I think is really really nice and when I click on the video and They click on play Then they can be well liked that Okay, so that looks really really nice and we've done the video section What we're going to learn now is how to add blog posts to your website. So adding blog post is really important Not just because you want to write something and you want to share your story. It's mostly about driving traffic to your website So for example, if you are a carpet cleaning business and if people are looking for you, right? Sometimes they don't search for carpet cleaning or your brand name But instead they search for something like how to get rid of carpet stains or something like that so carpet stains and Then they can scroll down and maybe this one over here So this is a blog post right so you can create a blog post and that's going to drive a lot of traffic to your website So people looking for maybe getting rid of coffee stain or a wine stain and they might read your article But it might be your business. So they might read it and might think again, maybe I don't want to clean it myself maybe I want to hire someone so it's definitely a really really awesome way to drive traffic to your business and I highly recommend Learning a little bit more about SEO as well. So I do you have an SEO tutorial on my channel So make sure to check that out But right now I just want to show you guys how to add in post and display it on your page So what we can do is hover on the top over here and instead of page. We're gonna click on post So here we can put in a title so I might just put in we are unique So the purpose of this is just to show you how to add it in So that's your title and here we can on the right we can click on categories we can add a new category So this one could be education and Then click on add new category Scroll down you can put tags as well go get add in a featured image Click on set featured image and we're going to add in this picture over here So again, I cropped the sort of blog post images to around 1100 by 700 click on set featured image and then that's pretty much it so once you've done that click on publish and publish again and Once that is done. You can click here and click on the link. So this is your blog post and To add our content because we're using the themify builder. 



It's going to make it a lot easier for us to add it in so we can click on turn on builder and Here we can start adding all these different types and modules. So let's say for example, we can go to Or if SCIM to just get some dummy text So we're going to copy over some dummy text and click on that and let's click over here Copy that. Let's come back over here and We can drag in a text module just like that and we can paste in the text like that We can also arrange the sort of padding as well so we can maybe add some padding like let's say 25 Okay to make its paste nicely So what I want to show you is click on done and maybe if you want to add an image Let's say you want to add an image to describe a little bit more about to what you've written So here let's say we want to add maybe this one over here Insert file URL and then you got your image And then click on done and maybe you might want to add this thing so a box module we can drag this over here below that and what this is useful is like let's say if you have a blog post about how to clean a carpet and maybe there's like seven different ways and You might want to put maybe some tips or something like that. This is a really great way to do it So for example tips, maybe tip number one like that, and then what we could do is change that to heading two and Then what we could do is maybe click on that and styling for the background. I might set it to yellow Drop the opacity down to zero point one like that. Then I might add some spacing above that as well So, maybe let's try 35 so I think that looks pretty good and then we could add obviously some content into there So for example, just the recent contents the actual tip, so let's just delete some of that maybe Like that, so I just wanted to show you how you can do it You probably see this on a lot of blogs or I want to show you the basics So that's pretty much it so you can obviously add some more text and fill it up with different content here is your comment section that people can add and I'll show you how to change the post date. So this is probably one of the most common questions I get asked So let's click on save and we can close it So to change the post date display we can go back to our dashboard click on themify ultra themify settings and Then default layouts over here. So instead of the page layout we want to navigate to single post And then here we want to adjust the post date. So instead of The round thing we can change it to the inline text or you can also hide it as well So you can also hide certain things so for example you can hide the author as Well, and then we can click on save so you can come here and sort of adjust it to how you want Now if you want to go to post over here, then you can see and manage all your post So to display your post I'll show you guys how to do that But in the meantime, I'm going to add in two more blog posts really quickly So that's done. Let's navigate back to our home page and Turn on the Builder So we can scroll down over here and click on this and select one row then what we could do is we Can drop in a post module so you can create any page like a blog page and you can display the post module to display 


Your blog post like that, so it's very simple what we could do is change the post layout to three three and perhaps we can arrange it and limits to three posts and Then we can also change the display layouts over here So maybe I want to sort of hide the content and hide the post metal, which is this one over here. So Let's try and change the display to none, so that's gonna hide the text and I also want to hide this so scroll down to post metal and hide it so you Can play around with the different display settings over here as well? And I might just add some spacing on the top so maybe 75 and let's try and do 75 on the bottom Just like that and then you're pretty much good to go let's just duplicate this gallery and let's drag it down here and Paste it in We're gonna change the title to latest post Latest Post so I might want to add a little bit of padding to space it out a little bit better and The next section is I'll show you how to add in a map So if you want people to find out You know where your business's adding a map is also a really great option So you can also drop in the map module over here But the problem with that is that you'll need to get the API From Google and do need to put in your credit card details, even though it's free. There's a quicker way of doing it so we can go over to Google and We can just type in like Google Maps hit on enter click in the first results and Then here so maybe you can put in you know where your business is located. I might do let's say halong bay So this is somewhere where I want to go. So I want to click into that and okay, that's all good, and we can click on share so click on share over here and click on embed map and then copy HTML So once you've copied that to clipboard by clicking onto that come back over here And we just need to paste it in to a text module so click on text and we're going to Sorry about that. We do need to add in a new row Drop the text module into here and we're going to instead of pasting it into the visual tab so you'll see visual click in the text tab and paste in that HTML so make sure you paste it into the text tab. Otherwise, you won't see it So as you can see the map is not sort of moving to the edges of the page what we need to do is adjust the width so over here you Can see the width is 600 pixels so you can obviously adjust it to let's say 1000 pixels if you want to But if you want it to sort of take up the whole entire row, then we can change it to 100% So what that means is it's going to be 100% the page with and then we can hover over here on the top and for the row options select full width' and That's pretty much it. So click on done So you can also click on preview over here to see your map. And I think that is looking pretty good. So What I want to is how to add in a contact form. So contact form is going to allow anyone to contact you so we can go back over here and Disable ads so what you need to do is there's a link in the description below and that is going to be the contact form plug-in which You'll do need to install so what it's going to look like is it's gonna look something like this once you've downloaded Builder - contact nip. Okay. So it's in the description below make sure you download it and We're going to come back and save here and we're gonna install the plugin. So close it Come back to dashboard Navigate to plugins add new and then click on upload plug-in choose file and then Navigate to the plug-in so over here and then click on open Install now click on activate so that's activated. So we need to go back to our website turn on the Builder and What that is going to do is going to add an extra module here So as you can see the contact module and we can drag it and drop it in on our page So we can click on plus and click on maybe this one over here. So then drag it in just like that


 So that's our contact form really really simple The only thing that you really want to make sure is make sure you send it to your email So make sure you send it to your company email or your Gmail Whatever it is. Alright, and here I like to select this one over here where the placeholder is in the box So it does save a lot of space and we can scroll down over here so you can play around with the different settings Now we can scroll down to the send button we can align it to the center like that Which I think it looks a lot nicer now if you want to let's say you want to add? Maybe something where people can upload a file or maybe they can select a time. You can add additional fields. So for example we can click on head field and for the field name we can do like upload and Then for the field type we can select a upload file So over here so people can upload that so that's really really good You can also add in another upload if you do want to as well. That's completely fine But if you want to do like so like time where people can select a time or if you want like different options So we can go and do maybe a time Then here we can do checkbox. So it's sort of displays in a checkbox. Let's do maybe 9:00 to 10:00 a.m Like that and then we can add another option 10:00 to 11:00 a.m Add another option 11:00 to 12:00 p.m So I guess you guys get the picture and we can also click on it and you can drag it up as well so we can move it up just like that and That is looking great So you can play around with the different sort of fuel types and create a custom form Where people can contact you or make a booking as well? so if you want to adjust sort of the look of it, then what we could do is click on styling and click on general click on send button and for the button I might do let's say The pink color or something like that, or maybe I might do a neutral color. So let's do like a 2 to 2 and Then for the hover, I'm gonna do a 333 or maybe a 444. It's a little bit lighter and Then click on done so let's go ahead and add maybe a background to that so background it select an image and then I'm gonna click on this turtle over here so I'm going a little bit faster because I Think you guys sort of get the picture and just want to understand sort of the basics of how to do it And maybe just add some spacing on the top. So 75 Drag it 75 on there as well and then we could do We do want to make this a little bit transparent. So it's gonna look and blend in with our theme of our website For the background image. I'm going to select maybe parallax and Then what we're going to do is click into the contact form Styling and then here we're going to select the field labels and We can change the color of that to white and then I'm going to change sort of the field input fields background change the background to maybe transparent Something like that So 0.1, which I think is good And then for the input fields, I do want to change the font color to white as well so when people type it in that's the white font color and Then I also want to click on general font change that to white as well So make sure everything's white. So when people type it in then everything is white So maybe if you can see over here, no file chosen we can also go to the row and then font and then arrange that to be white as well and hopefully that's going to adjust so I click on done and save and Then we can close it so let's scroll down to the bottom and That's looking pretty nice. So obviously can add a contact Title over here and there is some spacing over here So what we can do to fix it is to add negative margin. So turn on a builder and Let's click into this module styling it's very margin and let's try a negative margin sore Trying to give 20. Okay, that's not enough. Maybe negative 25 still not enough 30 that's looking great done and maybe I might zoom out and then I'm going to Rip this and put on top and just have the map on the bottom and I think that's looking great So that is looking really awesome 


So what I want to show you now is how to ensure that when people click on your links They actually scroll down to hav different sections and that is what we call the Rohtang kurz So we just need to set in the locations so if you haven't set in so the menu Road anchors yet over the top here you want to go back into the description and Make sure you go to the timestamps and create your menu So when we click on the menu, you'll see that the URL has changed to hash about Same thing if you go and gallery is hash gallery and it's all lowercase All right. So what we need to do is set in the location of where we want people to scroll to so we can click on turn on builder and We're gonna hover over the row So this is the row the about me row So we want to cover here click on here and then click on row options for the row. Anchor We're going to label this as abouts. So that is the location So as you can see on the right-hand side here, it's hash about so that's the location for about the next section so hover over here row options and this one is going to be Services, so make sure it's all the same as the link that you set in before. So without the hashtag in front scroll down the gallery section Row options and this one's going to be gallery Scroll down again, and this one is going to be the blog so row options Blog and the last one is going to be the contact section. So hover over here row options and then wrote anchor contact so that's pretty much all you need to do so we can click on save and make sure you Test it to see if actually works so click into abouts gallery services the Contacts yeah. Oh good So if you do have any problems, it's mainly because you haven't set in the link correctly For example, we didn't put in the lower case or you've just messed up the sort of labels So make sure to check that So what I want to show you guys now is to ensure that your website is fully mobile responsive on Mobiles as well as tablets. So if you resize your screen and we scroll down you can see that it resizes pretty nicely as well and Over here. It doesn't look very good. Right? We've got the image over here. It's like nice and small It's squashed with the text. But generally the theme does do a good job in making it responsive But sometimes we do need to edit it. So I do want to show you guys exactly how to do that So let's go and turn on the Builder and there are a few ways of doing it so I want to show you all the ways of doing it so over here we can select mobile and What this is going to do. It's basically going to save the settings for mobile settings only So if we hover over here you can see this is what it looks like on mobile So what we want to do is instead of having two columns. We sort of want to just have one So hover over here and select one like that Okay. So what you can also do is maybe add some padding as well Maybe I do want to have the text on top so you can hover over here again And then you can change right to left and that's basically gonna adjust it a little bit So that you have the text on top and then you've got the image So you can always always adjust that like that. And then let's say if you do want to keep it like that, that's fine We can click into the text over here Styling and then click on padding and then we can set in some padding on the top. So maybe let's try 25 So that's going to save just for mobile devices only. So if you go back to desktop Then it's going to sort of readjust to what we have before So let's go back over here that's going to change so you need to readjust everything on your page that needs adjusting like that and you can also click into let's say This video module section or this entire row? So maybe on mobile you don't want the video for some reason or you just want to hide something? Then let's go over here. 


And then we can click on the sort of three dots over here and click on visibility So essentially what that is it is if you want to hide certain things certain rows or certain modules We can hide it for the mobile or tablet or anything like that So now that we've hidden it then on mobile people won't be able to see the video this entire row so as you can see, it's hidden and You can definitely play around with the settings over here You can also navigate here by clicking on the I icon over here as well Okay, so click on that and that should be done now the other way of doing it is also from your customizer section so save the settings and Maybe I do want to maybe make this one the padding just reduce it a tad for a mobile So maybe that's 350 So let's pull it down here 150 and same for the bottom maybe making 150 as well Okay, perfect done save and close So before we move on I do want to give you guys a quick tip So for example on the parallax scrolling for desktop what I generally recommend for the hero image like the first image on your website Maybe instead of parallax scrolling set it to full cover and then you can set the background to the fixed so the background attachment so it's a little bit more responsive on mobile when you set that in and That's why I personally recommend now if it's like the sort of like the middle images Like for example the sort of the turtle image before so let's just close it and it still creates the parallax effect And if we scroll down over here the turtle over here, so that is still okay on mobile But sometimes you may need it to be a little bit more responsive for mobile So that's why I recommend the sort of fixed scrolling one Click on customize on the top So over here we can also click on the styling here as well So for mobile we can click on that and We can adjust the sort of the size of let's say maybe the body text or maybe the heading text specific for mobile as well so let's say for example, we can go to body and Body font and by default the body font. I think it's 16 so we can reduce it to let's say 14 then You can see here. It's changed for mobile So before it was like 16, but we can adjust it to maybe 15 and that's only going to be specific for mobile So if you click back onto the desktop, it's going to readjust as well. So sometimes you may need to readjust The body font as well as the headings specific for mobile by clicking on here So I do want to show you guys how to edit some stuff as well. You customize a section So for example when I mentioned when we were creating the hero text over here You can click on headings and you can edit the heading one Sort of headings universally for your entire website as well so you can do that over here And that's why I personally recommend because that way you don't have to always set it You know to the specific font all the time. You've got the standard font so for example, this is the heading two we can go to heading two and Then we can do Make sure we set in Monserrate or maybe you want to change a different font or anything like that and then we could do For the font weight, we could be bold something like that and then we could do letter spacing maybe one And then that might look okay then you can also adjust the color and everything like that click on publish and Then we can scroll down The only other things that I want to show you guys before we create our logo is maybe we can go to The blog so let's say for example Click into the blog So over here we've got the forum so to edit the styling that you can edit it here, right This is the sort of the widget sidebar area You can also edit the sidebar you can edit any section of your website as well So for example when we're scrolling down the sticky header You can't see the text so you can also go to sticky header and then we could do the sticky header link change it to maybe two to two so hopefully That is going to display right so we can adjust everything that we need sticky header and everything like that So what I want to show you now is how to create your logo for free as well as their favicon Okay, so to create a logo what I recommend is going to canva.com So canva is really really awesome. I highly recommend it for any type of design work So we're gonna create a logo So on the right over here click on create a design So you probably need to log in first with your Google account or Facebook. Click on custom dimensions So the dimensions that I recommend is five one two And then for the height is one to eight create design. So we're gonna be creating a logo that fits into here So it needs to sort of be like a horizontal logo rather than sort of like a square one So for example 


Apple it fits into their sort of navigation area same with Tesla and same with Nike So we're not going to be creating like a square one But you can adjust it later on if you do want to use it for sort of other Marketing materials and things like that as well. So what we're going to do is first of all, add some text So click on text on the left so over here, you can choose a text that you like that suits your brand So previously I talked about like the San serif and also the serif typeface so think about which one you want to pick So I just want to create a modern design so I might pick this one over here So it's a sans-serif drag it in and just drop it And then I might just delete the bottom like that's and then just keep that So here we're gonna type in like a title. So I'm gonna call it parallax. Oops Something like that. And then what you can do is just drag it into position and Then we can resize it just by dragging and just pulling it over like that So we're gonna make sure that it fits in there and you can also change the color as well as edit the font over here the next thing that you want to do is add in maybe like a little icon for Your brand so you can click on elements over here and you can search for different elements So if we search for let's say the Infiniti logo So there will be plenty of different logos that you can choose. So for example, let's pick maybe is one over here okay, so As you can see when you hover over it It has sort of like a icon that says pro and that is for pro account only So what I do recommend is signing out for the free trial I think it's like a 30-day free trial and you get to download all the pro sort of elements and everything that you need for You know your logo and anything that your business needs as well So I think that's good enough and it may be perhaps I think that's good. So you can also change the color now what I do recommend is first of all, we're going to download that so click on download and What I recommend is downloading it as a PNG transparent file. So basically the background there is no background So we're going to click on that and I do think you might need to sign up for the pro account for that So make sure to do that and then click on download what I do recommend is creating a black version or a colored version and then you also want a version which is white as well because sometimes When we have a background we need to use the white version of the logo So change your text and change your icon to white and then download it again as a PNG So you can also create a colored one as well in case you might need it later on So we're going to go back onto our website over here, and we're going to add in a logo So click on customize and then you want to navigate to site logo and tagline click into that and click on site logo and Then click on logo image and then click on plus and we want to upload files select files so we can upload the new logos that you just created and they should be a PNG file and here I'm going to select maybe the white version of it and click on insert image and Here it is so what we need to do is we're going to set in I think this is the width of it to 1 to 8 and Then that is good. Okay, so that's going to scale down proportionally normally I only sort of edits one of these boxes over here and 1 to 8 is perfect for the size that we just Added in so sometimes you might need to sort of play around with the different settings like might change it to like 48 You can use so normally I just you know resize one of them like for example, or maybe try 38 I think that's that's ok as well So we can also click on the site logo margin click on that and these are like that and sometimes you might need to add Some margin on the top of that logo or maybe minimize it like that So it really depends so you might do maybe three Let's see and how that looks maybe let's try Edit that a little bit maybe 10 So you might need to adjust it so what I'm gonna do is I might just change it to let's say 32 Let's have a look at this. So we're going to adjust it. I think that does look okay at the moment So then we can click on publish. So with the sticky header as you can see the links are dark gray Which we've changed before so sometimes we need to edit that So let's go back to the sticky header and for the sticky header wrap. I might just change it to like a white version and Now we can't really see the logo, right? so what we need to do is edit the sticky header logo to the black version of our logo select it and then here we're going to change it to 32 and Hopefully that's going to change. We just need to publish it and probably close it for that to sort of update for us So now that is set in really really nicely So sometimes you do need to play around with it. But if you followed the tutorial then it should be okay So everything looks okay at the moment and we might want to change the font as well Because I think it's sort of like the default font. 


I thought I changed it to monster wrap, but I don't think it's edited So I'm going to go ahead and change it click on the body over here and Then for the body font, let's change it to Montserrat over here and select it and that should be all good. We might need to change the font way to normal, and I think that is looking great So let's change maybe the font size to 15. So a little bit smaller. I think it looks quite nice like that and Then for the body link over here, so this is red right now So I'm gonna click on body link and we're going to change it to the pink color So basically it is very very consistent with our design over here. Same thing for the body link hover So generally what I want to do is probably get the correct color code from before But in this case, I'm just gonna sort of freehand it it's gonna click on it and then we're going to make it a little bit maybe darker so drag it down a little bit and Then when your hover over it, so it's a little bit darker, but it is consistent. So it's not like some random color Where you pick like a blue it helpers like that. That's not good You want to take a little bit darker or a little bit lighter? So I think that's okay and then click on publish and Then we can close it. The next step is to add a 5 icon. So we do need to create that again So let's go over here And what I want to do is maybe create a new file so file and then we're going to create a new design Set a custom dimension 64 by 64 create new design and Then let's search for the elements as you can see there's a lot of different templates which you can use as well, but let's click on elements over here and infinity again So let's drag in that same one drag that in and then we're going to make sure that is nice and large So that it shows up properly thing like That's alright. So obviously you can try and make it a little bit better. So you can also add a background to it So maybe if you want it to edit and change the background then it's gonna look something like this But I sort of just want it to be like that So we're gonna just undo that and then we're going to download it save it transparent and download so we're gonna go back over here Navigate to dashboard navigate to themify ultra themify settings and Then click on the favicon upload choose the favicon open and then sometimes if you can't click on upload doesn't open up what you need to do is click on media and upload it there and Then copy the URL and paste it into here and then click on save and then you should be pretty much good to go So let's go and refresh that page and there you go. So you got your favicon you got your logo Everything looks great. And if anything does not look good Then you can go ahead and customize and edit all the different sections So what I want to show you now is how to ensure that your website shows secure so right now it says not secure and that's not good for search engine purposes and sometimes when people land on your website It doesn't look very trustworthy when you've got not secured. So I'll show you how to secure it with a lock icon so what you need to do is log in to your site count account and I'll also show you guys how to do it. If you're not using site count as well. So click on web sites and Then here you can click on site tools. I think you can also click on add SSL over here as well so click on that and Here you can scroll down and Basically, we have selected the let's encrypt SSL so scroll down over here and then we can select the domain name Over here. Normally you'll only have one and then you can click on activate and Then that's going to take you to the sort of site tools area. Anyway, so we're going to go and click on SSL manager and Select your domain select. Let's encrypt and click on get Ok, so once that is finished installation 


Then we can go back over here. Click on the dashboard and then we can go to plugins and We're going to download a new plug-in. So it's called really simple SSL so really simple SSL and he don't enter and then install now and then click on activate So you should get this message over here so we can go ahead and activate SSL now generally if you're using another host, it should show the same message as well Now if you don't see this message over here, it says like it's error that you don't have an SSL certificate Installed on your domain then what you need to do is contact your web host and they should be able to install it Let's encrypt on your domain for free. So generally it should work. Then. I'm gonna click on go ahead and activate SSL And then once that is done then we might need a log back in so let's try this our website and Then okay, so we don't need to log in Alright, so if you do then log in we're going to turn on the Builder because it says not secure over here So what we want to do is we want to click on save and then we want to close it Alright so that ensures like all the images that we upload before sort of has gone into HTTP So for example, if we sort of move that in there we can click on styling background So the sort of image URLs have changed. So that's what the plugin does click on save and then we can click on close and Then you're pretty much done Okay. So before we finish off this tutorial I do want to show you a couple more things For example how to add in a new page and use the layouts as well as updating your theme so to add a new page we can hover over here on the top and then click on page and Then we can add in a new title So for example, I'm just going to name it service one and then click on publish publish again Click on the title again. Click on the link and then we can turn on the Builder and then over here next to the modules we can click on blocks and Then we can scroll down and we can use one of these blocks to sort of speed up the process of creating our website So, for example, we like this over here. We can click it and drag it and just drop it into our wrote Okay so the reason why I didn't show you guys this earlier is because If you didn't know how to use the Builder then you're gonna find a hard time sort of using the templates because you don't know how to arrange things and don't know how to Design it and things like that so now that you do then this is going to be really easy so we can click into it and then we can change it just like that So really really simple and you can hover over here and then click on styling to change your image and things like that So we can click on done. So they've got some nice sort of templates as well blocks, so for example the FAQ sections which you can use and change the text and then let's say we've done it we can let's Just click on delete for this All right And then we can add in a layout so you can hover over here layouts Load layout and this is sort of like a whole page layout which you can import onto your page So let's say for example this really really cool one here we can click into it and replace layout and we can go into here and We can change the text and change the images. All right, so this is not very very practical But it is really really cool and you can take inspiration from it So we could also go back to layouts over here and if you create your own layout 


You can also save as layout so you can create a new page and then sort of load layout and use your own layout Same thing with the blocks So for each sort of road We can save it as a road and then when we create a new page we can use that same road so this is really going to speed up your process if you're designing websites for your clients or Maybe for yourself as well If you've got like a lot of service pages and things like that so we can click on save over here and we can close it and As you can see the page might appear on the top now if it doesn't appear then what you can do is we can go over here to menus and This is the backend page where you can edit your menu structure as well. So make sure you select your menu so sometimes if you've got two menus you might need to select it from the drop-down and Here we can click on the pages and we can add it to our menu so because we've selected order to add pages Then it automatically will add new pages once you create it so you can create like a drop-down or anything like that You can also click on 'contact on the drop-down here. You can also highlight that link so if we save the menu, then we can go back over here and You can see that is sort of highlighted. So that's really really nice. And then what I want to show is we can also use Animations. So for example, click into that module click on here animation and do an entrance animation So for example, we can set it to fade in Like that and then we can do the second one Another animation to fade in as well. So normally we want to keep this very very simple You don't want to over animate your website. So we're gonna set a delay one second delay click on done Second one over here animation Set this one to fade in as well. And for the delay. It's going to be 1.5 seconds So you've also got all these different types of modules which you can use as well but don't go crazy because adding too many animations is going to make your website slower and If you don't do it sort of nicely. It's gonna look a little bit spammy So I don't really recommend it too much we can click on save and then we can close it And that's gonna look really really nice. So another thing I do want to show you guys Maybe we can go over here and turn on the Builder I think this is a really great way to keep your website consistent and that is to use the copy Styling function. So for example if you want to copy this button over here We can click on the copy Okay. Now if you have let's say you're creating a new button on another page or anything like that when we drop in a new Button, let's say for example Drop that in and pretend. This is a new page and then we put that in right so we can obviously Reconfigure it but that's probably the slow way we can click on done we can hover over here hover over the three dots and paste the styling and that's gonna sort of keep that same styling and then all you need to do is change the text and also the the link Alright so that everything is going to look super consistent with your website design If you do get an update notice in your dashboard area of your WordPress, then what you can do is go to my website so Hoganchua.com/update and then you can download the themify ultra theme if you're following this video and Then you can download it onto your computer. And what you can do is go back to your dashboard and we can go to appearance themes and What we need to do is activate a new theme. So for example this one over here anything so just click on activate and What we need to do is to delete the old theme over here and we can click on delete. 

Okay? So now your website's going to lose sort of everything the content everything, but we can restyle it back so let's go back to our dashboard and Then we're going to re-upload the new theme that you downloaded The update link. Okay. Go back over here add new upload theme choose file and Then just upload the theme that you just downloaded click on open Install and you can also go back over here now If you do want to backup your website, you can watch this video over here but normally all the settings will remain and the site will be back after we activate the theme that we are installing right now and then click on activate and then we can go back to our website and Everything should be all good. Now you can also get automatic updates as well as support as well So if you visit the link over here You can get access to the theme of our membership where you can get a license key and that way you can automatically update Without sort of deleting the theme and reinstalling it again and you also get access to the support forum So if you have any questions and you have any issues, then you can ask the support forum And basically they can help you out So this is really really useful if you're creating websites for clients Or you are serious about creating website and you can also use the discount code Hogan and that's going to save you 30% off Okay, so if you have any issues or any problems? Make sure you drop it in the comment section down below and I'll try and get back to you as soon as possible Then we can go back over here on our website and that is pretty much it for our website so the last thing that we can do is we can log out of our page so we can click on logout and then we can visit our home page and This is the website that we created and thank you guys so much for following this tutorial.