web app website design

web app website design

today, i'm gonna show you how to make an amazing parallax wordpress website (music playing) hi, my name is hogan and welcome to the tutorial! today, i'm gonna show you how to make this amazing parallax wordpress website and this tutorial isn't for people who want to learn how to code a website or build a website that is like facebook or amazon but if you want a website up and running within a few hours that is simple and clean and modern without learning a lot of code then this is tutorial is for you. so this video is basically perfect for freelancers, online entrepreneurs,

small to medium sized business owners, or even if you want to be a future web developer then it's great. so by the end of today, you'll have a fully functional website that is seo-friendly, woocommerce compatible, meaning you can add a shop to it , it loads quickly, and is super mobile responsive so let me give you a tour of the website and show you how it works and what i'll be covering in this tutorial okay, so let me show you a demo of how it works. so basically inside the website and let's turn on that builder and i'm super excited 'cause it's really amazing basically, you've got all these different modules which are built in, you can drag it to these different sections on your website

and it saves a lot of time. you don't have to download anything additional but i'm gonna show you how to create this image which is the parallax scrolling background and it's really cool but something that is really more cool is that you can add in, you know, gradients free background, a video background, or a slider-type background as well so you can just set that very simply. you just have to upload the images and i'll show you where to get amazing images for free as well so then i'll show you how to add in this text. really simple to edit. it's just like a word editor so if you delete that text, change the text, and you can just click on save

and basically you're done. i'll show you how to add in your buttons all the text here for your quote section. it could be a mission statement show you how to add in this image here as well as this featured module so you can just drag and drop it. and if you make a mistake, then you can just undo it. you can also save the revision and and if you make any big mistake, then you can load the revision so you don't have to start over again and for these different sections, you can actually drag the whole entire section so for example, this gallery, you can move it up here

above the service section, like that so it could be about me and then gallery section like that that's really up to you, how you want to change the layout of the page. you can change the colors like that, but with the gallery section, it's really cool because you can showcase your work and when people click on it, it opens up in a live box so when people click on it, they can view your work like that and i'll show you how to add in this video section which is really cool because when people are watching that video, the background is darker

to focus attention on that video itself okay, scrolling down. i'll show you how to add this blog section and i'll show you how to add in blog posts as well how to add in text, images and video and also how to customize the widget area and scrolling down. i'll show you how to add in this parallax background with these icons and this map as well, this google map and then i'll show you how to customize the footer section as well as add in the social media icons and when people click on it, it scrolls them back up so that's a really good user experience and if you scroll down like that, you'll see the header design is also a sticky so it stays up there

and it provides a great user experience and what's really cool about it is that it's a one-page website so people can click on the different sections and it will scroll them down but you can create as many pages as you want but if you know how to create the first page, then you'll know how to create any other page for example, you could create a page like this and this has a really awesome parallax features so this is a layout which is actually built-in to the theme but i'm actually gonna show you how to build the website step by step so you have a good understanding and the skills how to build your website

that way, you can enjoy a lot more if you want to check all the layouts, you can check the demo website in the description so parallaxdemo.com and let's go back to our homepage you can also add in a shop as well but i'm not gonna be showing you how to set that up in the tutorial because that's gonna make this too long but it's actually really easy because it uses a really simple plug-in called woocommerce so if you click on that

and that shows your product and people are able to buy from your store and this website is actually super mobile responsive so it'll scale down really well on all mobile devices, on tablets and things like that as you can see, it looks really awesome and that's basically it. so basically if you like what you see, follow this tutorial and i'll show you how to make this website step by step and you can have an amazing, clean, modern website by the end of today so i'm gonna go through an overview of what we need to get started okay, so before we get started, i'm gonna go through exactly what you'll need

so the first thing that you'll need is a domain name and, basically, that is your web address so for example google's domain name is google.com. your one will be basically your name or your business name.com and the second thing you'll need is hosting and hosting is basically where all your website files, for example, your text and your content, your images, are stored so the people all around the world can access it 24/7 so those two things are must-haves and all websites that you see online have those two things so if you have those two things, then you can skip ahead

the third thing that we'll need is to install wordpress so wordpress is basically a content management system and, basically, all that means is a platform where you can build your website and you don't need to know any code and installing the theme, this is basically the drag and drop builder that we'll be using and that is amazing so i'm gonna go through the cost. so for the domain name, normally it would cost you around $13.00 a year but i have a coupon code which will get you a domain name for $5.99 for a year and for hosting, it would normally cost you around $10.00 a year i mean $10.00 a month, sorry

$10.00 a month but i also have a discount and i think it would be $8.00 or something so around $8.00 per month and install wordpress, that is free and installing the theme, it's also free so the total costs to start, it's around $14.00. so $8.00 a month would be around $.30 a day so that's really affordable and it's really cheap to get started so if you have any questions, make sure to drop it down in the comments section and we're gonna begin so you can open up your browser and then either click the hostgator link in the description below

or you could just type it in here. so type in "host..." "...gator" ".com" and then hit on enter so i've basically been using hostgator for about 5-6 years now and they've got amazing live support so you can contact them if you have issues and they're affordable, and they've got a money back guarantee so let's click on get started now! normally, i recommend getting the baby plan because yu can host unlimited domains

for the hatchling plan, you can only have one single domain name so with the baby plan, you can share it with your friends and family and it's just the best option so business plan is probably a bit too much for what you need. so we're gonna click on sign up now so i've got to enter in domain names. so you to sort of choose a domain name and sometimes it might not be available so you might have to try again. so parallaxdemo and then click on the outside here if it's available, it will give you a tick. if it's not, it'll become an x so i normally recommend that you pick a .com extension because people type that in

to their browser because if you get like a .club, if people type in a .com, they won't reach your website then you've lost some traffic so i'm gonna scroll down and for the domain privacy protection, we're gonna untick that and then we're gonna scroll down here to the package type and we're gonna select the baby one and i recommend choosing 12 months because you get a bigger discount but you can month to month if you need but normally, if you're building a website, you're probably gonna have it for more than a month anyway so just get a bigger discount. so i'm gonna go 12 months

for your username, you just need to type that in. security pin, type that in and then all you need to do is to just fill in your billing information here and your credit card details you can also pay by paypal as well and you'd be asked to long in to your paypal account after when you check out so i'm gonna quickly fill those in so after you've filled your details in, then you can scroll down and you get the additional services so we're gonna untick all these services because you probably don't need them at the moment

and if you followed my channel, i actually made videos to show you how you can set these up for free using some plug-ins so scroll down and you'll enter a coupon code here so type in hoganchua h-o-g-a-n-c-h-u-a. and then click on validate so this basically gives you a bigger discount. so, as you see here, you get a 35% discount, you also get a $5.99 domain name so after when you've done that, you can click on "i've read the terms and services" and then just click on check out now!

and then after when you've checked out, then you'll either get a paypal login we have to log into your account and pay the amount or you get a confirmation page that looks like this and once you've got that confirmation, then we need to go back to our email to check our details, to login to our cpanel to install wordpress so log in to your email account and you should get a email, something like this: hostgator - your account information so just click into that and what i want you to do is click on the control panel url and then you'll need to copy over your username. copy that to your clipboard. and then also copy over your password

and basically paste your password and username into here so i'm just gonna type mine in 'cause i've changed mine and then click on log in so once you've done that, then i want you to scroll down let's just close that for now scroll down to software and services and click on quick install wait for that to load so you can either click on wordpress here to install wordpress or you can scroll down and click on install wordpress here

and i want you to click on install wordpress and click on this drop-down and you should only have one domain. as you can see, i've got a few domain names so let me try to find that parallax demo and leave this one empty for your admin email, type in your email address for the blog title, so this is the title of your website i'm just gonna name it "logo" for now

and you can change that later on so don't worry about that. your admin username, so this is your login username that's about it and click in install wordpress click on no thanks on the web designer and that will take about 30 seconds to install the wordpress on your new website once that is done, then click on view credentials and let's click on the admin area. sometimes when you've just bought your domain, it might not actually be up yet because it takes time for hostgator to set it up on the back end

so hopefully it's up by now click on that. so luckily it's up for us if it's not up yet, maybe take a 15-minute break or something. worst case scenario would be about 24 hours but normally it's pretty fast so copy over your password and your username let's type in my username here -oops and paste in my password. click on log in so congratulations, we've basically installed wordpress and this is your wordpress dashboard

so it looks a little bit overwhelming at first but it's really not. we can close a lot of these things this is basically our dashboard to control everything okay, so let's go to visit our website and see how that looks so our website is pretty plain now and it's got no content or anything so it doesn't have the drag and drop builder because we haven't installed the thing so we're gonna go back to our dashboard and we're gonna configure some basic settings so let's close these things to clear things up a little bit dismiss that. close that, close that close that and close that

so that's cleared up everything now what i want you to do is to go to users and click on your profile so we just want to set in a new password, an easier password so you can remember click on generate password and i'm gonna hide that i'm basically gonna set in a new password.you don't have to but then you'll have to remember this password but they've emailed you this password anyway. so let's go to confirm that and update profile

so once that is done, i want you to go to settings and click on permalinks and i want you to click on post name. so basically what this does is it sets the title of the post or the page in the url because you don't want a url structure that has "?p=123" because that doesn't explain anything to your user and it's not good for search engines. scroll down and save so once you've done that, then i want you to go to plug-ins and click on plug-ins and basically plug-ins are sort of application that enhances the functionality of your website so for example, on your phone you've got apps like pokemon go, you got whatsapp, instagram those are all apps for phones but plug-ins is sort of for websites

so we're gonna deactivate these so select all and deactivate first, apply and i want you to delete them because it might conflict with our wordpress builder theme so select it again and delete apply and that's done so we've basically configured the basic settings now i want you to click on appearance and click on themes so we're gonna install the ultra theme by themify that includes the drag and drop builder

so if you look the video below, in the youtube description, there's a link there to download that theme so click on that theme and download that to your computer and you also got another link there which includes the content of the tutorial so it's got the images and everything so you can follow along, step by step, and it'll be awesome so download that on to your computer and it should look something like this it should look like themify ultra.zip if it automatically compresses into a folder, like that, then you need to right-click it and compress it back into the zip file. so i don't want that anymore

this one will appear in a zip file and then you can double-click it or you can right-click it to open it up and it basically includes all images that we'll be using so once you've done that, then we're gonna go back to our website and we're gonna click on add new and then we're gonna click on upload theme click on choose file and then we're gonna go to desktop and then i'm gonna find the files and click on open so make sure that its a .zip file that you're uploading click on install now

so that's gonna take a minute or two. you can see the progress down here but if you have issues installing that theme, then make sure to go to my website www.hoganchua.com and then go to my faq scroll down to theme installation and if you read these, it will probably help you out if you still can't fix it, then make sure to leave a comment down below so let's go back here so once that is done you should get a "theme installed successfully". and i want you to click on activate and that will basically activate the theme for us so i want you to click on x. so don't import that, click on x

and once you've done that, you can dismiss this notice up here so let's take a look at our website now. so visit our website so this is the website with the theme installed. as you can see, it looks a lot better but we're still gonna configure it so before we actually start building the website so the first thing that we're gonna be doing is adding in some pages so to do that, click on the dashboard again and then hover over pages, click on add new. just click on that and then i want you to delete the sample page first 'cause you don't want that. just trash that and click on trash again

and delete permanently for that page and click on add new and i want you to type in home. this will be our home page and that's basically all you need to do so click on publish and if you want to add additional pages, this is where you add your pages all you need to do is click on add new, type in the title of your page and then update now because this is a one-page website, i won't be showing how to build and add these new pages but definitely you can add it on later on so what we're gonna be doing now is i want you to go to appearance and then click on menus so i'm gonna be opening up a demo website that i built before so i can refer to it

so let's click on that so basically for the menu name, i want you to type in top navigation. it doesn't matter what name you set it as. it's just for you as a reference. click on create menu and then what i want you to do is if you have pages here and then you want to add it to your menu, this is your menu then you need to select it and add to menu and that will appear here because this is the home page, we probably don't need that because people know that when you click on the logo, it goes to the home page so it's sort of a waste of space

so i don't do that but what we're gonna be doing is setting in some custom links the custom links are the links up here which will link to our different sections on our website so what we're gonna be doing is clicking on that and i want you to copy your url you don't want anything after that "/" so you don't want wp or anything like that you just want your website url. copy that select that and paste that in make sure that is correct and then when you've done that, type in "#" and then in lower case "about" for your link text, this will be about and then click on add to menu once you've done that, then i want you to repeat the process. this one will be for services

link text will be services so the name, it could be work or anything like that it doesn't really matter but probably just follow along for now and then you can edit it later on paste it in again.the next part will be gallery, i think oops, forgot to add in a title next one will be blog add to menu. okay, close that and next one will be contact and then link text will be contact add to menu

so once you've done that, then if you want to, when you create new pages, you want it to automatically add into your navigation menu up here, then you can select this thing up here which i will and for the theme location, you have to select main navigation so it will actually appear up here and then click on save menu so once you've done that, then i want you to go to visit website and that will be your website and your menu up here and if we go back to our dashboard, i forgot to show you something that is really important let's go back to our pages and we created the home page, if you click on view

you'll see that it has /home/. the home page is not actually something just like that with the plain domain url you want to set it to this url here. you don't want to have /home at all so to do that, what i want you to do is to click on customize sometimes it takes a few seconds to load or automatically take you to themify options. click on that click on static front page and you want to set a static page and for your front page you want to select home save and publish and then close that

so for your home page right now, it would be just your domain url.com so that's what you want and only then will you be able to see the themify builder so now what we're going to do is configure some the themify settings and also to set in the header and also to set in the page layout so what we're gonna do is go back to our dashboard hover over themify ultra, click on themify settings and then the first i want you to do is scroll down and for the google fonts, i want you to select show all google fonts

so it'll show more fonts that you could use for your website so you can click on save and once you've done that, then i want to click on default layouts and default layouts is basically where you can set up the default page layouts for your posts or your pages so what i would like to do is i like to right-click and visit our website open it in a new tab so you could see what's going on and then, for example, if you want to set the page layout, you would scroll down this is where you set up your post layout page layout is down here

so we've got the sidebar here and we've got a title here we don't want that so for the page sidebar option, we want no sidebar and we want to hide the title on all the pages and we don't want people leaving comments on our pages so we want to select that and then click on save and then i can just refresh that and then you'll see that it should be gone so basically you've got a blank canvass to work on

and that's great now what we're gonna be doing is setting in the header so let's go to theme settings here and if you scroll down to the theme appearance here, then you can look at header design and i want you to select the...i think it was the 9th option so this is the header that we want. so let's select that and save and let's give that a little refresh okay, and that is basically the headerdesign that i want okay, so you've got a lot of options there but i want mine just nice and simple

okay, you can disable the sticky header if you want to. so the sticky header is for example, if you are scrolling down, the header actually stays there i feel that's quite nice for good user experience but that's up to you so i'm gonna leave that. i'm gonna exclude the side tagline the search form, and exclude the rss so this is the tagline this is the rss and this is the search so we're gonna exclude that

and then what we're gonna do is save it and give that a little refresh okay, looking awesome since we're here, i'm also gonna show you the settings for the footer please scroll down, just a little bit. you'll see the footer design so i'm gonna exclude the site logo for the footer and this is basically the back to top bottom. i like that and i'm gonna leave that there and some of you might want to remove this thing here. so i'll show you how to do that now we're gonna scroll back down and should see footer text 1 and footer text 2

so basically this is the footer text 1, this is footer text 2 if you want to remove this, then all you need to do is to hit on space and then just click on save and that will remove that for you okay, that's nice and simple, and done now what we're gonna be doing is adding in the social links for your footer so to get the important things out of the way first. so let's go to social links here and basically all you need to do is paste in your profile url. so i'm gonna quickly show you how to do that okay, so copy over your facebook url

go back to the website, paste the facebook one into there close that, get your twitter one copy that, paste that into there if you have google plus or if you don't, then you just leave it empty and it won't show up but if you do, then you can just copy that over uh, youtube and make sure you can subscribe to my channel. that will be awesome. so let's paste that into there and let's say you have instagram or you have something but it just doesn't show up here so you can add that on. all you need to do is click on add link

and let's type "instagram". and the link, you can just copy over your profile link paste that into there and you need to click on insert icon and we've got all the icons here. just click on brand scroll down to instagram and once that is done, then that is done. so you can rearrange everything just by dragging and dropping and that's pretty much it. so you can set up the icon color and the background color but for this tutorial, we don't need to and just leave it empty for now so let's click on save and what you need to do now is go to appearance go to widgets

and then you'll need to go to themify social links. you need to hold it and drag it and you need to put it into footer social widget and drop it into there because these are external links, linking out to another website, i want to open the link in a new window okay, and click on save once that is done, we will then visit our website. hopefully, that would show up okay, awesome. so go to our social links down and i'm just gonna quickly close these windows okay, so the next step is showing you how to change the colors and where you can add in your logo and things like that so we're gonna click on customize here

and then wait for that to load a little bit so we'll be in themify options. click on advanced for more options and then basically to change a logo, all you need to do is click on site logo and tag line so click on that. click on site logo if you have a logo already, you can click on logo image and you can upload your image through here so your logo has to be a .png file. that basically means it's a transparent file and that is the best file to use now you also want to change the size, you can change the size here. and if you want to move the logo position,

then you can select this option here but for now, if you don't have a logo, then what you can do is just select site title and enter in whatever site title you want and then you can pick from the hundreds of different fonts here. so for example, i'm just gonna pick on open sans and i'm just gonna save it as maybe 16 pixels or, i don't know, maybe 24 pixels. like that and then i can change it to bold and i might change the color to white because i'm gonna set the header color to a dark gray

so once you've done that, you can close that like that and then if you want to edit the background color of your header section, then you'll need to click on header and that will be your header wrap so the header wrap color would be probably be a 3b3b it's a nice, neutral color either go for a dark gray or white color. so i'm gonna be going through some design tips in just a moment because a lot of people, you know, they go off to build their own website, they don't really follow the rest of the tutorial where i give these tips and things like that and the website doesn't turn out that great

i know that because a lot of people send me the url because they have problems with their website and things like that. and it doesn't look good, okay and if your website doesn't look good, then people are just gonna click off your website in a second and basically there would be no point in building a website in the first place so i'm gonna explain those tips in a second if you noticed that on the demo website, we actually have a transparent header, the reason why we set a dark gray header is because not all pages can be transparent so you're gonna have to have to set a background color regardless so what we're gonna dow now is we're gonna close that. and close that

so i'm gonna explain some basic design techniques i'm not a designer but these are some of the really important tips that i've learned when building my websites so these are like tips that top websites such as apple, uber,tesla, they all use these techniques you could ignore these if you're a designer or something like that but if you're just beginning then i recommend that you watch this part so the first rule or the first tip is that i recommend sticking to one font family for example, if you go www.apple.com or if you go to www.tesla.com,www.uber.com they don't use many different fonts

so this is a chrome extension called whatfont and you can basically see what font they are using they don't have 3 or 4 different fonts. you don't need to make it really fancy by using a lot of fonts just stick to one especially if you're just starting out and there are two different types of typefaces. one is called sans serif which is sort of the modern and clean type where serif is a little bit more traditional and it's really good for long reading or blogs and things like that but if you just want to build like a modern website, then i got some recommendations so open sans, roboto or lato and you can also try railway, montserrat and pt sans so the second tip is to choose just one main colour. again, you don't need a lot of different colors to make

a website look great. as you can see, apple, they just keep it nice and neutral. it looks really simple and nice so what i recommmend is going to a website called kalua....i think that's how you pronounce it let's click on that and also check out some color meanings so colors are really important because each color represents a different sort of perception or feeling you don't want to pick the wrong color for your business. so read up on that and choose the right color i don't know what's going on here but click on advanced and proceed to that website so you can look at this website and let's say you pick a blue sort of theme, you pick a blue color click on that and you can click on edit, sorry

and then you can get the color code here so after when you've done that, then scroll down so i recommend using a lot of neutral colors especially to separate your content for example, if you go to apple and go to one of their pages for example this map page and if you see that the white background and it separate the content at the back with a gray background scroll down and you'll see that they separate the content white background with a light gray background and also divide the line with the gray which is a neutral color and you can also use the neutral color for your header sections and also your footer sections

and also anywhere that you don't know which color to use and also make sure to separate your content. so use a lot of white space because white space makes things look really simple and clean and also use divider lines and background colors such as this dark gray and then make sure to crop your images before you upload i'll be showing you how to do that in the tutorial itself but if you don't follow along, then this is the ideal size to crop your images at so 1800x1000 for your hero images and hero images are basically the image that goes from here to the other side

and then for your blog featured image, i recommend 1165 pixels times about 665 pixels so your blog featured posts are, for example, scroll down here so that's your featured post. so that's the size i recommend and for your body font, you want it to be between 15 to 25 pixels so as you can see, like a 28 pixel font size is a little bit too big and it doesn't look very professional so what i recommend is around 16 pixels. that is the best size that i found and for your line length, you want it to be between 45 to 90 characters across so keep it easy to read you don't want a line of text which is like this

it goes from there to there and it's just really hard to read so you want to make sure that it is between 45 and 90 and when you're using headlines and subheadlines, make sure to define some sort of heirarchy using your font size and colors and also the boldness of the text for example, this is a good example but this is not so good the reason why it's not so good is because when you're first looking at it, it sort of like you don't know which line to focus on because they're both the same colorand they're both bold

you want it to be something like this. bigger, bolder, and with a lighter color like this it just looks a lot better and then i recommend not using pure black for your backgrounds or with your texts. so i recommend using dark gray instead if you'll notice like when you go to any website, you'll notice that they don't use pure 100% black it'll either be like dark gray or just a gray color. so if you go to apple this is not a black font, this is like a really dark gray font this is not black either. it's really, really dark gray because the reason is it's just too much contrast between the white and the black

and then the last one is to organize all your content and all your images before you actually build your website and it will make things a lot easier and i also recommend taking a look at websites that you like and forming your layout so that's pretty much it and i'm basically gonna start building the website now so i'm just gonna close all those and i'll leave that one and back to our main navigation section right here so this will be the main navigation and the menu container is basically where we can edit the menu location

so we're gonna set that to relative so once you've set that to relative then we're gonna make sure that it's sort of centered so i'm gonna type in 3 pixels and you'll see that it moves down we're gonna minimize that and for the menu link, we're gonna click on that and we're gonna make sure that the menu link is open sans as well so open sans is the font that we're gonna be using on this entire website but the funny thing is, by default, it's already open sans so whatever font that you've chosen, then make sure to apply it here

and the size, i'm gonna set it to 16 and then for the menu link, i want to change the color to white but you'll notice that it doesn't actually change the color. so just set it to white regardless because we need to set the menu active link for these colors here now for the menu link hover, i want you to set this to sort of a light gray so it will be e6e6e6 so this keeps things really professional. so when you hover over it, this link will actually be white i'm gonna show you in a second so this is the menu active link. the reason why it is the active link is because

we're actually on the home page at the moment and all these links are actually on the home page so i'm not sure if you know what i mean but, for example, if if i'm on the mac page, then the active link color right now is gray so if we go back here and we change the menu active link color to white, then it'll be white. and when you hover over that, it'll show up as a light gray for your menu active link hover, we want to keep it consistent so make sure it's the same as the menu link hover so copy that to..oops. to here

and paste that in there and once that is done, then that is all good for the drop down container, that basically means the settings for the drop down box. so you can set the styling for that as well now the next thing we're gonna be setting is the footer section for the footer, we can click on the footer and it's pretty nice having a white footer already so you can keep it that way if you want to but for this tutorial specifically, i'm gonna change it to dark gray so i'm gonna change it to 2929

and 2929 is a little bit darker than our header now what we're gonna be doing is setting that and then going to footer font and changing the footer font to white so we can actually see the text and this is a link so we'll need to click on footer link and also change that to white. and that looks pretty good and that's about it. you've also got other settings here but i'm not gonna play around with those everything looks good and we're gonna click on save close it and that's pretty much it. so the next part is really important. it's the first row where we'll be setting in our hero image

the parallax hero image that you see here and this is really important because this is basically the signage for your business you want to make sure that it is clean and also the image is not blurry and this is probably the most important part so let's go and find our images first so i've got some really good places where you can get images and you can go to www.unsplash.com and you also got another place called www.stocksnap.io and another place called www.pixabay.com so all these 3 places, you can get the images from here and you can use it for free without

crediting the author of the image or anything like taht or even for commercial purposes so this is a really popular website and you can use these ones too if you can't find any images if you still can't find any images, then i recommend checking out www.photogene.net now this is where you can get images for a dollar and they basically have a bigger library so choosing the right image is really important because you don't want to misrepresent your business or your service so for example, if you go to a restaurant or something and you see a salad. like a picture of a salad, sorry and when you order it and when you get that salad, it looks nothing like the one in the picture

so you're not meeting the customer's expectation and that's not a good at all so you want to pick a correct image that represents your business so for example, i'm gonna show you how to download it and then we're gonna crop it so let's say you like this image here. we're gonna click on that all you need to do is click on download and that should load up really awesome image. right click and basically save that image on to your computer create a folder and make sure that everything's organized but i've already got the images and you can basically download the images to follow along the tutorial

it's in the youtube description so once you've got that image on your computer, then i'm gonna close all these and then we're gonna go to a website called www.fotor.com so this is where we're gonna edit our images and i like this because you're able to add text to it, you're able to enhance the image. the default wordpress one, you're not able to do that so after when you've downloaded it, click on open and i wanna go to my contents folder and this is the image that i've chosen so if you've downloaded to contents, select your image uncropped open and then close that. and you'll notice that the image here is really, really big

i don't want a really big image because it's gonna take too long to load and people are gonna click off your website if it takes too long to load so click on re-size and click on the lock to make sure everything changes proportionately and i want you to type 1800 and that's a good size then go to crop type in 1800 again and type in about 1000 in height

so i found that a good height for the hero image and then i'm gonna move it to wherever i want. i'm gonna put it probably just above that person's head and click on apply. and afterwards when you've done that, you can click on enhance to enhance the image or you can edit the basic settings, add text, or things like that but i think the image is good already so i'm gonna save it i normally say this is normal quality because you don't need a big image and basically save that to your computer and after when you've done that, then we can go back to your website and we can basically turn on the builder so after when we've turn on the builder, then this is basically a row

we're gonna be adding in a row background. so click on the row options and we're gonna change the row width to full width so it goes all the way across. from here to there click on styling and for the background type, we're gonna select image but you can also select gradients, you can also add a video. so you can upload your video here and if you want to know where i get my videos from, check out my website and go to my blog post and click on my ultimate list for building wordpress websites and i'll list everything that i used so let's go back here and you can also add in a slider as well

and to do that, make sure to also set the image size to original and set it to full cover if you do add a background slider and we're gonna go to image and then we're gonna go to browse library. don't click on upload because it will automatically resize your image and will make it really blurry so upload that, select files and we're gonna upload the hero image this one here, 1800x1000 and open and when you've done that, insert file url

and it should show up. if it doesn't show up, then what i recommend is to just click on save or to refresh your page and redo it andonce you've done that, then for the background mode select parallax scrolling and if you don't want the parallax scrolling feature, another popular option is the full cover option which basically means that image is just static it will bascially just stay there and that's a popular option for the background position, you want to select set as center and then after when you've done that, then we can click on save

so as you can see, there's a little gap up here and we want to close that gap so let's click on save first and let's close the builder to do that, we need to go to edit page and i want you to scroll down to themify custom panel and for the content width, you want to set full width so you'll need to do this if you want to set a hero image on all your pages so update that and then click on view page and hopefully that gap will be gone

and now what we need to do is to add some text and buttons in there so turn on the builder and then what we're gonna be doing is dragging in a text module and then you can type in your title. so i'm gonna type in parallax and then i want you to highlight that text and click on toggle toolbar so i want you to select heading 1 for this and you can preview that to see what that sort of looks like again, that looks pretty good. and you can sort of set the heading 1 style in the actual module itself in the text module itself you can go to styling and then you can click on the heading tab

click on that and you can actually set the font color and things like that here what that basically does is it'll edit the heading 1 for this particular module only so sometimes it's convenient but i recommend setting it for the whole entire website universally because it is more convenient and it will save you more time later on so i'm just gonna delete that and leave that for now and then we're gonna set it in about 2 minutes so we're just gonna click on save for now and then what i want you to do is to drop in a text module

and then this will be your subheadline. so infinite...... ....possibilities and for this one, i'm gonna go to styling and for the font, i'm gonna set the font size to 24 pixels and you can go to text to sort of preview that and that's what i want you to do for now and then click on save next part will be adding in your button. dop in a button module the text, we're gonna type in begin. and for your link, so wherever you link your button to then this is where you paste in your link. so for example, i want to link it to apple

i'm just gonna copy that link paste that link into there and then if it's an external link, then i suggest that you select open link in a new tab so i might just do that and give it a little preview so you've got your color optionshere, you've got your style, the button options here but i don't really like the color options here so i'm gonna show you how to style it properly so go to styling and click on button link here and what we're gonna be doing is changing the button so it looks like this so it's an outline, a transparent one

so for the background color, you want to set that to transparent so this is basically the transparent meter thing. so drag it down to zero for the background hover, so this is the color when you hover over it. so this is white so change that to white for the link color, this will bascially be white. like that anfd for the color hover, this would basically be gray. so when you hover over it, it turns gray, that link so go back here and the color that we're gonna set is 3b3b and for the decoration, keep that as is

so as you can see, you don't have a border yet so you need to scroll down and for your border, you want it to have a white border and you also want to set the thickness of the border to 2 pixels and there you go. looking great, click on save so now the cool part. let's click on the row options click on styling. scroll down and i want to set the font color to white so what you'll see now is everything inside the row will turn white. so this is just the more efficient way of doing things and that's how i do it so i recommend doing it that way. and then you want to align everything in the middle so we just align everything

in the center like that now we're gonna add some spacing on the top and the bottom to do that, we've basically got the padding and we've got the margin so both of them add space but they're a little bit different so imagine that there is an invisible box around this image and margin basically adds space inside that invisible box. so if we deselect that and we set in 5% here the it'll add space outside the invisible box because you don't want space so make sure to delete that and deselect this one and then put in 17.5%

padding to the top so it adds space outside the invisible box and that's what you want and for the bottom, 17.5% as well i use percentages because it is more mobile responsive it resizes better than using pixels and once you've done that, then we can click on save now the next part, we're gonna click on save. we're gonna click on close so let's set the heading 1 font universally. so click on customize and click on headings

so this is the heading 1 and if you need to double-check, you can right-click and inspect that and you should see heading 1 there so what i want you do to is click on this and change the size to 80 pixels or whatever you want and change it to the font that you selected. what i want is open sans and i also want to change the font width to bold to make it stand out a little bit more and, like i said, it gives it a little bit more heirarchy. for example, this is most important second most important , third most important. and that is basically it. and you can click on save and then you can close it so what i want you to do now is to turn on the builder

and i want to move this infinite possibilities a little bit so i want you to double-click on the text module. click on styling and then for the margin, deselect that and you can actually type in -2% and that will basically move it up. so - is the space in between click on save okay, that's looking pretty good. now i'll show you how to set the transparent header so for every page that you want to set as transparent, you need to go to edit page and then scroll down to the themify custom panel click on page appearance

scroll down and then for teh header background type, select transparent header you can also edit the header color if you need to so after, click on update and then we're gonna view the page so that's a really nice transparent header now and i also have a really important tip: sometimes you might have chosen an image that is sort of a different color and you won't be able to to see your menu items up here so one way of making it stand out more is actually adding in an overlay color so you can go to the row options

and go to styling. for the row overlay, you can set in a more darker color. so set it to black change the opacity and, as you can see, your whites will stand out more because if you set in a overlay color and it's darker, it will stand out more so your menu item will stand out a lot more so that's one way of doing it but the best way i recommend is using a gradient because with a gradient, you're able to set it just for the top part. make it darker just for the top part so what we're gonna do is we're going to click on this black thing here and then drag the opacity down to about 25%. and then click on this white one here

and then drag it up to about 20% and then once you've done that, then drag the opacity here down to 0 so what that does is basically it adds the darker shade up here only so for example, it goes darker like that so imagine that it's darker up there then it will make your whites stand out more so let's click on save save that and close that and that's pretty much it and everything looks great

and one more thing i want to show you is you can actually add in animation effects so if you double-click on that, you've got your animation effects here and what i recommend is just keeping it really simple so for example, we just set in like a fade in this might be just a 1-second delay and then i might set in another fade in which will be a 1.5-second delay 1.5-second delay and the bottom might be a 2-seconds delay and that actually gives it a cool effect when people actually land on your website

set that to 2 and save save it. close it okay. 1,2,3. amazing. so congratulations! that is probably the hardest part of the tutorial and we're gonna be moving to the next part: the quote section so we're gonna add in a quote so let's turn on the builder again and i want to set the background color to a dark gray so click on the row options and click on styling for the background color, set it to 2929. that makes it dark. and then click on save

now i want you to drop in a text module and i'm just gonna go to my demo website and copy over that quote so copy that to your clipboard. go back here and you don't want to just paste that in. anytime when you paste in pasting in something in from another website, try to paste it in as plain text. so click on this icon here close that. and then you paste it in so that will remove any styling on that text so once you've done that, then i want you to the styling tab

and for the font, because it is a quote, i might set it to a different font so pt serif and then we can change the font size to about 24 pixels and then you can give that a little preview i'm just gonna change that color to white here. okay, that looks good now i also want to align it to the center. like that and theni want to make this text a little bit smaller right here so waht i'll do is i'm gonna change that to a heading 6 and then what i'm gonna do is go to styling and go to heading

and i'm gonna set the heading 6 here because i'm probably not using it this much on the website and this is just a little bit more convenient sometimes so pt serif and you want to change the font size to 14 pixels which makes it a little bit smaller give that a little preview, see if that works okay, that looks pretty good and that's it. click on save and all we need to do is add some spacing. so to do that, i just go to the row options. go to styling untick this and for the padding i want to set it to about 5% to the top

4% to the bottom and that is pretty good and obviously you can add some animation if you want to. and click on save so in this section, you can put in a customer quote, what you do, your mission statement or anything like that we're gonna move on to the next part. so the next part, we're gonna add a little about me section and to do that, we need to set the column to this one here, the last one click on that. so you basically have one small column here and one big column so this column, we're gonna drag in an image module. drop that in there and for the image url, you want to click on browse library

upload files, select files and then you can put in your image but if you have been following along, then you can download this image here stare into the distance. click on open and then all you need to do is insert file url and give that a little preview and you've got a lot of settings here but i don't think it's really necessary so we're just gonna click on save and then the next part, we're gonna drop in a text module here basically, we're gonna type in about me and then we're gonna change that to heading 2 and then we're gonna click on save. i'm not gonna set it here because we're gonna be using it quite often so

i want to set it universally set that in here and drop in a text module below here you can type in about yourself or about your company so i'm just gonna copy the text over from my demo and then paste as plain text drop it in there like that give that a preview to see if that's what you want and that's done, really simple. click on save what you can do is you can also change the column width just by pulling it like that so that is really useful and that looks about good to me

and what you can do is also hover over here and select the column alignment. so basically it will align the image and the text on the right hand side here to the center so that looks really nice so once you've done that, then what i'm gonna do is click on save for now and let's go and edit the heading 2 tag. i will also show you where you can edit the body, text, fonts and stuff like that so close that and we want to go to customize and what i want to do is

i want to go to headings. this is the heading 2 tag make sure that is open sans or whatever your default font is and also i'm gonna change the color to about a 4d4d which is sort of a dark gray and that makes it a bit lighter and i like that a bit more and i also want to change the font width to i think 500. that looks about good and then we minimize that. and if you want to change the body font, click on body body font and then change it to whatever font that you've chosen. by default, it's already in open sans and make sure to don't change it to any font bigger than 25 pixels. i recommend 16 but by default, it's already 16 anyway

and then we can also change the color but i find a dark gray color really nice and professional but if you do want to change, maybe change it to sort of like a 4d4d. or something like that which is also a dark gray but i'm gonna keep it as default. that looks pretty nice and then click on save and publish. close that and then we're gonna scroll down. we're gonna turn on the builder again and we're gonna add in some padding and i also got something cool to show you so let's add some padding first. so options deselect that

and then for the padding, i want to set around 6% for the top and around 4% for the bottom and a really cool thing is, let's say you made a mistake, then you can actually undo things and you can also redo it as well and you can also save this revision so for example, your microsoft word can save it, well it's the same for this builder you can click on save revision add a comment to it, about, and click on ok and if you have any troubles, then you can load revision so after when we've done that, we can add the services section so we're gonna click on the row options and what we want to do is set in a background color

now, we want to set in a light gray so f6f6f6 and that's a really nice gray to separate the content, to make things professional once you've done that, then click on save and we're gonne drop in a title. so text this one will be services or it could be work or anythingthat you want. set it to heading 2 and the click on save so it's very convenient that you set it in the heading 2 already so you don't have to do it again and then what we need to do is drop in a feature module put over that and for the feature title, you're gonna type in your service or whatever

you want. so for example, it might be web design andn then here, you want to paste in a little description so i'm gonna copy over some text here. copy that select and paste this text paste that in there and then scroll down and you can give it a preview and that's what it probably looks like. but for the layout, you want to select this one. the last one and then we can add in an icon. or you can add in an image. that's up to you but i think icon is really good for this section

so for your icon, click on insert icon and i want to look for a paintbrush. so scroll down. it starts with p okay, paintbrush and then you can give that a preview okay, i might change the color of the icon to a light gray. 949494. which looks great. preview and you can add a circle around it if you want to by setting in a percentage to about 2% for example, 100% change the color to the same one give that a preview

so you can also do that if you want to as well. so i'm gonna delete that, actually change the icon to medium. and what you might also want to do is to link that services to another page where maybe you can describe a little more about your services so for example, i'm just gonna copy in this url here paste it into there and if you give that a preview, you'll see that the link changes to red if you want to change the link color, which i recommend that you do, go to stylinh and scroll down to link for the link color, i might set it to 4d4d

like that, which looks good and for the color hover, it is basically when you hover over that link then you can change the color. i might change that to 3b3b and for the text decoration, set that to none and then click on save and hopefully that's all good that's all good and the next step is really simple hover over feature and let's say you want to have 3 feature modules. select the 3 columns and hover here on the right. duplicate duplicate again

and all you need to do is drag it and drop it to the section that you want and to change it, just double click it and then you can change the title and text as well as the icons so i'm just gonna quickly do that okay, that's done. now you need to add some padding. so click on the row options go to styling and make sure everything is in the center align that and for the padding, i want to set around 5% to the top and about 2% to the bottom

now the next part we're gonna be doing is the gallery section. it's really simple first of all, drop in a text module, type in gallery set this to heading 2 and click on save so for your gallery, there are basically 3 options: you can use the gallery module which i'll be using or a image module, or a slider module so for a slider, you'll have a slider and people can click on that and it'll open up in a light box as well it's pretty simple to use but i just like the gallery options 'cause it's just nice and simple and it works well so drop that in and for the gallery layout, select grid

insert gallery and then i want you to upload files, select files and then after that, i want to click on gallery so these are the images that i have cropped already to about 1000x666 so there are 6 images and i recommend cropping them all to the same size so that everything is consistent and professional open that and it should take a minute or two to upload so when that is done, click add to gallery and then update gallery

and then you can preview that to see what that sort of looks like so you've got 6 images and you can select these to display the image title so give that a preview you can do that if you want but the important part is setting the thumbnail width so for the thumbnail width, you want to divide it by 2 of the original width so for example, 1000 divided by 2 which equals 500 and you want to make sure to divide by 2 for the height as well so that makes sure everything is resized proportionately

and won't appear blurry so 666 divided by 2 would be about 333 and after when you've done that, you can preview that so it can be divided by 3 or divided by 4 depending on what you want but it has to be the same. if you divide this by 3, then you're gonna divide the height by 3 as well and for the columns, because we've got 6 images, i want to set 3 columns 3 images per column, sorry and that will look really nice and once you've done that, i'm just gonna deselect that actually then you can just click on save pretty much

and that is done and then we're gonna go to the row, add some padding styling, align everything to the center scroll down to padding deselect that and we're gonna set padding to about 5% as well to the top 2% to the bottom so let's click on save and let's see if that opens up in a light box close that and let's click on a image. okay, that works well

and that's really nice. and you can add this gallery module to any page that you want so let's turn on the builder and let's move on to the next section. so that will be our video so for the video part, i'm gonna upload a background that you see here a parallax background so let's go her. go to row options and go to styling and for the background image, i want to browse library and go to the content folder that you've downloaded. so click on background video background for youtube video

and then click on insert file url and once that is done, then set it to parallax scrolling and for the background position, maybe set to center and what i want to do is add a overlay color so i want to set this to black and then change the opacity down to about 20% or so and for the hover color, i want to set that to a little bit darker. so i want to set the opacity to about 65 or 70% so it goes darker when people hover over it so if you just save that, then when you hover over it, it goes darker so when people are viewing the video, the focus is on the video

not focusing on the background the background will look great when you're scrolling but when you're watching the video, the it'll be focused on the video so let's drop a video module in there and this is so easy. you just need to grab a video so just go to a youtube video this is the video i found, it's pretty cool copy the url and all you need to do is to just paste it in here and then all you need to do is click on save and that is done

and we probably need to add some padding to the top and bottom as well so go to your row options, go to styling for your padding, deselect that and we're gonna set about 6% to the top this time and we want to set about 3% to the bottom click on save again and then we can save it so let's have a little preview. okay when you hover it, it goes darker. and let's see if that video works okay, so that's awesome and that's really simple. so let's pause that video and scroll down. now the next part will be the blog section here

but before we can actually add in a blog section is we need to add in the blog post itself so right now, i'm gonna show you how to do that. how to add in a blog post how to addin images and video as well so what we need to do is we need to go to our dashboard so go to our dashboard and hover over post. click on it and then we're gonna delete the sample post so trash that first and click on trash and delete that so to add in a blog post, click on add new

and then all you need to do is basically just add in a title "inspire the world". and you can paste in your text here. your blog post i'm just gonna grabe some text so i'm just gonna grab this text here copy that and i'm gonna paste it here as plain text so if you want to link it to another page or another website highlight the text, click on insert link and you can paste in the url here

or if it's another page or post, you can type in the title but what i'd like to do is click on the options here and for example, you want it to link to this website here, copy the link paste it into there and you can open link in a new tab but if you have pages and posts already on your website, then you can just select that from here that's pretty cool so add link and to add in a image, we're gonna hit enter there and we're gonna paste in the image between here so all you need to do is click on add media

and we can just upload files, select files and click on the blog folder and for this one, we're gonna select this one: blog 3 body image and i've cropped this image to 1165x775 click that image and open and then all you need to do is click on insert to post and that image will appear, so it's a really small image but you can edit that by clicking on edit changing the size to full size

and if you want it aligned to the center, click on center. update done. super easy. and if you want to resize it, you can just sort of drag it. like that and a video is even easier. click on enter and let's say we got a new video this one here you can copy that url and basically just paste url here. so in about a second, it will load up super, super easy and that's pretty much all you need to know. now we need to add in a category

so to do that, click on add category and this oen might be travel, so type in travel and click on add new and for your tags, it might be, um, peru and this might be the place that you're traveling to or something like that and then you can separate it by columns, i mean comma and click on add and that will add in your tags.tags will basically help people who are trying to search for a specific blog post

and it will help for search engines as well now we want to set in a featured image the featured image is something like this but this is the image in the blog post so you can set it to the same one but we're gonna set it to a new one so set that in and we're gonna select this one, blog 3 featured image click on open. so i've cropped the image to 1165x665 so that's the ideal crop size and you should crop it to that size as well

and then pretty much you can publish that and that is done and we can view that blog post and we can have a look at what it looks like so that's pretty much it and that's done and what i want to show you is how to actually sort of style it so if you want to change some of these fonts and you want to change the color or if you want to change the style so it just shows the date and also show you where you can customize the widget area here as well but before that, i'm gonna add 2 more blog posts so you can actually hover over here and click on post

so that's a shortcut. so i'm gonna completely add those in so i've added it in my last blog post. now, what i'm going to show you is how to edit this post date thing because that's what a lot of people asked me to do and it's really simple. so you can go to dashboard and then hover over themify ultra click on themify settings and then you want to click on default layouts and then scroll down and then go to default single post layout and you'll see the post date thing. you can either hide the date or you can display it just as a in-line text instead of that circle style

so you can select that and you can save it and let's go back to our blog post so you can click on all posts here ad let's go to preview that and that would be disappeared. so you got your date like that and yeah, let's show you how to edit it. so go to customize and once that is loaded up, then we can go to post because this is a blog post. so click on post and basically this is a post title. so we can change the post title here so click on post title and we're gonna change the color to maybe a 3b3b-oops

'cause you don't want to select the black one, it's too dark and that would be pretty good. it's a really dark gray and that looks great. and you can edit the size and everything taht you want.this is the post meta and you can edit the post meta here for the post date, you can click on post date and what you can do is probably you might align it to the center click on taht and it will align to the center. you can change the size as well to size 14. like that and that looks great and what else you want to know? you probably might want to know how to edit the styling for the sidebar here

and that is also really easy so that is what we call the sidebar here so click on that and you're able to edit all the sidebar fonts and also the colors and if you're scrolling down, you've also got the comments section if you want to change the comment button color, you'll need to click on forms and this will be the form button and you can change the color here so you've changed the color. i'm gonna keep it as defaut and then that's about it. so i'm gonna save it and publish and close it

and now what i'm about to show you is the widget area so let's go to our dashboard here and then we can go to appearance. click on widgets and then what we can do is arrange the sidebar so i'm actually gonna open this up in a new tab so you can see what is happening so click on view so if you look at the sidebar here, you've got the search, recent posts, recent comments, and as you can see and then what we're gonna do is i'm gonna remove these. delete that delete the recent comment. you can keep those if you want to but i want to delete it

so i'm gonna delete that, i'm gonan delete the search and the categories there and i'm gonna put in featured posts so drag it up and put it in the middle and you can just change the title to maybe popular posts you can also set the thumbnail as well by selecting this and then you've got a range of options here. click on save and then that is done. so let's preview that and see if that's changed so taht is pretty good. so you can add a lot of different widgets here

and i'll probably be uploading more videos on how to customize this section here, for example how to add an image, how to add in your instagram feed facebook stuff and twitter and things like so make sure to subscribe for more videos but i;m gonna leave it at that so now what we're gonna do is we're gonna go back here and make sure you save that and thenw we're gonna go to visit our website and we're gonna scroll down to the bottom section and we're gonna add in our blog post finally so we're gonna turn on the builder

and then what we want to do is drop in a text module and we want to type in blog or you can type in latest news. whatever you want and then we're gonna set a heading 2 tag save it and then to show your blog post, we can drop in a post module just underneath so you can show this on any page that you like. so the post layout, if you preview that this is the current post layout i want to select this one. this one is called i think it's the grid 3 layout. so as you can see

and you can set the specific categories you want to show, limit the number of posts but i want to display none for the content excerpt is basically a littler summary of it. give that a preview and if that's what you like, you can keep it like that i want to get rid of the post meta which is this section here and you can hide that and basically click on yes so that looks about great. now let's go to the row and let's align everything to the center and let's add some padding, deselect that, and the padding we're gonna set here is about

5% to the top and 2% to the bottom and that should be good. so click on save and that's looking good and the next part we're gonna be doing is the contact section so we're gonna be adding in a parallax background as well. so if you go to our home page and demo site scroll down, a parallax background and some icons so go to row options and go to styling, background image, click on browse library and then after when you've done that, go back to the content folder and select contact background click on open and insert file url

select to parallax scrolling, select the background position to set as center and let's add in some padding now, so we're gonna set some padding deselect that and we're gonna change that to about 10% to the top, 10% to the bottom so we can see more of that image scroll down and that's about it. we also want to set our overlay color so the text in here is a little bit more visible. so i want to change that to a little bit darker so change it to black here and then change the opacity to about 10% or something or 20% and for the hover overlay color, you want to make a little bit darker so maybe about 30% or 35% and then you can drop in a text module

and this will be contact heading 2 and then let's drop in the icon module. icon would be dropped like that and the icon, we're gonna put in the address first. so we're gonna select icon and let's look for a map. so m scroll down and that one looks okay we might select the white map and for the label, we might select melbourne, australia click on preview and that looks about great and then you can link it up if you want to. you can also change the button style but i think that's pretty decent

so we're gonna click on save and really easy. again, you just need to set in how many columns that you want so 3. and duplicate these ones. so duplicate it and duplicate it again and basically arrange it here and then basically you can just double click and change it so this one will be an e-mail address so i'm looking for a e. envelop type in my e-mail change the color, maybe a green one click on save and like your last, it will be a phone number. we might change that to orange

insert icon and let's look for a p so select the phone maybe and type in your phone number and now all we need to do is align everything to the center row options, styling and let's change the font to be white and then align it to the center. save it and that is complete. so we can save that and if you want to drop a map module, then all you need to do is drop in map underneath and set in an address. it can be your street or anything like that

i might just type in hawaii. and for your zoom, let's zoom it to 3 you might want to zoom it a little bit closer and as you can see, there's something that went wrong and basically you need to set in an api. i'm gonna quickly show you how to do that but before we do, i'm gonna set the height to about 400 and i'm gonna save it and then i'm also going to set the options here to full width so the map goes all the way across. so save that and save that and close it so the map isn't shoing right now. don't worry about that. let's go to our dashboard

go to themify ultra, themify settings and then waht you need to do is go to google map and you need to get an api key so click on generate api key and basically you need to log in to your google account and then you need to click on get a key and it might take a few minutes, maybe. so we can create a new project and enable once that is done, it says that you're ready. then all you need to do is copy the code so copy that api code and you can close that now and go back here and paste that into there

click on save and, pretty much, it should work. so let's visit our website and let's scroll down to the bottom and you should see the map work like that. and that is pretty good so, okay - i don't know why that went bold but if you do want to change the thickness of that font, then we can go back to customize and that was a grid 3 if you remember correctly and we can edit that font. so don't worry about that so let's go to.....scroll here, post and that was a grid 3 so click on the grid 3 post title scroll down and you want to set the font weight to normal

and then that would change. and you can also change the size here as well save close that and that is pretty much complete. our website is pretty much complete so there are still a little few things i want to show you which is really important one of them is the sticky header. so if you go to the blog post and you should see the sticky header here as white. you don't want that because you can't see it so if you go to customize and then you can go to sticky header

you can basically set the background color so scrolling down. you want to change the color to 3b3b. and click here and bascially, the color will stay the same but i like to add a little bit of transparency change it to about 75% or something like that. that looks pretty good and then we can click on save now once that is done, we can close that. then we can go back to our home page and we're gonna set in the row anchors so the row anchors are basically when you click on the menu link, it will scroll down

to the specific section you set it to to do taht, we can turn on the builder and basically, we need to set the name for the row so click on the row options and for your row anchor, you need to name this section about because we've named the menu about to be about as well so when you click on about, it will scroll down to about but you dont want the hashtag # in front of it now the next one will be services, gallery, blog, and contact so click on the row options here

this one will be services and it is really important that it is exactly the same as the one that you set in. services, and the next one will be gallary next one will be blog. options and lucky last will be contact scroll down to contact and let's close it. and before you try anything, let's refersh the page first so let's go back here and if you click on the about, then it should scroll down to about, and as you can see the url here is #about services, it will scroll to services and it will change

gallery, blog, contact now one thing is if we actually resize the screen. resize it, resize it you'll see that the text is not as responsive and that's not great. and the background doesn't look great either so i'll show you how to fix that quickly in about 2 minutes so i'm gonna resize that back. go to customize and then what you want to do is you want to click on styling, mobile so click on that, click on headings heading 1 font which is this heading 1 font and you want to change the size to 50. so what that does is

when people are on a mobile, then the title of the heading 1 will be 50 pixels but if they're on tablet, then the size will still be 80. desktop will be 80 but when it's on mobile, then it will be changed to 50. so you can take a look at anything else on your website that needs changing and you can edit it specifically for mobile devices. alright and that's pretty much it. save it close it and now let's fix the background. so this is really cool so let's go to turn the builder

and then all we need to do is duplicate the row duplicate the entire first row. so duplicate and i want you to scroll down to the second one, the duplicate one, click on row options go to styling and i want you to change the background mode to full cover and basically what that does is that full cover is a bit more responsive and when it resizes, it looks nicer as you'll see in just a moment and what we'll also do is change the padding to about 25% to the top and also 10% for the bottom

so do that and the most important part is setting the visibility so you want this row to be visible on mobile devices only you don't want it to be visible on tablet and desktop so hide it. click both that and save now, let's go back to our original row go to options, visibility and you want to hide it for mobile. so save it save it first and close it and once that is done, if we actually resize to mobile size then you'll see that is really nice. so the background is really responsive

the text here is also really responsive. so you can apply that principle anywhere on your website now the last thing i want to show you is how to add in new pages and something really cool as well so to add in a new page, hover over here. shortcut. click on page let's say you want to create a new service page, service page number 1. and click on publish really simple, new page ther's a new page and it will appear up here if you set it to automatically appear but a really cool thing is you can turn on the builder and you've got a lot of layouts that you can actually import so if you go to layouts her, you can click on load layouts

and you've got dozens f dozens of layouts that you can import so the reason why i didn't show you guys these at the very start is because if you've imported it, then you wouldn't really know how to use the builder and how to use the theme and you won't enjoy building your website and using it and in the end, you'd probably just give up so i want you to guys to know how to use it and then you can do this later so you can click on parralax. you've got some awesome layouts. for example, this one here you can replace it and it should take a second to reload so this is the parallax layout

and you'll notice that it doesn't go all the way across and there's a white space here. you won't notice it because it's also white but if you save it and close it, we need to go to edit page and then you'll need to go to page options here. set it to full width for the contend width. update it and basically you can view page and then you have a really, really awesome layout that you can basically turn the builder and update anything that you want. so replace the image, replace the text and you would be good to go

so to create a drop down menu, it's really simple you can hover over here, click on menus. this is a shortcut and you want that to be a drop down of services. just drag it and drop it it has to be sort of like indents so it has to move in like that that means it's below services and visit website and then when you hover over it, you've got your service page like that and you can also build your layouts and load it on separate pages or different websites just by saving your layouts

and you can also export your layouts as well and that's another really cool feature that's built up and the last thing to finish our tutorial is to add in the favicon logo. so that's the logo up here, as you can see and we can go to dashboard and then we can go th themify ultra, themify settings. and for the favicon, click on upload i recommend uploading a png file again and it has to be a size of 32x32 pixels so click on that, if you've been following along it's already included in the contents folder click on open

visit website and basically you've got your favicon so basically the website is complete okay, let's a have a look at our website and it looks pretty awesome we've got our footer section and, yeah, that's pretty much it so if you guys have enjoyed the video, make sure to give the video a big thumbs up subscribe for more videos, i'll be posting more videos and also make sure the share the video with your friends. and if you have any questions, just drop it in the comments section below and let me know what other videos you want to see

and yeah. see you guys in the next tutorial

web app website design Outdatedbrowser : A Javascript Library to Detecting Browser Version