How to Make a Website With WordPress using Free Theme and Elementor Page Builder 2017

Hey , what's up guys ?

This is from block two dot com .

And in this video , I'm gonna show you how you can create this professional super awesome , super beautiful wordpress website using a free theme called has a , an element of free page builder .

So this is going to be awesome .

And let's see a demo of the website which we have already created as you can see on your screens .

And before that , make sure you subscribe to my channel and also click on that Bell icon so that you don't miss any further videos with that being said , let's get started .

So let's see the demo website which we have already created .

So this is the website as you can see .

And when I scroll down , make sure you'll see some changes because we have used a lot of animations , a lot of design in this video and this is the best ever website that I have created you using a free theme .

That's right guys using a free theme and a free page builder .

OK ?

So let's scroll down as you can see the animations .

OK ?

Again , different animations .

OK ?

So these were animations now , let's see one by one .

OK ?

So this is the first header section .

We have a full width image in the background .

A title subtitle two different call to action buttons with beautiful animations .

Again , you can change everything from here and that do so easily .

I'll tell you and show you how easy it is to make changes on this website and how easy it is to create this website .

OK ?

So stay tuned for a few minutes to see that .

OK ?

Now the next section is our product section .

We have used different icons .

These are icons using these are very simple .

You can create this very easily and we have used different colors to beautify the website .

Then the next section is who we are section .

As you can see at the left hand side , we have some text about the company or about yourself .

And the at the right hand side , we have a beautiful image and in the background , we have another image , we can also give a parallax effect to this particular image .

We'll see that when we start creating the website .

OK ?

Now the next section is a very beautiful section again , which is meet our team section here .

You can you know have your team members .

Now , I have not added many different effects .

For example , how effect as you can see when I move , when I move my cursor on this particular image , nothing happened .

But there are many different effects .

For example , when we apply those effects .

When I have all this image , when I move micros on this image , you will see different animations like fade in zoom in zoom out .

So you can also add that OK ?

I didn't add that , but I'll show you how to do that in this tutorial .

Now , the next section is about our clients .

OK ?

As you can see this is a normal image , but I'll show you how to make this image circle so that you know , it can beautify the website .

And the last section is this contact us section .

OK ?

Very beautiful again .

And this is such a simple and elegant design as you can see .

Oh , here .

Now let's see the About Us page .

So as you can see guys , this is the About Us page .

And also I forgot to mention that I'll be , I'll show you how you can use layouts to create a website .

And when I say using layout , it means you can create the same website using layouts within 10 minutes .

That's right guys .

Within 10 minutes , you can create this complete website .

So if you want to learn that , make sure you stay tuned to this video so that you learn a lot and I promise you , you , you are going to learn a lot of things and you will love this video .

OK ?

Now the next section is as you can see about this and we have used different f to a year you can use different color for these icons you can have and add your own text .

This is actually a background image .

And on that image , we have this thing .

Then the next section I have made this as the color .

And if you see uh behind this bar behind this section , there is a very , there is a very thin and very light shadow if you could see .

So that is also a design and animation and that beautifies the website more .

You can have any color in the background .

You can change , you can have you can change this background color for white .

Also , it's all up to you .

I'll teach you everything in this tutorial .

OK ?

This is the next section and this is our last client section .

OK ?

You can have your client's icon .

So here now let's see the services page .

This is the services page .

This is the top section as you can see and this is the services section .

You can have your own color again .

And again , I'm saying you can change this text easily .

OK ?

And this is the another section , our expertise section .

OK ?

And this is the last section which again says companies we have worked with .

Now , this is the contact us page as you can see the here VIQ and a parallax effect as you can see to the image , then these are different icons , OK , which call us , visit us , contact us and different information .

And this is again the same section .

If you remember , this is the same section that we have used in the home page , you can use one section in different pages without creating them again .

So you don't have to create them again to use at different places .

OK ?

So that is awesome .

It saves a lot of time .

And the last section is this map and below that we have social icons .

OK ?

So this was a very short demo tour of the website which you are going to create .

Now , let me show you how easy it is to make changes to your website .

So let's come back to our home page to do any change .

You just have to click , click on this button which says edit with elemental .

Now suppose you want to change this text to your .

So as you can see , just click on uh this text and here , here , here is the text .

You can change it to anything .

For example , I want my name over here Shake so I can type in shake , I can change this .

Uh I can even change the color for this text .

So just we have to go to style .

OK ?

Here is the color , we can have any color for this one .

We can change the size of the text as you can see .

So easily .

You don't have to do any coding or anything over here .

You can change the font from here as you can see , we can have , we have tons and tons of different fonts .

So this is so easy , you know , you can change the color , the size and everything for this uh text .

Also this button also you can change the icon , this animation so easily you suppose you want to change this icon .

So just click on this icon .

And here as you can see , this is the reorder icon .

You can select different icons .

So you , for example , let's select this icon , address card .

And as you can see the changes have taken place instantly .

You don't have to even wait .

You don't even have to save to see whether what changes have taken place .

And suppose you did some mistake , you didn't want to do that and that just happened and you don't .

So if , if this was the case when you are coding , you would go crazy , you know , but here you don't have to do anything , just click on control plus Z and it will be same again .

OK ?

So this again are very useful .

And suppose you want to change the type of this icon .

For example , this is tagged , you can have this framed , this is the framed one or you can have the default one .

Just the simple one , you can change its alignment , left , right center , you can change different things over here .

OK ?

In stacked .

Also we have different , for example , this is the circle , you can have a square uh icon .

So creating as you can see a website like this is really , really easy and you will notice that when we start creating the website , OK ?

These are different animations , you can change the animations .

Also , let me show you , for example , click on your go to advance from here .

Here is the animation .

As you can see at present , it is wobble .

Now let's click on this Jello jello , whatever it is as you can see the animation changes and now let's click on this .

OK ?

So this is very easy , very useful and most amazing thing is that it is free .

This uh page builder is free .

This theme which we are using is free .

OK ?

So this was the short tutorial .

Now without wasting any time , let's get started to create any kind of website , whether it be a business website , ecommerce website , social networking website , any kind of website in this world , you need two basic things , your domain name , and your hosting provider , your web host .

OK ?

For example , naik dot com is a domain name google dot com is a domain name youtube dot com is a domain name .

So you will have to select your domain name .

And next thing is web host .

So as you can see this background image over here or different images which we have used or different codes , different text , all these things are saved somewhere in some computer which is running 24 7 .

So that anyone visiting your site at any time can see the website .

Ok .

So you have to purchase and you have to spend a very small amount on that .

So we have , I actually recommend two different companies which are very good .

First one , my first recommendation , my top recommendation is T MD hosting .

Ok .

This is the best one and I will tell you and I'll show you why I consider this as best .

So just open a new tab type in B block two dot com slash T MD , ok ?

Block two dot com slash T MD and press enter .

Once you do so you will be redirected to this cloud hosting page .

Now , let's scroll down here as you can see .

Uh this is , this has got three different plans , summer cloud , rain , cloud , storm cloud , you can use any one of these , ok .

You can see your budget what fits and your needs and so on and you can decide whichever plan you want to go with .

This company is different from most of the companies in the market .

Why there are many reasons all are mentioned over here .

Let's see one by one .

First of all , as I said to you earlier , it is a hosting is nothing .

A web host is nothing but a computer which is running somewhere in the world 24 7 .

So your computer has to be awesome .

Has to be fast so that your website loads , loads fast .

Ok ?

So as you can see if you select this storm cloud , which I am using at present , I'm using this Tom cloud .

So it has got six core CP US .

Hm .

Just ignore this six GB of rams unlimited bandwidth .

And the most amazing awesome feature of this particular company is that it has got SSD space .

What is , er SSD space ?

And why is it so important ?

And so awesome .

So let's search for a search on , well , for that , you can type in SSD versus HTD web hosting .

OK .

As you can see , I type SSD versus HTD web hosting on Google .

And you can see you can read all these things from here .

Now , what I'll do , I'll go to images because I don't like reading a lot .

OK ?

Now let's select the first result .

You can select anything they all show the same result .

OK ?

Everywhere you see , you'll see the same result .

I always select the first one .

OK .

That is more easy to understand .

Now , as you can see , there are three different criteria .

So you have the first one is speed when you select other company , any normal company , it uses almost all , almost all the companies in the market uses HTD space OK .

HDD hosting .

So in HDD , you have very slow computer or very SHTD websites are basically very slow , comparatively to SSD .

And here as you can see , SSD is super fast .

OK ?

And your IOP is higher is better SSD again , is very fast latency , lower is better .

So as you can see here , it is very fast , you can see the different skies .

It is just phenomena .

OK ?

So this is the best company which I have experienced .

And at present , I'm using T MD .

OK .

So it has got SSD and most amazing , more amazing that using than using SSD is that it has unlimited SSD space .

OK .

So there are a few companies which offer SSD space , but they offer a very limited amount , for example , 10 GB 20 GB .

But here you get unlimited SSD space , which is amazing .

OK .

You can host unlimited .

For example , you can host 10 different websites on the same hosting provider on the same web host .

OK .

So suppose to today you're creating this website , which I'm going to show you tomorrow .

You might need to create an e-commerce website .

So you don't have to purchase another web host for that .

You can host the same , that website , the ecommerce website on this same hosting provider .

OK .

That is awesome .

You can host unlimited uh websites over here .

It will also provide you a free domain .

For example , dot com was provided by them as a free domain .

You get premium support C panel , C panel is present in any you go with any company , you will get ac panel , optimum cash , wild card SSL .

This is another amazing thing .

OK ?

As you can see .

Yeah , I have an SSL certificate .

You go to any website which I have created recently after I purchase this D MD hosting thing .

I have SSL certificate on all my website .

And if you go in market to purchase , you go to any company to purchase SSL certificate , it can cost you around $40 to $400 depending on your need .

Ok .

So you get it free and you can use this SSL certificate on unlimited number of domains .

So that is another amazing thing .

You get cash 1 28 MB , cash performance is three times better .

As compared to these plans , you get spam expert money back guarantee for 60 days .

So this is just amazing .

There are three plans I would recommend you to go with storm cloud .

If you cannot afford that , then you can go with cloud but don't go with summer cloud .

The basic and a simple reason is that you can host only one website .

So tomorrow if you need to create another website , you will have to create an another , you know , and you will have to purchase another web host .

So that is not recommended .

I'm using storm cloud .

So I'll click on this sign up button over here .

Now , here you have to enter the domain name which you want for free and be sure , make uh make sure that you do some research on domain names .

I have actually created a video but haven't uploaded it yet in that video .

I have explained and I have given a few tips on selecting your domain name .

So make sure you watch that video that will really help you , you know , so that is really easy to do .

So just type in the domain name which you want .

For example , I'm typing shake one because I cannot have shake that is already taken .

So I type nine shake one .

Now what you want dot com dot E dot org , whatever it , there's so many different extensions over here , you can go with that and now click on , proceed .

Now , here you have to put in your contact information .

For example , your first name , last name , email address .

All those basic information here is the payment information .

If you want to make payment through pay through credit card or debit card , you you have to put in your information over here .

If you want to make payment through paypal , you can do so .

Ok .

Now here you have to select your data center .

So I would suggest you to select the one which says nearest to you for me .

Singapore says nearest to me for you .

It might be Sydney London , whatever it is .

Just select the one which is nearest to you .

If you want domain privacy , it will cost you around 10 bucks a year which is affordable .

I in fact recommend you to do so .

If you don't want that is fine .

Ok ?

Just un take this one .

Ok ?

You can turn it off .

Now I have a promo code for you that will give you the highest discount that T MD gives that is 7% .

Ok ?

So just type in and sorry , just type in Nyt which stands for Naya youtube and click on apply .

Ok ?

So as you can see , it says this promo code gives you 7% of this purchase .

And there are chances that in future this promo code won't work .

So make sure you always see the description .

You will find some really useful thing in the description .

So you will find that promo code which is uh you know useful at that time in the description , ok ?

By the time this is useful .

So I'm putting this thing and I just click my or you always says I agree to the MD terms of service and click on , check out once you do .

So you'll receive an email or mail from TMD hosting .

And by the way , if you want to use host gator , don't worry , I have given a link to your video description below .

You know , if you watch that video , you'll , you'll get to know how you can use host gator to install wordpress on your website .

So if you don't want to use T MD , if you think it is a bit costly , you can go with host also and I have a 60% off coupon code for host G .

So that might really help you , ok ?

But in terms of quality , I would recommend you to stick with D MD .

Ok .

Now , let's see , what is the next step ?

Now , we have purchased the domain name and hosting account .

It's time to install wordpress on our hosting on our domain name , which we have just purchased .

Ok .

So what you have to do , you will receive this email .

As I said , you when you click on that check out button and this is a very , very important email because it has got some really important information like your name , servers , your server IP your hosting packages , FTP user name , password .

So make sure you save all this information somewhere if you have more than one email addresses .

Ok .

So if you have two or three different email addresses , then what you can do , you can forward this mail to those email addresses .

Ok ?

So that will help you to save this information .

Now , the next step , as I said , you is to install wordpress .

So you'll find this link which would say control panel , open this link in a new tab .

That link is nothing but your domain name slash C panel .

For example , if your domain name is ABC dot com , then your C panel link is abc dot com slash C panel .

Ok .

So that is easy .

Now put in your user name and password from that mail and click on login .

Ok ?

So this is the C panel of P MD .

You will find the C panel of all the companies are almost similar .

You'll see almost the same options again and again in any hosting company .

Ok .

Now what you have to do , you have to go to the bottom to this section which says soft tacular app installer .

And the first option is wordpress .

Just click on wordpress .

Now click on install now .

Ok .

Now from here , select your domain name on which you want to install wordpress .

So I want to select this one and make sure at the top http S is selected so that you get this beautiful secure lock over here .

Ok .

On your domain name and from in directory , just delete everything by default WP is written over there , just delete that and make sure this thing is empty .

You don't have to change this site name , site description from here .

You can change that later on from your wordpress dashboard .

Now you do have to change your user name and password .

Make sure you select a user name which is quite difficult .

OK ?

Use numbers , uh special characters and different alphabets , upper case , lower case in your user name , make it very difficult for anyone to guess .

Ok ?

And also change your password .

Don't keep very simple passwords , like just typing in password and so on .

Don't do all those stupidity , ok ?

That will put your website into danger .

Now , in this admin , admin email address put in your email address , which you where you want to receive updates and information about this website which you are going to install .

Ok ?

So once you are done at the bottom , you'll see this install button .

Click on that .

Now , the wordpress is getting installed on your domain name .

It will take a few seconds .

Don't worry .

As you can see guys , it took less than 34 seconds .

Ok ?

Now , here you get two different URL S two different links .

The first one is your website URL and the second one is your wordpress dashboard URL .

So Wordpress dashboard , URL is not thing but your , you know your domain name , which is for example , dot com then slash WP dash admin .

So this is your dashboard URL .

So let's open your dashboard or administrative URL in a new tab .

OK , guys .

So this is how your dashboard should look like .

Now , at the top over here you'll see it would say my blog or whatever you have .

If you change the title , it will , it would say your title over here .

However , this right click right , click over here .

Now , open this link in a new tab and here is your website .

Let's see how our website looks like at present .

So as you can see , this is I guess uh 2017 theme or 2016 theme .

I don't know by wordpress .

Very terrible theme .

Never use this kind of theme to create a website .

OK ?

Now , what we have to do , we have to convert this crap into something awesome , something amazing like this .

Ok ?

So for that , we'll be using a free theme , as I said to you earlier .

So what you have to do , open a new tab type in blog do dot com slash tr ok .

H est I A it will redirect you to this particular page .

Ok .

From here you just have to click on this download now for free button .

It will ask you for your email address .

Just type in your email address over here and click on download .

Now .

Now here just click on this red button which says download files .

Now you have to select this has a theme .

So first one is has a theme .

And besides that , you will see this download button click on this and as you can see your theme is getting downloaded over here .

So our theme has successfully downloaded .

Now it's time to upload this theme on our website .

So go back to your dashboard at the left hand side , you will see something called appearances , click on appearances .

Now here at the top as you can see a button that says add new , click on that button .

Now again at the top , you'll see another button which would say upload theme , just click on that button .

And from here , choose that file which you have just downloaded .

Ok ?

So let's search for that file .

It would be in the downloads folder here .

It is tr select that click on open , click on install now .

Ok .

So our theme is getting installed and meanwhile our theme is getting installed .

Make sure you do a few things .

First is to subscribe to my channel and also press that Bell icon because as you can see , I make really good videos , very useful videos .

OK ?

And second thing if you like the video , OK , then you can also give a thumbs up to this video that would really help you .

If you have any doubt , any questions , there is any request for me , then you can post that in the comment section below .

OK ?

I make videos based on requests .

For example , I have missed made different videos like wordpress , multi video , affiliate marketing videos , OK ?

Based on request by different users or different subscribers .

So I do check my comments always .

OK ?

So make sure you if you have any requests , any suggestion queries , you post that in the comment section below .

OK ?

So our theme has been successfully installed .

Now we have to activate this theme .

So just click on this activate button .

OK ?

So as you can see , our A T A theme is successfully installed and activated and we don't need these themes .

OK ?

So what you can do , you can just delete all of these .

OK ?

That would make our site a bit faster .

And also we don't want these files which we don't actually require .

OK .

So we have successfully deleted everything .

Now it's fine .

Now again , at the left hand side , you'll see over here which says about has a click on that .

Now we have getting started recommendation , recommended action , useful plugins and so on .

Now , click on recommended actions .

Ok .

Now we have we want to install and activate these two plugins .

So install and activate both the plug in .

One is the isil companion .

The second one is pirate forms .

Click on this activate button .

Now again , go back .

Ok .

Now go to useful plugins .

Ok .

Now we need to install and activate these two plugins again .

Click on install and activate .

We don't need these plugins .

Ok ?

We need only this .

In fact , we don't even need this one .

Ok ?

The translate press press .

If you need to translate your website , you need this .

But we don't need , we need only the elemental page builder .

Don't reload it now and we don't need anything else .

Ok ?

If you need this thing , you can install , these are very useful plugins .

This is also page builder .

I'll be using this page builder in my future videos .

Just to see how this is at present .

I'm using this one as you can see it says and deactivate .

It means it has been installed and activated .

So this is fine .

This is awesome .

Now again , come back to your website refresh and let's see how it looks like .

Ok .

As you can see guys , it looks much better , but still it doesn't look like this .

OK ?

So we have to convert that into something awesome like this .

So let's get started to do .

So .

First , we will need to create a few pages .

For example , as you can see , this is the home page .

So let's create a new page , a home page .

So again , at the left hand side , you will see something called pages , how pages and you'll see two options , all pages , add new .

So we want to add a new page .

So click on add new page at the top .

You have to give it a title .

You can give it any title .

For example , let's put home page .

OK ?

And from this left hand side , you will see something called page attributes .

And under that , you will see something called template and select that template and select page builder full width .

OK ?

I guess this is the one yeah , page builder full with .

So select template and select the page builder full width and click on publish .

OK ?

Now let's view this page in a new tab .

OK ?

So there is nothing over here .

Now let's start adding all these awesome themes .

OK ?

Now come back over here .

Now click on edit with element as you can see over here .

OK , guys .

So this is how you should , you should see .

Now this is how your page should look like .

OK ?

Now , as you can see , uh it is very simple , you just have have to use your common sense .

Now this is a section OK .

As you can see , this is the first section , this is another section .

So as you can see , this is a section which has a background image , it has a title and so on .

So let's add a new section .

As you can see , it says a new section .

Click on , add a new section .

Now it will ask you how many columns you want .

So we want only one single column because as you can see over here , it is not divided into two or three different columns .

It's just a single column .

OK ?

So let's select this one column .

OK ?

Now here is your new section .

Now , everything you want to add , you have to add in this particular section .

OK ?

So let's see .

The first thing is a background image .

So let's add that just click on this at the top .

As you can see when you have this , you will see this blue section and click on audio at the top .

OK ?

You'll get some options at the left hand side .

This is the edit section options , OK ?

First you have to click or make this thing on stretch section because as you can see this is a full width section .

OK ?

So we want to stretch that .

So make this yes and content make this full width .

OK ?

You'll get to know what all these things are .

Once everything starts now looking now go to style because we need to style it .

OK .

Now we need a background image .

So here as you can see it says background .

Now here you have three different options .

You can add a background video , you can add add a background gradient .

And here is the class options .

In classic option , you can add a background color or a background image .

So let's click on classic .

And as you can see if you want to add a background color , just select this , select any color .

As you can see , the changes have taken place over here .

But you don't need to add a color .

We want a background image .

OK ?

So select the second one which says image now , upload image .

By the way , I have uploaded all those images , all those layout you can see on my website blog to dot com and I'll give this link in the video section below so that you don't have to search for this .

OK ?

So this is the one how to make Wordpress website , blah , blah blah , just click on this .

OK ?

So here it is you have the theme file , everything over here .

You have images over here .

So you just have to download all the images , whatever images I'll be using .

Now , you'll get all those images for free from here .

OK ?

You'll also get all the layouts we'll be using layouts later on , but make sure you download them now so that you can use them later .

OK ?

So I'll give this link in the video section below .

OK ?

So uh let's add our background image , click on select files , search for your file .

Here it is , this is the image which I have used .

Select this click on open , OK ?

Click on insert media .

OK ?

Now here it will it it will ask you some you know different options like position , attachment , repeat size , go to size and instead of default select cover .

OK ?

Now , we also need to change this size from here .

So go to layout again from here .

OK ?

Now here it will ask you height , select fit to screen .

OK ?

So as you can see , now this looks much better .

OK ?

Content position will see all these things later on .

OK ?

Now just click on save .

Oh , here , you can also press the control and key together so that it will save your file .

OK ?

And if you want to see the exact change what you can do , you can just minimize this thing , just click on a year and you will see how your website looks like at present .

OK ?

So this has already started looking awesome .

Now again , bring this back .

Now we have to add this text .

OK ?

So again , as you can see over here , you have this uh I can click on this icon and again , you'll get all these options .

OK ?

Now we want to add some text .

So you have to use this module which is a heading .

Module .

Now just bring this thing over here .

OK ?

As you can see very easy , now you can type in anything I will type wordpress and elemental .

I'll type the exact same thing .

So instead of this , which says this is heading element type in your element .

And as you can see , you actually cannot see the changes over here because we have to change the color of the font .

OK ?

And we also have to change the alignment .

We'll see that later .

First , let's change the color .

Click on style , you always click on style to make some changes like color change , background , change , border colors , change those kind of changes .

OK ?

In style , font change , font types change , font weights , change all those things .

So first let's change the color .

The first option is text color , select that select white from here .

Now , as you can see , it is looking awesome .

Now , the second one is typography , make this on to do some changes in the typography .

Now you can increase or decrease the size of this as you can see , OK ?

You can change the font family .

For example , I have used Roboto throughout the website .

So I'll be using Roboto again .

OK .

Now , also we have to change the weight .

Uh that is just to make it more bolder .

Let's select 700 .

This looks much better .

OK ?

You can add different options .

We , we don't need these options right now , but we'll be using these options later on in this video so that you can understand what does this actually do ?

Ok .

Now again , come to content and at the bottom you'll see these alignment options , click on center because as you can see in the demo website , it is center aligned .

OK ?

So we are done with the first thing .

So easy , so easy , it is as you can see very easy to create a website like this and always keep on pressing this save button so that you don't miss any change .

Now again , we have to add another text as you can see this text .

So again , what you do , you click on this icon over here at the top .

Now again , I drag this heading thing over here .

Now type in the other thing free theme and plugins , select this thing type in free themes and plugins make this center line go to style , change the color to white .

Now , as you can see , now , let's also change the typography , increase the size to whatever you want .

OK ?

This looks better font family to Roboto use the same font family throughout the video or throughout the website , whatever font you're using , use it throughout the website .

That would look much better .

OK ?

Now , as you can see in the demo , I said there is small gap between this and these buttons .

OK ?

So before adding the button , let's add a gap to again again and again , when I add a new element .

I'll click on this icon .

OK ?

So make sure you click on this icon .

You'll see these options over here .

Now , here is this space .

So bring this spaces over here .

OK ?

OK .

This is the space .

As you can see the blue section which is selected if you want to increase this space , you just increase it from here .

As you can see if you want to decrease it , you can decrease it .

OK ?

So let's keep these 2 50 pixels would be fine .

Now let's add these buttons .

OK ?

Before adding buttons , as you can see there are two different buttons .

So we need two different columns over here .

So drag these columns over here .

So as you can see now we have two different columns .

Now drag the button here .

It is to the first column .

Now , as you can see the button is over here .

Now let's start making change to the button , the type and whatever type should be default text here .

It says create now .

OK ?

So let's type in create now .

OK ?

You can link this to anything you want .

You just have to enter the URL O here and just make it right aligned because we want to , we want our first logo , first button to be right aligned and the second button will be left aligned .

OK ?

Now you can select the size of the button .

It is small , medium , whatever you want .

Let's select small .

It looks much better now let's change this style .

So , so again , come to style as you can see over here , this button is a very simple button , OK ?

It has got white , text , white border .

And when we ho this button , it becomes the default color .

OK ?

As if you also notice that I have used this color , this pink type of color throughout my website .

OK ?

So you also make sure that you use one or two colors throughout the website that would look much better .

OK .

So let's uh first at the normal in the normal state as you can see there is no background color .

So what we'll do first , let's see , the text color is white .

OK ?

So text color , we will select text color .

We'll select white from your fine .

Now background color , we don't want any background color .

We want a transparent .

So what you do see this is the first one and this is the second line .

This is for opacity .

Now just drag this thing to the bottom .

And as you can see now , it has become transparent , but we need a border .

So go down and here is the border type select solid from here .

And as you can see now , we have a powder but this is very thick powder .

We want a thin border .

So in the width , just type it in 11 pixel .

This looks awesome now , OK ?

But as you can see when we have this , when we get our mouse on our , our our cursor on this button , nothing happens .

Whereas in the demo website , when we have this button , the style changes , OK ?

The background color changes to this red or pink color , whatever it is .

OK ?

So what you should do , just click on this .

How over here to change the power effect and go to background color and put in any background color you want .

For example , I'm using this color throughout the website .

Now , as you can see when I have this button , this becomes uh red or pink .

OK ?

You can also change the typography from here .

If you don't like this uh uh this font , you can change the font and so on .

OK ?

Now click on save .

Now there is another thing which is called to just copy this thing .

For example , now instead of creating this same button again , what you can do if you have a year .

Let me bring this down .

However , here , as you can see , we have we get few options .

OK ?

This this one is duplicate column .

When you click on this , as you can see another button has been duplicated .

Now , when we have two different columns , we no need this one .

So what you can do , select the third column , however , a year and click on this X button to remove this column as you can see that column is removed .

Now we have the same icon over here .

Now it will save some time we just have to do some changes over here .

Now select this button , you'll get all these options related to this button .

Now make this left align as you can see it came over here , go to style the background color should be this color .

OK ?

And the how background color should be transparent ?

This is just the opposite .

OK .

Now here when we ho this , it becomes transparent , whereas here when we hover this it becomes pink .

OK ?

Now if you also notice the uh the background color is very light , the background image is very light and we cannot see this text , this white text .

Whereas here we can easily and clearly see the text button and so on .

And the background image is you know not that light , it is darker .

So there is a very simple way to do that again .

Click on over here how this and click on this section to edit or to make some changes to this section , go to style , scroll down .

And here there is an option which says background overlay .

Click on that background type , click on classic .

OK ?

Is the opacity OK .

First , let's select the color from your select the black color .

As you can see it has become dark .

If you want to make it more darker , you can just increase the opacity .

As you can see if you bring to one , it will all become black .

If you want to make it lighter .

You just decrease the opacity to whatever you want .

OK ?

For example , this is at present set to 0.55 .

And I think this looks very good .

Now click on save .

So as you can see guys so easily , we have created the first section .

It was really , really easy .

OK ?

Now , similarly , we have to create the second section .

OK ?

So let's create this beautiful section .

So again , you can click on this add section to just start adding or there is another shortcut way , just click on this thing again to come to this thing .

And as you can see the first one is text .

So instead of clicking on this button and selecting the columns , you can just drag this text over here .

OK ?

And as you can see a new section has been added , now you have to add , do do some changes over here .

As you can see the title over here is why our product is the best .

So let's copy this OK ?

And paste this thing over here .

So we have why our product is the best OK ?

This is center line .

So make it center line , go to style , change the color .

Now color also , for example , this is the title .

Now the color which I'll select for this title .

I'll keep that same color throughout the video for all the titles in my website .

OK ?

So make sure these things are very important .

These things might be small things .

But these make very large , you know , impact , this has a very large impact on your website .

So as you can see , I'm selecting this color , the dark gray color .

And after that , I'll do some changes in the typography .

Also , I'll make this thing a little bigger .

OK ?

For example , 35 or 36 pixels will be fine .

And I'll also change the font family to Roboto slab , OK ?

Roboto slab .

This would look something like this and I'll change the weight to 600 .

Now , as you can see , this looks exactly like this .

OK ?

We have 35 pixels Roboto slab 600 weight because the title should be bolder than the subtitle and so on .

OK ?

Now we have another text to you .

So again , come back with your select this setting , bring this below this copy this thing from your face it over your OK ?

Again , center align go to style .

Now this is the sub subtitle .

This is not the title .

So what I'll do , I won't select this color .

I'll select a bit lighter color .

The third one .

This is the light gray color .

So basically , the idea is I want my title to be darker color and my subtitle to be lighter color .

This makes a good uh no , this gives a very good design to the website .

Now come back again , go to typography .

Now this will be 18 pixels .

OK ?

You can select any size .

I am selecting 18 pixels and the font family will be Roboto .

OK ?

So I'll , I'm using Roboto Slab only for the title , OK ?

And not for the subtitle or any other text for subtitle and different text .

I'm using Roboto and for title , I'm using Roboto Slab .

You can increase the weight , but I would recommend you to keep to default .

It looks better and click on save again .

Come back over here .

And as you can see , we have three different icons .

Very beautiful icons .

OK ?

So for that , we need to add three different columns first .

So you can bring these columns over here , OK ?

At the bottom .

OK ?

And as you can see , we have two different columns .

Now select the first one first .

Go back over here .

What is this ?

This is an icon .

In fact , this is an icon box .

So here you'll see this , I can box over here , just drag this icon box under this column , click on this , click on this thing , uh Click on this icon or this box to make some changes .

OK ?

Now here you have to choose the icon , OK ?

Whatever icon you want at present it is star , you can select anything .

For example , let's select android , OK ?

The android one , you can select this style at present .

It is a default .

I'll select Stagg .

Now is when you select stag , this becomes like this .

OK ?

Now here is the heading here is the oh the subheading uh the text OK .

Now you can select your heading from your for example , here it says quality .

So instead of this is heading type in quality and this is dummy text .

So it is fine or maybe let's add our dummy text .

This is much better .

OK ?

Now , as you can see here , it looks a bit different and now if you want to change the color , so obviously you know how to do .

So click on style , you can add , change the primary in the secondary color .

For example , let's select the primary color as black , this becomes black .

But I want this to be , you know , this color which we are using again and again , this is the color I have just typed in so that I don't have to do again and again .

OK ?

So this is the color , this is the primary color .

Now , secondary color is the color of the icon .

If you select black , the icon will be become black .

So I would recommend to go with white .

This looks much better .

OK ?

Now what we'll do , we'll delete this column from here and we will , you know , copy this or duplicate this column two times .

OK ?

So we don't have to waste our time creating the same thing again and again .

Now what I'll do , I'll click on o here and make some changes for you .

For example , instead of this , I can , let's let's select some other I can like ambulance , OK ?

You can change your text from here .

You can add any title from here .

It's all up to you .

You can change this text also from your OK .

Now what I'll do , I'll change the color to maybe this color , green color , whatever color you like , click on save and similarly , you can change this color also .

OK ?

Now , if you see , oh , here there is a little gap at the top and al also at the bottom .

So let's add that .

So what you'll do this time , you'll select the main section .

As you can see everything is under a single section .

This title , all these columns are under a single section .

So we'll select this section when we click on this , this whole section is selected .

Now go to advance and here you have some options like margin padding and so on .

So what you'll do , you'll first click on this button to delink because if this is not changed , if you put 10 over here , you know , everything will become 10 .

For example , padding top , right , bottom left , everything will become 10 pixels .

I don't want that .

I want to do it manually .

So I just remove this and I want padding top .

So let's make padding top curve to around 100 pixels .

OK ?

As you can see now , we have this much gap .

If you want to reduce this gap , you can reduce the number to maybe 70 pixels looks much better .

And we also want some gap at the bottom .

So what you'll do , we'll go to padding bottom and type in maybe 50 pixels .

OK ?

As you can see now , we have 50 pixels gap .

OK ?

So this is how we do it again .

Let's see another thing here .

As you can see , this thing is into two lines , which means there is a lot of gap or there is a padding at the right and left .

You cannot see that that is just a gap .

OK ?

And here it is under a single line .

So let's do that , select this thing , this text go to advance .

OK ?

Dealing this .

And now we need some padding at right and bottom , right and left .

So let's add 80 pixels right and 80 pixels left .

OK ?

As you can see , this looks much better if you want , you can increase the padding .

Also , for example , instead of 80 you can increase this 200 from both the sides .

So we have 100 pixels left .

And right now , let's see how our web website looks like at presence .

This is how it looks very , very good , very , very amazing .

OK ?

Again , bring this thing back , make sure you save the changes whenever you do a change , make sure you save it .

Now , let's also add some gap between this as you can see over here uh below the title and below the title , there is some gap before this icon .

So let's do that .

Now again , click on this uh subtitle go to advance and bottom .

We want some gap , for example , 30 pixels , OK ?

Or maybe only 20 pixels , you just type in 20 bottom and you have that gap .

OK ?

So click on save .

So this is how easy it is to create this kind of website we have completed with two sections very , very easily .

OK ?

Now let me also show you about the animations because I always forget this .

And thank God , I remember this time .

So for example , if you want to make some do some animation to , I want some animation to apply to this particular thing .

So just click on over here , click on this particular section , click on this icon , go to advance .

OK ?

Now here you have the entrance animation .

Now select anything .

For example , let's select Wobble , Wobble , whatever it is .

As you can see , you can see the animation if you change , swing as you can see .

OK ?

So we have different animations .

Basically you basically people select fade in from left for this one and for this one , they select fade in from right .

OK .

So that also makes sense .

That is right .

OK .

So fading from left , fading from right and this can be fading from top or center whatever you like .

So this is what this is how you put animation to everything .

So I won't be showing you again because it is very easy , very simple and you have the same , for example , again for this title .

Also , if you want to add some animation to this title , click on the title , go to advance from your .

Here is the entrance animation , click on this , select anything as you can see bounce in up .

So this was the animation and click on save .

OK ?

So this is how you add animation to anything with a text .

I can image anything in this particular website .

OK ?

Now let's move forward and let's see the third section .

So this is the third section .

Very beautiful section again and again , wait , wait , wait , let's bring this thing over here and here as you can see guys .

OK ?

Now , OK .

Fine .

Now it is better .

That was 100% .

I always keep it to 80% .

Now it's , it looks similar .

I thought I did some mistake but it was just zoomed in .

This is fine .

Now , let's bring this back .

OK ?

I think I have to zoom in so that you can see it properly or else it will look very small on your screens .

OK ?

Now let's add the next section , the third section .

OK ?

So again , as you can see , we have two different columns in the first column , we have some text .

So let's again , come back , add some text in this column , bring this text over here to add a new section .

What does this text say ?

It says who we are now , who are we now ?

Whatever it says , just type in your your title over here .

This is left align .

So you don't have to change any uh anything from your go to style .

Now , as you can see here , the color is white .

So let's select text color white .

Now it disappeared because the background color is also white .

Don't worry , we will fix that .

OK ?

So select this thing over here and you will see this option , this section option .

OK ?

Now what do you have to do ?

First , we don't have to do , we just have to change the background color .

So go to style , select the classic option , image , upload image .

This image is also given , OK ?

So make sure you check that file .

This is the image , select this click on open insert media .

OK ?

Now we have to change the size .

So again , go to layout height , OK ?

You can select fit to screen but that would become bigger but that is fine or maybe .

Yeah , that is fine fit two screen .

OK ?

We can do one thing , we can keep this thing to default and I'll show you some uh because we have seen how to use fit two screen and I'll show you some other ways to increase the size of this .

OK ?

So that would be more beneficial to you .

Now click on save fine .

Now again , click on this text to make some changes on this .

So just click on this text , go to style color is fine .

Now typography as I said to you earlier , keep everything constant .

So the size was 35 font family was Roboto Slab for the title .

So this is the title weight is 600 whatever you keep it , keep it constant .

Fine .

OK ?

Now this is another thing , another text to select this again , come back with your .

Now add another some more text from your paste in your text or type in your text left a line style text , color white .

Fine .

Now typography make this thing maybe 18 fine .

Now this is Roboto , this will be roo OK ?

So this is looking fine .

Now what we'll do , we'll add on .

So just how over here click on this plus button , this will add another column .

OK ?

So we have another column .

And if you also notice these guys here , we have actually , I think it is 14 , not 18 .

So let's first change this to 14 pixels looks much better .

And here as you can see , there is some gap between the lines .

This is called line height .

So let's increase the line height here .

You'll see this line height .

If you make it one , you'll see some changes .

If you make it 1.5 you'll see more changes .

As you can see when I put 1.5 it changes fine .

Now go to content again and let me show you one more trick as you can see here , we have a gap OK ?

That but here we don't see that gap .

OK ?

For example , here we see this gap .

This is another paragraph .

This is another paragraph , but here we have pasted the same thing , but here the thing has not taken place .

So there is a small code for that html tag for that .

You can use that .

So just open your arrow bracket , put a slash type in VR and close your arrow bracket .

Now , as you can see , it has come to the next line .

And if you want to leave one more line , just copy the same thing , paste it again .

Now as you can see , it has left one more line fine .

So this is good .

This is very , very useful and click on save .

OK ?

Now let's bring this thing over here .

OK ?

This is looking fine again .

Now let's see what is this there in this particular column .

There is an image .

So let's add this image .

OK .

So again , come back over here , drag this image over here fine .

Now select the image from here , just click on this upload file , select files .

And where is that image ?

By the way here it is click on open find .

Now click on insert media .

OK .

So we have our image over here .

Now what we have to do , we have to do some changes , simple changes .

As you can see first , there is some gap between the title and subtitle .

Let's do that .

Now select the title , go to advance and below the title , let's add some gap .

OK ?

So here is the padding bottom .

Now let's add 30 pixels .

OK ?

But better if you want , you can increase .

OK ?

So if you can also do one thing , you can select the subtitle and you can add some padding top , it's all up to you .

OK ?

Now , we want some gap at the top and at the bottom , as you can see over here , we have some gap at the top and at the bottom .

But here we don't have that .

So again , select your section .

OK ?

Click on over here on this blue icon , blue thing over here .

It will bring you your edit section , go to advance , go to padding and here let's add some padding .

So for example , 70 top or maybe 80 pixels top , OK ?

And 80 pixels bottom .

So we have 80 pixels , top padding , 80 pixels bottom padding .

Let's make top padding as 100 pixels .

This looks much better .

Click on save .

OK ?

Now let's bring this thing over here to see what , how it looks like .

Now again , we have to add some opacity over here because so that we could see our text much better .

So bring this thing , OK ?

We are under edit section .

If you are not under the edit section , click on over here , you'll be under this section .

OK ?

Now go to style , we have the image over here but we want to uh lay give some overlay or opacity .

OK ?

So here it is the overlay , select the classic , select the color , select the black color .

And as you can see , it has become darker , you can increase , it can make it more darker if you want .

OK ?

Click on save now , you can also do one thing just uh come to this page refresh and see how your page looks like on the front end .

OK ?

So this is how it looks like .

As you can see the animations also are taking place .

OK ?

So this is looking amazing .

And as you can see guys , this is so so easy and you know , we are using a simple form , a simple theme which is free theme and we are making so beautiful things over here .

OK ?

So this is really amazing and we also have uh you know SSL certificate .

So that is really amazing .

Now , let's see the next section .

This is a very beautiful , in fact , this is my favorite section in this particular website , a very beautiful section .

The more beautiful section is the more it is awesome to work with because we will be using many animation .

So as you can see , we have , you know , just did some border radio .

So we have given some shadow , very small changes , but it really beautifies the website and beauty is everything .

Design is everything , ok , guys .

Now let's add the next section first , the title and subtitle .

So again , come back , bring the heading , add a new section .

Let's change this to meet our team .

OK ?

So instead of this is heading element type in meet our team center align , go to style OK .

Selling the color dark color typography , 35 pixels font family Roberto's lab , OK .

Font weight 600 pixels .

Constant click on save now , copy this text , come back , bring this text again with you based in the text , center line style .

Select the color .

Now this time light gray color typography , 18 pixels font family Roboto .

OK ?

So as you can see the same changes so that you know , it looks constant throughout the website .

Don't need to do any change over here .

OK ?

You can increase the line height to 1.34 whatever you want because we will be making this thing into two line .

OK ?

So select this one now go to advance and we need some gap from both the side .

OK ?

So let's add padding right and left 100 pixels like we did above OK ?

100 pixels padding , right and left looks much better .

Now click on this section , go to advance and let's add some gap at the top .

So padding top , maybe 80 pixels looks better .

Press control s to make uh to save the changes .

OK ?

So we are done with these two .

Now let's add these sections .

OK ?

Now for that , we need two different columns .

So bring your columns over here under this fine .

Now click on over here .

Now we have to add an image .

So come back over a year , select the image , bring it to a year in the first column .

Now choose your image , upload files , select files , first one click on open insert media .

OK ?

So we have our image over here .

We need to add another column over here .

As you can see , there's another column over here so that we can have two different things over here .

So what we will do , we'll add a new we'll have over here and click on this add button to add another column .

OK ?

Now here we'll be adding , let's add one more column so that we don't have to do it again .

As you can see there are different columns again , let's add one more column fine .

Now here we'll be adding all this information .

So let's add it one by one .

First .

There is a text .

So bring this text to a year .

This is the header text .

It is the name of the person , whatever it is , just copy this , paste it to a year .

OK ?

This is left a line , I guess .

Yeah , left a line .

So don't have to do any change code to style text color , darker color , darker gray typography .

OK ?

So this will be maybe 18 pixels fine for one family because it is a title , it will be Roboto slab font weight will be 600 fine .

Now , the next thing is the CEO sounds cool CEO .

So let's bring this heading again over here in this particular below this thing .

Now you're typing CEO so just type in CEO from your good style , make this lighter gray change .

The typography make it maybe 12 pixels or 14 pixels , OK ?

Size 14 pixels , Roberto .

Let's increase the this to 600 pixels , OK ?

600 weight pixel .

So this looks much better .

Now let's add this simple text , copy this text again , come back where you add this setting .

OK ?

Now , below the CEO based in this title , go to style lighter color .

OK ?

Now change the typography make these 12 pixels .

Oh , maybe 12 is quite small .

12 is better , I guess 14 is quite big .

No 14 is fine .

OK ?

So 14 looks much better .

What you can do , you can increase the line height because as you can see when the font height increases or decreases , we have to adjust the line height .

Now it looks very bad .

So we'll have we'll add 1.4 line height from here .

OK ?

It is 1.4 em as you can select ce M is selected not pixels .

So make it 1.4 em line height .

This looks much , much better .

OK ?

Now last thing is this social icons .

So again , come back with your search for social icons where it is here , it is so I can bring this thing under or here .

OK ?

Now three things are there and as you can see , the style is also different .

Let's do that , you can add more items and suppose you want to add your link .

Click on Facebook , here is the icon here is will be your link , whatever your link is just put in your link , Facebook .

For example , my link is Facebook dot com slash real layer , I guess .

So that is the link , your Twitter GG .

Uh What is this ?

OK ?

It is Google plus your youtube , whatever it is .

OK ?

You can add new items .

Also , for example , Wordpress or Instagram , you can select it from your Pinterest shopping cart , Snapchat .

I don't know , Spotify .

So many different things .

I don't even use these things .

I don't know who uses , click on a new item , just add five items .

Now select Instagram from your , you can also type in Instagram so that you can find it more easily .

OK ?

So this is fine .

Now let's change this uh style .

For example , at present , the shape is rounded , we'll select circle .

Now as you can see , we'll also change the size of this icon so that it fits .

So here .

So for that go to style , OK ?

As you can see , this is the first one size you can change this size according to what you like .

This is 17 and this looks much better .

And let's make this thing left align because everything over here is left align .

So this should also be left align OK ?

And now everything looks much better .

Just a few things are left as you can see this is just a square image .

But here there is a very small change over here , you know , these corners are rounded and this really looks beautiful .

So let's do that .

Click on this image , go to style here , you'll see border radius .

Now put a very small number , for example , let's put two OK .

OK .

That was quite more smaller .

Now what we will let's put maybe 10 OK .

Now , as you can see the image has got uh rounded corners .

Now this looks much better .

Now again , as I said to you , there is a bit shadow , I don't know whether you can see this or not , but this there is a shadow very thin shadow and that really looks good .

If you see the demo website dot dot com , it really , really looks terrific .

OK ?

So let's add that shadow also , OK ?

Let's see where it is go to style here it is box shadow make this on .

Now from here , you can select it blurred whatever you want .

If I select I increase it , as you can see the shadow increases , you can increase the spread as you can see you can according to you , OK , you can make it horizontal , you can change wherever you want this to be OK ?

I will make it zero fine .

So this looks really terrific , really amazing .

I really like it .

OK ?

So similarly , you have to add this thing over here .

I'll show you how to do that .

Don't worry .

OK ?

What you'll do ?

Let's delete this .

Actually , we don't need this now because we'll be copying everything .

Now , let's copy this , just copy this thing over here and copy this also fine .

Now bring this thing over here , we cannot do that .

OK ?

Fine .

This looks much better .

Now , what do you have to do ?

You have this thing ?

Now click on this image , change the image accordingly .

OK ?

Now it is everything is simple .

We don't have to do the same changes again .

So this is very amazing .

You know , it saves a lot of time .

You can just click on , change the name to whatever you want .

For example , this is not obviously this is a girl .

OK ?

So I'm just showing you it is really easy .

Now everything becomes much easier .

Now again , you can copy this whole thing or your how are your , you'll see these section options , click on duplicate section and you have another thing over here .

OK ?

So this is very , very easy .

And if you see there's some gap over here , so what you can do when you have over here , you get this option so you can increase or decrease this gap also according to what you like , OK , I'll just press control plus Z because I don't want that change to take place .

Fine .

So everything looks awesome .

Just click on save .

OK ?

So let's bring this thing under and let's see the changes looks much , much better .

OK ?

Let's add some gap below this .

So again , bring this thing over here , select this subtitle go to advance .

OK ?

Then bottom , let's add 50 pixels much better .

And below this section also between these two , we want some gaps .

So select this section go to advance bottom .

Let's add 40 pixels looks much better .

OK ?

And applicant save .

So we are done with this section also .

Now let's refresh our main page and see how it looks like .

OK .

So let's see as you can see the animations .

This is the section and this is this section which we just created .

Amazing .

Super awesome , isn't it ?

This is really amazing .

OK , guys .

So let's add some more sections .

Let's scroll down .

Let's see what is the next section .

This is the next section , our client section , what clients say ?

So first , like always we have a text titled in subtitles .

So let's add a title , bring this heading under add new section because we want to add new sections from your .

Now the heading says what clients say , OK .

Now from here just type in what clients say center align , go to style change the color to dark gray color typography like always size 35 pixels , font family Roboto slab because it is a title , wait 600 pixels , everything looks fine .

Click on save .

Now , let's see .

We have this subtitle copy come back over here .

Again , bring this heading below this title .

Now , paste whatever you copied center line style text , color , light , light gray color typography .

This is 18 pixels font family is Roberto weight is fine .

OK ?

Now let's add some gap about this .

So you'll select this edit section go to advance padding top maybe 80 pixels fine .

Now again , let's add some padding from both these sides because we want this in two lines .

OK ?

So select this subheading go to advance .

OK ?

Now let's add padding , right ?

100 pixels padding left also 100 pixels .

Now let's um let's also add some gap between the lines that is line height , go to style , increase the line height to 1.5 .

Looks much , much better .

Click on save .

OK guys .

So we are going really good .

Now , let's add these things here .

Also , this is very , a very amazing section .

I really like this section .

OK ?

So here what you have to do first there is an image , text , text , text , very easy .

OK ?

So come back over here , OK .

Let's select this image .

Bring this thing where you are fine .

So we have our image , select the image this uncle OK ?

Select this uncle .

Here is the 1/5 number cop open this insert media here is it is OK .

Now , after this , we have a text .

So we'll come back , we'll add a heading below this image .

OK ?

And we'll put in the name over here .

Is it center line ?

Yeah , it is center line style color will be darker color .

OK ?

Typography .

It is I guess 18 pixels I think for put 18 pixels Roberto slab because it is a title weight 600 looks much better .

Now again , we have another text .

So again come back , add another heading below this OK .

Now this time it is the designation business owner .

So just type in business owner , your center align style lighter gray color , OK ?

Typography .

This would be 14 .

OK ?

Fond Family Roo .

Let's increase this weight to 400 .

Yeah , or maybe 500 looks much better .

OK ?

Now let's add this text .

OK ?

So again , first I save this off so that you don't miss any changes .

OK ?

Again , go come back audio , bring this heading .

OK ?

Wait , let's scroll down first and bring this heading below this business owner , whatever it is stating .

Now based in your text center align style lighter gray color typography , 14 font family will be Roboto like always , OK ?

Now let's increase the line height to 1.5 .

OK ?

And now click on save changes .

Now I know what you'll say .

You'll say this looks terrific and yes , it does look terrific because we'll need to add two more .

But before this , let's make this I can circle so this image circle .

So that is very easy .

Click on this image , go to style and here you'll see something called border border radius .

No , not this one .

Yeah , this is the one border radius .

Just put in 1 50 or your OK .

Maybe not 1 50 put in 200 .

OK ?

Now this becomes perfect circle and this looks awesome .

Now what we'll do , we'll copy this column two times so that you don't have to do any changes again and again .

OK ?

OK .

But I think I did one mistake .

OK ?

I added everything under the same column .

OK ?

Let's copy this column first two times .

OK ?

Now what I'll do , I'll delete this thing because I don't need you delete it fine .

Now let's add a section at the top .

So click on this and here you'll see another section .

Let's add this thing over here .

OK ?

Just drag this thing under this .

OK ?

It is not coming .

I think I did some mistake .

Just delete this and we will again have to add this thing .

OK ?

We'll also have to add some gap .

We'll see that later .

First , let's add this title and subtitle again .

Click on admin section , single column .

OK ?

Bring this text to a year .

Paste in everything .

Center line style text color , dark color typography .

35 Roberto slab weight is 600 fine .

Click on save again .

Go back a year .

Bring another text copy the same thing .

Paste in audio , make it send to align , go to style same changes , lighter color typography , 18 pixels Roberto , OK ?

Now let's add some gap at right and left .

So 100 pixels right , 100 pixels left , OK ?

Thousands , not not 1000 100 pixels left .

OK .

So this looks much better .

Also some gap at the top fine .

Now let's first bring this thing in .

OK .

So this doesn't look that good .

We'll have to decrease the size of this image .

OK .

So again , bring this audio click on this image , go to style and let's increase , decrease the size to whatever you like .

For example , 40 looks much better .

So just type in 40 select this image also go to style type in 40 .

Same thing for this image you go to style 40 much better .

OK .

Click on save .

OK .

So if you are done with this section also you can obviously change everything , you know how to do that .

That's really easy .

Now the next section is a very important section .

OK ?

The there is a background image .

Again , we have seen how to use a background image and here there is get in touch message with some icon .

And at the right hand side , we have a contact us page or contact us form .

So let's add that .

OK .

So first is this text OK .

So we'll have to bring the heading , come back , bring the heading over here .

It says get in touch .

So just type in , get in touch with you , it is left align .

So that is fine , go to style darker color .

Oh No , it is white color because the background is dark , darker color .

So select white color from your typography , 35 pixels Roboto slab .

Actually , you can do this .

Uh You don't have to do this every time there is a global setting , you can do that or there .

Also first lets me let me add this one .

Then I'll show you wait 600 pixels .

Click on save .

Now , here you see these three different lines .

Click on that .

Now , here we have some options .

Global font .

OK ?

So OK , you can enable it from elemental page setting page .

OK ?

Fine .

We'll have to enable it so you can enable it from your dashboard .

And after that , you can , you know , add some global settings once you do so you don't have to do all those .

Uh you don't have to do Roboto again and again .

OK ?

Once you do that will be fine .

OK ?

So you can do those changes now again , let's come back .

So we have our text over here but we can , we cannot see that because we have set the color to white .

So let's add this background color so that we can see everything .

OK ?

Now how this section click on this edit section , go to style background type , classic , select the image .

This is the image , click on insert media .

And as you can see , we can see our text also .

Now let's add this text .

So let's copy this again , come back over here .

Bring this heading over here .

Where did all your good style changed the color to white typography ?

18 pixels , not 1 89 18 default font family to Roberto .

And let's increase the line height to 1.41 0.5 whatever we like .

Click on save .

OK .

Now after that , we have I can and then we have some text over year .

So for that first let's add few columns .

So again , come back over here , bring these columns , OK ?

And I'll put it over here below this thing .

So we have two different columns .

OK ?

OK .

We are fine .

That is fine .

Now , in the first column , we want some icon and in the second column , we want the text .

OK ?

So select the first column , OK ?

Now select the icon here it is , I can bring it under the first column as you can see here at present by default , it is star , we want the map marker .

OK ?

So from here , you can search for map marker type in map , you have map , map marker , map or map , pin , map signs , whatever you want .

I want the map marker one and I want it left a line .

So I'll put it left a line .

OK ?

Fine .

And I will OK .

That OK , fine that we will see later on change the style to primary color to white because I want to change the color logo color to white .

We will see the size later .

On .

OK .

First let's add this text .

OK ?

Uh So just copy this text , come back from your select this setting , drag it to this particular column .

OK ?

Now paste it over here .

First , let's change the color so that we can see what is happening over here .

OK ?

So first we'll have to add only this thing , find us at the office , then we can add the another thing .

So delete the rest of the thing , just make it find us at the office .

OK ?

Now go to style typography .

This is 18 pixels I guess so type in 18 , OK ?

Not 1 89 18 Roberto weight , you can increase the weight over year .

500 would be fine .

OK ?

Now what I'll do , I'll just drag this thing over here because you know , as you can see over here also the size four logo , the size for icon is very small and the size for this one is quite bigger .

So that is what we did .

Now let me first do one thing , let me increase the overlay or opacity of the background so that you can see much better the changes I am doing over here .

OK ?

So first I'll click on this edit section .

Go to style .

Here is the background image .

Here is the background or classic , select the color to black .

OK ?

Now , I think you would be able to see everything much better click on save , come back with you .

Now bring another heading over here under this particular thing .

Ok .

Not here .

I'm sorry , just delete this fine .

Now , let's change the text , copy this text based in over here .

Now again , as you can see , we have everything in the same line .

First , let me change the color so that you can see more clearly as you can see everything is in the same line , we want to change the line .

So again , we'll use the same simple trick arrow bracket , open slash BR arrow bracket close .

Now , as you can see it has come to next line .

Now again , we also want this thing in the next line .

So again , after this line , make sure you see my cursor always so that you don't get confused what I'm talking about again , arrow bracket open slash BR and again , this has come to next line .

OK .

Now let's change the size typography size to 14 Roberto family .

Let's add some line height , 1.45 whatever you like .

Click on save .

OK .

Now we will need to add another column for this thing .

OK .

So how over here click on this add column button .

So we have another column .

OK .

And similarly , you can create one more icon and message from here easily , you know , you know how to do it if you want to increase the size of the icon .

Just first drag this thing over here , click on the icon , go to style and from here you can increase the sizes .

You can see easily without any problem .

Click on save if you are happy with this size .

Now , let's add the form o year .

First of what I'll suggest you go to your dashboard .

So click on Oyo , it's your domain name slash WP dot admin dash admin .

Now here you'll see pirate forms .

Click on for pirate forms .

Ok ?

Now copy this code from here , which is just pirate forms written over here .

Just copy this code because we will need to add this code over here .

Now come back over here , bring this heading over here .

Fine .

Ok .

Ok .

Before bringing the heading again , come back where you will need to bring the farm .

Do we have any farm ?

Ok .

Let's see .

We need the contact form .

OK ?

We don't have the form .

So what we'll do , we'll add this html tag from here , just add this STL tag before this setting after this setting .

OK ?

And in the tag , paste in this code fine , click on save .

OK ?

Now you cannot see any changes or yours .

But if you are refresh , I hope you'll see some changes .

Now let's refresh .

OK ?

So let's let's scroll down and see .

OK .

So again , we cannot see the uh contact form over here , but this will add the contact forms .

Let me show you go back to this page which you are making change , refresh this page , scroll down .

And as you can see , it has added a contact form , you need to style it a bit .

Don't worry , but it has now you know that there is a contact form which is added .

OK ?

Now , uh if it doesn't show then again , there is another way to do .

So what you can do , copy this , just delete this STML code .

So instead of STML code , we can use the uh text editor .

Let's find the text editor here .

It is text editor .

Bring this thing over here .

It will also do the same thing .

But I guess using this , we can see the changes .

Now go to text paste , this thing over here , click on save now again , refresh and hopefully we can see the changes over here .

OK ?

Now again , let's scroll down and see .

OK .

Now we can see the contact form is here .

We'll do some styling to this .

First , let's see this heading element which we added , OK ?

We have to type in contact us .

So just type in contact us .

OK ?

I just noticed that I didn't copy it .

Most of the time I just copy .

I don't know why .

Now click on center line , go to style , change the color to white .

OK ?

My typography same thing 35 this is Roberto slab weight is 600 pixels fine .

Now here if you see there is a background color , let's first copy this color come back .

Will you go to advance or maybe in the style ?

Let's see where it is maybe under advance , go to advance and here it is background , select classic color based in this code or whatever color you can select any color from your OK .

OK .

Click on save fine .

Now , we need some uh you know , gapping above and below .

We need some padding so that you know , it looks something like this .

So let's do that element style .

Let's add some padding at top and bottom , maybe 10 pixels fine for both top and bottom 10 pixels .

This or maybe let's do it 20 pixels .

OK ?

This looks much better .

OK ?

Now let's add a background color as you can see white , background color to this particular contact form .

OK ?

So click on this contact form , go to style , OK ?

Or style OK ?

Not style , maybe advance click on background , classic background color white .

OK ?

Again , we cannot see that uh uh form that form .

But don't worry that form is there .

It's just that you cannot see it over here , but it is there on the website as you can see over here .

Now , what I'll do , I'll add some padding uh o here .

So what I'll do , I'll add maybe 20 pixels padding , all padding , 20 pixels and click on save .

And if you see , oh here these both sections are connected , you know , they are touched to each .

So what I'll do , I'll remove this gap .

So there are two ways of doing either you remove the top gap of the bottom section or the bottom gap or the top section .

So select the top one , the first one , this is the title one .

And as you can see , now , we can also see this one .

Now go to advance .

Now deselect this thing .

First of all , now in the bottom margin type in maybe 10 and before 10 , now put a minus sign .

Now , as you can see it has come up now instead of 2010 .

Now let's make 20 .

OK ?

Now , as you can see when we make 20 it now both are getting connected and this is looking awesome .

OK ?

So this is what we wanted .

Now , click on save .

Now , we need to add some gap at the top and few gap at the bottom .

So let's do that .

Now select this one , the edit section go to advance padding top , let's make it 80 pixels , padding bottom again , 80 pixels will do .

OK ?

So this looks much better .

Click on save , come to this page , let's refresh and see all the changes .

If everything is fine , we'll move forward .

OK ?

Let's see from bottom .

This looks awesome .

OK ?

Make sure you add some uh gap below this thing .

Also , this doesn't look good .

OK .

Rest everything is awesome .

Make sure to uh you know , enter the animation .

I have shown you how to do that .

So make sure you enter animation for everything that would really look good .

OK ?

So we have successfully created the home page .

And believe me guys , this was the toughest section .

Now everything from here will , will be very , very easy because I'm going to show you a very simple thing of how to create other pages .

OK ?

Now , let's see how we do that .

So for that , what you will do is first , let's OK , let's think how we should do this .

OK ?

Let's first create a few pages .

OK ?

So come back to your dashboard , create some pages .

So how our pages click on add new .

We need three pages , contact us about us and services .

So let's first create about us page type in about us .

And on the template , select page builder , full width , click and publish .

Now click on add new to add a new page type in services again , template , full page builder , full width , click on publish , add new page again and this time contact us template page builder , full width , publish .

OK ?

Now , as you can see in this website , we don't have a menu .

So let's add a menu also .

So how are appearances and you'll see something called menus , click on menus .

OK ?

Now you can name anything to this .

I will generally main name it , main menu .

As you can see , click on create menu after that .

Now select everything from your contact us services about us home page .

Bring click on this add to menu .

Now just adjust everything .

For example , I want my home page at the top and I don't want it to say home page .

I just want it to say home .

So what I'll do , I'll delete the page from here .

Ok , delete the page from here .

Fine .

And I want my about us page after the home page .

Then the services page and at last the contact us page and make sure to click on this check , mark this primary menu and click on save menu .

Now again , come to come back to this uh particular page refresh and we should see a menu over here .

As you can see , we see a menu , a beautiful menu over here .

OK ?

Now what we'll do , we'll make the page which we have created .

We have named it homepage , but this is not our homepage at till .

Now .

What do I mean to say that ?

Let's click on this icon .

OK ?

As you can see this is the home page .

OK ?

And we don't want this as our home page obviously .

So what I'll do , I'll change this thing and I'll make the page , this page which we just created .

OK ?

This page , we'll make this page as our home page because as you can see when we click on this page , it is giving us our domain name slash homepage , but we don't want this .

Ok ?

So go back to your dashboard power settings and go to general settings .

Now you , you can change your site title and Tagle and as I said to you , for example , you can put in anything .

For example , let me put in blog dude .

I'm sorry .

OK ?

So you can see here also and everywhere the changes have taken place and a tagline , OK ?

Maybe made by OK ?

I've always put , I think that's why I'm getting this suggest made by shake .

OK ?

Now click on save changes .

OK ?

I just forgot to do that change .

OK ?

Now what you can do now click on reading .

OK .

Now your at present your latest post is selection .

Now select this one , a static page .

Now from the front page , we have to select the home page which we created .

Click on save changes .

Now click on this home page and now we should not see this thing .

OK ?

Click on home page .

Now as you can see we have the same page and we do not see that thing .

This has become our home page officially .

OK ?

So this looks awesome .

Now , let's see our about this page .

We don't have anything over here because we haven't created anything .

Now , a very beautiful thing .

I'm going to show you guys again .

Come back to your dashboard at the left hand side , you'll see element how elements you will see my library , click on my my library and now click on import templates and same thing as I said , you the link from where you downloaded images that below that there is another link where you can download this layout .

So make sure you download those layouts .

Now , click on choose file .

OK .

Here this is how your file would look like hast layouts .

You just have to unzip it and it would look something like this .

You have four different files .

OK ?

Select any one of these .

Let's select the first one .

Click on open , click on import .

Now , as you can see this is the home page .

So if you don't want to create the home page , if you just import this thing , OK , let's not talk , I'll show you what it means .

OK ?

First let's import , import the next one .

Second one .

Click on open in port now .

OK ?

This is , this was the services and let's import the third one .

Open import .

Now this was contact again .

Let's import the last one , fourth one and this will always be the about a speech .

OK ?

So we have the about us .

So here now what you'll do , you'll go to this particular page , click on edit page from here at the top .

Now , click on this edit with elemental .

Now let's come back to our demo website .

Click on about us to see how our about us page looks like .

OK ?

So this is how it looks like as you can see guys .

Very , very beautiful .

Now , if you go to create like we created the home page , if you start creating this , it will take another half an hour or one hour maybe .

So we don't want to waste that much time .

OK ?

So what we'll do , we'll come back over here .

And now instead of adding a new section , we'll add a template .

So we'll click on this button which says add template .

Now we'll go to my templates and as you can see all the things over here which we just imported now we are creating an about a space to import the about thing , click on insert and as you can see guys , everything is over here including images and everything , images loading .

So let it load .

OK ?

So you have everything over here .

This looks so amazing , so beautiful .

So you just have to do the changes guys , you just have to change anything you want .

For example , if you want to change this text , click on this text and change everything instead of manage all your daily task , I'll say nay shake everywhere will be a shake .

So just type in a shake .

OK ?

As you can see this is how easy it is now you can use the same trick again and again to change the logo to color the icon or so on .

If you want to change this image , OK ?

Let's OK .

You can do anything .

OK , guys .

So you don't have to create everything from scratch you and I'm not charging anything for that .

You can download the layouts for free .

OK ?

So we have without doing anything , we have created the about space now .

Let's click on save .

OK ?

Now let's get rid of this .

OK ?

Now let's click on a about this page and see whether changes have taken place or not .

OK ?

As you can see the changes have taken place , it looks amazing .

OK ?

Now go to services .

Nothing .

So again , go to edit page , edit with elemental .

OK ?

Again , click on add template , my templates and what pages is this services page ?

So select services , click on insert and here it is .

You have the whole services page without writing a simple code , a single code without even doing this drag and drop .

OK ?

So you have everything over here .

So easy guys .

OK ?

You want to change anything .

You just do the changes from here .

You want to change this color , you want to change the weight , whatever you want , you want to change the width , you can do it from here .

Everything is simple .

OK ?

So you have everything over here again , click on save .

So we have created their services page also .

Now again , let's get rid of this .

Now go to contact us , click on this edit page icon or link whatever that is .

Now click on this edit with elemental , click on edit , add template , my template .

Now this is contact us .

So just input this contact one .

OK ?

It is loading , let it load .

Now as you can see we have this contact us also .

So you don't have to create anything and this is the same section as you can see which we used .

So here it is , you have the map , everything is there with just one single click .

Now let's click on the save button .

Ok .

Now let's get rid out of everything guys and let's see whether anything is left or not .

So I think everything is complete guys .

And as you can see within so small period of time , we have created a complete website and that is really insane .

This was unimaginable with love for last few years .

But now the technology and you have everything over here .

I hope you guys like this tutorial .

If do so if you guys like this tutor , make sure you subscribe to my channel .

Also give a thumbs up to this video that would really help me if I have missed anything or if you would like something uh to know if you would like to know something more , then make sure you leave a comment in the section below that .

I'll read that comment and maybe I'll make a video on that and in the future , I'll be making many more elemental videos .

So make sure you subscribe for that also .

Ok .

Thank you for watching this video .

See you soon guys .