How to Make a Drag & Drop WordPress Website 2019 - BEGINNERS!

After Watching Video , Get the Best Wordpress Themes in the World  ( Download Now )

hey guys my name is Hogan and basically , in this tutorial I'll be showing you how , to create this amazingWordPress website , using a drag-and-drop builder so , basically what that means for you is , you'll be able to easily recreate the , layouts of popular websites such as , Apple Tesla Google virtually any website , that you see online without any code so , anyone can do it , this is in A's minute tutorial because , I wanted to show you everything , step-by-step and you know if I make a W , minute tutorial you're not gonna be able , to create a good looking website that , people actually interested Ina case and , if you create website like this then , people are just gonna click off your , website and never going to comeback and , basically there's no point of having a , website in the first place OK so this is , why it'stow hours Long'm gonna show , you everything step by step but within a , few hours you'll have your own website , up and running so I'll be going through , things such as getting your website , online showing you where to get the best , free images showing you all the tools , that used to build the website most of , them will be free'll also show you how , to use the Builder itself so you don't , get overwhelmed with you know building , the website yourself I'll show you how , to ensure that you design are ally nice , website even if you'vie never designed , anything before in your life , and Think that is probably the most , important Patti'm also going to show , you some really cool stuff Ina second , OK so this is perfect for people who are , building the first website this is , perfect for people who have installed , Word Press but you just don'TKO where , to begin it's also good for freelancers , small business owners or even if you , just want to make a website for fun then , this is just awesome so basically I'm , going to give you a website tour to show , you guys what we're gonna be building , today all right so basically in the , website tutorial I'll be showing you how , to add in text and images and things , like that but I really wanted to make it , special , so I'm gonna show you how to create this , typewriter effect not many websites have , it but it's gonna really make you stand , out from , competition scrolling down here I'm , gonna show how to add this featured , section as well as showing you how to , add in beautiful gradients which really , make your website fresh and just modern , and it'just really cool and again , I'll also show you some really cool , stuff such as this particle effect it , has a nice little touch it's really easy , to do , I'll by I'll show you anyway and next , I'll be showing you how to add in the , blog section the blog section is , actually really important because you're , able to create free content that people , are actively searching for so you'll be , attracting like highly targeted traffic , to your website then you'll be able to , sell whatever you want to sell to the ma , lot of people are focusing on social , media Facebook ads and things like that , bu tin reality you know if you're , scrolling through Facebook you want to , look at your friends you know wedding , pictures or what they did on the weekend , you don'really want to click on an ad , but with blogging people are actually , looking for that information so they're , in the right mindset so that's , definitely a really important thing for , your website now the next thing'll , show you how to do is adding in this , drill parallax effect so as you can see , that's super cool , not many websites have it but it's , really gonna make you stand out and you , can tell an interesting story about your , product and service with the dual , parallax effect then I'll be showing you , how to add in videos and galleries and , all that stuff now I'll show you how to , add in the footer section with your , social media and after that I'll show , you how to create a simple about page by , importing the layouts so I'm gonna show , you some really cool features of this , builder this is me and basically I'll be , showing you how to do all that alright , and if we click on the services then I'm , also going to show you how to importer , created layout sand also pare created , rows so this is gonna really speedup , the process of website building but I , did't want to just make a you know , import a layout thing because most of , the time when people import stuff they , don'TKO how to actually arrange it , properly and you're just gonna end up , procrastinating and never getting your , website done so I'll be showing you that , as well but after I show you how to , actually , use the important features then I'll , show you how to add a blog Page'll , show you how to configure this widget , section where you can display virtually , anything that you want and of course , I'll show you how to make a contact page , which includes a contact form so people , can submit message and also a map so , some of you might be small businesses , and you want to display where you're , located and stuff like that this website , is also mobile responsive so it fits on , any device on mobile tablet you know on , computer or anything like that and yeah , that's pretty mu chit what I do want to , point out is if you have any troubles , make sure to drop a comment down below , try to reply to all of them and if you , have something more you know personal , you can also send mean email at support , at Hogan shore comm and hopefully I can , help you guys out all right without much , further ado I'gonna start with the , overview of what we actually need to get , started so I'm just gonna start with the , overview of what we need to create our , website so the first thing that you'll , need is a domain name and basically a , domain name is your web address so for , example Google's domain name is , google.com your one will just be your , name or your business name com , the second thing that you'll need is a , hosting account so basically hosting is , where you gonna store your website files , such as the image sand also the text or , whatever file you want to store in it so , people can access that W/all around , the world now the third thing that , you'll nee dis to install Wardress , Wardresses a content management system , and it's used by around W percent of , the websites on the web I use it for my , website and it basically allows you to , create a website without needing to know , how to code and then we're gonna install , a theme so basically a theme is the , drag-and-drop builder and also the theme , will allow us to customize our website , however we want and the fourth thing is , then we're going to create our website , so the domain name is gonna cost around , W dollars every year but I have a , coupon code which is going to , you cost you $5.W a year and then for , your hosting that's normally around$W , a month but with the coupon code it will , be around$8 or so Theodore's is , actually a free thing that you can , actually download and also the theme is , free but you do have the option to get , support for a fee and then the creation , of the website is free as well so to get , started with a website it's not gonna , cost you thousands or even few hundred , dollars it's only going to cost you $W , to create but I really thin kit's worth , it because you could be spending that on , something else so what we're gonna do , now is we're gonna get the domain name , and hosting at the same place so open up , your web browse rand then type in , Castigators host:3 , are.com and then click on enter , sophisticate is where I get my domain , names from and also where I host my , websites so I'vie been with them for , about seven or eight years now and , they'vie been really good a really good , thing about them is they have the live , chat support and they also have a Day , money-back guarantee if you have any , problem sand they also have an up time , guarantee as well so with a lot of free , hosting companies sometimes if you host , a website there it might not be up all , the time because there's just too many , free accounts and then they don't , allocate enough resources to your , website and if a lot of people go to , your website then it's gonna crash your , website and you definitely don't want , that for your business so it'serially , important to get a good paid hosting for , your websites so what I want you to do , is click on web hosting here as you can , see there's a few different options but , for beginners web hosting is what we , need to get started with so basically , there'three different plans the , business plan the baby plan and also the , helpline so the business plan is , probably a bit too much for what you , need at the moment and it's a little bit , more expensive so the difference between , the hatch ling and the baby is that the , baby has unlimited domains so what that , basically means is , you're able to host your domain name , your mom's domain name you know your , friend's domain name and maybe if you , have a client then you can have your , clients domain name all hosted in one , place okay for the same price so with , the hashing plan you're only able to , host one domain so for most people I'm , you're gonna pick the single domain , because you most likely going to start , with one website and if you actually , need to host unlimited domains then you , can upgrade later on or you might have , some clients and you might go for the , baby plans straight away but'm just , gonna click on the hatch ling plan and , then click on buy now so if you have not , got a domain name yet , then you'll need to enter ado main name , here if you're the owner domain then you , need to click here so basically you , might have bought a domain frigidity , or Misshapen you'll need to enter , the domain name here and then follow , along with the tutorial but if you want , a new domain name then click here on the , ta band then you'll need to you know , figure out what you want to name your , website okay so for example we might go , create your dream website and then click , on the outside here and basically that , will see if that is available if it's , got a green tick then that means it's , available and you can select that if it , goes red that means someone else has , already registered that domain name and , you might need to come up with a , different variation of that domain name , so I normally go for the dot-com because , that is just the most common and what , people normally type in but you might go , fora org or Eco it really depend son , you so if you scroll down here I'vie got , the domain privacy protection and , basically what that mean sis if we , unchecked that then if you actually select , that then it will actually show up as , Host gator calm or something like that so , it's gonna hide your name your address , your email address and things like that , so if you're a brick-and-mortar business , and you're displaying your email and , your address and everything on your , website anyway then you probably don't , need it but if you want to keep , anonymous then would recommend you , select the domain , privacy'm just gonna keep it unchecked , because this is just an example but if , you do want to get it then I recommend , you to get it now because you can't , really add it on later on as that , information will be released into the , Who is database okay so scroll down here , and if we look at the billing cycle , click on that and basically you can , choose months to month or you can choose , a longer term normally with the longer , term you're going to get a bigger , discount so if you go for longer you're , gonna save alto more money but it , really depend son you know your , preferences and what you're comfortable , with so I'just gonna go months a month , for this example and here you just need , to enter in a username and you just , enter a security pin if you scroll down , here you'll need to enter in your , billing information so make sure you got , your right email here and also you need , to fill out this section here with your , credit card details or PayPal if you're , paying by your PayPal and scroll down , here once you filled that in now we'vie , got the additional services so you want , tench these because you can add , these later on and if you actually want , to backup your website I actually have a , free tutorial on showing you how to back , it up for free and you can also create a , professional email address using your , domain name in the panel itself so I'll , make video on that as well and if you , scroll down here then you'll need to , enter in a coupon code so you can enter , in bonus code and then click on validate , and that will basically give you a , bigger discount so that is my coupon , code and if you use that then I'gonna , get a small Commission which helps me , create these free tutorials for you guys , so if we scroll down here and we just , check if everything's correct so I'vie , got ado main name we'vie got the , helpline for one month month and , the total is about SO if you have , got the domain privacy sometime sit , might actually if you scroll backup , sometimes you might actually add this , back on but it'snot so it's alright so , scroll down here and then what you need , to do is just click Ono'vie read and , agreed tithe terms , and then you'll need to click on the , checkout now so that is gonna check out , and then you'll either need to pay by , PayPal or you get a congratulation page , I'vie already got an account with , Host gator so Id on't want to really , create another one now what we need to , do is go to our email and this is where , we actually log into the caplet , install Word Press , so Host gator is going to send you an , email with your account information , which basically looks something like , this so what you'll need to do is click , on the control panel URL and basically , you'll need to copy over your username , and copy over your password so you can , actually log into your control panel so , once you have done that click on login , OK so to actually install Word Press you , can click on build a new Word Press , website or you can scroll down to the , software section and click on quick , install so sometimes the layout of this , section might change but try to look for , quick install and then you should be OK , so we're gonna click on build a new , Word Press website and that is gonna take , us to this section here where we can , installWordPress on our website so , click on the domain so select a domain , normally for most of you guys will just , have one so I'gonna select this one , here leave this part empty click on next , so for the blog title it might be a , business name or your name so for , example Might just type in logo we can , change that any time for the admin user , so this is will be your login username , first name last name and also valid , email address once that is done make , sure that email is right click inhere , so accept the Terms of Service and then , click on install so Word Press is going , to install on to your new domain okay so , that's taken few seconds and it should , say installation is complete so once , that is complete then you'll have the , installation details here so what I , generally like to do first before I do , anything is copy the password to my , clipboard first alright so once you have , done that , you know your username is Hogan sure I , mean you know whatever username that , you'vie put in and then you can click on , log in so once you have click on log in , then this will take you to Theodore's , login page so sometimes if you'vie just , bought your domain and hosting it might , not have propagated yet and basically , what that means is Host gator Hans't set , that upon the back end yet and sometimes , it may take you know fifteen or twenty , minutes , worst case scenario probably a few hours , if it still Hans't started working yet , and then you can contact the Host gator , live chat support alright spout in your , username and then paste in the password , that you have just copied and then you , can click on login , alright so before Even talk about the , dashboard area what I want you to do is , make sure to bookmark this page so this , is your login URL so for example if you , copy that UR Land let's open a new , window and if you actually paste in that , URL then that'seagoing to take you to the , login page before okay so here all you , need to type in is WP dash admin and , that will take you to this page alright , so do that first alright so this is the , Word Press dashboard it's got a lot of , stuff but we can pretty much clear a lot , of the things so let's just clear that , for no wand close that dismiss this part , I'going to show you how to set up your , Word Press so we're gonna close all these , close all these just like that alright , so it looks a little bit less , overwhelming now so what we're gonna do , first is we're going to change our , passwords so if you hover over users , here you can click on all users now , basically this section here you can , actually add in a new user so for , example if you have a you know a writer , or something for your blog then you can , create a new user for them and they can , log in and they can you know add in blog , post or edit the page and things like , that so this is your user , we're gonna click on edit and we're , going to change the password so scroll , down to the very bottom to account , management new password click on , generate password and I'gonna click on , hide and then I'm gonna set in a new , password , okay so confirm use of the weak password , hopefully you can come up with something , stronger all right and then click on , update profile I'm just gonna close , that's and I'gonna update that alright , so next what we're gonna do is we're , going to change hyperlink structure , so if you hove rover settings click on , permalinksalright so what this , basically mean sis we want to change , this to post name so whenever you're , adding in a blog post or you're adding a , new page it will come wit ha title so , you want that title to actually show up , on the URL OK so you don't want , something like equals P equals one to , three people don't know what that page , is talking about and it's just not good , for search engine sand your Google , rankings okay so you want to make sure , to change that to post name and then , click on Save Changes after that then , you can click on plugins so plugins are , basically like applications that enhance , the functionality of wardress , website so on your mobile phone , you'vie got apps such as social media , dating apps gaming apps productivity and , everything like that plugins are , basically the same thing but for your , WordPresswebsite , so it comes pare-installed with some , stuff alright so what I like to do is , just to deactivate everything to get , everything to get everyone on the same , page alright so we don't really need all , these so what I'm gonna do actually is , just select it again and then delete it , click on apply and OK once that is , done what we're gonna do next is install , the theme and install the required , plugins for the tutorial so to , install the theme what we need to do is , hover over period , and then click on themes so this is the , default theme which is currently , installed onto Word Press so if you , actually hover over the icon her eat the , house icon and then right-click to visit , the website then you should see your , website looks something like this , so this is a default Word Press theme it , dozen't really have muchcustomizability , so you can't really customize it and , don'thieve that drag-and-drop builder so , what we're gonna do is go back to our , website here and then click on add new , so there are bunch of free themes here , but the theme that I use and theme that , I highly highly recommend is the ultra , theme by them because it's got the , drag-and-drop builder and you can pretty , much create any website that you want so , we're gonna click on upload theme okay , so once you have done that then weened , to download the theme so if you look , below this video in the description you , might need to click on show more you , need to download the theme so click on , that and download that to your computer , and then you'll need to download the , images and also the plugins as well onto , the computer so you can follow along , with the tutorial so after when you'vie , done that then you should get two files , basically so one of them is called , them ultra zip and the other one will , be images and plugins so sometimes , Safari might actually automatically , unzip it so it might look like a folder , like this okay so you don'twat this to , be in folder what you want to do is , right-click and compress that back into , the doc zip file okay because we want to , upload the dot zip now for the images , and plugins we actually want to unzip it , so if you're using Mac you can just , double click it on Windows I'm not sure , you might need to download some software , for that to unzip'm not W%sure all , right so if you click into the folder , then we'vie got all the image sin there , and we'vie also got the required plugin , to follow along with the tutorial so if , we go back to our website now and we , need to actually click on choose file , and then we need to selectmen ultra , dolls if so make sure this is our zip , an open install now okay so it'Sgt the , progress baron the bottom left so if , you actually go to Hogan shoe ac com so , this is my website and I'vie also got a , FAQ desk so if you have any questions , sometimes I might have put the answer , onto my FAQ page so if you click on the , FAQ section then these are the , frequently asked question snow basically , if you go to theme installation okay so , if you have any troubles you might need , to refer to here so for example if we , click on here sometimes they might say , the file size has exceeded for example , the theme might be too big because your , host has actually limited the amount , that you can actually upload onto your , WordPresswebsite you either need to , actually contact your host to increase , the upload limit or you can go to my FAQ , page and click on the upload file , accedes and basically follow this video , to upload the theme via grapnel , section alright so for most of you guys , it should be all good and ready Togo , then you need to click on the activate , and that will activate the new theme , okay that's going to pop up with skins , and demos we don't want any of that so , we're gonna click on the X icon here and , basically if we actually refresh our , website then you should see the , appearance has changed okay so what , we're gonna do now is we're going to go , back to our dashboard area and we're , gonna install the plugins so click on , plugin sand then click on add new and , then click on upload plug-in choose file , and then we need to click on the images , and plugins folder so we're gonna look , for the builder typewriter zip okay so , look for that file click on open and , then click on install now and then , activate that plugin now the next , plug-in that we're going to install is , the contact form plug-in , we're going to click on add new and then , we're going to search for plugins so , we're gonna type in contacts form and , then that should load up within few , second sand we want to install the , contact form 7 batik and then , Install No wand then click on activate , OK so basically if you want to add you , know different plugins for example you , might want to add you know some booking , plugins for your website to accept , appointment sand stuff like that you can , try and search up for example booking , and then there are arrange of free and , paid plugins here most of them are , fermium so basically it'll be free but , if you want some more Pro features then , you have to pay or you can actually go , to Google and then you can type in best , booking plug-ins for Depressant , normally they'll have like website , where it ranks them and then you can , checkout you know which one suits you , and whatnot alright so that is pretty , much it now what we're going to do is , add in your pages so we're going to , cove rover pages and then you're gonna , click on all pages so we're going to do , first is we're going to delete the , sample page so we're going to trash that , and then we're also going to go to the , trashcan here and then delete that , permanently so to add a new page all , we need to do is to click on add new the , first page that we're going to be adding , is the home page so we just enter in a , title here called home and then click on , publish it's going to click on that , again make sure that it says that it has , been published here and then click on , add new again the next page we're gonna , add is a bounce and then I'm gonna click , on publish do it again make sure it says , that it has been published , otherwise it won't publish properly , so we're gonna add in the services blog , and contact form really quickly , so we're gonna do services you can add , pretty much any page or however many , pages that you need later on and you , again blog page publish and then click , on add new and we're gonna add in a , contact page okay Soto check all your , pages I added and properly click on all , pages again on the side and he should , have home about blog contact and , services all right so let's view our , website no wand you should see the pages , listed up here what we're gonna do is , sort of arrange the menu so what we need , to do is click on customize and you'll , be directed tithe themifyoptions so we , want to click on the back icon here the , first thing that we want to do is click , on the home page settings and then you , want to select a static page so as you , can see the pages have disappeared it's , gone into the mobile menu mode so what , you can actually do is if you'Reno Mac , then click on command and then - and , it'll basically zoom out of your screen , if you're on Windows then you can click , on the Windows key and then click on - , and that will zoom out and plus to zoom , in again so what we want to do is we , want to make sure the home page here is , set to the actual just the domain URL so , for the homepage select home and then , we want to click on publish OK so what , that basically means is let's just close , that for now now if we actually click on , the home page then what that does is , that will actually make that home page , set to the actual just default domain , name itself OK so if you click on about , then that will have , up the rebut if you click on home then , outdoes't have that extra extension , there okay so what I'm going to do is , arrange the menu properly so let's click , back to customize click on back here , click on menus and then we're going to , create new menu so click on that the , menu name we're going to set in top Navy , for top navigation for the menu location , you want to set main navigation which is , the top up here if you select footer , navigation it will be on the bottom , click on next alright so we'vie set that , in now we want to add in the pages so , click on add items we want to add in the , about page services blog and contacts so , we're not going to add in the home page , the reason for that is because in most , cases when people click on the logo it , will automatically direct them to the , home page anyway so it's not really , required all right so to rearrange them , all you really need to do is to click on , it and then drag it and sort of you know , put it below whatever and it will , rearrange as you can see thereof so if , you want actually create airdrop down , menu what that means is if I actually , drag the services sort of put it under , the bouts which is I think called , indenting like that , then when you actually hover over the , about page then it'll drop down your , services alright so you can also do that , for the blog as well so for example you , can put it under services again and then , what will hap penis if you hover about , hovering services and then blog will pop , up so let's just put that back and then , click on publish and then we're gonna , close the customize and the next part , I'going to show you the them , settings rearranging the default layouts , of the pages and adding in your social , media for the bottom section here , alright let's go back to our dashboard , and then we want to edit the them , settings so scroll down on the left here , click on them settings so this is , basically where you edit all your theme , settings if we click on the general tab , this is the fab icon and basically what , the fab icon is is the logo for your , tabs all right so to upload a fave icon , what you want to do is click on upload , and basically you can upload falcon , which is in the images folder which you , should have downloaded earlier before , and the size of the falcons W by W , pixel sand it should be a PNG file which , basically mean sit's transparent file so , click on open and that will basically , upload here so if you want to get a , falconer a logo as well then what I , recommend you to go to is fiber comm so , this is sort of like freelancing , website where you can get logos and you , know graphics and all sorts of things , starting from$5 so for example if you , click on I mean type in logo design and , then click on search scroll down and , there are hundreds of people who design , logos lot of them are starting from $5 , some of them a little bit more expensive , so let's click into one of those ones , and you'll need to just log in with your , Google or Facebook account or you need , to sign up all right so I'll leave the , link down in the description you can get , LOGO and then you can also ask for a , facecloth falcons probably the same , as your logo but without the text if we , scroll down here to the very bottom to , Google Fonts you want to click on show , all google fonts so that basically shows , more fonts you can choose from click on , save and then you want to click on the , default layouts tab and what you want to , do is we want to actually open our , website up in another window so hover , over the house icon and then right-click , and open in a new tab I'm just gonna , close their , and this is our website now okay so if , we scroll down here this is a page now , if you click on here you will need to , scroll down to the very bottom to the , default page layout section here so for , the page sidebar option we want to , select no sidebar so for example this is , the sidebar we want to select no sidebar , all right and you want to also hide the , title on all the pages so select ye sand , you also want to disable all the , comment sand then click on save , so once that is saved then you can , refresh that page and you should see the , title and also the sidebar disappear so , basically you got a blank canvas to , actually design your website on right so , let's clear back here and then click on , theme settings so scroll back to the top , section scroll down to theme appearance , so here we can change the header design , and the footer design and things like , that so for the header design currently , it's this default one here it's quite , large the area you don't want this huge , area here you want to make it sort of , like a thin and minimal header because , then people don't have to scroll down to , your actual content of your website so , click back here and the one that I like , is the header top bar you might go for , the header horizontal it's pretty , similar this one is just a thinner , design so I'm gonna select that one and , then I'm gonna scroll down here and what , Want to do is I want to remove this , icon here this is the RSS and also the , search icon you might want to keep that , and also want to remove the site tagline , so go back here and I'm gonna exclude , the site tagline exclude search exclude , RSS scroll down to the footer design so , here is your footer section you can also , choose how you want your footer to look , so I want to remove the site logo in the , footer and that is pretty much it so I'm , gonna leave everything else as default , and then what we're gonna do is scroll , down to here and then I want to hide , powered by , Word Press and them theme sand things , like that , so that one is the footer text - so I , want to click on to hide that and then , we're gonna click on save alright if we , refresh the page then you should see the , header design will change to the simple , one and also the powered by Word Press , and them themes will be gone so that , is looking great now what we're gonna do , is we're gonna add in the social links , so we're gonna click on the social links , here I'm just gonna quickly open up all , my social URLs okay so what weened to , do is paste in our Twitter links so what , we need to do is click on here and it's , copied our URL and then just paste it , into here same with the Facebook page so , make sure you follow my page that's , where I post updates so go back here , paste that into there that's my URL and , scroll down so for example if you don't , have Google+ you can leave that empty , and it won't show up so for YouTube you , want to paste in your YouTube channel , URL copy that and then paste that into , preponderant I don't have Pinter est , but let'sf or example you have Instagram , and as you can see is nowhere to be seen , click on add link type in a title so for , example Instagram for your link we're , gonna go and copy the Instagram profile , URL and then paste into here make sure , you select an icon so insert icon and , then we're going to type in we're gonna , search for the Instagram icon so type in , in stop okay and then click on Instagram , all right and then click on save so that , has basically saved in oil links but we , want Otto display in the footer section , so to do that we need to actually go to , hove rover appearance and then click on , widgets , so widgets are basically sort of , different sections on your website and , you can add all these widgets into all , these different sections where you can , put it in alright so for example what , we're going to do is we're going to , for the them social links widget here , okay so click on it and drag it up like , that and we're gonna put it into the , footer social widget area alright so , because these are external links they're , linking to an external link for example , Twitter comm what I normally do ISO , open link in a new window and for the , icon size I'gonna keep it medium and , then save so if we refresh our page then , those social links are gonna show up in , the footer social widget section which , is down here okay so if you want to put , it into for example the header area then , you might need to click on it and drag , it into the social widget section here , okay I don'really recommend that , because think that you know when , people are on your website you're , supposed to you know sell whatever you , want to sell or you know collect the , emails rather than direct them to your , social profiles so what we're gonna do , next is we're going to be styling our , navigation menu and also the footer area , adding in the logos and things like that , alright so again here and before I , actually show you how to build the , website want to give you some design , tips that you can actually use to ensure , a professional finish of your website , and to make sure that it looks really , good so in my previous tutorials maybe , two three years ago I did't really go , through this with you guys and I think , the result that people gateways't very , good so like building website is one , thing but designing is another thing so , think of website sort of like a house , you don't really design the house and , build it at the same time you sort of , have the architect to design it first , and then you pas sit tithe developer , who actually builds that house so I know , that have the design ready for you , guy sand you can follow exactly step by , step but you'll probably be changing the , colors and the layouts the fonts and , everything to sort of suit your business , so like with these tips you can actually , use them and you'll make better , decisions quicker so you won't like , procrastinate sometimes you might be , like oh I don't know which color to , choose which want to use and then you , choose a random one and it sort of ends , up a mess , so I'm not really professional so if , you're professional then you might be , able to skip this video or skip this , section but I think it'serially good for , beginners so there's no right and wrong , by the way okay so you can tweak it , however you like , these are just W tips which I think , will really help so the first thing is , to just choose one main color so you , don't need to use too many colors like , you can just use neutral colors or , shades for your website just like Apple , does and have really good images and you , can have are ally good website okay but , what you can do is you can go to a color , meanings website and pick a color that , really represents your business so for , example I'm choosing the dark gray or , you could say almost black because I'm , not building a specific businesslike , for example a law firm might go with , like navy blue or dark blue but since , I'm building like a demo website which , is not specific want to appear simple , clean and modern that's why I went with , the like neutral shade kind of look like , Apple , so I can go to a website called flat , colors calm and choose a color put the , link up in this screen so the second tip , is to choose an accent color so the , accent color is the color that you can , use to bring attention to certain areas , for example buttons call-to-action areas , and anywhere that you want to direct , people'see or attention okay so I , picked one for that one as well , the one that I picked was the pink or , fuchsia color because I thin kit really , gives like a fresh vibe and it really , stands out tip number three is to use a , lot of neutral colors or shade son your , website so if you don't know which color , or which main color or should Use this , accent color here or there just stick , with like a light gray Ora dark grey , like for example for your icons for , example if you want to separate , different sections you can use like a , light gray background to separate like , different section son your website and , it'll look really good so a really good , example to check out is 0 com they have , a really nicely laid out homepage that , you can actually take you know a lot of , inspiration from tip number is to use , shades of the main color or the accent , color for your website so for example , if you're like using abut ton and that , button ISS pink color you don'twat , that pink color once you hover over it , to change the completely different color , you can use shades of that main color to , give that nice hover effect and it will , keep things really consistent and also , sort of like sometimes you need to , separate different elements of your , website you can't use blue and then , maybe the exact same blue again if you , choose maybe lighter shade of that , blue Ora darker shade it'll still match , really well and keep everything , consistent it's sort of like if you're , wearing maybe like white t-shirt and , blue jeans with the belt you might go , with like a navy blue and it'll still , look really nice tip number five is to , use neutral colors for your header and , footer sections the reason why I , recommend that is because probably most , people don't have professional images , done and if you choose like a colored , header for example like a blue you need , to match it really well with the image , below that and if you're finding images , online it's gonna take longer to find , images which is suitable and matches , really well like a lot of websites , actually use like light background , header or a dark background header and , for the footer section they use like a , light grey they keep it nice and subtle , and everything matches really well and , it'just really easy to match so think , of iotas wearing like a white t-shirt , you can wear any colored jeans with it , and it'll still look really nice tip , number six is to just use one font so , you don't need many fonts for your , website to look nice for example Apple , just uses one and you can also use a , Chrome extension called what font to , actually inspect what font people , actually using for their websites so , there's basically two different , typefaces one is called the syrup , typeface the other one is called the , sans serif typeface the difference is , the serif typeface as you can see with , the characters they have like edges on , the ends of the characters and also , these strokes are thick and thin with , the sans serif typeface the edges are , plain and also the strokes are even with , so the sans serif typeface appears alto , more simple rand modern and most , websites use it the serif typeface it , appears more elegance and , gives a more traditional handcrafted , feel to it so it depends on what , business you're in but most websites use , the sans-serif typeface for example , Google Tesla umber and even on your your , phone and also unlike your computer the , typeface they use it'sans-serif so , what I recommend is probably use the , sans serif and I'll put up the most , recommended google fonts that you can , actually start off using and just choose , one of them tip number seven is to take , direct inspiration from other websites , that you really like so you can open up , a few tabs that you really like and copy , the layout exactly you can just change , the images change the text and then , tweak Otto what you like later because , that ensures like a really good layout , lot of people just sort of like you know , build it as they go and dozen'look , very good tip number eight is to use the , body font size between to pixels , it depends on the font the type of fonts , so you might need to adjust it slightly , but don't have a too big or too small , and I think that size is perfect but , with your headlines and sub headlines , that can be any size but sort of have , like hierarchy between them like the , headline should be bigger the sub , headline should be a little bit smaller , and then you have your body text okay , your body text most likely would't be , bold either if it's like bold for a huge , paragraph then it'gonna look kind of , weirdos you can both certain areas of , course to highlight certain things but , make sure to just keep it really , consistent tip number nine is the line , length so for example you don'twat , like paragraphs going from one side of , the screen to the other side because , people are gonna be reading from this , side to that side and it's gonna be , harder to read so to break it down to , somewhere in between there the website , is sort of like in landscape mode you , want to keep it between to about W , character sin in width and that provides , a really good reading experience tip , number is to make sure you separate , your content so you can separate content , with just white space and that makes , things really appear simple you can also , use divider lines you can also use , background colors like neutral colors , and you can also use image sand icons to , separate different sections of your , website you sort of want to keep , everything like bite-sized chunks so , people can easily , stand through your website an dread it , you don't want to have huge blocks of , text that just go down and across okay , you want to break things up and to make , it easily readable and the last tip , which is tip number W we're going over , but you can use gradients so use , gradients to put on top of images to , make the text pop out more because you , want to make sure everything is readable , and you can also use gradients if you , might find an image that you really like , you can put a gradient color on top of , it to keep your color scheme in sync to , make sure everything on your website is , nice and consistent with that color , scheme you can drop a gradient color on , top of it okay so that is pretty much it , for the tips'm gonna jump back into , the screen and continue building the , website but you can also download the , PDF cheat sheet which can print out as , well alright so we're going to customize , the header section which is up here and , the footer section to do that you can , click on the customize and that will , automatically take you to impeach , options if you click on back then this , is where it takes you so click on theme , of our option sand click on Advanced , Options so it'gonna give you more , options so you can edit all sorts of , areas on your website alright so once , that is loaded up then for example this , is your header section footer so what , we're gonna do is click on header and , the background here we're gonna change , that so we're gonna click on the header , wrap and as I said before I recommend , sticking to neutral colors for your , header and footer sections because it's , easier to match with any image , especially if you're not taking your own , images because it's gonna take a while , to find images that match if you , actually put in maybe if your main color , was blue alright so we're gonna do here , is I'm gonna set in the color code and , it's gonna be six twos okay so like a , dark gray you can also choose white , which is basically six's and I'll put , the hex code up so you can follow along , if you actually want to choose a light , header , um yeah okay so once that is done then , you need to scroll down here and here , you can actually edit the header font , colors and header link colors here so , every link up here is a header link but , this is the logo and here is actually , also the main navigation links as well , so we're not going to edit this section , here right now so I'm gonna minimize , that then the next section that we're , gonna edit is the logo so click on site , logo and tagline site logo so here you , can set in the logo title and you can , also set in the size as well as the font , so I'm gonna set in Robots that is my , main font that'm gonna be using for , this entire tutorial on this demo , website so if you set inhibitor as you , can see the changes then you can set in , the front way it should be bold alright , and we're gonna set in the color to be , white just like that alright so if you , don't have logo then just putting in a , site title and choose a nice font which , is easily readable if you do have a logo , image you can click on logo image and , for example go to fiber which is fie vie , double ac com and then just search our , logo design you can have a look here , browse through and you can basically , filter it I think some are five dollars , some are Little bit expensive as you , can see but if you click onto that then , get LOGO done you don'thieve to design , your own because this is gonna take a , longtime and basically I have the link , down below as well so if you do have a , logo click on the plus icon and click on , upload files select files and I have , also included the logo that you can , actually upload as a demo in the images , and plugins folder which you should have , downloaded earlier so this is the one , that you have here and as you can see , it's a PNG file so that mean sit's , transparent so it's pixels in width , so across and W in height you can , basically use sort of any size similar , to that because you can actually scale , it down using the customizes I'm , gonna click on open and then insert the , image and , as you can see it pop sup like that I'm , only going to edit the height so I'm , going to change the height to and it , will basically resize it proportionately , so leave this one blank just change that , to and that fits in really well next , click on site logo position so as you , can see there's a little bit more space , up here so we want to move it up a , little bit click on relative and then , you can click on maybe pixels on the , bottom and as you can see it moves it up , just like that click on publish to save , and then we can actually just close that , section and let's edit this section here , so this section is the main navigation , so these are all links so click on menu , link and we're going to set the color to , white if your background is white then , you'll need to set it to 2 to to s , which I'll put up and then scroll down , menu link hover as you can see it's red , right now what we want to change it to , is a little bit of light grey so it , gives a nice subtle effect so for , example when you're ho bro for apples , links it gives a nice grey subtle effect , so you know that it's a link we're gonna , go back here and what I like to do , generally ISO like to go to a website , called to comm and then click on , enters color now the color that I'vie , set in for the link is ff ff I think , that's Little bit too much okay click , on enter color and then I like to choose , one two three four five shades darker go , back here and then make sure to not put , it into the background color because , that says the background you want to set , it into color paste that in there so , let's say when you're hovering over that , it give sit like a really subtle gray , effect so people know it's a link all , right and the menu active link what that , basically means is if you actually click , on the about page the active link color , is red right now so what I want to , change it to is a sort of a darker gray , so a menu active link let's go back to 0 , to W , I'm not gonna set it to this color code , here because it's Little bit too light , you can't really tell so I'm gonna go , maybe five four shades darker click on , that and then put it into there okay six , A's and then that is the active link , color all right so when we hove rover , the active link hover color that's gonna , be I'gonna set that to white just like , that alright and if you actually have a , drop-down menu then you can set in the , drop-down container color the links and , the hover right here alright so click on , publish now we're gonna do is set in the , mobile menu so click on the styling , robot icon down here and click on let's , - that for a second close all that's , okay so click on mobile menu so this is , the menu icon I believe and we're gonna , change the color to white all right so , it'smote visible then what Want to , change is maybe the mobile menu link , maybe to two to two something like , that and for the mobile menu link hover , I'm pretty sure you can't really hover , over on mobile but I might set that in , anyway so I'm gonna set that to be maybe , we're gonna put it inhere enter your , color just like that's and then we're , gonna go five shade slighter so one two , three four five and copy that SD , clipboard paste that into here so let's , say when they hover over that then it , gives us an ice subtle effect okay so , that is pretty much done now we're gonna , close that and we're gonna edit the , footer section alright so click on , footer here and then click on foot a , wrap what we're gonna do is change it to , a light gray just like apples footer , which looks really nice if you look at , up works footer , also a neutral color if we go back here , there I'm gonna change it to F F's as , you can see dozen't change but this is , basically the color that you have , changed it to alright so don'worry , just change it to that for now and then , we can change the footer font color so , anything here which is not a link that , is the color that we're going to change , so click on footer font we're going to , change that to two to two just like that , and minimize that one and then go to the , footer link so this is the footer link , same with the social icons they're all , links so also going to change that to , the dark grey as well and also going to , change the hover over color so the , footer link hove rand we're gonna change , that to maybe one two three four five , shades paste that into there and let's , say when you hover over that it's like a , really subtle great effect as well , alright sou think that is pretty much , it we're going to publish now now before , we actually go anywhere we're gonna , actually click on the body okay so this , changes the body fonts but it actually , also changes the font for the header , sections and the footer sections so , we're gonna click on body fonts so the , font that'm going to be using is , Robots it's as ans-serif typeface , which is a nice modern clean typeface as , you can see so what we can do now is , click on the desktop and as you can see , it's changed at and it looks really nice , but a little bit too thin so we're going , to change the font weight to normal and , I think that looks pretty good to me , and you're going to basically set in , whatever font that you have chosen , basically just choose one font that's , what Ire commend if you're a beginner , and you can also use the what fonts , Google Chrome extension to check out , what fonts you know for example Apple is , actually using so this is the what font , thing and then you can browse over it , and see what font they actually using if , you want something similar , what you can do is go to google and type , in similar google fonts to SF Pro , display and then Google will tell you , and then you can try and choose one from , here but generally Robot , that'show open sans those ones are , really good for you to start of fusing , so publish and close think we're ready , to start building the homepage so we're , going to be building out the homepage , this is the longer section but also the , most important part of the tutorial , we're going to be working with images , and text and showing you how to design , professional-looking website while , learning the important features of the , Builder so the first thing we need to do , is get a image so if you don't have , images which are done by professional , which I highly recommend because that , way all the images look the same like , for example the lighting and the you , know the the tone of the website looks , the same and you can also get more , unique images images that you don't find , on the web but the next best option is , splash basically you'begot thousands , of images which are really high-quality , and pretty nice as well and you can use , it for personal and commercial purposes , without needing to credit people so the , next thing that you need to do once , you're here is look fora really good , image that you can actually put text , over so for example if you go to Apple , they'vie got the main subject here and , text up here it's really clear up works , website they got the person here and , then they'vie got text on the Left Google , Drive text in the middle and everything , else around it so when you're looking , for an image this one will be are ally , nice one , because you can put text on the , left-hand side if you scroll down I'll , show you something that's not as good I , don'think this one is good because if , you put text over it there's a little , bit too much detail in that image there , unless you put like a really dark , gradient over it which covers most of , that image and then the text will pop , out but Think will ruin the image sort , of scrolling down here something like , this is pretty nice because you can put , text on the left something like this is , really nice , and then basically once you'vie found a , nice one for example let'sago down a , little bit further alright so for , example let's say you pick this image , here then all you need to do is click , here to download and you can save that , onto your computer it's really high , quality so I'gonna show you how to , crop it next , alright so I'veal ready put that image , doubt I'm gonna crop into the images , folder which you should have downloaded , so now what you need to do is go to f o , t o are calm so this is a free image , editing software that you can use online , so you don't editorship or anything , like that so what you need to do is , click on edit I'm going to close that , and click on open up here open from your , computer now in that folder you'll see , hero image to crop so select that click , on open and that will load up here so , we're gonna skip all the tutorials CZ , I'll show you how to do it alright so , I'vie got the image here it's quite large , if we put a really large image onto your , website it's gonna take along time to , load and sometimes you might not know , but you might have a really small image , as well and that will make things like , really low-quality blurry and it'll just , look really ugly and ruin your website , so what we're gonna do now is click on , resize and I want to set the size here , but before we do make sure to actually , click on that lock icon so it's locked , up like that so when you'change the , number here,W then it automatically , changes the type to all right and , then click on apply once you'vie clicked , on apply it should change down here , scroll back up click on crop and then , set in W here again and then set in , W for the high so you can select , where you want to put it so Want to , put it somewhere there , I'm basically gonna put the text in the , middle like that and then I'm gonna just , click on apply' so what I noticed is , actually before you save you sort of , want to drag that to the edge of the , image to ensure that when you save this , I's and this is and then click , on save and then you can save iotas , normal or you can save it as high but , you'll need to log in to your Facebook , account if you want to save it as high , so once you'vie done that you can click , on download and save it as hero image , into the folder alright and then click , on save so what I'gonna do is close , that first what I like to do is refresh , the page all right and then click on , turn on builder so we're going to hover , over here and we're gonna click on the , row options so click on that little , pencil icon and for the road width you , want everything to go from this side to , that side so you can actually set full , width row container and that we should , move across there if you set the full , width content this is the contents sort , of line here and it'll move all the way , across so I might set that in alright , and then go to styling and then click on , background and you can set an image , gradient video or a slider for a video , what I recommend is actually putting in , YouTube video so upload your video to , YouTube first so when it actually loads , on someone's website it loads from , YouTube servers rather than your own , hosting account YouTube servers as much , faster alright so click on image image , here and then click on browse library , don't click on the upload alright if you , click on the upload then what happens is , Depressingly actually crop that image , and it'll be low quality so browse , library upload files select files select , the hero image click on open , insert file background mode either , select full cover or resume scrolling , parallax scrolling't as responsive , on mobile devices so I only use it on , maybe not for the hero image but rather , for images which are below that so I'm , going to select zoom scrolling for this , which is also really nice effect and , then what I want to do is you can , actually drag this thing around and if , you actually drag it and then you drag , it tithe right hand side okay you'll , see this purple thing come up and then , just let it gonad that will popup onto , the right hand side like that okay you , can also put it back like that but I'm , gonna put it back here alright so we're , gonna do is click on padding want to , add some spacing to stretch that image , so we're gonna deselect apply to all , we're gonna set in W.5%to the top and , do the same for the bottom W.5 to the , bottom just like that alright so we're , gonna be putting some text in there so , don't worry it'seagoing to stretch out , further so once'vie done that then we , can click on done alright so what we're , gonna do is remove this white spacing , here to do that we can actually click on , save first click on edit in thickened , and that will take you tithe back end , section and scroll down tithe them , custom panel click on page option sand , for the content with select full width , so it goes all the way across and then , once you'vie done that click on update , wait for that to update okay and then , click on View page or this link here and , that should remove it alright so we're , gonna turn on the Builder again then , we're going to hover over here so these , are all the different modules that you , can drag and move in and you can , actually click on the lock icon so that , keeps that this thing actually there , otherwise it's gonna retract back , put that back and let's drag text , module into there , so let's add some content so I'gonna , type in coming soon so type in content , which is relevant to your image and also , to your business don't just randomly , type in anything all right so we're , gonna set in heading here and as you , can see that changes you can also click , on the toggle toolbar for more options , and then what Want to do is I want to , go to the styling tab and here you can , actually change the colors and stuff so , click on fonts , I want to change that to white so it's , visible okay just click on that alright , so make sure it stays there and then for , the text align you want to align , everything to the middle just like that , and then what I want to do is I want to , remove some of that spacing here below , that text alright so we're gonna go to , margin these select a margin apply to , all three and we're gonna minus 3% just , like that so- is some of that space , below the text module alright so when we , Putin the text after then it's not , gonna be so far apart so we're gonna , click on done now once you have done , that then we're gonna drop in a , typewriter module so make sure to have , install that plug-in which I have showed , you earlier drop that into there so for , the before texts we're gonna type in , create a and then for the after text'm , gonna set in website for the typewriter , text here'm gonna sit in visually , stunning alright so we're going to click , on styling here and for the fonts'm , gonna change the font to white make sure , to click that so it stays there alright , so once when you'vie done that then you , can go to typewrite rand click on the , background so this is what it actually , highlights as and I want to change the , background color tithe fuchsia color , which is my accent color that I'vie , selected so you can select you know , whichever accent color that you have put , in or you can just follow along so the , color code AFC F it's something , like that and think that looks pretty , good and then for the font color I think , we can just set that to white as well , and then we're going to click on done , okay so if you notice I haven'test it , to the middle yet because Want to show , you something what we're gonna do next , is we're going to add in a button first , alright so dragging the button module so , you can change the different sizes like , a small button large button I'm just go , Tao normal and I'm gonna go squared , maybe something like that and then for , the button text so I'm gonna change it , to begin now okay so for the link here , what that basically means is when people , click on that it will link to whichever , URL is set in here so for example if I , copy over this URL let's open anew tab , and paste that in and I want to link , that to my services page so I click on , services copy the URL and then I just , paste that in here so anytime someone , clicks on it it will link Tommy services , page so normally I keep that in the same , window because it is on the same domain , if it'sot like an external links for , example I'm linking to Apple's website , then Improbably open in a new tab , alright so keep the color the same you , can also insert an icon but don't , think that is necessary let's go to , styling and let's go to the button link , so we're gonna set in the button , background color and the link color so , the background color I'gonna set in as , just white okay Sosa a neutral color , most of the time it'serially nice to , just use a black or you know a white , background button it's just really easy , and easy to match but sometimes you can , use your accent color as well depending , on the back , around itself here so for the background , hover we want to give a nice little , effect when you actually hover over the , button so for example if you go to , Google Drive if you actually hover over , the button here it goes darker okay here , it goes darker and a lot of websites , either go darker or lighter for this , example we're gonna go darker all right , so for the background hover what we're , gonna do is go to to SO it's 0 to , and then enter in a color we're , gonna set in the white color it's going , to beef sometimes if it's the same then , you can just type in 3 click on enter , color so we're gonna select maybe 1 2 3 , 4 let's try that and go back here , paste that in there it might be Little , bit too dark for the link so for example , we're gonna set IN to 2 which is the , dark grey and the link hover'm just , gonna keep it as the same okay and then , we're gonna go tithe border so I don't , want any border'm gonna select none as , you can see it shrinks done save it and , what we're gonna do is move everything , in the middle so we're gonna click on , options here click on styling click on , font and you can text align it tithe , middle so what that does is everything , within this row it's gonna move it into , the middle so click on done so for , example if you move this thing down here , because it'snot in that row then it's , going to just stay the default position , but if you actually click on the undo , when it's in here then you'll go into , the middle alright so this is really , cool functions the undo and redo , function let's click on save and let's , set in the heading 1 fonts universally , so we're gonna close this let's go to , customize let's click on the headings , click on heading 1 and I'm gonna set in , maybe W pixels something like that's , and make sure that is the Robot font , and for the font weight I might set in , normal maybe W a little bit bolder , think that's pretty cool , click on publish okay so as you can see , while we here if you actually scroll , down you'll see that the header it's the , sticky header and it turns white , alright so since we'redone this heading , section we're gonna minimize it so we're , going to go to the sticky header this , sticky had aw rap and for the background , color I'm gonna set it to the same color , that I set in for the the main header , wrap just like that so if you scroll , down then it stays that same color but , what gonna do is they're gonna make it a , little bit transparent something like , that I think just looks much nicer maybe , W percent opacity and then click on , publish and close it and Think the , website looks pretty good at the moment , okay so it might be Little bit too , dark so you might want to change that , button hover to a little bit lighter but , Think that'soak I'll change that , later now what I want to show you is I , want to show you how to set in a , transparent header so we want to change , the transparent header not for the , entire website because sometimes if you , actually like let's go to the blog page , you might not have a hero image for your , blog page or your blog posts so what , that means is if you don'thieve it then , if you have a white text then you won't , be able to see that the links alright so , what we do is change it for individual , pages so click on the edit page for the , homepage scroll down and choose them , custom panel page appearance scroll down , and background type he reset Otto , transparent you can also set the text , color if you need to , and then click on update so once you , have done that then you can go back to , the home page so click on View page and , that looks pretty good except as you can , see now the links are not as visible so , if you actually go to Google Drive and , if you look at this image here they sort , of added a overlay gradient on top of , that image so to make the text here pop , out a little bit more so what we can , actually do is do that the same thing so , go back to your website turn on the , Builder so this is really useful because , a lot of times you'll be adding text on , top of images and sometimes this is not , visible and you need to make it more , visible so click on the row options , click on styling and then click on the , row overlay so if you actually set in a , you know if you set that into black and , look like that's set it down like that , then it changes the the whole image and , because that image is really nice you , don't want to really ruin the whole , entire image you just want to change it , tithe top like make a little bit dark , on the top so to do that you just set in , a gradient alright so what we're gonna , do is drag this second button here drag , it to about W%alright and then I'm , gonna drag the opacity down to zero like , that okay so it's a little bit too dark , there so click on the first button thing , and then we want to drag that opacity , down to maybe let's say% and then you , can click on done save it close it and , hopefully that makes it pop Little bit , more okay that looks really nice and , that makes the logo pop as well so now , we're gonna do is I'm also going to show , you how to actually move the text so for , example sometimes you might have you , know your main subject here you want to , move Otto the left so to do that just , turn the Builder and for example for the , options here go to styling fonts you can , just align it to the left like that , all right and what you can actually do , is you don't have to click on done you , can actually switch to this module , straightaway so you actually just click , on here and that will switch directly , and it will automatically save styling , font align it to the left alright and if , you actually want to go back to the row , I think let's click on done first and we , want to add a little bit of spacing on , the left alright so what we can do is go , to row options styling padding and maybe , on the left hand side we want to ADD% , or you know maybe W% or something like , that so that is how you can actually , move it to the left hand side while , having the subject on the right hand , side so you can play around with that , and then click on done all right so I'm , gonna actually undo that's all right and , then click on save so what I want to do , now is show you some other features of , the builder really quickly because I , think it'serially cool so if you click , on the% thing that basically zooms , out of your page and what you can do , when do that is easily move elements , around on your website so sometimes you , might need to drag certain things down , to the bottom and it's like kind of hard , to drag because it's just so faro need , to scroll so you need to set Otto W% , and it makes things smaller easier to , move so you can also use the preview , function that turns off the Builder to , see what it looks like so it's a lot , quicker than clicking on save and , closing this is the basically the mobile , responsive styling which I'll show you , later this is the undo and redo which is , really cool and you can also export this , page as a zip file to import on another , website which has them installed you , can also load and save layouts which , I'll be going through later you can also , duplicate the page you can also click on , help which will take you tithe them , documentation so that goes through , like everything in detail like each of , the Builder functions , things like that all right so if we go , back to here then what I want to show , you is this function here click on save , as revisions so for example if you'vie , finished the home page here image type , in hero click on OK so if you make a , mistake then you can actually click on , here and load revision and that will , take you back to the settings that you , have saved for this time frame here okay , it'snot gonna restore the header and , logos and things like that it's only , gonna restore the layout for the page , all right so we're gonna close that and , save and another cool function is the , animation function so if you double , click on the module here click on , animation and let's set in maybe a , fading eminent animation all right so , basically you're gonna set a zero delay , let's click on the next one here , animation let's set in a fade in as well , we're gonna sit in a 0.5 delay and also , the button animation fade IN second , delay done save it let's close it and , you can see how the animation comes in , and that looks really nice OK so the , next section is we're going to be , building out the services section with , the featured module which is really cool , as well , let's turn on our builder again scroll , down to the second row what we're gonna , do is we're gonna drop in at ext module , and I'm gonna type in what we do so you , can type in services or whatever you , want highlight the text we're going to , set this one to the heading tag and , we're going to go to styling and we're , going Togo to the fonts we're gonna , align that text into the middle just , like that and then click on done then , what we need to do is maybe drop a , featured module and drop it below that , title and for the feature title I might , put in , free tutorials okay and then for the , content here'm gonna go grab some , lo rem opossum maybe let's tribe that one , there and then paste that in just a , random text you can change the layout of , it and you can also change the circle , thing so I'm gonna delete that circle , thing delete the stroke and delete the , color as well scroll down you can change , the size I'gonna set Otto medium , which looks good and then for the icon , here you can click on the insert icon , and the one that'm going to look for , is maybe a video player one okay YouTube , play I think that suits it well for the , calorie'm gonna set it in as Agra so a , neutral color again if you don'TKO , what color to choose go for a neutral , color always that ensures everything is , nice and professional don't just choose , any random color because that will be , kind of weird even though that kind of , looks good but like you know if you pick , a random color and then everything's , random then it's gonna look allover the , place so best is to go neutral so I'm , going to go for For D just like that , you can also link it so for example you , might have another page which talks a , little bit more in-depth about free , tutorials you can put the link there and , when people click on it it will link to , that page alright and you can also , select image as well you can upload , your own icons if you do like try to go , to Google Images and find an icon , recommend you know finding the same sort , of sets of icons , otherwise it's gonna look really weird , or you can go to Fiver and get some , professional ones done alright if you , actually set in a link here what I do , want to point out is it's going to , actually let's say copy that for a sec , and pop that into there and if we go to , done and save it close it , then you'll see that the link color , changes to red so we're gonna turn that , on again double click on that and you , can go to styling and then go to link , and then you can change that color of , the text back to maybe Think Ford W d , something like that okay so it's a , little bit more subtle and it looks , better alright so we're going to , actually delete that link and then click , on done okay no wall got to do is create , three more so I'll hover over the , featured module and you can select this , one with three columns you can select , four columns if you have four different , ones I only have three so we're gonna , select three and then we're gonna , duplicate it two times so duplicate , duplicate and then drag it and then pop , it over just like that okay so all you , need to do is to double click this one , here change the title so let's say drag , and drop I can drop builder and then I , might change the icon hereto FA cubes , because I already know what Want and , then click on done click on this one , change this one to maybe free support so , again if you have any issues you can , email meat support agog ensure calm , and then we can scroll down here , if users click on done and that is , pretty much it so what we need to do is , add some spacing to the top here and the , bottom if you go to zero com airlock at , the website and they have spacing , everywhere it makes things look really , nice clean and simple everything is laid , out really nicely so this is a really , good website to take inspiration from , when you're actually creating a layout , as well so we're gonna go back here and , go tithe row options styling padding , deselect apply to all we're gonna ADD% , to the top and 5%to the bottom so , that's normally what add in I think I , might have added in the wrong one just , let me check okay so I put them into two , different rows so what I'm gonna do is , drag it below that and put it below , there okay so now that is all into one , row before think it went into the , third row so we're gonna click on the , row options , Starling and then we're gonna go padding , based like that five percent here five , percent there click on done save let's , close it and I think that is pretty good , to go so the only thing I want to change , is the tag believe that is not the , Robot font that we want so we can go to , customize and then wait for that to load , click on the headings tag heading to , fonts I want to change that sir Robot , okay so it keeps everything consistent , I'm gonna change that to normal think , that's pretty good and publish and close , so the next part that'm going to be , showing you how to do is the gradients , and also adding in that really cool , particle effect gradients are really , good to separate content and it also , adds this cool and fresh vibe to your , website as well and it's good to add on , top of images , if you want to make the text pop or if , you want to sort of keep that color , scheme of your website and that image , that you're using if you add a gradient , which is maybe similar to your main , color then it blends everything in , really nicely all right , okay so make sure to turn on your , builder and then we're ready to add in , our gradient so this is the third row , scroll down and click on the options , here and then click on styling so if you , click on the background here you can add , a gradient that way or you can also add , in a gradient using a row overlay so the , difference is if you actually set in the , background gradient then you can't add a , background image and then have a , gradients on top of that anymore okay so , if you want to sort of have an image as , the background and then you want to have , a gradient on top of that image then you , get a set in the background type image , here and then have the gradient here , because we're going to be adding the , particle effect later we want to not add , the overlay otherwise it's gonna cover , the particle effect so we're gonna set , the background type to gradients for the , background section alright so when we're , choosing the color of the gradients , like to look at what colors we'vie , actually use don the website so you can , pretty much eyeball the color or you can , download a tool which I think it's , Caldwell's and it's also chrome , extension and then you can select it and , then you can use Otto pick color from , the Page think you have to turn off , the builder first and then you select , the section of you know that image that , you want and then it will show you the , color all right so another really good , resource is going to UI gradients com , and over here you can click on show all , gradients , and let's say we have this image here , which is sort of like a greenish blue , then can go here and maybe you can click , on the green and you can find gradient , which sort of matches with that color , because , we actually select maybe like a red one , it dozen'really match with the color , of this background and it's gonna look , kind of weird so that is why we want to , match the colors and it'gonna make , your website look really good so you can , select this and let's say you picked , rainbow blue and you can click the color , code here we get twice so it's copied , and then you can click on the first , thing here and then paste in that color , code just like that and then go back to , UI gradients click in the second color , code double click it and then click on , the second one and paste that in okay so , it looks something like that it dozen't , look as good so you can actually just , adjust iota little bit , I actually know which color code want , to be using so I'm gonna type IN C D B , 7 Canad then this one here is going to , be 3 A HF something like that and then , I want to change the rotation so to W , degree sand click on enter and then what , I want to do is add some spacing so , let's for example want to add some , padding let's add maybe% to the top , and W% to the bottom something like , that I think that color is okay I mean , you can tweak it a little bit let's , maybe make it a little bit lighter or , something like that's a little bit , darker , okay I think that might look good and , you can also switch it around like that , change it like that you can also set in , radio okay I'gonna keep it linear I , think that might be Little bit too , green so I might click on that and let's , make that Little bit less green okay , and then click on done so what'm gonna , show you now is how to add in a , testimonial slider so click on the plus , icon and then look for testimonial , slider and drop that in so testimonials , are important for your websites add in , social proof so if you don't have any , testimonials get some testimonials from , the customers because think that's , really important in people actually , buying whatever you have to offer so for , the testimonial title I'm actually going , to delete that for the content I'm gonna , grab maybe some lo rem easement paste it , into there might add in some vacation , marks like that , and we're gonna drop in an image so , click on browse library upload files , select file sand I have aim age there , and you can add that in so I'm gonna , click over here because I'veal ready , uploaded that and the size that I'vest , Otto be is about W times W so , anywhere between that is fine and that , is about W kilobytes so it's not really , bi git won'take long to load insert , file Airlock so that image is probably a , little bit too big we're gonna scroll , down and you can change the person's , name position and whichever company ABC , and cur something like that you can also , add Ina company website because this is , a testimonial slider you can also add in , additional row so you can add in another , person's testimonial and things like , that I'm just going to delete that for , now scrolling down I want to change the , image width to about and you can , probably just leave the height because , it'seagoing to , scale down proportionally and then you , can play around with the slider display , options here because it's a slider you , can change the speed and the effect sand , basically everything here and then it , will actually appear so you can play , around with those settings so what I do , want to change is going to styling font , and changing the font color to white , okay so that looks not too bad we're , gonna go back to the testimonial slider , and let's add in a testimonial title so , I'm gonna set an amazing support , something like that's I think that looks , pretty good if you want to you can also , delete that if you want to something , like that and then you can actually use , this section here John Smith and then , you can pita italic think that looks , pretty good John Smith maybe he's from , Canada think that looks pretty good , actually so we're going to click on done , and that is pretty good so now we're , gonna show you is adding a particle , effect know you probably don't you , know you probably don't want to add it , over here but I'm gonna show you how to , do it in case you know you want to learn , how to do it it's really easy and it's , really cool so what we want to do is go , to google and type in maybe them , particle effect click on enter and click , into the first result here alright , scroll down here scroll down to this , yellow section copy everything here to , your clipboard copy that okay we're , gonna save the Builder and exit out of , that first and then we're going to hover , over logo and click into the dashboard , area and then we're going to go through , fire ultra them settings scroll down , to the header code and then we're going , to pa stein that code into the header , code , area okay and then click on save once , that is done go back tithe visit site , turn on the Builder scroll down to the , section here and then click on options , now for the additional CSS class all you , want to do is we want to actually add , particles- j s so i'm just gonna copy , this and then paste it into here just , like that , and then click on done we're gonna save , it and close it and hopefully that , particle effect will show up after you , refresh it okay so I think that looks , pretty cool you might want to add it to , your hero image if for example you might , be like a tech company or something like , that and I think that's really useful to , know so the next Patti'm gonna show you , how to add in your blog post and how to , add in your featured blog post on your , home page so blog posts are really , important because you're able to , actually create free content that people , are actively searching on Google so for , example if you want to learn how to get , as ix-pack like how to get a six-pack , thousands of people search this key , phrase every single day so if you're , ranking on page one for example if you , click into this post here thousands of , people click into here to read this blog , post so that gets you traffic and once , you get traffic then you can sell pretty , much anything that you want like you can , have affiliate links you can get people , to sign up to your newsletter you can , get people to you know buy whatever you , have in your shop blogging is a really , good way to actually build Authority for , your website and it actually rank you , for you know other keywords related you , know for your website as well so if you , want to learn Little bit more about , blogging then Ire commend going to smart , blogger and if you want to learn about , SEO and traffic you can go toenail Patel , com you can scroll down here tithe blog , and he has a lot of really good blog , posts I'm about generating traffic , versions social media and things like , that and also good one is buckling , comm and you can click on the blog here , as well okay so I'm just going to show , you how to you know add that blog post , in Word Press and add it on to your home , page so to add a blog post we need to , hover over the section here click on the , dashboard and then we're gonna click on , posts okay so by default you should see , a hello world post we're gonna actually , trash that so trash that and then want , to go into the trash and delete that , permanently so let's click on trash , delete permanently and then we're gonna , add Ina new post so click on add new up , here so we're gonna set in a blog post , title so for example Might type in let , go and chase your dreams so this here is , your text editor and I'gonna pa stein , some lo rem optometrists so let's just , copy some of tactile C and paste it , into there just like that , alright so to add a link it's really , easy so for example you want to link it , somewhere this text then highlight it , and then click on this icon here OK and , then you can paste in the URL that you , want to link it to normally I click on , link options for example if I want to , link it to lo rem opossum'll copy the URL , paste it into here because it's an , external link'm going to link it to , open up in a new tab you can also link , it to existing content on your website , normally it shows up here or you can , search for it as well so click on add , link and once you'redone that then that , will create that link so to add an image , it's really sim pleas well you can click , on add media upload files select files , and I'vie also got a blog post image that , you can actually add in so we're going , to add in this one here post image one , open and then insert that into the post , okay and to add a video okay so as you , can see that's not very high-quality I'm , actually gonna go back and edit that and , for that size I'm gonna select full size , update okay that looks much better , so to add in a video lets click enter , and make some space so for example we're , gonna upload video just copy the URL , and then go back here and paste it in , just like that so wait for about one , second and it will load up and that is , all Goodall right so the next thing , that you want to do is you want to set , in a category so click on add new , category so for example this might be a , lifestyle category or fashion category , or anything like that okay add new , category make sure that is selected and , tags for example this blog post might be , talking about going to India so your tag , might be India this might be talking , about chasing your dreams so one of them , might be you know chasing dream sand , then click on add so we're going to set , in a featured image as well so click on , set featured image and click on upload , files select files so we want to upload , this featured image and click on open , so the file size that I have cropped it , to is about times W pixels and , the size is about W kilobytes so I'vie , basically cropped all my images on photo , before uploading that way it's a lot , simpler and all the sizes are the same , so that's you know whenever you're , displaying it on your home page then , it's all gonna align up properly okay so , if you click on this one as well , this one is also the same size for your , blog post you don'really have to have , you know the same size images but around , this size is pretty good but for your , featured image I recommend having all of , them the same size okay and then set in , featured image and then I think that is , pretty much it you can also change the , post options so for example the post , layout for each specific , blog post or you can set that in the , them settings default post layouts , which I'll show you Ina sec so once , you'vie done that click on publish wait , for that to actually update so we , actually will show up post published , click on View Po stand this is what your , blog post actually looks like right now , okay so what I'gonna do is I'gonna , add in another three post another two , posts re and then show you how to add it , to display on your home page so you can , also hover over new and then click on , post and right now I'just going to , quickly add it in you can add in you , know your own place as well all right , okay so that was my last blog post and , you can actually click on all post to , view that and to make sure that your , post shave been set in so what we're , going to do now is go to our home page , so going to VISTA home page and we're , gonna turn on the Builder and then we're , going to scroll down to this session , here we're going to drop in maybe a text , module and we're going to put in maybe , our latest set that - heading one or , maybe not heading one heading two sorry , and go to styling click on font align it , into the center click on done then what , we're gonna do is drop in a post module , so drop that below the title and then , what you want to do is you can change , the post layout so what I'm gonna do is , because I have three posts I'm gonna , choose grid so you can play around , with the settings but this is what I , recommend for your home page so , scrolling down you can set it by , specific categories and things like that , post content you can you know change it , you know anything you like overlay you , can actually click on the preview and , you can do something like that change it , to Polaroid click on the preview that is , pretty cool as well really depends on , how you want to display it what I'm , gonna do is just set it as default as , for the post filter this is the post , filter I'm gonna select no and also for , the post gutter is the spacing in , between'm going to leave it as , defaults the number of posts I'm going , to display A's limit it and then scroll , down so you can play around with each of , the settings here you can display , excerpt or you can display none or you , can also display all that content okay , so I'just going to display like a , little short summary you can hide the , images change the sizes hide the post , date you know hide the post meta which , is , the author and the category and the tags , and things like that you can hide that , if you want to and Think that is , pretty much it'Sally right so if we go , to styling here so you have the option , is styled the module title the post , title and everything like that and yeah , so if we click on done then I think that , is pretty much it so we're gonna do is , add in some spacing on the top and add , some spacing to the bottom so click on , padding deselect that 5% to the top 5% , tithe bottom click on done and I think , that looks pretty good so can save it , and close it and see how that looks , first just go down that looks pretty , good , so let's say if we click into one of the , blog posts you can see that the link is , actually red what we're gonna do is , actually change the body link color , right now okay so we're going to go to , customize so the link color that we're , going to be choosing is a blue so blue , is actually really good color you'll , see it on most websites actually it's , really good because people are able to , easily distinguish the blue color and , the text around it so they know it's a , link most people actually don't know but , 8% of men are colorblind and 0.5% of , women are colorblind and the most common , deficiency is red and green so it makes , it easily readable by people who are , colorblind and it just looks good anyway , but if you're for example your main , color might be Reid mean you can still , use it but if you can choose blue then , choose blue so click on body here and , click on body link so the color code , we're going to put in is to be a zero a , three click on enter okay so that , changes so what gonna do now is change , the body link ho verso I'm going to copy , this color code here , to my clipboard go to to entering , a color enter color and I'm gonna select , maybe two shades darker I guess it gives , a slight effect so if you look on Tesla , they go lighter because I think the red , they'vie chosen is quite dark already , if it goes darker then it's just too , dark so we're gonna go blue darker , blue paste that in there so when people , hover over that then it should go darker , I think that is pretty nice you might , want to go three shades it's really up , to you so I might change that actually , let's go three shade sand then click on , publish okay and then close that and , let's go to our home page and I want to , show you something as well so people , have been asking how to actually add a , read more here so to do that you need to , go to the dashboard and hover over , themifyultra them settings go to , default layouts and then go to default , archive post layout scroll down to the , more text and you can click on display , more link in the excerpt mode as well so , select that and you can type in maybe , read more or more whatever you want , let's click on save and hopefully if we , visit our website here it will actually , show up just like that and that is it so , what can I show you now is I'going to , show you how to do the dual parallax , effect which is really cool you're going , to stand out from the competition you , can tell an interesting story or use it , for whatever purpose you want so for the , dual parallax effect we're gonna have to , get two images the first image is for , the foreground so try to get maybe like , a laptop or a book or something that you , can easily cut out from okay so with , like sort of like square you don't , want something , like a mountain or something like that , sometimes it'serially hard to cutout , but you can just takes a longtime , scrolling down like maybe this one might , Beau really good one because you can , easily cut it out you might even choose , a book or something like that this one , is also really good as well so I'vie , already chosen the foreground image , which ISS laptop and then what you need , to do is go to pixel.com so p Ix are , calm and then scroll down to the Pixel , editor so it'Avery similar tutorship , it's free and it's online so anyone can , access it alright so once you're here , then click on open image from computer , so you should have downloaded a laptop , image from your computer but if you , haven'then i'vie included it in the , actual folder so click on foreground to , crop unpicks open that up and what you , need to do is we'll need to click on the , lasso tool here okay so if your image is , not very zoomed in then you probably , want to zoom in a little bit more so , maybe let's go's% if that's and move it , up okay so it's a little bit easier to , cut out or see so click on the lasso , too land then click on the polygonal , lasso tool so what we're going to do is , cutout the background image of the , laptop okay so we need to just point our , cursor there and then click it one time , and then basically it will show that , line and then drag it across and then , click it again and then let go and then , click it one more time one more there , and then make sure to join it up exactly , where it started okay , and then it should make that selection , so once you make that selection then , over on the right hand side here you , need to double click on the lock okay so , that unlocks the layer and it should , show up as layer once that is showing , up as lo 0 then you need to click on the , delete button so that deletes the , background and it make sit transparent , so what we're going to do now is we need , to change the image size because it's , quite big and , going to take a long time to load so , click on image image size the size that , I'going to change the to is about W , in width and it automatically changed , your height so I'm just going to leave , iotas W and then click on OK okay so , your image is ready to export what we're , gonna do is click on file save and we , want to make sure to save it as the PNG , format which is the full quality okay , and then click on OK and then save it as , maybe laptop cropped I'vie already , saved it and I save it again so once , that is done then look for a image for , your background so for example you might , use maybe I don't know it maybe like , something like an Mountain or you might , use your face it really depends on what , you want to show and what story you want , to tell so download the image and save , it onto your computer and then you can , go to photo and then you can edit the , size of it down to maybe W by W or , by W talk image here alright so , if you're good at Photocopying what , you can do is actually get that image , and this is the original image actually , I cut it out the original image the , original image is let's go back a little , bit it's something like that basically , cut it out cropped it out because , don't need this area here because the , area is actually covered by this section , here and we can make the image a smaller , file size if we do that in Photocopied , then we just paste it in like that it's , just white space here because it's not , needed and then you can save it and then , you can go back to your website now so , we're gonna scroll down we're gonna , insert the dual parallax he return on , the Builder we need to click on the , options and then we might sit in the , full content with go to styling , background and we're going to set in the , background image so click on browse , library and make sure to upload that , file from your computer so if you click , on select files will have that flower , file therefore used to actually upload , as well so you can click on open and , upload'vie already uploaded before so , here it is and this is the file size , about W x W in high and W , kilobytes so not that big which is , really good so insert file UR Land for , the background mode I'm going to select , a parallax scrolling and then what we're , gonna do is just hit undone so now we're , gonna set in the foreground so if you , actually hover over here on the left , you'll see this styling paintbrush icon , so click on that that is for the column , styling so you're able to set in a , background for the column so this is , where we're sitting now laptop image so , click on background and then browse , library upload that laptop II just , cropped and saved it has to be pang and , make sure that when you save here it , shows the checkered box okay go back , here and then insert file URL okay so , you can see that image there that laptop , slightly but we need to stretch that , image a little bit more so the first , thing you'll need to do is change it to , full cover for the background mode and , then for the padding we want to deselect , that want to hit about W% padding to , the top and we want to do the same for , the bottom okay so that looks pretty , good we're gonna click on done alright , awesome so we're going to do is add a , little bit of text and a button so click , on the plus icon drag in a text module , try to put it in the middle like that it , should show up that blue line and then , drop it okay so we're gonna type in be , different so I'going to show you how , to arrange it the text on the right hand , side showed you before but'll show , you again so we're gonna set that to , heading I believe and then for the , styling what I'gonna do , is we're going to click on styling tab , font we're going to align it to the , right for the padding because I don't , wan tit to be so close tithe end of the , screen we want to Stein maybe% , padding tithe right hand side so it , gives a little bit space I think , something like that looks good and then , we're going to get this button and , duplicate it so what gonna do is hover , over here click on W%so zooms out so , it's easy to move so we'vie got that , button there and we're just gonna click , on it and drag it down to this bottom , section drag it below be different all , right double click on that and what , we're gonna do is actually change that , color to our accent color so it matches , well with our background flower image , and also because the background is white , you don't want to leave it as a white , background so either go for a dark , colored button background color or use , your accent color okay so what we're , gonna do is we're gonna actually scroll , back up and get that color code that we , used here so let's double click on that , and that will actually open up the , typewriter module go to styling and then , click on typewriter click on background , and then what weened to do is click on , that color code okay and then scroll , back down to here the button and double , click on that button so it automatically , saves the other module so it's a lot , quicker to sort of edit your website so , we're gonna do now is go to styling , button link because we're editing the , button link and we're changing the , background color so we want to edit that , from white to that future or that pink , color and the background hover what , we're gonna do is we're gonna go to 0 to , okay so you can enters color here , I'vie already entered it in paste that in , make sure to sleep that's hash okay , enter in the color and then we're gonna , do maybe two shades darker or you can go , to shades lighter but think darker , might be a better option so click on , that color code , and then what we're gonna do is we're , gonna go back to our website paste that , in alright and then click on the link we , want to change that link color from that , dark gray to a why change the color over , to white as Welland we're gonna do is , we're going to click on the general tab , and we're gonna arrange Otto the right , hand side as well so it takes the line , to the right padding we're gonna add 5% , as well which is the same and then 5% to , the right and click on done and I think , we can save it and let'close it and , then give that a little preview okay so , I think that looks pretty good you might , want to reduce some spacing there that's , up to you but I'll show you quickly so , turn the Builder and I think what we're , gonna do is double click on that styling , and then click on margin and then , deselect that and then try to maybe put , in minus one percent well maybe let's go , to percent okay Think 2 percent is , good so the difference between margin , and padding is let me show you an , example so padding is inside the actual , box so if you see that invisible line , box padding is inside that box , okay so margin is actually outside that , box so I'vie added the padding for the , hero image so that'st he inside spacing , so what actually do is if I want to , change the outside padding then I click , on the options styling and then if I , Lisa like that and let's go maybe% to , the top okay that edits the spacing for , outside that invisible box okay so that , is the difference so if you ever want to , sort of reduce the the spacing between , like the text module and the other , module then you can use minus margin to , the bottom or to the top okay so we're , going to click on save and close the , next section I'going to show you how , to add , Ina video background as well as using , the video module and showing you how to , add in a gallery we can actually , showcase your work and things like that , okay so I noticed something while I was , scrolling down so as you can see there's , white space here when you're scrolling , down and we don't want that so we're , gonna quickly fix that before we move on , so turn on the Builder and then just , click on the row options here go to , styling background make sure the , background mode is set to parallax but , the background attachment change that to , fixed okay so once you'vie done that then , you can click on done and the white , space will not appear anymore and it , still looks just as good or if not , better okay save it and close it so , there's basically two ways of adding in , a video the first way is adding it as a , video background so you can go to the , row options styling background click on , video and then go to YouTube , make sure to upload your video to , YouTube first so it loads faster because , it loads on YouTube servers rather than , your own paste in the URL here and then , click on the outside and then it should , show up okay so make sure to disable the , audio you can also disable the looping , which is the replay and make sure to set , in a background image because on mobile , it dozen't display the video it will , display the background image that you , upload through here alright what you can , do is add in some padding like W to the , top and W% to the bottom and then you , could add in text you could add buttons , and anything that you want to show here , so you can use iotas a like sort of hero , video for your homepage as well alright , so the other way is to use a video , module so what I'm gonna do is click on , done first and then I'm gonna delete , that for no wand then drag in a video , module and put it in there just like , that okay so all you need to do is paste , in that same video URL and it will pop , up okay so if you click on done you can , actually arrange it in you know two , columns you can have your video here you , could have some text here explaining , what the video is about or you can do , sort of like cinema , effect so I'm going to show you how to , do that really quickly so click on this , one hereto display it as just one , column and then we're gonna click on , options styling and then we're gonna , click on maybe padding so we're gonna , set some padding first some spacing's , like that'm gonna do% tithe top , this one'm gonna do 3% to the bottom , okay once that is done we're gonna do a , background color so for example we're , gonna go something dark , let's try to- to something like that or , maybe Little bit lighter really , depends so I might go to to 4 now and , then click on row overlay and then for , the overlay hover we're gonna actually , set in a darker color so we're gonna do , it about just% black just like that , okay so we actually hover over it it , goes darker it's like what I'vie done , save it and then close it okay and then , we're gonna scroll down to the section , with the video so right now when you're , not hovering over it it's sort of like a , really dark grey but when people hover , over to watch the video that you have , here then it goes dark around it so it , creates sort of like a cinema effects , which is cool and another thing to note , is if you upload your own video you only , have one video then you should take into , consideration the thumbnail that you're , gonna use for the video so I picked this , video because it has this greenish blue , background which blends in with the rest , of my website my gradient area and also , my hero image okay so it's something to , think about as well with your design so , we're gonna turn on the Builder and then , I'gonna show you quickly how to use , the gallery module so click on the plus , icon drop in a gallery module pretty , similar so I think that automatically , popped up but if it did'then it shows , this thing here so we need to click on , insert gallery and upload files select , files I'vie also included six gallery , images which you can actually upload and , I'vie cropped them beforehand on photo so , I'vie already uploaded them , as you can see and the size that I , cropped it to is about 1,W times W , so it's important that you crop them all , to the same size so it lines properly , when you put it onto your homepage , alright so we're gonna select these six , images and then add see gallery , update gallery and then it should show , up like that okay so you can play around , with the settings here for example , setting it to columns of three okay so , you can play around with the image , appearance as well but Id on't think , that's necessary , so we're gonna click on done and you can , add in a gallery title there if you want , suit with a text module so we're going , to delete that for no wand you can also , add in image modules as well so drop in , an image module here and you can upload , your image and then you can click on , done and then you can also arrange it , into three different columns if you want , to display your images like that so the , next thing that I'going to show you is , I'going to delete this first is to , show you how to make sure that , everything is fully responsive on mobile , devices so as you can see this text here , dozen't look very good okay if you , scroll down to this section here this , text sort of overlays the laptop and , it's not as visible so I'gonna show , you how to actually fix that as well , so to edit the heading one text for , mobile devices we're going to click on , customize and then make sure you're at , them options click on the Advanced , ta band then you can click on headings , here so on the bottom here you actually , got the styling for tablet landscape for , the portrait and also for mobile so if , you actually click on the heading one , font now it say's if you click on the , tablet for landscape then you can , actually change it for each specific , device size so what Alike to use for , tablet is use five and set Otto AM am , basically means it scales down , proportional to the size I mean to the , screen size and then click on the tablet , for portrait and then I might set in , four OR.5 I think four looks okay and , then click on the mobile I'm going to , change this to about 3.5 I think that , looks okay okay so you can adjust it , depending on what results you actually , get so we're gonna scroll down here to , the bottom okay so actually on mobile , devices this thing is actually a lot , closer to the screen , so we can actually change the heading to , font here but if we actually change the , heading to font here then for example , let's say we change it to you know 1.5 , km or let's change let's say a.m.okay , for mobile devices what that changes is , also changes the heading true that we'vie , been using for this section here and we , don't really want to do that because , that would be too small and it needs to , be a little bit bigger sou'm not gonna , change that here at all we're gonna , publish this first and close it we're , going to change it for that specific , module itself so we're gonna turn on the , Builder scroll right down to the bottom , double-click it go to styling so this is , the heading tag go to styling click on , the heading and we want to click on the , mobile styling here so it's gonna change , that to that's and then click on heading , 2 font sand then you want to change it , to maybe.5 en for the heading 2 so , what that does it's only editing for , this specific module only it'snot gonna , edit the size that you see here okay , click on done let's save it and then , give iota close so once that is done go , to response Anita comm put in your URL , we're gonna go and hopefully it looks , lot better okay that looks pretty good , just going down that size stays the same , scroll down to the bottom okay so it , made iota little bit smaller and think , it looks pretty good right now so what , you want to do maybe is you want to , let's say you don'twat to have this , section here because Id on't know you , might have a huge block of text and you , don't want people to scroll down to you , know scroll down to the very bottoms can , take a longtime okay so you might want , to remove certain sections so you can , turn the build up and to do that it's , quite easy each row or each module has , these three little dots and you can , hover over it and you can set the , visibility so you can offer a hover over , here set the visibility so let's say you , want to remove this entire section click , invisibility and you can hide it on , mobile and tablet as well if you want to , and then click on done okay so on tablet , it's not going to show up on mobile it's , gonna not show up as well okay for , desktop it will show on desktop so that , is a way that you can play around with , the layout of your pages okay so click , on done and click on save the next , section I'm gonna show you how to import , layouts for your back page because I , don't want to show you you know how to , build everything you know% of the , things now I'm just gonna show you some , really cool things all right , okay so let's click on the about page , turn on the Builder and then we're going , to do is hover over here import from , file click on okay select upload and , then browse to the about page to import , zip file okay so this should be your , images and plug-in folder which you have , downloaded earlier we'vie got open and , that will essentially just load up your , layout which are procreated for you and , you can just edit the images so for , example you can just click on the row , options here and go to styling , background and upload browse library and , upload your own image alright so keep , everything the same click on done you , can double click on this section here to , change the text you can also double , click on the image here to change , your image and double-click this section , to change your about me okay so click on , done and if you actually double click , the icon section then you can actually , Putin your email so instead of support , at home intercom put in your email and , as you can see it has mail - and then , the colon so what that does is people , can click on it and then it will open up , the default email browser with the , actual email in the to send name theme , okay so we're gonna scroll down this one , is called me , okay so tel and then colon and then I , have the phone number there so you can , do that as well so people click on it on , maybe their mobile device it'll , automatically put that number into their , call screen same with the Facebook you , can change the label as Welland you can , change your Facebook profile URL okay so , it'serially simple you can also change , the colors of each of the icon sand then , you can click on done so one thing I , want to show you is if you actually , hover over here on the left okay so you , can change the number of columns but we , can do is actually change the column , alignment so right now it's the first , option if you click on the second option , notice what happens here okay so it , basically aligns the text and icons in , the middle okay so for example if you , change Otto that hold on change Otto , that one it'll move down and then if you , change it back to that one it goes up so , we want to keep it in the middle okay so , that is pretty much it if we actually , save it and you can play around wit hall , the different types of modules here , we're gonna close that and give that a , little preview first okay so as you can , see there's a little spacing up here , to you know close that gap click on edit , page and then what you want to do is , scroll down to them custom panel page , options ta band for the content with , select full-width click on update and , then click on view page , okay so that is done so the next section , I'm actually going to show you how to , importer created layouts which are , created by them themselves and this , is also really cool as well because'll , show you how to import pare created rows , which you can mix and match to create , your own custom layout so we're on the , services page we're gonna click on turn , on builder and then what we're gonna do , is hover over here this layout icon and , then we're gonna click on load layout , okay so these are all pare designed by , Thurmond you can select one of these , I did't want to show you how to just , import a layout , I might make a quicker tutorial maybe , like A's minute Ora W minute tutorial , to show those of you who want to just , you know get website up and running as , quick as possible but I think you know , learning the skills to do it is much , more important because if you actually , just import a random layout home you , won't really know what to do so let's , just take this for example , corporate Page and we're gonna select , it and click on append existing and , hopefully it will pop up okay so it pops , up like that and have your layout there , we're gonna set it to W% so you can see , what's going on so for each of the , sections you can just remove it if you , don'tend it so for example you don't , need to spot just delete it scroll back , up and double click to edit the page , okay so really simple pretty much the , same as any other module that you have , edited before the gun done and what else , you can do is you can scroll down to the , bottom here hover over the row and click , on the plus icon you can also click on , the rows here okay click on that again , so what you can actually do is import , different rows which Ampere created as , well so as you can see you might want to , import maybe this hero banner image drop , that into here and then you can , basically mix and match your different , rows and create your layout like that , alright so you can also access rows by , clicking on rows on this section here as , well okay , so that is really easy to do now the , next part then I'gonna show you is , we're gonna edit the blog page so we're , about minutes away from finishing so , hang in there if you liked the video so , far make sure to give iota thumb sup and , share it with your friends it really , helps me out to create more videos like , this okay so we're gonna close on that , and then we're gonna click on to the , blog page so I'going to show you how , to display your blog post and also at , sidebar section so we need to turn on , the Builder fir stand we need to , separate the columns into two columns , something like this so select that one , and then what we want to do is drag in a , post module drop it into there and for , the post layout I'm gonna select the , list post , all right so scrolling down we're going , to disable the post filter normally , there's a filter thing up here I'gonna , select no and I'gonna limit to five , posts that really depends on you and you , can order it by dates descending or , ascending and other things here as well , and for the display I normally like to , display it an excerpt and I think I keep , everything else as default but you can , play around with the settings and , everything here scrolling down here , normally there might Beau page , navigation thing so for example if you , have ten posts and you'vie only set it to , display five posts then it might have , the first page and then you might have , number two which is the second page so I , actually want to show that so I can , select No so I don'twat to hide it , okay and then you can go to styling you , can also edit each individual sort of , elements of the blog post for example , the post title the post meta section , here you can also edit the postdates , the basically the fonts and things like , that , okay so I'm going to leave everything as , default sand then click on done the next , thing I'm going to do is go over here , and drop in the widget eyes module into , the right-hand side and for the widget , eyes area we're gonna select the sidebar , click on done so by default it looks , something like this , okay so I'm going to show you how to , actually edit the widget section right , now sou'm just gonna click on save and , I'gonna close it right now , okay so let's hover over the dashboard , icon and right-click and open in a new , tab so that's going to open up your , widget section and you can actually go , to appearance widgets as well so what , we're going to do is we're going to , remove the meta the archived recent , comments so it's really simple so click , on here the down arrow delete it , archive delete it the meta delete it so , these are the available widgets which , you can drag in and basically it will , show up once you put it in so let's take , for example if we want to maybe let's , drag in an image widget so you might , have an image of yourself you can add , image let's say we add that one in and , then we can click on save and we can , also add a text widget so I might add , that maybe above that let's say about me , hi I'mahogany something like that if we , can save you can also drop in the , them social links below that okay , open link in a new window we can save , and then refresh your blog page and then , it should edit just like that okay so , it's really simple to configure your , widgets using one of these things here , now we're going to do is I'm going to , show you how to actually Center , everything change the date and show you , how to Center this section as well so , click on turn on builder you can double , click the post module click on styling , font and then you can click on text , align to the center and everything will , go into the middle click on done double , click this section styling click on font , and align everything in the center done , so some people don't really like the , appearance of that circle thing so we're , going to change Otto an inline text , let's save it and close it let's go back , to our dashboard area and go to them , ultra them settings'm gonna close , that page let's click on default layouts , so for the default archive post layout , scroll down to hide post date and then , display post date as inline text instead , of that circle style same thing , scroll down to default single post , display as inline text save it now let's , navigate back to our blog page scroll in , like that's , then it should show up something like , that , okay so as you can see that post date is , not really centered'll show you how to , fix that in a second let'click into , here now this is your blog post and I , also want to change the link hover color , okay everything else looks okay I'll , show you how to edit the button color , later on so what we're going to do is , we'vie Giotto go to the customize section , and then what you can actually do is , make sure to select the Advanced Options , and then scroll to post okay so this is , the post date so scroll down to post , date let's align that into the center , like that's this is the post title hover , so let's close the post date first post , title hover , what I'gonna do is change Otto the , same blue so we can actually click on , body click on the body link hover this , is the same blue that we'vie set in here , so I'going to copy it straight from , hereto my clipboard and then paste it , in okay so that ensures everything is , consistent paste it into the color , section , just like that so when you hover over it , should be blue okay looking great click , on publish as you can see the sidebar , here is aligned in to the left hand side , you can actually change that as well so , you can look Fri believe sidebar so , you can click on sidebar font and you , can set it to a line into the center , just like that so close that and publish , it the next section that'm going to , show you is how to edit the contact page , add in a contact form and as well as a , map so we're on the contact page and , I'vie turned on the Builder already what , we're gonna do is Stein a hero image , first really quickly we're going to go , to options and then we're gonna go full , with content styling background and , background image we're going to browse , library upload files select file sand , the image that I want to upload is the , contact hero open that and then insert , file URL for the background mode'm , gonna select maybe just the full cover , and then for the background position'm , gonna leave it as is the background , attachment I'm just gonna set it as , fixed maybe okay and then what we're , gonna do is click on padding let's add , some padding so W percent to the top W , to the bottom as well okay and then I'm , going to add text in the middle so we're , gonna click on done and we're gonna , remove these spacing on the top first so , edit in back-end we're going to scroll , down to the them custom panel click , on the page options for the content with , select full width' and update okay once , Hart has updated we're going to go back , to the contact form by clicking viewing , page alright so that is done now we're , going to do is turn the Builder again , and we're gonna set in some text so , we're just gonna drop in a text module , and I'm just gonna put in contacts , heading , go to styling fonts align it to the , center fir stand change the font color , to white so it's more visible and then , click on done okay so obviously you can , Dada sub-headline as well but I'm just , gonna leave it as that , so what gonna do is on the second row , we're gonna separate the columns into , two so one side is for the contact form , the other is for the map okay so if you , actually scroll here there is no contact , form sort of module that you can drop in , so what we need to do is actually just , save it first and close it we need to go , to our dashboard section so click into , your dashboard and then make sure you , have actually installed the plug-in , which is the contact form plugin and , then you can click on the contact here , so click on that and then by default , they'll have contact form set up , already , so you want to click on edit and then , here you can click on the mail tab and , make sure you'vie set in your email here , so for example we're going to set in , support that's Hogan Shore calm so all , the messages will be forwarded to this , email here right and then we're going to , click on the form here you can also edit , it as well I can edit the text and you , can also click on the documentation and , FAQ to learn how to actually configure , to whatever you need but we're gonna , leave it as that and we're gonna save , once that is done then this is a , shortcut can actually paste this , shortcodeanywhere on your page or your , post or even the text widget and the , contact form will actually show up so , you don'tend any code you just need , this particularity so copy that to , your clipboard and we're gonna head back , to our contact page click on contact and , we're gonna turn the Builder again , to add in that short code weened to drop , in at ext module so drop it into here , paste that in and then within a few , seconds it will actually load up just , like that all right you'vie got your , contact form nice and simple click on , done the next thing we're going to do is , add a map so you can look for a map , module here and drag it so for example , I'm in Melbourne Australia you can type , in your exact address as well you can , also set in the zoom you can also set in , the height might change the height to , about W pixels so it's a little bit , bigger let's change that to okay that , looks pretty good , and you can also play around with the , settings here so we're gonna click on , done and then what we're gonna do is , we're actually going to click on save , fir stand close it and you'll notice , that the map Hans't showed up yet okay , CZ we need to actually add in the , Google API and I'gonna show you , exactly how to do that and then we're , gonna comeback and add some spacing up , there and add some spacing down here and , change the button color so let's click , on the dashboard then you want to click , on hover over them ultra demo file , setting sand then scroll down to google , map and click on the Google map so for , your Google map key you'll need to have , a API here so make sure to login to your , Google or gm ail accounts fir stand then , once you just click on the generate API , then automatically log you in to your , Google developer account so by , default you should have one and then , what you're gonna do is follow these , steps so go to the Google API console , wait for that to load and then we're , gonna do is maybe create anew project , click on continue that might take , little while OK so once that is done , then you click on what credentials , need and basically here is your API so , you're gonna copy that API , and then all you need to do is click on , done so once you have that API you can , go back to the themifyultra here and , paste it in let's click on save and , hopefully if we go back to visit our , website go back to our contact page , hopefully that map will actually show up , so click on contact scroll down and here , is your map so we're going to turn the , Builder and style our page a little bit , click on options let's click on the , styling here and let's add some padding , to the top and bottom 5% tithe top 5% , tithe bottom and what gonna do is click , on done the next thing that we're gonna , do is we're gonna hover over here on the , left and then click on this middle one , for the column alignment so it'seagoing , to line the map with our form that is , pretty mu chit save it let's edit the , button form color so close it and we , need to go to our customize section and , then this is a contact form so we can , click on forms here so click on forms , this is the form button so you can click , on the form button and you can change , the color of the background so let's , change Otto a dark grey which is our , main color that we used for our website , and also our header wrap area okay so , once that is set in you can also set in , the hover color so the form button hover , color click on that and you can go to , the 0 to entering a color to 2 to , that entering the color and you can go , two shades darker , or two shade slighter so I might go to , shades darker perhaps for the background , color paste that in , and then that is pretty good to go so I , can click on publish when you hover over , that it should go darker , close it and Think that looks pretty , good and pretty good to go now if we , actually go to the blog and the blog , post you'll see that the contacts I mean , the comment section the button will , change as well okay so it matches really , nicely with the whole entire theme now , what I want to show you is to just , finish off the websites as you can see , the footer there's this sort of like , slide border there around it it dozen't , look really nice and there's also a , slight border on the header as well so , I'actually going to show you how to , fix that so go to customize scroll down , and click on custom.cuss so if you're a , developer or you know Castor can add , Cashmere so you can type in hash footer , wrap okay , and then you want to do the squiggly , brackets I'm not sure what there is a , cold so what what you need to do is , click on shift and then you need to , click on the square bracket the left one , okay and then you'll need to hit enter , and then we want to type in border and , then colon none okay if you actually , scroll down you'll see that border has , been removed and then what you want to , do is semicolon and then that is done , okay so for the header you need to hash , header wrap and then the squiggly , brackets enter border :none semicolon , and done all right and then click on , publish click on close , okay so that little border is removed , I'm not sure if you can see it or not , probably not , but for the footer you can see that , really clearly it looks really nice and , clean now and that is pretty mu chit for , the video so thank you guys so much for , following the video if you liked it and , you found it helpful then make sure to , give iota thumb sup and subscribe for , more videos let me know if you have any , questions in the comment section down , below if it's more private you can send , it to support at home ensure calm .