Top 30 Best Free Responsive Blogger Templates 2016

hi, my name is hogan & i'm going to be showing you how to make a simple website. step by step using a drag & drop builder. now, before i show you a website tour and what you're going to learn. i wanna outline the 3 major problems you're facing but that you probably didn't even know and then i'm going to show you how this tutorial actually solves that problem so that you can decide whether this tutorial is for you or not for you. the first problem is that 96% of the top 50 wordpress website tutorials actually show you how to build a website

using a backend drag n drop system. so, what that means for you is that you won't be able to see the layout until you actually update it. and then switch back to your front end and then refresh the page. now, i'm gonna show you how to use a front-end drag & drop builder. so, if we actually turn on that builder. then you'll see that you'll have different modules here, that we're able to drag & drop in. and then, you know. add in text or whatever we want. for example, if you want something like airbnb. you want a video, you want a headline. and then you want a button. then you can go back to the site here.

and, let's just move this image module down there. so you can move it where ever you want. whenever you want, okay. now, let's just change the background to a video, so you can change it to an image, a video or even a slider. and, you can select video and we can browse library. and select the video that we've uploaded. insert that. and you can see the video playing. then we can click on save. and if you want to add in text, you just drop in a text module - just like that.

and then just type in whatever you want. so explore. and you can change the heading for that. and we can preview that, to see what it looks like. okay, so you can see what it looks like before you save. and...basically what i wanna do now, is to change the font colour to white. so you can actually see it. and text align that to the center and then we're gonna save it. okay. adding in a button is probably just as easy, so you can drag in the button module. just drag it in below that.

and then what you'll need to do is to select the size. the type of button and then add in the text, so begin journey. and then umm, wherever you want to link it to. so if you want to link it to airbnb, you can do that or you can link it to another page. so just paste that in to there. and what you can do is to preview that again to see what that looks like. okay, so what you want to do - is probably align that into the center. click on save. and basically that's it, so click on save and we close that builder.

we've basically built the airbnb layout, you know. in about a minute or two. and it's just really powerful. now the 2nd problem is that alot of people choose to do a tutorial on a theme that is not really customizable. so, what that means is - you basically have the same (you know) site as everyone else. and you know, as a business you probably don't want the same site or same look of website. now, with this tutorial you're able to customize it to whatever you want. and, you know. you can remove the footer , you can change the header design if you want to, i've also made alot of demos websites that you can check out. so as you can see, you can have a website that looks like this or a ecommerce store that looks like that.

you can change the layout completely, you can have a blog like that. so, what that means is - you'll can build a site that represents your brand or business. and yeah, you can just stand out from the rest of the competition. i think that when you're choosing a theme you should really umm.. take the long term approach (you know) it's like choosing a house to live in. you wanna choose a house that you can live for years, not just a few months and then change. cause, that's gonna cost you a lot of time and also money as well. now, the third problem is that alot of themes aren't fully mobile responsive. so what i mean by that is, if you actually drag in this website.

you'll see that the text does align. alright. but what happens is, you know. you can only see half the pineapple. and you can't even see or read the text here, properly. okay, so in this tutorial - i'm going to show you how to make it super, mobile responsive. so what that means is for example this is a demo site that i've built. we can scroll down here and let's focus on this area here. and if we actually drag it in to a tablet size

you'll see that the testimonials has turned into a slider. okay, so what that means is we're able to set a different layout for different devices. and now you can see the background um, pretty clearly and it just looks great, and i think that (you know) we're able to optimize the viewing experience for the user. which is really important, because alot of people are on their mobile phones. so overall, (you know) if you want to have total control over what you're site looks like. and be unique and (you know) want a great long term solution. then this tutorial is for you. okay, i also use this same theme for my website because i just love the product so much.

okay, so. without much further ado, i'm just going to go over um...a quick tour of the website and what you're going to learn in this video. so, the first thing i'm going to show you is how to add in your logo. and then we're going to show you how to add in the navigation bar, as well as different pages. i'm going to show you how you can add in (you know) a video or a image or even a just a plain background colour, as well as adding in this image here. where it's supposed to be there. and how to add in this section here where you can actually

um, (you know) describe what you're about, your mission, your statement. um, mission statement sorry. and your values and things like that. and when people actually click on it then it actually scrolls down here. so it provides a great user experience. and, i'm going to show you how to add in this quote here. um, you don't have to add in a quote - you can add in customer testimonials here. but, the main purpose of me showing you how to add this in is showing you how to use the text module. cause it's really important to know how to style it and also move the text around to wherever you want.

cause the goal of this tutorial is not to show you how to make a website that looks like everyone elses. but to inspire you and show you that you can build a website without any (you know) technical experience but build a website that represents your brand. i'm going to show you how to add in this folio section, so you can display your work. and when you click on that, it shows up a lightbox but i'm also going to show you how to utilise the different modules. such as the slider, the gallery and i'm going to show you how to add in a video. so if you go here, i'm going to show you how to add in this slider and you can display your work that way. with a little description of what the work is about.

and then i'm going to show you how to also add in this gallery module. so it's a little but different. when you click on it, it displays like that. and of course, i'm going to show you how you can add in a video. so video is really great because you know, you can describe your business and you can make the customer (you know) really feel your product. so i'm just gonna play the video, so this is a video that i made. (music playing....) so yeah, i just think it's really cool to have a video there and after that i'm going to show you how to add in this call to action section.

so, after (you know) when people view all your work then they want to contact you. then you can add in the section, i'll show you how to add in a button. and that button will go to your contact page. okay, so i'm also going to show you a different sort of layout that you might wanna use. so, show you how to make these feature modules and if people click here, get started. it directs them to the contact page. and contact page, i'll show you how to add in the animating background which is really cool. um, because i want to show you how to use the different cool things ummm, with this builder and then i'm going to show you how you can add in

your icons, so it's already built in with hundreds of different icons - so you don't need to photoshop or you know, you don't need to go on google images to download it or anything like that. and then i'm going to show you how to add in a map module which is really easy, just drag it in. and, of course i'm going to show you how to add in a contact form. so people are able to contact you, send you a message and that will be delivered straight to your email. and then after that, i'm going to show how to add in this footer section which is really simple footer and you have your social icons here. as well as the back to top button. okay, so without much further ado - i'm going to go over an overview of what we need and then we're going to build our website.

so, there are a few things that we need to do before we get started. the first thing you'll need is a domain and a domain is basically your web address, so for example. youtubes domain name is youtube.com. my one is hoganchua.com so you're one would be yourname.com or your businessname.com. the second thing is you'll need hosting and hosting is basically where all your website files are stored. and that means people can access your website 24/7 from all around the world the 3rd thing, that you'll need is to install wordpress. and wordpress is basically a content management system.

so that's basically where we're going to build our website. and wordpress is by far the most popular content management system. it's actually used by alot of companies such as cnn, forbes, (you know) ebay and even celebrities such as jay z & katy perry. and we've done that, then we're going to start building our website. okay, so we're going to go over the costs now the domain name normally costs you around $13 per year. but, for a limited time - i think it's only $5.99. okay. per year.

and then we're going to get hosting, so hosting is around $12 per month. but i have a coupon code that umm.. give you a discount, so it's about $8 per month. and then, wordpress is free. and building the website is free. and you're basically saving thousands and thousands of dollars by following this tutorial. okay, so we're going to begin by going to hostgator. so that's where we're going to get our hosting and also our domain name. so, go to google and then all you need to type in is hostgator.com click on enter.

and you'll also notice that there is a progress bar up here so you can keep track of your progress, um.. when your building your website. so, the reason why i choose hostgator is basically because i've been using it for 5 years to 6 years now. and, they also have a 99.9% uptime guarantee. so that's really important because you don't want your website to be down umm, and then customers won't be able to reach your website. and you've also got a 45 day money back guarantee if you don't like the product. and the best thing i like about it, is that they have the live chat support. so you can contact them by clicking this, um... button up here.

and you can talk to their technical support staff um, 24/7. so the 1st thing, that you'll need to do is click on get started now. and if you scroll down here, you have 3 different plans to choose from. you've got the hatchling plan, the baby plan and the business plan. so, we're going to focus our attention on these two plans because the business plan is probably too much for what you need to get started. and the difference between the hatchling plan and the baby plan is that the hatching plan, you only can use a single domain. so, you only can have your domain.com but if you have the baby plan then you can have your domain, your friends domain

um, your parents domain and you can host um, unlimited domains. so what i really recommend, is probably the baby plan because the price difference isn't that much, okay. so, all you need to do is um, click on sign up now. and if you scroll down here, it will say (you know) enter your domain so just choose your domain name. for example, (you know) simplewebsitedemo and all you need to do, is click on the outside here. okay, so once that is selected um, sometimes it might not be available and then you'll have to (you know) try a different combination

you can get a .com or a other extension but but for me, i recommend a .com because (you know) most people just type in www. (you know) their website name .com they won't, probably, they probably won't type in .club or anything like that. so, what you need to do is scroll down for this section here, this is your domain privacy protection. so basically, it helps protects your identity online. so people can't, (you know) search up your website and then find your contact details. so for me, i'm just gonna untick that but you can select that if you want.

now, this part we're going to select the baby plan or you can select the hatching - that's up to you. for the billing cycle, i normally select month to month. and for the username, so you just enter in a username that you're gonna log in with. so i might just type in (you know) hogan1234. and then enter in your security pin number. scroll down here and this is where you enter in your details. so, you need to enter in your email. so enter in a valid email because that's where all your hosting details will be send to. so, make sure you get that right.

and just type in your email. so, i'm gonna basically quickly fill out this form and maybe just pause the video and fill this section out yourself as well. okay, once that is done then you can enter in your credit card details. or if you want to pay by paypal, you can select paypal and basically after when you've actually umm checked out here then it'll direct you to your paypal, where you need to login and then pay that amount. so, after you've done that. scroll down here - you'll see that there is additional services but for me i'm just gonna unselect those because you probably don't need them now. and this section here, where you enter in a coupon code

you can enter umm hoganchua and then click on validate. and what that does, is it basically gives you a bigger discount so you get 30% off, if you get it for 1 month but if you get it for longer - you get 35% off. okay. so... just use that coupon, and if you do use that coupon - it basically i get a small referral fee and that helps me create (umm) these little wordpress tutorials for you guys :) so it would be much appreciated if guys do use it and normally this domain name, (normally) cost i think $15.

but you also get a special with that, if you use the coupon code. and once you've done all that then you can check (you know) that all your details are correct and check the amount is correct. and then what you need to do is click on i've read and agreed to the terms and service. and then you just click on check out now. okay, so after when you check out - you should get a payment completed page that says thank you for your payment. once you've gotten that then you'll need to go to your email. so the email, that you've actually set in before. okay. so... you'll get an email - something like this

with your hostgator account information. this is your control panel url, so you'll be logging into here with your username and password. so, this will be different for everyone. so you can just click on that, like that. and then just type in your, copy over your username. okay. copy over that and paste it into here. and then copy your password that you're gonna get here. copy that, and paste it into here. okay, so obviously i've changed my password. so, i'm gonna just type that in now.

(typing...) and then just click on login. okay, so once we've logged in. what we need to do is to scroll down to the bottom. and then click on quick install here. and basically we're gonna install wordpress. so scroll down, you can click on install wordpress here. or you can also click on wordpress here. so just click on that. and click on install wordpress. okay, so click on this arrow here and then select your website. as you can see, i have alot of websites but you should probably only have one. so select that.

and leave this box empty unless you want to actually install it on something like. mysimpledemo.com forward slash (/), test. and then your wordpress will be installed on test extension. okay, but for most of you if you're just starting out, make sure to keep this one empty. for the admin email address, so you can type in your email address like that. for your for blog title, so this is your website title. ummm, mine might be just called simple. and the admin user name - just type in the username that you're going to use to actually login to your wordpress.

so, i'm just gonna type in my name. and first name, last name and install wordpress. select no thanks i'm a web design :) and just wait for that to install. okay, so once that is done. probably takes a few seconds, you can click view credentials. and if you just got your domain, it might not actually load up this screen yet cause it takes time for hostgator to set everything up on the backend, it may take (you know) 15 hours or 2 to 3 hours. but i think maximum you have to wait is 24 hours, so maybe take a 15 minute break and come back and then click on this.

but right now, i'm just gonna click on it and hopefully it loads up. okay, so congratulations we're finished installing wordpress and basically i'm just gonna log in now and then we're gonna set everything up. okay. so just copy over your username. and also your password. and then we're gonna paste that into here, click on login. and after when you've done that, we're in the wordpress dashboard. and if we go and visit the site. this is basically what it looks like, so it doesn't look anything like my website yet.

so we're going to click on dashboard and i'm actually going to open the demo website. so we're gonna use that as a guide to actually build our website, okay. okay, so all these things we can just click on x and close these because you probably don't need all these. and just to clear up some space and clutter. okay, it looks much better now. now the first thing what we're gonna do is to configure some of the settings. and also (you know) delete some of the pages that are installed on default. as well as deleting the plugins, okay so. we're gonna go to settings and then we're going to go to general.

and this is where you can enter in your side title and also a tagline i might just delete that tagline and you can also change the date formats and things here but that's not important. so, we click on save changes now, we're gonna click on permalinks so, we're gonna set the permalinks to post name the reason for that is because we want to have our title in the actual url we don't want a url which looks like "?p=123" because that's not good for search engines

and it just doesn't really describe what your page is about to the user so, it's not really friendly so, you wanna select post name for that and save changes and after when you've done that, you want to go to users so you can change our password because that's too long to remember and also you guys know my have passwords. click on edit and you can also change the color scheme just by selecting this just gonna keep that as default and we're gonna generate a password

then what i want to do is basically, type it in. okay, i'm gonna hide that password and then type in my password. so you can type in your one, um, confirm that and then update profile so this is the password you'll be using to log-in to wordpress now make sure to write down somewhere or, you know, just remember that we're gonna go to plug-ins now so, plug-ins are basically, um, sort of apps that is for websites so, if you have an iphone or a samsung galaxy, you have apps for the phone that basically enhance the functionality of the phone

and plug-ins are a, um, thing that enhance functionaliy for your website so, there are thousands of plug-ins but these are actually pre-installed and we actually want to delete all these because sometimes it might conflict with our builder and things might not work properly so, i want everyone on the same page. so you want to click on select all um, that selects all of these, and click on deactivate click on apply now, once you've done that then now you can delete it. so delete and apply. yes

okay, so that's all good now, we are also gonna delete, you know, the post, um, that are by default installed so, let's just delete that and click on trash click on trash up here and delete permanently go to pages and we're also gonna delete the pages so, select them all, move to trash, and then apply and then we're going to the trash and we're gonna delete them permanently okay, click on apply and that is done

okay, so while we're here, we may as well just install some pages okay, so the pages that we are going to actually install are our home page and our contact page so, enter in your home page title and click on publish and then just to add a new page, click on add new and we can add in our contact page and publish so, if you wanna add in other pages then you can just add in, you know, all the pages that you want, that's completely up to you okay, and right now, we are going to basically go and install the themes as well as the plug-ins for our website the theme is basically like the skin of the website and that includes the themify builder as well

which is going to help us build our drag & drop website okay, so to actually download the theme, you can go to my website or you could just go to the youtube description below the video and um, you'll the theme download link as well as the link for the images that i'm using for the website so you can actually follow along with the tutorial and i highly recommend that because then you can learn how to use everything properly before actually building your website so, it's gonna save you more time in the long run okay, so if you go to our website, umm click on blog and after that, you should see a tutorial. it should have the title

"how to make a simple wordpress website - 2016" and then all you need to do is just click on that blog post and then scroll down and then you should see my video here as well as these 3 links so, all you need to do to download the theme is just click it and then it should download automatically to your computer um, save it. just save it to the computer like that and then you can also download the images to follow along with the tutorial so, just download that okay, and after you've done that then you should see that on your computer,

you'll have 2 files so whatever you've actually downloaded that file you should see one which is simple_images.zip and themify_ultra.zip so,themify ultra, this is your theme that we'll gonna be installing sometimes if you're on the mac and using safari, it might actually automatically compress into a folder like that so, if that happens, what you need to do is right-click that and compress that back to a .zip file. okay, so we don't need that. we're gonna delete that but for your simple images, these are all images included in the tutorial what you need to do is double-click that if you're on the mac,

um, if you're on a computer, you need to unzip it as well so, it's gonna become a folder and basically we got all the images that we're gonna use, okay so what we need to do is we gonna need to go back to our website and let's head back to our website here and basically we need to hover over appearance and then click on themes and click on add new and then we're gonna click on upload themes. choose file and find the file, so, themify ultra. click on open. and click on install now

okay, sometimes people might have problems installing it if you do have trouble, um, for example you might get the message saying "your upload limit has exceeded", and basically what that means is that your host or your server has limited how much you can actually upload unto your website and you can either contact them to lift that limit or you can actually go to my website and check out my faq so, i'm gonna open that in a new link and then basically, um, scroll down. click on #15 click on that and you can see a video that shows you how to upload a theme via your file manager or cpanel umm, but if you're using a local host, i think you just have to upload the entire theme into your wp content themes folder, i think.

okay, so once that is done - it says it's installed - then you'll need to activate that so i'm gonna close that. we don't need that. and click on no thanks okay, so before we begin, i might actually close some of these pages here. so just close those. we don't need them anymore and close that one there, okay okay, so while we're here, um, i'm just gonna give you a brief overview basically, we're on the general tab now and the favicon is where you can enter in a little icon up here which looks like that

okay, the icon that you'll need to upload is it'll have to be a .png file so that file basically means that it's a transparent file and the file size should be 32x32 pixels and you can upload that because i've actually, um, included that in the images folder. okay, so you can upload either the pink one or the blue one so i might upload the pink one and you can see that the dimension of that is 32 pixels in width x 32 pixels in height okay, so if you are making your own favicon, then that's the size you need to set it as and it needs to be png okay, so for now you just need to add in my one and click on open and after you have done that, you can scroll down to the section here: the footer code

so, the footer code is where you actually enter in your google analytics tracking code so google analytics, for those who don't know, is basically a tracking software for your website so you can see who is visiting your website , how much traffic you're getting and all those things you can sign up for free. just search up google analytics on google so scroll down here and what we're gonna do is enable the google fonts enable all the google fonts um, sometimes, for some people, it might cause some problems if it actually does, for example, sometimes when you turn on the customizer later on, um, it might not turn on you might need to switch it off to this one here,

but for most of you, it should be fine and you can keep that. like that. and click on save. so, after we've done that, um, basically i'll show you how to add in your plug-ins. so, basically, let's have a look at our website right now and see what it currently looks like okay, so its applied a sort of exterior skin to our website. it doesn't look like a website we have here yet but it will look like that very soon okay, so what we're gonna do is install some plug-ins. click on plug-ins and click on add new the plug-in we're gonna install first is easy google fonts so, that's gonna enable us to use different fonts and also customize the look of the font

and i really like this plug-in. make sure this one has 200,000 active installs. it's the right one. click on install now and then activate plug-in once you've done that, click on add new and we're gonna add in our contact form plug-in so that enables us to have the contact form. search contact form 7. click on enter and this one has over a million active installs . so install now. and activate that plug-in so, congratulations. basically, we've installed our theme and basically installed our plug-ins no, we're basically going to edit our home page

okay, so we're going to set in a static home page so, what that means is that if we actually click on home now, then you'll see that it says mysimpledemo.com/home okay. but if you click on the logo here then it doesn't show home okay, what we need to do is actually set our home page to be our main page so that's really important. otherwise, you can't actually turn on your themify builder okay, so what you need to do is click on customize and after when you've done that, you need to go click back.

normally, it defaults the themify options but we need to go to. click on back. and we need to set the static front page so click on that and select a static page. front page should be your home page okay, so that's the page that we created before and that's really important so now we're gonna click on save and publish and we're gonna close that okay, so once we've done that, we're going to basically, edit the layout of our website so it's a blank canvass so we're able to start building our site now, as you can see, our default layout will show this title here as well as the sidebar widget area and we don't want that

so remove those 2 things we need to go to our dashboard and we need to hover over themify ultra. click on themify settings, and what you need to do is click on default layouts so click on that. don't worry about these settings now because if i explain them, then you probably don't know what's happening so, don't worry about those and scroll down to default page layout and if you can see now, we can just right-click and open that in a new tab, there's a title and sidebar. the sidebar is here. basically, we don't want a sidebar so we're gonna select no sidebar and we also want to hide the title for all our pages

okay, and you probably don't want to enable page comments so disable that. click on save. and then if your refresh the page then that will be gone okay, so we're nearly there and we need to set the header sections so it looks something like that okay, so to do that, it's quite simple. what we need to do is to go to theme settings here basically, click on theme settings and scroll down to theme appearance okay and you can select the header designs. so you got like 10 or over 10 different header designs so you can really customize your look of your website depending on your needs

but for this specific tutorial, you can select the 3rd option which is this one sort of a skinny type of header and what i want to do is i want to disable this sticky header now, what a sticky header is, for example, you scroll down the header menu navigation, it will always stay there okay, so i think website here, we have a sticky header so it will always stay there even if you scroll down to the bottom okay, so for this specific website, i want to disable that but if you want to keep that , then, um, leave this one unticked.

but i wanna tick that, okay. and you'll see that this is the site logo we want to keep that so i'm not gonna tick that i don't to include a side tagline so i'm gonna exclude that and i don't wanna have the search form. exclude that. and also exclude the rss link okay, so the search form is this thing. you can keep that and you can keep the rss if you want to so these are the settings now, what need to do is leave those ones as is

and then click on save and if you refresh that page we'll see what it does okay, so that's looking pretty good now, what we're gonna do is we're gonna set in our logo as well as customizing the styling of the page links up here what we're gonna do is we're gonna go to customize and then we're going to go to themify options so click on that okay, click on that and what i would like to select is advanced options

so, click on advanced options up here okay, so this section here of this thing here is the site logo so click on site logo tab and if you don't have a logo image at the moment then you can just add in some text so, logo and then you can set in different fonts. so you've got over a few hundred different fonts to choose from. umm, that you can use for now so, i might just keep it like that and i might make it bold. okay. so i might change the color of that. so if you want to change the color you can select the color here so you can change the different colors which is really cool

okay, i'm gonna keep that as white now, you can also change the site logo position. for example, set that to relative and then if you add 10 here, you can see that it moves down a little bit so you can adjust those settings depending on where you want your logo so, if you add 10 and it moves to the left a little bit, i just want to tell you where that is if you ever need that. so if we go to logo image here, you can add in a custom logo now, what i would recommend is uploading a .png file which is a transparent logo as well so, you can click on add and then upload your file. so, select files and then basically-

um, i'm basically going to upload all images on that simple folder just to save some time. so, click on open okay, let's just say that this the logo that we wanna add in um, you just insert that and as you can see that's a really, really big image and a cool thing is you're able to set the image size here so, for example, this is the width, i believe, so you can change the width so you can make it 100 pixels in width and you can also change the height so maybe, um, 50 pixels or 60 pixels. like that. um, change that to 120

okay, so you can see the logo appear and then you can arrange where your logo is by setting it to relative and perhaps you can change that to -oops- maybe, 10 for the bottom to move that up there. okay. but for now, i'm going to delete that and let's just remove those delete those settings there and i'm going to use a subtitle for now so, close that here and basically i'm gonna set in a header color okay, to set a header color we can click on header and for header wrap, we can set in the color by selecting the color here

now, the reason i wanna set in a color is because i want a default header okay, so for example this site here, it uses a transparent header not every page will be a transparent header. you actually need to set that individually and i'll show you how to do that later but for now, let's just set in a default header color. set in 292929 which is like a really dark grey nearly black color or you can set in whatever you want. okay. after that, just click on the button up here and you can see our menu links up here okay, so we're gonna change the color of that and to do that, we need to click on main navigation so this is the main navigation. click on that

and then you can also edit the menu container position. um, if you set that to relative, and to edit that. like that. you can play around with that. okay, all you need to do is scroll it down. and for your menu link, which is these ones, we can change the color of that. so change that to white and that would change instantly. and you can also set in a different size, a smaller size, and you can also set in different fonts as well so that's really cool. i' m just gonna leave it as a default. so i'm gonna- actually, delete all that. okay, and you can bold it if you want to. that's up to you. okay, so you can also set in a background color. like that.

but, to be honest, i like to just keep it nice and simple okay, we're gonna scroll down and as you can see, this is the menu link hover. basically, what the menu link hover means is when you hover over the menu link, it will change the color that you set here okay, so if you add in a background color, then what does is when you hover over the menu link, it will actually change to the background color that you set it in. but i want to keep the site really professional. so what you should do is probably set that to white, and set it to about 80% opacity and let's say we when we hover that, it gives off a very subtle effect

what you want to do is scroll down to menu active link and what that means basically, for example, if you're in the home page right now, it would show red because that is the active link color. and if we actually change the active link color to, for example, a blue, then that would change to blue but for me, i'm going to keep that as white which looks good and this is the menu link, uh, menu active link hover. so when you hover over it, it will show you that hover effect so we're gonna set that color to be the same as the menu link hover to keep everything consistent. so change that to white and change that to 80%

okay, so that's all good and once that is all set in, then we're gonna click on save and publish okay, so the drop-down container. what that basically means is if you go to my website, this is called a drop-down container and if you ever want to edit the drop-down container settings, fonts and colors, then this is where you actually edit it. okay. um, here and yeah! so, we're gonna click on back and click on back here and then we're gonna close this and then we have our menu section here okay, one thing i wanna show you before we actually build our website is actually to order these menu icons here

okay, so to do that, you can hover your icon here and click on menus and then what you need to do is you need to set in a new menu name. so what you wanna do is set in maybe top navigation create a menu and you want to add in the pages that you have here or whatever page that you want. so add to menu and then we can order that like that. you can drag it or drop it and if we click on save menu here, and if we actually visit our website, now, you see that it doesn't change. the reason why it doesn't change is because for the menu settings, we want to set the theme location to main navigation

okay, and if we actually tick this, that means if you add in new pages, then it will be automatically add in to this menu okay, so i might want to tick that in here but you can untick that if you don't want that to happen. i'm gonna click on save menu. and then i'm going to refresh that page and you can actually see that has changed okay, if you wanna create in a drop-down menu, you just drag your contact and move it slightly inside so it's like, uh, below your home. um, click on save and refresh that page

and then you'll see that when you hover over it, you'll see that your contact page is here but you can't see it because i set the link to white and that is when you actually need to edit your drop-down link colors okay, so what we need to do now is let's just drag that back. click on save and if you actually look at this website here, you've got about work okay, so these aren't actual pages. these are just anchors. okay, so when you click on it, it scrolls down to this section we have set it to. click on work and then scroll down to folio so this is where we'll actually edit that by using the custom links

and i'm going to show you that a little bit later once we've finished building our home page okay, so don't worry about that for now what we're going to go to now is our home page and our header image that you see here so, to do that, what you need to do is turn on the builder okay, and this is the row here, the first row that we have, and as you can see we can set in different columns so if you wanna position your text or images differently then you can set in different columns, okay. but for me. i'm just going to keep that for now and i wanna click on the option, pencil icon here. double-click on that

and i want to click on styling and for the background, you can upload an image which i'm going to show you after i've set in a background. because i'm also going to show you how to actually crop in your images so they fit in perfectly because i found that a lot of people are having trouble finding images and cropping them and making sure they're not blurry and things like that so, i'm going over that in a few minutes but for now, ignore that. you can also add in a video and things like that but we're gonna set in a background color so the background color we're gonna set in here is a pink color. so it could be f8c0d5

and you can choose different colors by selecting that right there and you can change the opacity of it okay, so that's really cool um, but i already know the color code so that would be f8c0d5 and basically make sure that it has this at 100% (oops) set that in again okay, so if you'll see that, you'll see that the background color doesn't show up on the sides, on the left and the right so, the thing you need to do is click on row options up here

and make sure the row width is full width so it goes all the way across gonna make sure that it's set in there. click on save okay, so that appears like that and before i get any further, um if you wanna choose the colors for your website, then a good site to go to is to go to www.color-hex.com. and then once you're at the site, you can click on the palettes up here or latest palettes. popular palettes...... and you can choose a color theme for your website just be selecting one of these. okay, so for example, you want this color scheme, just click on that color scheme and you've got these color hex codes that you can actually just copy and then paste into the website, so for example, you don't want this pink color scheme,

you still want to have a cool-looking website, then you can just paste that into there, click on save and there you go. okay, so choose your color palette and basically use that color throughout your whole entire website, so, you know, you keep everything consistent and your site looks really professional so it really depends on what type of business you have so choose a color that represents your business well so let's just change that back into pink and a really cool feature that i didn't show you in the intro is that you can undo things if you haven't close the themify builder, you can actually click on undo and that will re-do your previous action okay, so click on save.

and we're gonna close that for now and you'll see that it doesn't actually appear up here. what you actually need to do is click in edit page and scroll down here to page options. themify custom panel. content has to be set in full width. okay. so click on update and if you actually visit the website now, you'll see that it appears up here. you might not want to set in a transparent header but if you do and you wanna set up a website that looks like this, really cool, then what you need to do is go back to header page and themify custom panel. again. click on page appearance and as you can see, you can set the header design specific for each individual page.

so that's why this theme is so powerful okay, so for the header background, you can set in a solid background. you can change the color specifically for that page i want to set a transparent background. so set in and click on update. let's go back here and refresh the page. and we'll see what it looks like. okay, so that looks pretty good but you can't see anything and the reason for that is we need to add in some spacing. so turn on your builder and what i want to drop in now is to actually drop in this image here, so you can drop in an image module. so put that into there.

and for image url, we wanna browse the library. and you can upload your file from the computer or you can use the image that i have provided. so click on simple. and he size of this image is 100 and - i mean, 1388 pixels in width times 623 in height so, click on insert file url and let's just preview that so you can see everything okay, so that's really big. don't worry about that for now. and you can also link that image to wherever you want so if you wanna link that to another page in your website, just copy that url and then you can just paste it into here if you want to open that in a live box, you can select that. or if you want to open that in a new tab, you can select that

okay, so after that, we can click on save and if you want to reduce the size of that image, um, it's really easy. um, what you can do is you can hover over your row columns up here and you can actually set the columns. okay, so once you set that in, a small column, a larger column, and a small one there. so, you wanna move that into here and then what you can do is actually, um, set the color spacing to none. so that increases the size because there is no color spacing anymore. and one thing that you can also do for this image module is you can change it like that as well so you can change things perfectly wherever you want

you just need to create more columns okay, so basically i'm gonna undo that like that once you've don that, we would want to add some padding up here and padding up here. so, padding is basically just another word for spacing. so what we'll need to do is click on options go to styling and then you can go to - deselect that- and we wanna add in some padding for the top and the bottom so we might try to use, maybe, 12.5%

and maybe 12 - 10% for the bottom okay, so that will add in the spacing. spacing there and spacing up here. okay, you wanna use percentages because that percentages is variable so what that means is that it will actually depend on screen height okay, if you use pixels, then that would be a fixed size and that isn't as mobile responsive so, i highly recommend using percentages for setting your padding. so click on save. and once that is set in, we can click on save and we can see how that looks and adjust it if we need to

okay, so, you know, this might be not what we want. what me might wanna have is 10% on the top and maybe 12.5% on bottom um, let's try that. see how that looks okay, click on options again and set, maybe, 10% for the top, 12.5% for the bottom, and let's just see how that looks click on save and close that okay, so that looks pretty even. um, i have added some spacing up here and here and that's pretty easy. right now, i'm gonna show you how to add in an image so, i'm gonna show you how to crop an image which is really important

and then i'm going to show you how to add in some text and a button just to make sure you have the skill to do it and then you can do it on your own okay, so to get our image to crop, we're going to use a free resource and you can go to unsplash for that. so type in www.unsplash.com and then you'll see that there are many different pictures that you can use and you can use these pictures for all different uses and you don't have to credit them so you can search for the picture that you like but i think that a lot of people have trouble selecting photos because you want to select the photo where you can actually add in the text and it's sort of readable and that it actually looks good

okay, so for example, this image here probably wouldn't be suitable because if you add in the text in the center, then you wouldn't be able to see the lion's face so a good one to choose would be something that that has a little bit of space up here or even on the corner of the right-hand side for example, this one here. this one's pretty good so, we'll actually going to select this image here and all you need to do is click it. and then, you can download that and then all you need to do is to right-click and save that image to your computer. so save as image. okay, so just save it as "blue table" or something like that

click on save replace okay, so what we need to do is go to www.fotor.com. so this is where you can edit your images online and crop them and also add text to them if you want to as well. so click on edit. now, what you need to do is click on open and just to find that image that we have i think it was "table", i think. "blue table". open okay, so what happens is that i uploads it to the fotor.com app and you'll see that the dimensions are here so, it's 3730 pixels in width, so that is pretty big, and also about 2100 pixels in height

okay, so what we want for our, say, our header image, a header image that if you wanna cover, you know, full width, then, for me, i recommend choosing anything between 1600 to about 2000 in width and about, probably about 800 to 1000 in height okay, so what we're gonna do is we're actually going to resize it so, for example, let's just do that for a second. click on resize here and then click on this lock, um, icon. so click on that and in here, you can just type in the dimension that you want so i might want, uh, 1800 also, okay.

you might choose 1600 but i think 1600 is probably minimum okay, so make sure your image is big enough. if not, then your image will probably be blurry and not good for your website. okay, so what we need to do is to select uncrop so for example, we can crop our image to the exact specifications so, i might crop that to about 800 pixels in height and then you can drag it and drop it to wherever you want okay, so leave it there and just click on apply okay, so that can be our header image and if you actually wanna add in some text, you can but i'm not gonna do that so just add in text like that and then you can move it around

and you can also cahnge the font and things like that so it's a really useful app but i'm gonna leave that and i'm gonna show you how to actually add that in on the website builder okay, so after you've done that, you can also enhance it by clicking the tab enhance where you could use some basic functions to make it brighter or darker or things like that now, to keep that as default okay, i might click in enhance and then all we need to do is to save it on to our computer and,generally, you probably just need to save it as normal quality

um. you probably don't want it to be any higher than 400 kilobytes. otherwise, that's too big and it will be too long to load up on your screen okay, so if it is too high, then maybe crop your image to slightly smaller. that should be alright. let's click on save to computer and then just type that in. save that to edited. click on save. replace that image. and let's close that. okay, so once you've done that, you can go back to your website here and you can go turn on builder now, something that is really cool is that you can actually duplicate this row so that means you don't have to create the padding and things like that again

we can just change the image and then we're pretty much good to go after we add in some text okay, so we can just click on duplicate. so that duplicates the entire row okay, so you've got a different row on the bottom and all you need to do is click on options styling and select image for your background type. and then for that, click on browse library then, we'll need to upload that file. so choose that file and open. okay, once we've done that, we need to enter that into there. okay, so as you can see, that looks pretty good okay, so we're gonna make sure tthat we select the background mode

select that to full cover but you can also select parallax scrolling if you want parallax scrolling but parallax scrolling means that it isn't as mobile-friendly so i'll show you how to make it super responsive later on. so you can set it to parallax scrolling for desktop but for ipad or tablet or even the mobile devices, it will switch back to full cover or you can select a different image okay, so for this, select full cover and just click on save for now and what we'll wanna do is maybe delete this module and add in some text okay, so just drag in some text into here and just type in some text. ideas. and by default, you won't see this toolbar actually enabled so you actually need to click on toggle toolbar to be able to set the heading tags

so you click on that and that will appear so make sure you do and highlight that text. change that to heading 1 and we're gonna preview that to see what that currently looks like okay, so that looks pretty good but we need to set the font for that. so let's click on save. for now. and if you want to move the text around, what i recommend is changing the columns okay, so change it to this column then you can move the text into this column here and if you change it to this free column here, then you can move it to each of these modules. okay. so let's say i want to put the image on the left-hand side here,

which i recommend because if you put it there you can't really see the text properly. okay, so what you can do is to arrange it thte way you want and let's say i want it sort of here. okay. so to do that, which is pretty easy, then just double-click on that and go to styling and then you can align that to the right and click on save so that moves that on to the right and that's about where we want our text okay, so let's click on save and we're gonna close this so once you've done that, you want to set in the different fonts we can actually set that in the styling panel before but i want to show you how to set it so it's sort of default

and then that means you can set the heading tags and you're good to go. so it's much more convenient to do it that way. so click on customize now, what you want to do is click on typography oops, okay. so normally it starts off here you wanna click back and click on typography. click on default typography and if you remember, we set it to heading 1. if you can't remember what it was, you can highight the text right-click and inspect the element so, you'll see that's the h1 tag. okay. now what we need to do is you don't need to highlight that. look for heading 1 and click on edit font

and then for the font family, you can choose whatever font that you want okay, so you got a hundred different fonts to choose from um, for this one specifically, i want to type in abril fatface. okay, just type that and it will appear and you can also change the font width for some other different fonts. that one is only regular. you can also transform the text to all upper case or lower case like that and that means for the heading 1 it will be default set to this one um, what we need to do is click on appearance and we can change the default font size for that so, maybe let's change it to................ about size 90. i think that looks pretty good.

and you can change the letter spacing which i really like because you can enhance the spacing um, to make the text look good um, let's just change that to maybe- maybe let's keep it to default. okay, reset that and don't worry about line height most of the time you can set a default color but i don't really do that and the last thing is positioning okay, so positioning basically edits where the text actually is. but you don't want to do that because that means whenever you set a h1 tag, that text will actually move

and you don't want that to happen. so never set anything in the positioning tab okay, after when you've done that is to save and publish and click on x and all you need to do is return to your builder and double-click that because i want to change the font to white and we can change the font color here and that looks pretty good. click on save and the only thing i want to add is a little bit more spacing to the top and a little bit more on the bottom okay, so if you'll just click on row options again, you'll see that the settings are default

because we duplicated the one above so click on styling and i just wanna add just a little bit more padding, maybe 12.5%....... .....to the top and maybe 15% for the bottom. and let's click on save and what you can do now is you can drag this row and drag it on top and let's click on save to see what that currently looks like and close that okay, so that's pretty good and you can build a website like that and if we actually re-size it, you'll notice something.

re-size that and you'll notice that the text moves so the reason for that is because the layout that we set um, to actually fix that, you'll see that the image re-sizes pretty well and the text actually re-sizes as well to fix that, what you need to do is probably change the layout a bit but later on, i'm going to show you how to make it super responsive set specific layout for mobile devices and tablets okay, so make sure you watch the end part. keep that as is now. don't worry about that for now click on save and if you wanna add a background video

that is really simple. go to styling. click on video and then you can upload your video okay, so what i normally do for my actual video, you can go to my website and click on, you know. ultimate website resources so that's all the resources that are actually used to build my website. and these are website resources that i love and i'll always use. okay so, if you scroll down, you'll see that this is where i get all my free images from um, and these are the image editors that i use

and these are the top 3 video websites that i recommend for getting video background um, i recommend videoblocks if you want a huge unlimited library of stock video footages but that costs $99.00. so you can get that if you want to. you can check that out by clicking that link there. but if you just want one or two videos to use for your website background, then you can check out this site here videvo. and what you need to do is to download that video. and then you'll need to use editing software to actually edit the dimension of the video so, what i recommend is editing that video to about, um, 1800 pixels in width and about 800 in height 'cause you don't want a video that is too big otherwise your page is going to load very slowly

and then what i do is i use a software that is called handbrake it's an open source video transcoder. so what that means is that it basically reduces the final file size without really reducing the quality okay, so that's really important to make your file size of that video to not be that big probably around anything below 2 megabytes is good and i believe there are different tutorials on youtube to show how to use this software. okay. so, basically i'm going to move on now. so let's just click on save for now and i'm gonna remove this. okay. and then i'm gonna move on to the next row

so the next row is where you can actually add in about you or something like that but this is just an image but obviously i just want to show you how to add in your images so you get used to it and then i'm going to show you to add some text and you can utilize the skill that you learned and, um, you know, add in text here so what you need to do is we're gonna set in the background first okay, so what you can do is to click on options and then for styling, you can put in the background color and you should be using the um, color palettes to choose your different colors so latest palettes and you can choose different palettes

but for my background color, i'm gonna use 6acce9 oops okay, finally got that. and what you need to do is click on save okay, so make sure to select the row width to be full width as well and what you're gonna need to do is to, 'cause we want the text, um, the image to be in the middle then you can change the layout to something like this, the one that we have on top okay, so that ensures that you can put in a module in the middle and what we need to do is to change the column spacing to none okay, so there's no space in between here

then, what you need to do is drop in a image module so you can drop in an image module and then add your profile picture or something like that for image url, click on browse library and then select this image here "my passion" and the image crop size that i cropped it to is 1388x425 and you can crop your images within wordpress which is really cool as well. click on edit image and then you can actually change the size of the image here just by selecting the dimensions for example, you want to change it to 1000, you can click on that and click on scale to change it and make sure that you need to update it

okay, you can also crop your image so, what you can do is you can, i think, click on that and then pull it and then you can crop it like that and then you can actually select the dimensions you want to crop it here as well so, 1000 maybe times about 250, 259. and finally, you want to crop it make sure you save it and then update it okay so, after you've done that, so what i recommend is actually been doing it in fotor before you actually upload it on to your website

but you can do that as well. so let's just close that for now and come back here and select that image. what you want to do is select that file url and you can preview that so you can see what that looks like okay, so that looks pretty good and you can add in animation effects but i don't really recommend it cause it slows down your website. and you can also change the different appearances so you can add a drop shadow which a little shadow to your image okay, you can do that um, but i'm just gonna keep it as default and you can also link that image up again

so, you can add in a link and let people click on that then a link to the page that you specify okay, styling. i'm gonna leave that for now and click on save and let's just save it and see what that looks like. and close that. okay, you'll see that, um, this is probably too close up here so what we're gonna do is add a little padding to the top and to do that, what we need to do is basically turn on our builder again and then you could just click on options and then click on the padding here so click on that.

so you don't want to apply all the padding for everything. you just want to add it to the top okay, so while we're here, i want to explain what padding and margin is um, basically both of them do the same thing. they both add space. okay, so what the difference is basically imagine that there is an invisible box around this entire row padding is basically everything inside the invisible box, but margin is actually outside that invisible box okay, so if we actually add in, say , padding, i mean margin, you actually see there'll be white space 'cause it actually add space outside that invisible box around here, okay. so if we add, let's say, 5% to the top, you'll see that there is white space because it adds this space

outside this invisible box okay, so its useful for some occasions so i just want to explain that to you guys so let's just delete that for now and we wanna add in some padding so, perhaps we can try 5% and see what that looks like okay, and click on save and click on save so that looks pretty good. i might wanna add just a little bit more options. and maybe let's try 7.5%

okay, that looks pretty good. click on save. and let's close that now, what we're gonna be doing is adding in the quote so, you don't have to add a quote. you can add a customer testimonial so that space is really useful for that. so what we need to do is to turn on the builder again and for this one, we want some white background just to keep it simple um, it's really nice to actually separate your rows because it basically separates your content and it makes the viewing experience a lot easier on your visitor so what you need to do is basically drag in a text module, um, into that. so drag that in.

so, basically i'm just going to type that in manually actually, i might just copy that okay, 'cause i'm kind of lazy. so let's just copy that straight from here so i might copy both of them okay, so you can just go to my general website and copy that or you can just type in whatever quote that you want okay, copy that and come back here and then what you want to do is right-click and then paste. okay, now what you want to do ideally, if you're actually copying text from anywhere else you should actually paste it as plain text cause you don't want any formatting on that text

so, if you are on a windows computer, you can right-click and paste this plain text. butt for some reason they don't have that on mac um, what you need to do is click on paste as plain text and then right-click and paste it in okay, so that means it won't add any formatting to your text and that's really important because sometimes it has some spacing and you don't want that. okay. so what we need to do is bascially set in the fonts so go to styling and you can actually change the font here.the font i am going to change it to is georgia

okay, change it to that and then i'm going to change the font size to about 20 pixels and then let's just drag this thing down here and let's just go here and preview that to see what that sort of looks like but what i want to do is to maybe center that as well so let's just click on save for now and i want to select this column up here and just hover over it. and click on that. and then i want to center the text right there okay, now what we're gonna do is center everything, align it into the center, and change these fonts. so double click on that

and what you can do is align center here but highlight everything before you do that and scroll down to the back. make sure that's aligned into the center so that moves straight into the center. now i want to change the font specifically for that. okay, so you can click on text and you can highlight this text here okay, and select heading 6 for that preview that and see what that kind of looks like okay, it doesn't change much but what we're gonna do is set it in easy google fonts um, after this. so save it. and let's save it for now.

and close it okay, so click on customize themify options and then make sure you click on typography. default typography and we set this to heading 6 before. okay, so what we would need to do is you can change it to a different font but what i really want to do is basically set the font size to just something small. okay, i'm just going to change the font size to be 12 and i might set it to also be

um, the font here as well. so might change that to georgia there. and i want to change the font's width so that makes it a bit bolder so i might change it to 700 and then just keep it as that. so we're gonna click on save and close turn on the themify builder and if we double-click on that, i want to change all the text to italic. so what you can do is highlight all your text and select italic for that. okay, if we save that, that looks pretty good, and close that.

you'll see that we need to add some spacing as well okay, so besides adding in spacing on the row, we can also add in spacing for the individual text modules as well. but the reason why i don't use it often is because we actually don't want to normally add it in here because if we add in another module, say another text a module, below that, then what happens is it'll actually add in, um, padding between that so, for example, we double-click on this,and go to styling and then go to padding and let's say i want to set it about 20% to the top and 20% to the bottom,

and we actually preview that okay, you'll see that we added some padding on the top and bottom but what happens is that the text module below that is, um, 20% padding away. so click on save. and then if we save here and if we close it then you'll see it adds spacing there but it doesn't add any padding here. so what that means is the test text will be very close to the next row and that doesn't look good so, ideally, most of the time, you want to add it to the row so i just want to show you because sometimes you might need it

okay, so let's just delete that module and i'm just gonna keep it like that for now. so let's click on save and the next module we're gonna add in is the folio section okay, so i'm gonna show you how to add in this image and then i'm gonna show you how to add in these images where you click on it and it shows up as a light box but it also shows a different image, okay. and after that, then i'm gonna show you how to add in the different slider, gallery and video layouts. okay, so we're gonna do the 4th row now where we're gonna add in folio and work so, the first thing that we're gonna do is set in our color

and set in a background color or you can add in a background image or whatever you want okay, but i recommend just keeping it simple so just choose a nice background color that you have chosen the color is gonna be yellow so ffdc7d let's click on the outside there and what we need to do is to also set the row width to be full width as well okay, and then click on save. okay, so once you've done that, then we need to set the columns so as you can see, scroll down here, you'll see that there's space here and space here. so what we need to do is set a column which allows that space. okay.

and the one that we want to choose is the same one that we choose for the ones above okay, so this one here. and that means you can put in the image here or add in text here in the middle and you can drop in whatever you want in the side but keep your website simple for a nice viewing experience so what we're gonna do now is basically drop in an image module. so you can drop that into here. okay, so we can upload our image and you can also use the same image for your website if you want to or you could just add in some text. so browse library. and before, we already uploaded all our images. you can upload your image. that's up to you. so click on my folio and insert file url

and you can preview that to see what that sort of looks like okay, so that looks pretty good. click on save now if you notice, my one is a little bit smaller 'cause i want it to be smaller because then, you know, all the text here matches up in size. otherwise, this one is a little bit too big now, we can actually re-size the image and we can do it in a few different ways so the first way is you can actually move it around like that. be smaller. and you can set the column here to just be a smaller type of column. like that. you can do it like that and you can remove the color spacing

but you can also do it in another way. so what you can do is you can actually double-click it and then you can go to styling and then you can add some padding on the right and also the left-hand side so what that does is that it adds some spacing on the side and since the column is limited to here, it'll add some space so willl make the image actually smaller so what we're gonna do is to set that to 8% to the right and 8% to the left and you'll see that if we save it, then it goes a litle bit smaller because there is some padding on the right-hand side and padding on the left okay, so what we need to do now is we're gonna drop in the image modules into here.

okay, so what we need to do is basically drop the image module below that and as you can see here then we can do, um, upload the image. so upload the image that you want to showcase, click on browse library and for this one i want to showcase the t12 first okay, so the image size that i cropped it to is 255x255 so it's like a square and then i'm gonna insert that file url and because we actually want it to actually open up in a light box, um, a different image to open up,

then we actually need to put in a different image for our image link okay, so what we actually need to do is click on browse library and click on this image that you see here and you've got the url here so you need to double click on that okay, so you select all of that url just double-click it or you can just ctrl+a to make it easier and just ctrl+c or right-click and copy. and you don't want to insert that file url. just click on x. so you've got that url on your clipboard and what you need to do is to just paste that into here

and if you wan't to open that in a light box, then make sure you select that. okay. if you want to open the link in a new tab, you want to link into another page, then you can select this icon here. okay. and then all your need to do is just click on save. and your image will show up here. you've also got different ways of displaying that information. so you display it that way so as you can see, you've got that block there. so that's the image on top and you can see these little lines there. so that's where your text is gonna go.

if you actually add in a image caption, you can do that to describe your image a little bit so, let's just type in some text. preview. and we can preview that to see what that sort of looks like okay, so your text appears on the bottom and you can also change the font color on the back in here. so preview that and then that is pretty cool. so i'm just gonna remove that for now clear image and remove that and you can change the layout on how you want to display that but that's up to you. let's click on save for now and because we actually want to display 3 images side by side, what you can do is hover over this image module

and then you can select the columns within the actual bigger columns here. okay, so select that and select the 3 here and then what you can do is to duplicate it. duplicate it again and actually move it there. so what that does is it retains the settings that you have set in here and all we need to do is basically changing the urls i think that is really useful, um, you know, for later on. so double-click on that and let's just change that url. so browse library and we're gonna change it to this one here but we also want this link here

so copy that link, copy all that link, and select this image as the thumbnail. insert file url. but when it's down here, then ctrl+a. select all. and then paste in your new url. okay, click on save okay, that's done. and double-click on this one. we're gonna delete this click on browse library and select this thumbnail here. but we wanna copy this url. so select all that url select here insert file url and then we're going to select all

paste that into here. click on save. okay, so let's save that and we'll see if that all works properly. close that. and let's just click on that okay, so that loads up pretty good. click on that to see if it loads up. okay. all good. so now all we need to do is basically add some spacing up here. add some spacing down here. and maybe add some spacing um between here as well 'cause it's probably too close. so we can click on, turn on the builder and first thing: we're gonna add some padding to the row.

go to styling. scroll down to padding here. deselect that and i wanna add probably about maybe 5% to the top and 5% padding for the bottom part. and then we can click on save and that looks pretty good um we want to add some spacing in between here. so what we can do is apply the padding on to the actual image module click on styling padding: we want to set 5% to the bottom.

and click on save. as you can see, it's added it in. click on save. and click on save. um, there you go and that's pretty good. so, you know, once you've set in these modules, then you can basically move it around anywhere you want on your website. so if you want to move your whole entire folio section above the quote, then you can just drag the row you know, move it up and if you want to undo the changes, click on undo. and if you want to move this whole section around, you can do that.

you can move it down here. so that's why this whole theme is so flexible and is really amazing. it's a great long-term solution for all your needs. so let's just move it back down there. and what i'm going to show you now is how to use the other modules. the slider module. so, i just want to show you so you guys can, um, learn it and then apply a different layout to what i have here. because your site might be different you want to display your information differently. so, let'ts just duplicate that because we want to keep that for later and what we're gonna do is to remove that and we're gonna drop in a slider module which is that there. drop that into here.

and you can also display your blog posts, um, images, texts and also video as sliders but for tthis one, we're gonna select images and what we're gonna do is for the image url, we wanna put in the- let's click on the slider layout okay, scroll down we want to put in a thumbnail and when we click on it, then it shows us the main image okay, so click on browse library we want to put this thumbnail in here but we also want this main image. so we're gonna do what we did before

and double-click on that just copy that. but we want to select this thumbnail. insert file url and then for image link, make sure to paste that into here. and then we're go open that up in a lightbox okay, so you can input a caption if you want to so you can describe a little bit about what that image is about so for example, i might go to get some lorem ipsum text click on that

and generate some text and let's just copy some of that text here and paste that into here just like that and we can actually preview that to see what that sort of looks like. to see if that's the look that you want. okay, that looks pretty good okay, so if you want add in the next slider, what you need to do is add in a new row, and we're gonna do the exact same thing. so browse library. and we wanna display this image in the light box. so copy that link.

select his thumbnail. insert that there. and paste in the link here. select light box into here and for this one, paste in some text to describe that image and paste that in okay, so i'm not gonna add in the next one because you probably know how to use it. but let's just preview that. and you can see that the slider icon is here and you can remove that if you want to by selecting no. for, if you want to spread the arrow buttons, and the pagination is basically this thing here so what that does is it's, um, you can actually click on that and it displays the next slide. okay, so i want to select no for that. i want to keep the arrows. and let's just preview that.

okay, that's pretty good and we have a bunch of settings that you can set here. you can change the speed. you can change how that actually appears maybe you want that to be a fade in effect and you can also change the font color here. so you got a font. font color to be white. and if you want to change the color of this thing, this thing is actually classified as a link so you'll actually need to change the link color here to white. let's click on save. and that's pretty good. so what i'm going to show you now is to basically add in the gallery module

okay, pick the gallery layout. um, we're gonna delete this for now. okay, and you can drop in a gallery so drop that into there. and there are different ways you can actually lay that out. so the grid format, showcase or light box. so the first thing we gotta do is insert a gallery so, we can insert all these images that we want to display. add to gallery. and then we can just update gallery. and let's just preview that to see what that looks like. so that's really cool. so that shows your gallery like that in a grid format.

um, you can do that if you want to. and you can link that to your media file. so what that means is when people click on that and click on that, and then it will link to the bigger version. okay, click on that and link there. and then it showcases in a light box, you can actually click on the button right here. okay, so after when you've done that click on turn on builder you can set the number of colors to 3. so that way, it's sort of even. okay, so that looks pretty good.

um, you can also use the showcase feature and the showcase feature, i think, it is something like that. okay, so that's a different layout. and what you can do is, for example, we can insert gallery. and we actually want to delete. delete these ones here. and then click on update gallery. preview that. um, what we can do is to go to styling and make sure that these thumbnails are in the middle. so align that into the center and click on save. and what you can do is to change the rows into 3 rows.

and then what you can do is add in a gallery for each of the different artwork or work that you have. for example, um, something like that. okay, so you guys probably know how to use that now now, we're going to move on to how to add in a video. okay, so adding in a video is fairly simple um, what you need to do is to drag in the video module so drag it in and pull it in just below that. and what you need to do is to copy the video url. for example, the youtube or vimeo, um, let's just say this video here.

all you need to do is copy the url up here. copy that to your clipboard and paste it into here. just like that. and you can preview that to see what that looks like. okay, so that looks pretty good. normally, i select this layout here. okay, preview that. i think it adds a little bit more down there. okay, so after when you've done that, you can click on save. and save it okay, and that's pretty much it. and then you can just play it straight up from here. also, change the layout of the video. for example, you might want to display it

as a full width video. like a whole video. and you'll find that since we actually set in the columns here, we can actually change that to full width. okay and that will ensure that this is on full width. and if you actually want to change the size of this, what you can do is hover over it and then you can hover over it like that. click on that. and change it like that. you have a full width video and everything looks great. okay, so we're gonna delete that and then we're gonna move on to the call to action section.

that you see here. okay, so what we're gonna do is to delete that entire row. just like that. okay, that's done. and now, what we're gonna do............ ....is i'm gonna show you how to add in your text here. okay, and text here and also buttons. so then people can contact you and things like that. so what you can do now is to- okay, so the first thing that we need to do is to add in the color. so background color.

we're gonna set it to green so 71bc8f you've got the color there and all you need to do is click on save. okay, so we're gonna add in the text, the heading text, so drop in a text module and you can type in "work with me". just like that. and then we can set in the heading text here to the heading that we set in before. um, to heading 1 but i'm actually gonna set it to heading 2 'cause we want to set in, um, different types of headings. so you can use different types of headings for different sections. okay.

so you don't want your text to be heading 1 because that's probably too big for what you need here. so we're gonna set it to heading 2 and and then we;'re going to edit the text. um...... in the easy google fonts a little bit later on. okay. so what we need to do now is to drop in a text module below and add in this text here so, i'm just gonna drop in the text module. and what you need to do is to just grab some text or you can type whatever text that you want to display. just copy that and let's paste that in as plain text. 'cause normally, you don't want any formatting. paste that in.

and preview and see what that sort of looks like. okay, that doesn't look too bad. go click on save. and now what i want to do is to actually align the text properly. so i want to set it to something like this. okay, plug it in like that. and then what we're gonna do is we're gonna set in the text so it aligns all in the center. okay, so you don't have to set it for each individual module. what you can do is set the options here. styling. and set it to center.

like that. so it aligns everything within the row into the center. so we're gonna click on save. and that looks pretty good. and we're gonna style it a little bit later. so the next thing that we're gonna do is add in a button. so you can add that in below. and let's just change the button to maybe a large button. a outline. and we're gonna change the text to maybe contact - oops- contact me. and then what you want to do is actually link it to your contact page. okay, so to do that, i just click on save for now.

save it and close it. okay, so we haven't actually built our contact page yet. if we right-click an open link in a new tab, we'll see that we have an empty page but we're gonna edit that later on. so i wanna copy that url. or, you know, wherever you want to direct them then you're gonna link it up. so turn on your builder and let's double-click on that button. and paste a link into there. and let's preview that to see what the button looks like now.

okay. pretty good, pretty good. and you can change the color here. um, what else you can do is i might change the font of that. okay. scroll down here. font family. um, i already what font i want. i think it's euro...euro sans. and i also wan to change the font size of that to maybe a little bit smaller to 14 pixels. just like that. and let me preview that to see if that's what i want. okay, so you'll notice that the button automatically aligns in the center already. so, because we've set the row to align everything in the center.

so we don't need to set it here again. but you can if you want to. and then what we're gonna do is we're gonna customize everything. okay, the first thing i want to do is to customize the heading tag. go to our customize. and for that we would want to go to back here. click on typography. default typography. scroll down here and this would be heading 2 okay, you can check it by inspecting the element. so for heading 2, i want to set the font family to same font. so highlight that face. like that.

um, what i want to do is to make sure that is in upper case. okay. go to appearance and you can set the size here. okay, i might change that to maybe about 48. but i also want to add some spacing in between the text. okay, so i might change it to 2 pixels in padding for the letter spacing. okay, that looks pretty good and then i'm going to click on save. and close. okay, now we're going to themify builder. and what we want to do is to change the text color

for that, styling. you want to change the font color to white. okay. and we also want to change the font color here as well. so double-click on that. and change the font color to white. okay, but if you notice on our example, click on here, okay. so you see that the text is actually smaller and you see that the line spacing is actually closer. okay, so i want to show you how to actually do that. so you can change the font size pretty easily and you actually know how to do that. 14 pixels. and that changes to really small. but if you want to change the line spacing,

then what you need to do is go to line height and type in, uh, let's type in 1.5 and that basically moves it closer in. okay. so what that means is you have to set it to em so em is a variable. um, if you set it to pixels then that would be fixed height. but em would bascially re-size accordingly depending on your font size and your screen as well so make sure to set that as em okay, so if you set that to maybe 2, then you can see that size increases like that.

so 1.5 is pretty much perfect. um, stay on this page, and click on save. gonna click on save and the final touch we're gonna add is padding to the top and bottom. so click on options. styling. deselect that and maybe 5% to the top and 5% to the bottom. click on save. click on save and close that. okay, so that looks pretty good. umm, what i want to do is maybe click on the contact and see if that actually works.

okay, so that works. i'm gonna click on back and for example, um, let's just refresh that for a second. okay, so for example if you want to change the layout, for example, if you want to showcase how your process actually works, then you can do something like this where you can add an icon, sort of like a feature module, describing the number of steps it takes. i'm gonna quickly show you how to add that in because it might be quite useful later on. so what you can do is turn on our builder because we want to keep this section here, then all we need to do is duplicate it.

and there you go. so once you've duplicated it, then what you can do is to, lets just drag in a feature module. so drag that into here and let's just paste it under here for now. and what you want to do is add in a feature title so the feature title is what you see here so for example, if you want to describe the process that you take with your clients, then we can do that. and what we can do is just add in some text so grab some text and paste that into there scroll down and you can change the different layouts. for this one specifically, we want to change it to this one here. now click on preview

and it will show up like that. okay. now if you want to add in this circle, this circle thing, all you need to do is set in the percentage. so that is the percentage that it actually shows up the color here okay, so i want to change this stroke to 4 pixels and the color to white. okay, if we preview that, we'll see what it does. okay, that's pretty cool but we wanna add in an icon in the middle okay, to do that, that's all built in within this theme so you can click on insert icon

and i wanna install a, um, i think it's was a lightbulb. so scroll down and look for l scroll down okay, l. and let's try out-okay, lightbulb. okay, once you have that in there, preview that to see what that that looks like again and i wanna change that color to white preview that okay, so that looks pretty good. and i want to change everything to white as well. so you want to change the font color to white. preview that.

and see if that's what you want. and that what's you want. then i might actually change the sizing as well to about 14 pixels. okay, that looks pretty good and we can click on save. okay, so that's how you add in a feature module and if you want to move it around, then i suggest that you select this one again and what we can do is to split it into 3 different rows and then we can duplicate it like that. and then we can just drag it and paste it into here. like that. and what you can do is drag the whole row and move it above the, um, button. and if you want to change the layout here, you can hover over here

and make sure that text is in the center as well just like that. and you're gonna make sure this text is also in the center then paste it into there click on save close that and see how that basically looks and you can showcase it that way and basically all you need to do is to change the text here, change the text here, change it to a different icon and you can cha nge the percentages. okay. so after that, i'm gonna turn on the builder and delete that. okay, so now i'm going to show you how to edit your footer and basically style it so it looks like the footer that we have here

nice and simple footer with a back to top button social media icons, i'm going to show you how to add that in as well as adding this and also changing the background color and different fonts for that okay, so the first thing that we need to do is to go to the back end. so click on your dashboard and what you need to do is hover over themify ultra. themify settings. and then go down to theme settings and then we're gonna scroll down to footer design okay, so what i'm gonna do is i'm gonna open that in another tab and show you guys what each thing does.

okay, so for the footer design, you can choose various different designs or you can choose no footer at all so if your'e gonna create a landing page then you can select that um, but generally just keep it as default okay, so what you need to do is you can look at the site that we have here and you can see the back to top button and the logo okay, so you can look at here and, if you want to exclude that logo, then you can tick on that. and if you don't want any footer text at all, then you can remove that completetly by selecting this. okay, if you want to remove the back to top button, then you can also remove that by selecting this. okay, but i'm gonna keep that all as is right here.

and you can also select he number of footer widgets to have. okay, so right now, we've got 3 fotor widgets. okay, so you can look at it. you can't really see footer widgets but they're invisible. so there's one for the widget on the left, one in the middle and one on the right hand side. so you can change your footer widgets to display 4 so that would mean it will be divided into 4 different spaces. one here, one here, one here, and then one here. so you can add different elements into your footer. but for this one, we're gonna select 3. and for the footer widget position, we want to set that to before footer text.

so what that means is if we look at this example here, then this is the footer text we want our widgets to show before that, we don't want our social icons to be below that footer text unless you want to do that. so make sure that's below footer text and after when you've done that, then we can click on save. and then we're gonna scroll down here. and then you can see the footer text 1 and the footer text 2. so if you don't want to put any footer text, then maybe you can also click on space. and then if you actually save that, then you'll see the footer text 1 will disappear.

so footer text 1 will disappear. refresh that. okay, and then it basically disappears. okay, so if you want to keep that footer text, then make sure that there's no space selected. okay, so what you can do is leave that as is if you want to display, for example - let's just save that for now. and refresh that. if you want to display your copyright logo, it'll actually link to your website so you can leave that as is but for the bottom section, some of you would probably want to delete that. so you can add in a space in here but if you guys want to support me and my tutorials, it will be great if you guys can leave a credit

but it doesn't matter if you don't. it's already great that you're following this tutorial so i don't mind that. but for those of you who want to support the tutorial, then you can go to my website okay, so we're on the blog post now and we're gonna scroll down and what you can do is add in click on add inspired by hogan footer text and what you can do is basically copy this text here and then you can go back here and paste it into footer text # 2. and paste that in and once you've actually save. and you can refresh that to see what that looks like so you can see that it adds a little bit of credit back to my website

so it goes straight back to my website when people click on that and it doesn't look that bad. but if you don't want to put that, then just add in a space. okay, so right now we're basically going to add in the social icons and to do that, it's quite simple. so for your social links here, click on social links okay, so what we need to do is basically paste in your, you know, profile links. so for a twitter account, you can go to your twitter profile and basically copy in the url so copy that and paste it into there like that. and for the icon color which you is the color you can see on the bird and the f, so that's your icon color and i want to set that to a 4d4d4d.

so that's like a dark grey color and the reason why we're gonna do that is we're gonna set the footer here to a dark grey so every thing blends in nicely and is consistent. and for the background color is the white color that you see. so for the white, i'm gonna select that one there. and i'm gonna add in my facebook one as well so just copy your facebook profile and make sure that you visit my facebook page. give it a like. that's where i post the updates. so paste that in and set that to be the same color or you can set it to facebook colors but that's up to you.

um, if you don't have google+ then what you can do is just leave it blank and it won't actually show up. okay, youtube. copy that and, of course, make sure to subscribe to my youtube channel 'cause i'll be uploading more videos later. so paste that into there and for the icon, um, same. for the background color, we're gonna set that to white. and if you don't have pinterest then you don't have to add that in either. but let's just add that in copy and basically paste that in there like that. okay, change the icon color. change it to white.

but if you notice, um, some of you might have instagram and it doesn't actually show instagram so what you can do is click on add link and enter in a title, so "instagram", and insert your instagram profile. you can just copy that into there paste that as so and for the icon, what you need to do is insert icon. so click on insert icon and you can scroll down to the bottom, okay, bottom section where it says brand icons so brand icons, instagram. so you're gonna look for "i". so "i" is somewhere there. so click on that.

and you got your instagram icon. okay. so set in the color, 4d4d4d, and background will be white. then we're gonna click on save okay, once that is done, then what you can do if you actually refresh the page here, refresh that you won't actually see your social icons appear automatically. what we actually have to do is set that in there manually. so what you need to do is go to appearance. go to widgets. and you can see that there are available widgets on the left-hand side and what you need to do is to drag in your social links

so drag in themify social links. so drag that and sort of move it up here a little bit. okay, and then put it in the social widgets section - i mean footer social widget. footer social widget section here. okay, so that's gonna appear in the footer and then you can make sure that when people click on it, it opens up in a new window if you want that and you can change the icon size to small, medium or large. let me keep it as medium. click on save and that's about it. so you can also add the social widget in different sections of the footer widget or or different sections of your website as well including the sidebar widget

and things like that, um, if you wan't to do that. but let's just keep it as is and if we refresh the page, we should see it appear. okay, so your footer widgets have appeared right here and right now, what i'm actually gonna show you is styling the footer colors and things like that. so what you need to do - i'm basically gonna close that and maybe close a bunch of these as well okay, and then go to customize. scroll down. okay, so this is your footer section. so you'd go to themify options. okay, and then click on footer.

so the footer wrap is basically the background color and for that, we want to set it to 4d4d4d which is the same for our social icons so every thing matches up. so you can change it to any color that you wish but what i recommend is choosing a grey color 'cause a grey color really makes your website look nice. just nice and professional and that's what you want. you don't want your website to have too many different colors especially your footer section. 'cause that just looks really bad. okay. so select that and you want to scroll down a little bit. and for the footer font which is the font that you see here, "inspired by" and "2016",

you can change the color of that and obviously i want to change the color 'cause you can't see what it is right now so maybe i want to change it to a white color so white color is nice but you'll notice that these ones don't change now the reason why it doesn't actually change is because it 's actually a link so you need to scroll down to a little bit further to footer link and you need to change that color to whatever you want. i'm gonna change that to a white color or you change it to maybe a very light gray so people know that's a natural link. but i'm just gonna change it to white. okay. and what i want to do is change the footer font here to just display all lower cases. so i'm gonna click on that.

so obviously you can change it to different fonts and sizes to make it bold or whatever you want. okay, so that's up to you. um, okay. for some reason that's changed. i want to change that to raleway then. raleway, which is the font that you see in the body text. it's a really good simple font to use in your website as well. so once you've done that, we can basically click on save. so the footer link hover is when you hover over it, then it will change the color that you set. for example if you hover over it now, it should appear red so i'm just gonna keep that as none

keep it nice and simple. so when you hover over it, it shows an underline. and pretty much that's good enough as well and that's pretty much it. so if you ever want to edit your colors in the footer, this is where you edit your footer menu if you have one and things like that as well. so you can change the widget container color there are a lot of things that you can change. just play around with it here. so let's just close that and let's take a look at our footer. click up.that works. and if you actually compare this footer here with the footer here, you'll see that it's a little bit bigger

and if you want to make that look a little bit skinnier, then you can add in some code. okay, some custom css. and don't worry about that because you can copy and paste that in wherever you like. so what you can do is go to my website and select "how to make footer skinnier" and basically copy in this simple code and all you need to do is click that and paste that into there. you'll see that the footer wrap has sort of minimized in size and you can do that. um, you can adjust the size of the footer by changing the figures here so perhaps you want to move it up a little bit because this button actually shows up

so when you hover over that, it doesn't touch the white part here. okay, so what you can do is i think change it to maybe type 1 em here. and bascially that's pretty good. maybe 1.2, um, let's change that to 1.5. okay, so that's pretty good. change that to 1.5 and i think you can also change this as well. to make it go down a little but i'll probably keep that as 0. um , i think that looks pretty good. you can also change this number here and for example, so it moves it a little bit. okay. so once that is done, all you need to do is click on save and publish.

and then just close it. and you're pretty much done. so we've pretty much finished our home page and we've also set in our header. we've also set in our, um, footer section and footer styling so, what i'm going to show you now is actually set in your row anchors. so what row anchors do is when you click on it, then it actually scrolls down to the section that you want it to. and i'm going to show you how to add that in. so you can actually add in about or what pages really simply by using the builder to build it out. but i think this way provides a greater user experience

people can just click something and it scrolls down, it just gives a nice effect, and they can find out all about you. and maybe if you want to have more of a description about yourself, then you can add in a button that links to a full about page or something like that. okay, so what we need to do is go to the menu section here. and once you've done that, then what we need to do is click on custom links so we're gonna set up some custom links. it's not gonna be a page but it's gonna be a link in our navigation section up here so what we need to do is to paste in the url and how we do it is we basically copy this url here that we have. so it'll be your domain specific to yours.

and paste that into -oops- and paste that into here. and what you need to do is to type in the hashtag and then type in "about" okay, so remember what you put in here. so put in about. the link text will be about. and then click on add to menu. and what that does is adds it to your top navigation menu. now we want to ad in another one which is called "work" so the work one. if you click on that, it will sc roll down to your folio section. okay, so paste in your url

and then type in # and type in work. and link text, it can be work or you can type in folio if you want to. add to menu. and what you need to do now is you can rearrange it. so i want to display home, about, work, and then contact. okay, so after when you've done that, all you need to do is click on save menu. and then go back to your website okay, so as you can see, your menu items have appeared but when you actually click it, it doesn't do anything. so we actually need to set the link in okay, so for example if we want to link it to this row,

what we need to do is to turn on our builder. and then we need to click on row options here. and for row anchor, we need to set in the name. so, for example, if you remembered, we actually put in #about so what we need to add in here is to just type in about without the hashtag in front of it. so click on save. and once you've done that, you want to do that for the next one as well. so you'll now link the work to the folio section. so click on row options. this one, you'll need to type in "work" or whatever name that you put in before. click on save. and save it.

and then you'll need to close that. and we need to refresh the page and we're gonna test the links. okay. so lets scroll up here and click on about okay, you'll see that it scrolls down here and that's really cool. and for work, it will scroll down here. okay, so you can set that for all different things and it would be really cool. so right now, what i'm going to show you is how to set up your contact page your contact page that you see here. how to add in the headline, the animated background, the text and the incons, the map and the contact form.

so what we need to do is just click on contact. so go to the page. and as you can see by default, we've got that header here. and let's say you don't want a transparent header. you want something like this but you find that the header is too, um, too thick. we can actually change it to a thinner type of header and to do that, you can click on customize. and then what you want to do is click on custom css, and go to my website. go to the blog post. the simple blog post. and click on "how to make header skinnier". what you need to do is copy on this simple code. copy that to your clipboard.

and basically paste that into here. so that basically makes it skinnier but you'll also notice that the logo is not aligned properly. you'll want to probably move it down. just a tad. and then you'll move this menu icon just a tad as well. so to do that, save and publish first. we can go to site logo and tagline i think i mentioned this before in the beginning, but i'm gonna show you how to do it now. so for example, we can change the padding here so let's just change that to 0. see how that looks. okay.

10. okay that moves it up. okay, we want to add some padding to here. 10. probably a bit too low. maybe let's try pixels. um, 8 pixels looks about right. maybe let's try 7. okay, so that's back in the middle. so you can play around with the numbers here. after when you've done that, then we want to edit this thing here down a little bit as well. so this is the main navigation. so main navigation is this one here. so menu container and set it to relative. and then you can add 5 pixels to the top and see how that looks. i think that looks about right. maybe let's try 4 to be exact.

okay, that looks pretty good. save and publish. click on x. and then you're good to go. and obviously you can change the, um, header default color as well. so you can change the color in.....wait for that to load..... you can change the color in the header wrap section. change the color there. okay. and you can also change it individually as well which i'll show you in a second. but right now i'm going to show you how to add in this animating background which is really awesome. so we're gonna turn on our builder.

so what we need to do is click on options. and for this, we don't need to go to styling. we actually need to add in additional css class and all we need to type in is "animated-pg" okay, so animated-pg. and after when you've done that, you want to move it to full with so it moves all the way across. and you're gonna make sure it full width on your row width here. click on save. and that will move all the way across. but you'll see that there is spacing here and we want to move that up. so what we need to do again is change the column width.

the content width to full width. so we need to go to edit pages and then what you need to do is scroll down here. go to page options. and then for the content width, make sure you select the full width here. and i'm gonna update it. and what i'm gonna do is view that page in a new tab. so you've got your animated background like that so if you want a header like that and not have a transparent header, then you can leave it as is and follow along

but if you want to make it transparent which i recommend cause it looks pretty cool, then this is what you have to do. so go back to our dashboard. at the back end. and go to your contact page. and click on page appearance. so for page appearance, you can set the header design specific for each of the pages so this is how you create a landing page. so if you wanna create a landing page to collect e-mail leads, then you can just click on x and remove the header design

and remove the footer design so then they're both gone. and you can edit a bunch of things so that's what makes this theme so amazing. so for the header background, we're gonna set this to transparent so that turns it to transparent. and we click on update. and then what you can do is to basically refresh that page. and just check how that looks. and now - okay - so we just need to add on spacing. okay, so turn on your builder. and what i want to do is add in a text here. so a contact. heading. so let's just type in "contact" and change that to heading 2. give that a preview.

okay, that looks pretty good. um, all i want to do is maybe center that so align text to center and i want to change the font color to white. click on save. okay, so that looks pretty good. all i need to do is add a little bit of padding to the top and bottom of that row. so go here and scroll down to padding section. de-select that and type in 12.5% for the top. 12.5% for the bottom so they're both even and we're gonna click on save and basically see how that looks. save that and close that.

okay, that looks good and that part is done. okay, so you'll notice that the animating background colors that are showing aren't really the same colors that we've set for our home page. okay, so if we go to our home page, you can see that the colors are much flatter and what i want to do is actually change the animating color. you don't have to change it but i just want to show you guys where you can actually change it. so what you can do is you can go to your dashboard and hover over themify ultra. click on themify settings. and then go to theme settings. scroll down.

and then you'll see the animating background section. and this is where we can set in our colors. okay, so i've already got the colors ready and you can copy me if you want or you can add in your own color palette colors in here. so the first one we're gonna set is the yellow so ffdc7d and then the pink so f8c0d5 the next one will be blue. 6acce9. next one will be green. 71bc8f. and the next one will be e4a1f5

okay, that's all good. and once you've done that, we can just click on save. and if we refresh this page then the color should change. okay, so that looks pretty good. and you can also change the animation speed if you want to. but i'm gonna leave it as that. now, the next section i'm gonna show you how to create is this section here. we've got the icon and the text. okay, so that's really simple.what we need to do first is basically separate the columns. so one large column here and this smaller column for our contact form. so turn on our builder. scroll down here and basically i want to change that to this layout here.

so your larger section and a smaller section here. so now we're gonna drop in a text module, and what we can do is actually add in our icon. so that's really simple. click on these shortcuts. this yellow plus in here. and then click on icon. and what you can do is select your icon. so for this one, i want an envelope. just scroll down to e. so e for envelope and i want this one here. click on that. and you can also link that icon up to a different page and you can also change the icon color

but i'm gonna keep it as default. so just insert that in there. and just type in your e-mail. so this is my e-mail and if you have any problems, just send me an e-mail and click on enter. and what we can do is basically preview that for now. see if that's what we want. okay, that looks pretty good. the next one will be a phone. so click on icon and insert icon. and then search for p, i hope. so p which has the phone icon, and then you can change the color but you don't want to do that for now. and then you can just type in a phone number. just your phone number.

and click on enter. and then the next one we're gonna add is the address. so we're gonna add a map icon. okay, so insert icon and then let's look for m. so go to map here and you can select this one or that one. that's up to you . i might choose that one. insert and then basically just type in your address. so i'm just gonna copy that address straight from here. and remember to paste as plain text if you ever copy from somewhere else. so click on that and just ctrl or command +v. paste that in here.

and after when you've done that, then you can preview that to see how that looks. okay, looking pretty sharp. and what you can do is align that to the center. so styling, and go to center, and then click on save. okay, looking pretty good, and now what we want to do now is add in our map module and to do that, just drag in your map. okay, so you can set in our address there and you can type in your exact address or you can just type in the city. for example, san francisco and then you can click on preview.

and that will show up like that. so what you can do is - gah, i think i spelt that wrong. but i think you'd pick up on that. change that to c. and you can change the zoom. s you can click on 9. let's just preview what that looks like. so that zooms in like that and you can play around with the settings here but i don't think it's too necessary. um, i might actually change the height to 350. so that makes it a little bit taller. and click on save. okay, that's looking pretty good.

now we're gonna click on save 'cause i'm gonna add in the contact form now but i wanna show you how to make sure that you e-mail is actually sent. i mean, your messages are actually sent to your e-mail. so save that and close the builder and what i want you to do now is go to your back end. your dashboard. and then click on the contact form. click on that. and then what you need to do is obviously you need to install that contact form 7 plug-in . which i did at the beginning of the tutorial so make sure you do that. now, what you need to do is click on edit.

and click on the mail tab up here and make sure that you e-mail address is set in here. so people who submit messages, the messages to the e-mail that you put in here. so make sure that is correct otherwise you won't see it and make sure to also check your spam folder and make sure that your contact form messages aren't delivered in there. so click on form and you can edit the form here. and if you want to do that, then you click on the documentation. and contact form actually has a lot of different documentations to actually set up your different layouts and how to use different settings as well

'cause it's really a versatile plug-in. but what you can do now is leave that as is and copy the shortcut that you see here onto your clipboard. and let's just go back to our contact page. close that and close this things here 'cause we don't need them anymore. okay, go back to contact page and then we're gonna turn on our builder again. and then what we'll need to do is drop in a text module and what i like doing when pasting in short codes, i like to paste it into the text tab here to make sure i don't have any formatting on that as well.

so you can preview that to see what that currently looks like. okay, that looks pretty good and you can leave it as is if you want to. but i'm going to show you how to edit some of the the styling of it so you can make it perfect to blend it to your website. let's click on save. now what you can do is to save it and close it. and i want to show you how to customize the button 'cause i want to make it sort of look like that because this one doesn't really suit the theme of the website. so what you can do is click on customize. and if you click on themify options here,

this is basically a form. so you can edit the form stylings by clicking on this forms tab. if you ever add in a mail subscriber form, you can also edit the look of that when you click on forms. so you jsut make another of that . so let's scroll down and basically you can change the form field colors but let's just keep that as default. that's good enough. but i want to change the text size to maybe something a little bit smaller. so i'm gonna try 14 pixels. okay, so that makes text a little bit smaller. and that moves your thing up like that. so you can change the styling like that and you can also change the color

but what i wanna show you is how to customize the button. so for the button, you can change the background color to whatever you want. so it's like a pinkish light red and you can do that but i want to keep that as a transparent background so, transparent background and that'll basically mean that it's white. but i actually want to add in a border. so set in a solid border. and then type in here 4d -oops-

4d4d4d this is the dark grey that we've set in for the other parts of our website. so that makes sure everything is consistent. and for the pixels, um, i want to change that to maybe 1 pixel. see how that looks first. okay, so that looks pretty good and i like that. and what you can do is actually change the text color as well and you want to make sure to set that to the same color. so copy that. and paste that into there. okay, looking pretty good. now when you actually hover over that, then it'll give you the hover over effect.

so we can also change that effect if we want to. so what i want for this specific one is to change it to transparent. so when you hover over that, there won't be any effect. but you can change the color of that right here. scroll down. i want to change the border of that. okay, so i want to change the solid border and then what i want to do is actually add a dark grey color. so what that does is when you hover over that, then it'll give you the effect. this effect. it changes to a darker color.

so people know that its a link. and also make sure to change the text color as well to the same color you set here. so let's see how that looks. so that's really subtle. you can't really see that change color with the border but you'll be able to slightly see it. okay, so what you need to do now is because i think the text font here is a bit thick and i wanna make sure that it's the same as the line that we have on the border. so what you can do is go to my website and then click on "change contact form submit button font weight" click on that.

and just copy that simple code. and go to custom css and drop that code into there. okay, so that looks pretty good. click on save. and then your button is pretty much done. so one more thing that i wanna do is add in some padding on the top of the row and on the bottom of the row and also maybe align this to the center. so what we can do is to turn on our builder and then we can double-click on this

okay so for the styling, i want align it to the center. okay, so that looks much better then for the row styling, i want to change the padding to about fully 5% to the top and 5% for the bottom. 5% is pretty much always good so use that. and then click on save and hopefully that is all good. let's click on save. and let's click on x to close that. okay, so we're basically finished our contact page

and congratulations, we've finally finished building our website. if you ever want to create another page, then what you can do is just hover over this section here. plus. and then click on add page. or you can also do that on the back end by selecting pages and add new so just add in a new title. you can publish that and you can use the themify builder and use the skills that you've learnt from this tutorial to build out your website that you want. okay, so i'm also gonna show you just a few more things because the tutorial probably wouldn't be complete if i didn't show you these. so let's just re-size this for a second

okay, so as you can see, if we re-size that, we'll see that the icon changes to a black color and this website, you know, having the black there just doesn't match the design of the website. so to change that icon to a white color or any color that you want, then this is what we need to do. we need to go to......let's just re-size it for a second. go to my website here. and click on "change menu icon". so click on that. and copy that. and what you need to do is go back here. go to customize. and custom css.

and basically just paste that simple code in there. and then you can just save it. and let's say you want to view that on an ipad to see what it looks like. just click on that. and you see the icon has changed. that's looking pretty good. and some of you might want to edit what this mobile menu styling looks like. and to do that, it's very simple as well. so what we need to do is to go to my website again. same blog post. and click on "customize mobile side menu". and basically copy in this simple code to your clipboard. so copy that. and what you want to do is come back here and make sure your arrow is here.

and basically just paste that in. so that changes the whole look of umm, the design here. so we click on that. as you can see, the background color has changed to black. and you can change that here. so, when you see background color, you can change the color. so for example, if you want to make that white. you can change it and then you can use a place called color -oops- color picker and then you can find the hex code that you want to show for your mobile menu.

um, so wait for that to load. select a hex code and then copy that code. and basically paste it into this section here. okay. so once that is done, then you can also change the link color. so i think this is the link color. so if we change that to black. okay. and then you can see that light blue hovers over that color and that doesn't look too bad. pretty good. and you can change the hover over color here, i believe. so if you want to choose one of the colors that we've used before,

then we can choose maybe a 4d. so 4d4d4d which is a dark grey so it gives a nice effect. and for the active link color, you can set the color here. so maybe i might change that to 4d4d4d as well. so it's a nice, subtle effect and we can just save and publish. and then we can close that. and if we change the size of that, then that looks pretty good. and i think i almost forgot one last thing.

and that's to show you how to actually make it super mobile responsive. okay. so, how i'm going to show you is, basically, i'm gonna take the top header image as an example and i'm gonna show you a simple example. because i actually got a more in-depth tutorial on my actual youtube channel. so make sure to check it out. i think the name is "how to make a website super responsive" and it's like a 17-18 minute tutorial and that will really teach you how to set that up. but the basic theory of it is very simple so if we actually urn on our builder. and let's say we want to duplicate this for now. so duplicate that for now. so what we can do is click on options.

and for styling, you can set the visibility. this means that if you select hide here, then that means this row here would not be visible on the tablet and not be visible on the mobile if you select that. it'll be only visible on the desktop. so you can click on save. and for the second row, what we can do is we can click on the options here. and let's say you wanna change the layout of it you know, specifically for mobile devices. you might want to add a call to action button or something like that or you might want to change the color.

so let's just take this as an example and let's just change the color to maybe, you might want to change it to.... ...a grey color. like that. okay, and we can set the visibility here to not show on desktop. so to hide on desktop but to show on tablet and mobile. so we click that. and let's say we save this now. and we actually close that. you'll notice that disappears because we've set it to disappear on desktop but actually appear on ipad or mobile devices.

so as you can see here, you have a small spacing issue. there is not enough space up here and there's too much space down there. that might not look great. to fix that, it's really simple. so let's just drag that now and let's just say for the ipad, i think it's looks pretty good but for your mobile device, you want to add some more padding there. so what you can do is set tht back to default size turn on the builder again.

and duplicate this row again. okay, so you've got another row here. you can click on options. and then what you can do is just add a little bit more padding for the top here, let's just say 15% and set this to be visible just for mobile devices. okay, hide it for tablet. click on save. and you're also gonna make sure that you select the options for the second row and to hide this one for the mobile. okay. click on save.

and save that. and then close that. so this is visible on desktop and if we pull it in, this is visible on tablet and if we pull it in further, then this will be visible on mobile. so as you can see, we've added just a tad more padding on top. i mean it's not perfect but that's the main theory of it. and i really think it's an amazing feature of this builder. and you'll really love it because you might want to display a different layout for mobile devices

because sometimes people might not read text all the time okay, so you might want to keep it really short for people viewing in their mobile devices. and as you can see there;s a small problem here but that's not a big issue. so to fix that problem, i'll just fix that quickly and finish off our tutorial. turn on the builder. and click on options. we want to set the styling to align everything in the center. close that and let's test everything again. okay, that's looking pretty good. looking good and.......yeah. so finally, i think we've finished our website.

um, congratulations! make sure to leave a comment down below if you have any questions if you're building your website. make sure to share your websites with me on the youtube comments, on facebook, wherever you want. and also check out my channel. there's a ton of resources that you can find to help you build your dream websites. so thank you very much and see you guys in the next tutorial.

aceng Wednesday, January 11, 2017