How to Make a WordPress Website for FREE with Elementor 2020

hello friends amnesia and today in this real teach you how you can create and design a professional and beautiful website in 2020 using wordpress and only free resources so to create this website we'll be using only free resources we will be using the best and free wordpress theme oceanwp the best and free page builder elementor and we'll also be using few more awesome free plugins now my main aim in this video is to show you guys how a professional web designer and developer creates a website what all resources they use for things like illustrations stock images patents website logo web templates etc and how they implement these resources on the website we'll also learn what is the thought process behind the design how to use the colors and what colors to use to make your website look professional we'll learn how to use contrast how to use fonts and how to design background using different simple tools in this video we'll learn three ways of creating a website first using elements second using blocks and third using free layouts and there are thousands of free templates available for different types of websites for example transportation websites podcasts and blogs business services websites creative and design educational websites religious websites financial websites photography websites for different kind of website there are free thousands of free layouts and i'll show you how you can download them for absolutely free also i'll show you how you can download free and professional images for your website so this video is basically a designing master class it's a free web designing course for 2020 and beyond so let me first show you a demo of the website that you will be creating in this video so this is the exact same website that you will be creating in this video if you follow my step-by-step tutorial let me first refresh this website so that you guys can see the animations as well so as you can see whenever someone visits your website they will first see that animation and this is how your website will look like now this thing this image that you see over here this animation this is an illustration i'll show you how you can download thousands of different illustrations like this one for different purposes different illustration designs are available and you can also change the color scheme of this design then after that if you see the background of this section you will see this green thing over here in the background i'll show you how we can create different shapes like this one how you can create them for free and how you can implement them and how you can use them on your website then after that if you see this button behind this button you will see this simple pattern so there are difference in fact thousands of different patterns available like this one i'll show you how you can download them for free and how you can use them on your website these patterns are used throughout the website i'll show you about that now first let's see how this websites look like let's see a very quick demo of the website and after that we can start creating this website so here at the top you will see your logo i'll show you how you can create logos for free what all websites and what all resources you can use to create a free and amazing professional logos now at the right hand side in the header you will see your menu and you can design your menu anyhow or any way you want i've just created it a transparent menu so as you can see you can see the background as well and you have your simple transparent menu available and then after that this is your first section this is your hero section here you have your title some subtitle or some description call to action button and at the right hand side you have this image then after that if you see your second section again very subtle animation and after that this is how your second section looks like this is your about section here you have a background image or you can have a video you can embed a youtube video vimeo video you can upload your own video if you don't want to upload or embed any youtube video you can upload some images over here and you can also give some tag lines if you have a company tagline or something that you stand for you can write some text over here and at the right hand side in very short you know you can type about your company or about your business so this is your about section you will see your title looks something like this we have a subtitle then we have a title we have this separator and again we have this button now if you see throughout the website you will see these colors are used again and again this red color and when i hover over this red color you can see this dark blue type of color so these two are my primary and secondary color so whenever you're creating a website as a professional you should always choose a primary and a secondary color so that you can use these colors throughout the website also if you see the font families and the font size are used and the phone family and font size use that is also consistent throughout the website after that after this home page i'll show you some more pages like about page contact page services page and also the blog page you will see the design is very much consistent throughout the website the colors that that are used the font family the font style the typography everything is very much consistent throughout the website and this is very important for any professional website now when you scroll down you have another section again you can see very subtle animation over here this is this can be your services section or your features section we'll see how to create these image boxes and we'll also see how to create these kind of links then when you scroll down you have some services or features section here you can have you know you can use these kind of beautiful logos these kind of beautiful icons and you can showcase different services that you provide on your website or that your business provides then when you scroll down we have some more section again you'll see some different kind of animation this is a testimonial section and i think this really looks amazing now when i scroll down this is your blog section so in this video we'll also see how to create blogs so that you can see and you can learn how to do blogging through your website then again when you scroll down at the bottom again if you see if you notice this thing at the bottom we have one more call to action button so the top section has a call to action and again when this when this person or the customer or the visitor now goes to the bottom section here also they will see this call to action button so we want our visitors to click on this button and they will be redirected to contact page and then we they can contact us and we can do some business and obviously at the bottom you will see your footer now i have divided my photo into four different sections first i have the about section so here i have my company logo and very simple description in few lines about my company then few important links recent posts or recent blogs then some contact information and at the bottom you have the copyright text then you also have this button if you click on this button this is bring to top button you will go back to your top section and this website is 100 mobile and tablet friendly so don't have to worry about that let me show you an example so you can see this is how your website will look in a mobile phone if i see we have all the different options so available over here and this looks really professional you don't have any extra space any white space or anything like that this looks perfect on mobile phones as well so this is hundred percent mobile and tablet friendly as well and creating this website is super simple let me show you an example if you want to create this website if you want to create this page or if you want to make some changes on this page you just have to click on this button edit with elemento and you will see this button on top of every single page now when you see this page here you will see your website and if i want to suppose if i want to change the title over here i can simply click on this title and here as you can see this is the title if i want to change this thing i can write or i can type some different thing over here and now as you can see this thing will show in real time on your website and you can click on this update button to make some changes on the website you can also change the color for example instead of this color you can make it some other color like this red color or some green color blue color whatever color you want and if you want to do some changes for example you can bring this column over here you know like as you can see very simple to do these changes similarly if you scroll down doing these changes are really simple you can click on any text or anything and you can change that for example if you want to change this icon you can click on this icon instead of this icon you can have for example this icon and click on insert and now as you can see the icon over here is now changed so this is how easy it is to create and to do changes on this website now in this website i'll also show you how to create about page contact page services page and even your blog page just to make your website just to make this website or any website that you will be creating 100 complete so we don't we don't just want to create a home page we also want to create other pages for example let me show you these pages let me open all of them in different windows or in different tabs now if you see your about page this is how your about page will look like so you have all the different things about your company and again if you see the colors that we have used the font family that we have used is very consistent so when someone sees your homepage and after that they go to some other page the design and style is very much consistent then you have your contact page this is how it looks like we'll also see how to create services page like this one and at the end of the video we'll also see how to create a blog page and how to do blogging with this website alright so this was a very short demo of the exact same website that you will be creating in this video if you follow my step-by-step tutorial now i hope you guys like the demo website and if you want to create the exact same website make sure you watch the complete tutorial now before you proceed further before we start creating this website make sure you guys subscribe and click on the bell icon so that you don't miss any future notifications if you find this video helpful please give a thumbs up to this video and share it with your friends on facebook twitter whatsapp whatever social media platform you use and throughout the video if you have any doubts any comments any sessions for me you can always leave them in the comments section below i guess now let's start creating this website i guess now to create this website in fact to create any website whether it's a business website an e-commerce website a simple blog a membership website any kind of website we need two basic things a domain name and a hosting account a domain name is simply the name or the url of your website for example blogdude.com google.com.com youtube.com all these things are different domain names so we also have to register a domain name on the internet so that whenever someone wants to visit your website they can simply type in your domain name and they can land on your website now the second and the most important thing that we need is a hosting account so hosting is basically a computer wherein your entire website is saved so if you see this entire website if you see all the different images all the different pages post everything that is present on this website this entire website is saved in a computer and that computer is running 24 7 so that whenever someone wants to visit your website at any given time from any particular country they can always see your website live so your website is always up and running now hosting is the most important thing about your website because everything related to your website is directly or indirectly depending on your hosting your website speed your website's performance the user experience on your website your ranking in google search results everything is totally directly dependent on your hosting so if you selected a good and reliable hosting your website speed will be amazing you will get better ranking in google search results and your website will also be very much secure now there are literally thousands of different hosting providers available in the market but unfortunately only few of them only handful of them are really good really you know good enough to consider them but most of them are really bad really crappy hostings but you don't have to worry about that you can simply open a new tab and type in blog dot com slash sg sj stands for siteground and this link is also given in the video description below so you don't even have to type in this thing simply click on that link and you should be redirected to this website now this is the only thing that you have to purchase a hosting account obviously without this thing your website will not be you know available for the entire world so this is very important rest all the other things that you will be using theme plugins everything will be absolutely free so this is your only investment now before i go ahead and explain you about these different plans first let me explain you why i'm choosing siteground and why i'm recommending siteground so i myself just said few moments ago that there are literally thousands of different hosting products available so out of all those why are we choosing siteground why are we going with siteground now i'm choosing and recommending siteground based on my experience i am creating these youtube tutorials on wordpress for more than five six years and in this time period i've used and i've tried many different hosting providers i remember the first website that i created was using hostgator then i moved on to some other hosting then some other hosting and ultimately i'm using siteground and because i create these youtube tutorials i get hosting for free so in this process i've tried i've used many different hosting products almost every you know almost every major hosting provider that you can think of i've used hostgator a2 hosting bluehost tmd hosting goat id siteground almost every single major hosting provider and in my experience siteground is the best hosting provider available it is best in terms of speed best in terms of performance best in terms of support and also in terms of scalability and reliability and your website when it is hosted on siteground it is very much secure and this is the reason why even my personal websites are also hosted on siteground my main website my main source of income blogtoot.com is hosted on siteground other websites that i own like nayshik.com and some other small businesses that i own those websites are all hosted on siteground so because i personally use it i am recommending it now here as you can see there are three different plans now right now what i'm going to do is first i'm going to explain you about some of the important features about the hosting so that you can you know decide for yourself which plan do you want to select now if you want to save some time and if you want a very short and simple answer for most of you guys i would just recommend you to just select the startup plan and click on this get plan button and just proceed further but if you want to understand more about hosting and about all the different features available you can watch for few more minutes so here as i said earlier there are three different plans as you can see on the screen startup grow big and go geek now the major difference between these plans is how many websites you can create with them so in startup plan you can create one website and in grow big and go geek brand you can create unlimited websites now let me explain you what does this mean so suppose if you select startup plan you can create one website which means that you can create this entire website you won't have any problem or any limitation you can have unlimited pages you can have unlimited post you can have a very huge website you won't have any problem at all but the limitation over here or the only thing that you can do is you can create only one website and in future if you want to create more than one website if you want to create your second website you will have to upgrade your plan to grow big or go geek plan whereas if you select grobi clan you can create unlimited websites which means that today you're creating this amazing business website tomorrow if you want to create an e-commerce website a blog any kind of website you don't have to purchase a new hosting plan you don't have to upgrade your plan you can host or you can create unlimited websites in one single plan so in simple words you just purchase this hosting plan once and for all your future website you can host all of them in one single plan now the second thing or the second feature over here is how much web space do you get so here as you can see in startup you're getting 10 in grow gig you're getting 20 and in go geek you're getting 40 gbs of web space now let me first explain you how much web space do you actually need so if you see this entire website that i've created including all the different media files all the different images videos pages post including everything so this entire website the size of this website is not more than 100 mbs so technically speaking if you select growbig plan you can create more than 100 websites like this one now most importantly over here these guys are using these guys at siteground are using ssd storage to store and to host your website most of the hosting providers they use the hdd plan or hdd storage to host your website and if your website is hosted on hdd server your website will be very slow very laggy but here because these guys are using ssd storage your website speed will be amazing and not only that they are also using google cloud platform if you scroll down at the bottom you will see this feature this section your web hosting essentials and if you see this option ultra fast sites if you click on find out more you can see that these guys at siteground are using google cloud platform or google cloud technology with ssd storage that will make your website really really fast so this is very important now let me close this thing then after that if you see some more features the third option over here is just to give you an idea and just to make you or just to help you make a decision as to which plan should you select for example startup is better for those websites that are getting around 10 000 monthly visitors grow big is best suited for those websites that are getting around 25 000 monthly visitors and go geek is best suited for those websites that generate around 100 000 unique monthly visitors now many people get confused over here they think for example if they selected grow big plan they think that if they cannot have more than 25 000 monthly visitors and if they have 20 more than 25 000 monthly visitors they will have to upgrade their plan to go geek plan but that is not the case even if you select a group week plan and even if your website is getting more than 50 60 or even 70 000 monthly visitors grow big plan can easily handle your website you don't have to worry about that this is just to give you an idea about which plan should you select then after that you get unlimited traffic or unlimited bandwidth if you get free ssl certificate to make your website more secure you get daily backup so even if something happens to your website you have your daily backup you can easily restore your website and we have some more features over here for security as well if you if you again scroll down at the bottom and if you again come back to this section top notch security click on find out more you can see that these guys are using artificial intelligence ai anti-bot system to protect your website because wordpress websites gets hacked a lot but if your website is hosted on siteground you don't have to worry about that and there are many more features available you can read about them over here if you scroll down or if you hover over these you can read about them but i'm not you know going to waste a lot of time over here so i hope now you have a better idea about different plans so as i said you in the beginning for most of you guys i would just recommend you to start with this startup plan you can create one website and later on in future after five six months or whenever you want to create your next website you can anytime upgrade to grow big plan so whatever plan you want to start with just select that plan and click on this get plan button after you click on that get plan button you will be redirected to this page and here you have to register a new domain name so whatever domain name you want to register simply type in that domain name here for example if i want to register nishik.com i can type in that domain name and i can select the domain name extension now there are many domain name extensions available like dot com.net.org there are some country specific domain name extensions available as well for example dot in for india dot nz for new zealand dot uk for obviously uk and there are some generic domain name extensions available as well for example dot online dot blog dot business dot uh estate dot expert dot graphics so whatever domain name extension you want you can simply select that so simply type in the domain name select the extension and click on proceed now if you've already registered your domain name somewhere else you can select this option i already have a domain name so many people what they do is they all they register domain names on some other websites like godaddy name cheap google domains those kind of website so if you have already registered or if you already own a domain name outside siteground you can select the second option i already have a domain name now type in the domain name that you have registered on godaddy or any other third website and after that you can click on proceed now you will see your step 3 and here first of all you will see your account information now this thing is very important whatever you enter under account information whatever email address and password you enter under your account information this will become your login credentials so whenever in future if you want to log into your siteground account you will have to enter this email address and password that you will be entering under account information so whatever you enter under account information whatever email address and password you enter over here make sure you remember that thing if you want you can write it down somewhere then when you scroll down you have your client information which is just your basic information your country name first name last name your address phone number your basic information you can leave these two things obviously company name and tax id not really important not compulsory then when you scroll down you have to enter your card information your credit card debit card atm card whatever you will be using to make payment now just enter your card number card expiry date cvv number which is three digit number which is given at the back of your card and obviously your card holder name now one thing to note over here is that only three types of cards are accepted over here these are mastercard and american express so make sure you have any one of these now visa and mastercard are very common throughout the world so most of you guys must have this but if you don't have this for example if you're from india most of the people in india have the rupee card because that is a state-sponsored card so whenever you open a new account in india you get a rupee card but because that is a domestic card you cannot make the payment to a show so make sure you have visa or a mastercard then when you scroll down you will see your purchase information now remember one thing about purchase information don't change anything over here just check everything so under plan we have selected startup plan if you have selected group plan or some other plan you will see that plan name over here under data center location it will be automatically selected for you based on your location now because i'm in india which is in asia for me asia data center location is selected and in the period make sure 12 months is selected make sure you don't change this thing if you change this thing you will have to pay extra money so make sure you don't change this thing because for 12 months you're getting the best deal now make sure you don't tick mark this thing because if you do you will have to pay some extra money so we don't want this sg site scanner now just go ahead at the bottom and tick mark these two things now before you proceed further if you see the total amount that you have to pay is just 84 dollars and this is really amazing seeing and considering the fact that siteground is the number one hosting provider right now and the quality of services that they provide you're getting one year of complete hosting for just eighty four dollars and if you had selected grow big plan let me see how much that cost that would cost you only 120 dollars for one complete year and this is really amazing so make sure you again go ahead at the top check in what all information that you have entered if everything is correct you can go ahead at the bottom and click on pay now and make the payment now once you make the payment you can simply open a new tab and type in my.siteground.com and you will be redirected to this page and here you have to enter the email address and password that you have selected in your previous in step so in your previous step under account information whatever email address and password you have selected type in the same email address and password here and click on login once you log in you will see this page and here you have to click on websites now here you will see all the websites that you have connected with this plan so if you remember we had registered this domain name nayshik.com so you will always see your domain name mojo and below your domain name you will see this button site tools click on this button now here there can be two scenarios first scenario can be that you have just registered a new domain name so that is really great because you don't have to do any extra steps now the second scenario can be that you have already registered your domain name outside siteground on some website like godaddy namecheap so if you follow in the second scenario you first have to link your third-party domain name with siteground so let me show you how we can do that very simple simply go to website wherein you have registered your domain name log into your account and once you log into your account you will see all the different domain names that you have registered with this account so suppose in this example suppose if i want to use this domain name tritongifts.com with siteground i can select this domain name and besides every single domain you will see your button you will see this button dns button click on that button dns is your domain name servers and you will see your name server so here click on change and delete these default name servers so delete your name server number one and two come back to your website scroll down you will see custom name server is given for you so copy your name server number one paste it under line one and copy your name server number two just like this and obviously paste it under line two and click on save now once you click on save it can take up to 24 hours to link your domain name with siteground so by that time you don't have to sit idle we can do few more things related to our website so by that time we can do one thing we can install ssl certificate on our domain so to do that you will see this option with your security at the left hand side under security you will see ssl manager click on that now here you have to select your domain name from this list so click on this thing and just select the domain name on which you want to install ssl so i'm selecting this domain and after that under select ssl select let's encrypt and click on get i cannot do that because ssl certificate is already installed and activated on this domain so if you want to see this thing you can go ahead and see this list in the bottom so basically if you see your domain name here at the bottom and here as you can see this domain name that i have selected here this domain name is already present in this list and besides this domain name it says active so if you see your domain name at the bottom and besides your domain name if it says active it simply means that ssl is already installed and activated on your domain name so you don't have to do this step or if it is not installed select your domain name select let's encrypt and click on get within two minutes this ssl certificate will be installed on your domain and once that is done you can install wordpress on that domain so to do that click on wordpress from the left hand side and select install and manage again just like ssl certificate wordpress is also most of your times automatically installed on your domain name so first check that thing go ahead at the bottom if you see your domain name in this list it simply means that wordpress is already installed on your domain name so you can do one thing besides your domain name you will see this button login to admin panel simply click on that button and you will be redirected to your wordpress dashboard if you don't see your domain name over here don't worry simply click on wordpress and here you can select the domain name from this list so i'm selecting this domain now on the installation part don't do anything just leave it as it is same for language don't do anything don't change anything over here just leave it as it is and if you see this thing tick mark for you install wordpress tattoo and take this thing because this is a plugin that is not really important so you can untick this thing now you have to choose some username for your website and after that you also have to choose some password for your website and again enter your personal email address over here so whatever your email address is enter your personal email address so here now basically this username and password is also very important because this is your login username and password for your wordpress dashboard so this thing also should be remembered now once you do this thing you can simply click on this install button and now as you can see wordpress has started installing on your domain name this is a very short process hardly it will take 10 to 20 seconds so let's wait i guess now as you can see wordpress is successfully installed on this domain and now if you see this domain name is also present at the bottom and besides this domain name you will see this button login to admin panel click on this button and you will see a new tab will be automatically opened and here you will see your dashboard so this page that you see on the screen right now this is your dashboard and this is a very important page because you will be controlling your entire website from this page whether you want to change the appearance style of your website whether you want to create pages whether you want to create post whether you want to control control users manage comments everything will be done from here basically you will be controlling your entire website from this page so make sure you remember this page and whenever you want to come to this page or whenever you want to land on this page you can simply enter your website name and after that put a forward slash wp hyphen admin you will land on this page now whenever you install wordpress on a new domain there are few basic things that we have to understand and there are few basic settings that we have to do so let's first see them now first of all at the left hand side you'll see different options first option is your dashboard option and this is your dashboard then after that you have your post option under post you will see you know a hello world post is already created for you this is a demo post if you want you can simply delete it from here so basically from here you can create different posts different blocks and you can also manage them later on you can come and you can do some changes on those posts then you have the media option so whatever images media file videos whatever you have uploaded on your website you will see everything over here and you can manage them from here then you have your pages option obviously from where you can create and manage different pages then you have your comments option so whenever there is a comment posted on your website or any post on your website you will see those comments so here and you can manage those comments from here so if you want to delete them if you want to approve and approve them you can you know do everything from here then you have your appearance option which is a very important option here you'll see there are few themes already installed and one theme is already activated so in this case 2020 theme is already activated now what is the theme let me explain you this thing if you open your website in a new tab this is how your website will look like now the appearance of your website is because of this theme 2020 theme so if you do one thing without doing anything else if you just activate some other theme so in this example let's activate this 2017 theme if i select this theme and click on activate and if i again come back to my website and refresh it now as you can see my website design is completely changed so this is what basically a theme does a theme will completely change the appearance and style of your website now you must only have one theme installed and activated always so you can delete these extra themes from here so very easy just click on them and at the bottom right you'll see that delete button now later on in this video we'll be using some other theme a free theme and we'll see how we can design this beautiful website using that theme now again from the left hand side you'll see plugins click on that now over here you'll see one plugin is already installed and activated for you sg optimizer and this is a very very important plugin because this plugin will furthermore improve the performance and speed of your website as you can see it it will optimize the performance of your website but this plugin is available only for siteground users as you can see over here so if you are using some other hosting you might not see this plugin over here now what is a plug-in a plug-in is an add-on or a software kind of thing that will add some extra features and functionalities to your wordpress website later on in this video you will see we'll be using some plugins for different purposes for example if you see this thing if i open my contact page here you will see one contact form is created over here so if you want to create a contact form by default you cannot create that but you can install a free plugin and that plugin will add the contact form feature on your website and after that you can create a contact form like this so that is basically what a plugin does now from the left hand side you will see settings which is very important click on that now you can give your website some title you can basically under title you can just say enter your business name or your website name or if it's a personal website you can enter your own name then if you have some tagline for your business for your website you can enter that hojo or under tagline you can just describe your website in few words then if you see this thing wordpress address and site address and if you see http over here make it https because right now if you see if you click on this thing it says your website is not 100 secure if you remember we had already installed ssl certificate but still it says not secure so to make this thing secure make it https both at top and bottom okay make sure you do it something like this now scroll down now here you will see your admin email address make sure your personal email address is present over here and under membership you can just leave them we don't want this thing enabled now time zone you can set your time zone so because i'm from india i can set time zone for kolkata and i can just go ahead and click on save changes now when you click on save changes you will be logged out and you have to use or you have to enter your username and password and click on login to login back to your website and now as you can see when you click on this thing it says your connection is hundred percent secure now under settings you will see permalinks click on this and make sure your post name is selected if you see some other permalink structure selected like plain or dn name just deselect this thing click on post name make sure post name is selected go ahead at the bottom and click on save changes very important setting now again let's come back to dashboard now whenever you come back to your dashboard you will see these widgets on your dashboard now these are not really important so if you want you can click on screen options and you can untick all these things from here just to make your you know just to keep your dashboard very clean all right guys so with this all the basic settings related to your website is now 100 completed right now let's do one thing let's install a new theme because right now if you see your website design looks something like this and this is because of this boring 2017 theme so let's change the theme let's install another free theme that will convert this boring website into something amazing and beautiful like this one so to do this thing again come back to your dashboard now from the left hand side click on appearance now to install a new theme click on add new button which is given over here at the top and under search plugins or search theme whatever theme you're searching for just enter that name so the theme that we'll be using in this video is called oceanwp so under search theme just search for oceanwp you'll search you'll see this theme over here you can see the image and the name over here at the bottom says oceanwp install this theme and once this theme is successfully installed you'll get this activate button simply activate this theme once this theme is activated in fact whenever you install and activate any theme or plugin these guys will also recommend you to you know some install some more plugins some more themes so obviously we don't want that we will be using some themes some plugins but not these ones so just click on dismiss this notice now once you have your oceanwp theme we can now get rid of this 2017 theme so we can simply click on this at the bottom right corner you'll see the delete button and simply delete this theme now let's also install few more plugins and all these are free plugins and in fact let me do one thing let me again come back to your website let's refresh it now as you can see because we have installed and activated some other theme the design looks so much better clean and now we can work with this website so again come back to your website now click on plugins and let's install few free plugins and similar to install a new plugin simply click on this add new button and under search plugins again you have to search for wp so oceanwp is the name of the theme and the people who have created the uh that theme they have also created few very useful free plugins so we can use these plugins the most important one is this one ocean extra so simply click on this install now button now what does this plugin do let me explain you this thing if you right now create a new page if i click on add new page i i can just create a page and i don't have any options at the bottom like i cannot change the layout the design of the page let me show you i if i just create a new page demo page if i publish this page if i see this page in a new tab as you can see this is the you know default layout of the page here at the left hand side is the content section right inside we have the sidebar at top we have this thing you know the title section now suppose if i don't want this sidebar if i want complete section full width section for my content and if i also don't want this title section how can i do these changes so to do these changes we are installing this plugin ocean extra plugin if i activate this plugin right now and if i again come back to my website click on pages we had just created this page demo page if i edit this thing now as you can see at the bottom we get so many different options we can have a separate logo or unique logo for every single page we can have different menus as well for every single page so for home page whenever someone goes to home page they will see different menu whenever someone goes to you know about page they will see a different menu and you can also design the menu so this is really amazing these features that you see over here at the bottom these are generally available in the premium plugins in the premium theme so you have to purchase a premium theme to get these features but with this theme you're getting all these features some really amazing features for absolutely free and that is the reason why we're using this ocean wp theme now again come back to plugins and click on add new now under search plugins again search for ocean wp now scroll down and install this one ocean social sharing if you install this thing now let me explain you what will this plugin do so if you see my demo website if you open any single post if i open this blog post over here for every single blog post at the bottom you will see this option social sharing option so a person or a visitor can share this post on facebook twitter whatever social media platform they use so this is what this plugin will do then after that we have ocean sticky header so if you install this plugin if you see we have this header at top we have this logo and at the right hand side we have this menu now when i scroll down this header stays with me it is fixed at the top so this is what this plugin will do oceanwp sticky header now you don't need to activate all of these things right now because if you activate it you will be redirected to dashboard page then again you have to come back to plugins again you have to search for plugins so it will take a lot of time what we'll do is we'll install all the plugins for now and after that we can activate all the plugins at once so this will save a lot of time now let's install a plugin to create contact form so under search plugin search for contact now there are thousands of different plugins available to create different contact forms registration forms the one which we'll be using in this video is this one contact form 7 so simply install this plugin now once you install this plugin there is one very important fact the most important plugin that we need is elementor elementor is a page builder that will help you to design your website to create all the different pages so everything all the different pages that you see on this website all these is created using elementor so to install elementor you have to open a new tab type in blogdude.com elementor now this link is also given in the video description below so you don't even have to type in this thing simply click on that link and you should be redirected to this page now if you see these premium packages don't worry this is absolutely free plugin but this is also available in premium versions so if you want to use the premium version on one website you can pay this small price and for this small price you're getting so many more features like you're getting 90 plus premium widgets premium you know which is that i'll explain you what these widgets are very soon then after that you get 300 plus premium website templates so pre-made websites kind of you know 300 plus advanced pre-made website designs then you have theme builder woocommerce builder poop pop-up builder all these features are available so if you want you know if you have some extra budget obviously i would recommend you to go with the premium version but in this video because i have said that i'll be using only three things we'll be using the free version so to install or to download the free version simply click on this button at the top right corner get started button now whenever you click on this button first they will ask you to sign up on elementor.com so you just have to enter your email address and choose a password and that is it then after that you'll see this page they will ask you whether you already have a wordpress website so yes we do so select the second option and click on continue now over here you have to enter your website url so i will simply copy this website link paste to do here and click on check for wordpress once they check that wordpress is installed on your website they will give you this option simply click on click to install button and a new tab will be open for you and as you can see elementor page builder at the bottom right corner you see this install now button simply click on this button and this plugin will be installed for free now as you can see this plugin is successfully installed you don't need to activate this thing we can activate all the plugins at once again click on plugins and search for let's search for some more plugins click on add new now this time let's search for one plugin very important plugin elements kit so search for just type in element skit this is the plugin that we need element skit elementor add-ons by wp met so click on this install button we also need this plug-in envato elements so if you see this plug-in over here click on this install button i'll explain you about these plugins later on in this video then after that we need few more add-ons plugins so for that you have to search for this option live mesh and you need to install this plug-in live mesh add-ons for elementor page builder click on this install now button now once you install all these plugins now you can do one thing you can click on this plugins from the left hand side and you will see all the plugins are available over here everything is installed but none of them are activated so what we can do is instead of activating every one of these one by one we can simply tick mark over here this will select everything and under bulk action we can select activate and click on apply so this will activate all the plugins at once and this will save you a lot of time now over here at top you will get different notices you can simply dismiss all these notices now come back to your dashboard i guess now let's start creating the home page which is the most important thing let's see how we can design this website how we can you know where and from where we can download these illustrations and how we can customize them how we can use this patterns and how where can we download these things from so let's see how this home page is created and how to use these different resources so to create any page whether it's homepage or any page you just have to click on pages now we had created this demo page for demo purposes so i can delete this for now and if you see this sample page over here you can also delete this page now let's click on add new page to add our home page so first of all you have to give some title to this page so we'll just give it a title of home or we'll just name it home now if i just publish this page and if i open this page in a new tab you will see it will look something like this which i have already explained you the default style of the page here the left hand side we have the content here at the right hand side we have the sidebar now first of all i don't want this sidebar i want complete section i want to use the hundred percent full width because in the demo website also we don't have any sidebar in the home page so to get rid of this sidebar you can come back to this page scroll down and under content layout you can select this option 100 full width and again you can update this page so if you again come back to this page and refresh it you will see that sidebar is now gone similarly we don't want this title section so again we can come back to this page click on title and we can simply disable this entire section again update this page come back refresh and that section is also gone so we just have the header we have this black footer in between everything is empty now we can design this page however we want now before proceeding further there is one more thing left if you see your url bar it says your website name slash home and if i click on this option my wordpress i'm redirected to some other page which simply means that this page that we have just created we have named it home but this is just a regular page so just by naming your page home page it doesn't become your home page we have to set this page as a official home page so to do that thing come back to your dashboard and here from the left hand side hover over settings and click on reading now you'll see this option your home page displays so right now your homepage displays your latest post we want to display a static page as a home page so we can select the second option our static page and under homepage select the page that you have just created click on save changes now if i again come back to this page and you can see this url thing if i refresh this page now as you can see that slash home is gone and we are still on the same page and if i click on my wordpress i'm still on the same page which simply means that this page is now officially our home page now we can start designing this page so to design this page you have to come back to pages and you have your home page over here click on edit and as i said you earlier to design this website or to design this page we'll be using elementor so you'll see this button over here at top edit with elementor click on this button all right now first what i want to do is i want to explain you guys what is this elementor page builder how does this thing work what all these things are present at the left hand side what is this so i want to explain the page that you see or the content that you see on your screen so elementor is a page builder which obviously by the name itself you can you know figure out this is used to create different pages and these things at the left-hand side these are widgets or elementor calls them elements so you can use these elements to create all the pages you want for example all these pages the homepage blog page about page whatever page you see it is created using all these elements that you see at the left hand side now if you remember we had installed few extra plugins like element skate live mesh add-ons so if you scroll down you will see here element skit so with the when you install that element skit you will get some extra add-ons that you can use to further more design your website similarly if you scroll down again you will see live mesh add-ons somewhere here it is live mesh add-ons so this is what those plugins do they will add some extra add-ons for you and if you see any add-on logged like this one it simply means that this is available only for elementor premium version pro version so if you want to use slide you cannot use that but if you want to see how how this thing works or you know what this add-on will do or what this element will do you can click on this and click on see this in action and you will be redirected to elementor website and you can see how this thing will work and what you can do with this thing so you can watch this video and you can see these options you can create different slides like this one okay so again i'm saying if you want to use these things you have to get the elementor premium version now let's see the right hand side so this is the main content area so the the way we will be creating this website basically are the three basically there are three ways of creating your page first using elements second using blocks and third using you know premium layouts of free layouts no free pre-made layouts so first of all whenever you want to create a new section because every page is divided into different sections if you see this is one section then this about page or this about section then there is this is the third section this is services thing is your first section so every page is divided into different sections so if you want to create your first section you simply click on this button this red button plus button and you have to select how many columns you want in this section so here for example here as you can see we have left column then we have right this right column so if you want two columns you can select this two column and you have this thing over here left column and right column now whenever you add anything like this now as you can see at the left hand side settings are now changed and you see a different screen over here now if you again want to go back to elements you can click on this icon this nine dots icon you can click on this and again you will be redirected to elements thing now if you want to use for example button over here you can just search for button element these this is the simple button element this is the button element by ekit and you have some more options let's use the simple button element i can simply drag and drop this thing over here and this is how it will look like now you can change the text like as you can see now the button title is button you can link this thing with anything so basically whenever you add any element on your page you will see that left hand side settings are now changed right now it says edit element whenever you click on any element you will get settings related to that element and every single element will have three sections content which is this section style obviously this section will be used to style this element whatever the element is you can change the color the size the radius all this styling thing then after that third section will be advanced section which you can use to add margin pad and z index some you know simple animations all these things can be used for here again if you come back if you want to come back to elements you'll click on this nine dots icon and suppose if you want to use something else over here at the right hand side maybe if you want to use let's see this progress bar so you can simply drag and drop this progress bar over here and now as you can see at the left hand side it says edit progress path those settings are now changed now you can increase this thing you can change the style and everything so this is how it works now this is the first style this is using elements okay this is basically creating your website from scratch then the second style in fact let's see the second and third style later on first our home page will be creating our homepage completely from scratch so that you guys understand the basics of elementor and you understand how to use these elements and how you can create a beautiful website from scratch and after that i'll explain you how to use you know blocks and after that we'll see how to use different layouts so let's do one thing let's cut this thing and let's create our first section so here as you can see in the first section we have this left column and right column so first we'll click on this plus button to add a new section and we'll add two columns over here so i have added two columns now the first thing that i want to do is if you see properly if you see carefully over here the left column is pretty small the width of this left column is smaller and the width of this right column is larger or bigger so what i want to do is i want to change the column width for first one by default it is 50 plus 50 percent i want to change this thing i want to make it 40 and 60 percent so you can bring your mouse cursor and you can do it like this as you can see you can also see the percentage or if you want you can do this thing you can do it like this you can click on this option if you follow my mouse cursor you can click on edit column and under column width you can type in 40 percentage and the right column will automatically become 60 percentage now we can start creating this website now first thing that we have over here is this simple heading so i can copy this thing come over here again if i want to go back to elements i can click on this nine dots i can and i will simply drag and drop this heading element over here this is the default style first thing that you need to do is change the title so i'll enter this title over here now if you see if you notice one thing at the right hand side in the left hand side and the title i have typed this thing in two lines but at the right hand side it says or it shows only in one line so basically this is using html elements so to add a new line what i can do is after things or wherever you want to add that line break you can type it something like this under this arrow brackets you can type in br which stands for break now as you can see after this thing we have another line so you can use this thing to add a line let me show you one more example if i just copy this br and if i paste it anywhere in between if i paste it before these ideas now as you can see ideas this word ideas is now you know bring on the next line so this is how this thing works i'll cut this thing now let's see how we can design this thing so let's see how we can make it something like this one so to design this thing to style this thing we'll go to second option style let's search a color so for this color if i have already explained you in the introduction that to create a professional website you must choose a primary and a secondary color and you should always use those two colors throughout your website so that your website looks professional so as you can see this dark blue color and this red color these two are our primary and br secondary color so if you scroll down you'll always see these colors used throughout your website even if you use or if you even if you see some other page like your about page or contact page you will see these colors used everywhere so you have to first choose a primary and a secondary color so i want to use this color so if you want to use the same color you can select this blue color you can select any shade like this thing you can make it lighter darker like this or what you can do is whenever you go to some website and if you like the color and if you don't know the color code you can simply do one thing you can install a free google chrome extension which is called colorzilla so you can open a new tab and search for colorzilla google chrome extension when you search for colorzilla chrome extension on google you will see the first link click on that link and here as you can see this is the free chrome extension that we that we want to use colorzilla and here right now for me it says remove from chrome because i've already added this extension to my chrome browser for you it should say add to chrome once you click on that button and once you add that bro once you add this extension to your browser you will see this color picker over here if you follow my cursor again simply click on that color picker and bring your mouse cursor to wherever or whatever color you want to copy so suppose if i want to copy this exact color code i can bring my mouse cursor over here now when you simply click on that thing the color code is automatically copied now wherever you want to paste it simply go and right click paste and now as you can see this color code is pasted now because we'll be using this color again and again in our website we don't have to follow the same process again and again we don't have to again and again go and click on color zilla search for the color we can simply paste in the code and now we can add this color in our color palette so i can copy the i can paste in this code and i can click on this button this plus button which says add picked color and now as you can see this color is now added in my color palette and now i can do one thing i can get rid of these preset colors so i can you know drag and drop these colors like this i can simply delete them like this all right i don't want to delete this black color and white color this is our first color that we have used now let's see how we can change the typography which is the font family and all these things settings related to the text this font so to do this thing you have to click on this pencil button now there are almost every single font available that you can think for or you can think of or if you want to if you don't know how this font will look like on your website you can go to this website fonts.google.com and over here you can search and you can see there are so many different fonts available whatever font you like you can you know just copy that font name for example here as you can see one font name if you like this font the font name is given over here which is railway this is roboto this is oswald then this is red rose and open sans you know noto sans roboto poppins these are some really cool font families and this is the one that we'll be using throughout the website poppins so just like you set your primary and your secondary color you also have to choose a font family or two or three different font families and you should be using and you should be you know using that font family throughout your website okay that will make your website more professional so i want to use this pop-ins throughout my website so i can come over here click on typography under font family i can search for pop-ins and now as you can see you get this option if i click on this the style of this font is now change now i can increase or decrease the size as well if i want to make it bigger i can do it like this i'll make it 50 so that you know it you know it becomes or it comes in two lines now i want to do one more thing if you want to make it you know darker if you want to make it lighter or bolder if you want to select 100 now as you can see very light font if you want to select if you can select 900 and this will become very bold i want to keep it very simple i'll select this thing 600 then you can do some more things you can text transfer this thing you can make everything uppercase like this one you can make everything lowercase or you can capitalize this thing so every first letter or will be capitalized every first letter of the word will be capitalized then you can also change some style you can make it italic you can do things like this you can have underline over line line through you can have these designs as well and now if you see we don't have enough line space over here here if you see the demo website between this first line and second line we have a nice amount of space in between here we don't have that thing so if you want you can add some line height like this as you can see i don't want to make it like this i just want to set this thing to something like this probably 1.3 or 1.4 okay whatever you think is looking good just set it to that thing now let's do one thing you can also add text shadow and all but we we are we are not going to use this thing for now later on for some other elements we'll see how to use these things okay these settings then after that we have some more text now this was heading okay so for heading we use heading and this is simple text so whenever you want to add simple text again first come back to elements you should be using this element text editor element so drag and drop this thing over here you will get some default thing over here i'll cut this thing paste in my text or type in whatever text i want over here now to design this thing we'll go to style we can change the color for this we have some different color basically this is some lighter version or some lighter shade of this primary color so again you can use this color picker to see what is the color code if you bring your mouse cursor to this thing you will see the exact color code now once you get that color code simply click on that and this color will be automatically copied now come over here click on this text color paste in this color and now as you can see this color is now changed again because i'll be using this color again and again throughout my website i can simply click on this plus button and this color will also be added in my color palette now let's change the typography so for this i want to make it pop ins again there are some more font families if you don't want to use poppins let me tell you about few of my favorite font families uh poppins then there is monster red there is latto there is the railway there is roboto then there is so natto that there are so many different font families again i would recommend you to go to fonts.google.com and you can see for all these things if you want to type a sentence and if you want to see how that will look on anything like this you can type a type of sentence for example let me copy this thing paste it over here and now as you can see it will show you how this sentence will look for different font families so you can use this thing if you want now let me again come back over here go to style and for this i want to use poppins so i can simply select pop ins from here and i can change this height to our size to 18 pixels and line height i think is looking good if you want you can change that thing as well and i think let's make it a little bit lighter so select 300 weight and this i think looks perfect now after that let's use this option let's use uh let's see how we can create this button so to create this button again we'll come back to elements and we'll drag and drop this button element at the bottom now the text over here it says as you can see get started now so i'll type this same thing get started now and after that we want this icon if you first first of all you can link this thing to some page so later on when you create your contact page if you come to link and if you just search for contact you will see that contact page option at the bottom and you can click on this for example right now we have created home page if i type home i can get this option home if i click on this it will automatically get the home page url and it will link this page it will link this button with this page so later on in this video when you create your contact page you should remember to link this button with your contact page now let's add an icon for this thing so let's add this right arrow icon so click on this icon and let's search for right arrow there are so many different icons available suppose we want to use this one we can simply select this icon and click on insert right now this icon is positioned before this text i want this icon after the text so i can select after position i can position after you can also add some space between this thing if you want i don't want to do this thing i want to keep it default now let's style this thing first of all again it will be typography so for font family again i want to set this thing to pop ins and now we can change this size as well so for this i want to set this to 16 pixels and rest everything looks fine now i want to do one more thing if you see this button this is a circular button okay rounded buttons you can see the corners are rounded so if you want to make it something like this you'll see this option border radius type in 50 and now as you can see the corners over here also are now rounded now let's change the color so the text color over here is this white color and the background color is this red color so let me get this red color from here use this color picot bring your mouse cursor here now click on that thing and that color will be copied once this once it is copied you can come over here again under background color paste in this color code and now again we can add this color in our color palette and this color is now added now if i want i can do one thing if you want you can add some custom padding from all the sides so to do that thing if i first of all i'll make padding 0 and now as you can see this is how your button looks like there's no padding available which means that there is no space between this thing if i add if you want you can add some custom padding so in this case i want to add padding of 15 and 35 so 15 from top and bottom and 35 from left and right okay as you can see if i add 325 from left this is how it will look like i want to make it 35 so 15 from top bottom 35 left and right and we also want to do one thing when i hover over this button the background color should change so if you want to achieve this design you can click on this hover effect and you can set some other background colors in this case let's select this color now when i hover over this color when i hover over this button you can see the background color changes so this is how this thing works now click on update now as you can see we have to use this pattern so now we have to see how to use this pattern and how to bring it over here just be just behind this button now before we add this button before we add this pattern behind the button we have to first create or we have to download this pattern from subway so there are many different websites from where you can download this pattern or you can just download it from google if you want you can go to google.com and you can search for patent for websites or patents for website go to images and you can see there are so many patents available if you want you can simply download these images or you can if you want so for example dotted pattern like this one you can come over here and search for dotted patterns for website and now as you can see you know we have this dotted pattern you can download this image if you want and you can use it on your website or you can do one thing you can go to a website and simply type in this website name toptill.com slash designers slash subtle patents and you will get this you will be redirected to this page and now as you can see there are hundreds of thousands of patents available and if you want to see how this pattern will look like you can simply click on that pattern and you will get that design you know as you can see in the background whatever pattern you want to use and here also you can search for something for example if i want dotted pattern i can go you'll you'll see this search at the top you can search for dot and if you search this thing let's press enter and now as you can see dotted pattern different colors this is this is very much similar to what we have used on our demo website as you can see this dotted one there are some more so many different options if i click on this you know very light dot okay this is i think this is the exactly the same one that we have used over here on our demo website so whatever you want to use you can simply download that pattern from here it will be a zip file if you open that zip file okay you will see okay this is the image you can extract this image somewhere so i can click on extract to file and wherever you want to extract this thing you can do that i will extract this on my desktop click on copy it is already present so i can click on yes to replace this file all right so this is the pattern that we have just downloaded if i open this image okay as you can see this is how it looks like or you can do one thing you can go to freepik.com and these are images on free peak you can get a vector file here also if you search for uh dots or pattern something like this you will get vector files as you can see the first result and there are some no more options or more more patterns and vectors available now this is a vector file which means that you have to use coreldraw to you know create or to make some changes on this file i'll i'll show you very soon how we can do changes on files like this one but you have seen there are several websites and there are several places from where you can download these kind of patterns but in this case you don't have to worry i have given all these patterns all these images that you see on your screen for free so there is a link given in the video description below if you click on that link you will be redirected to my website blogtoot.com and here as you can see for every single tutorial that i create i always create these you know blog post and when you click on that link you will be redirected to a similar blog post you will see the video that i'm recording right now you will see some important links at the bottom you will see this link download free images when you click on this download button you will download a zip file and when you unzip that file you will get this folder and as you can see i have given all these dotted patterns all these background images all the other images everything for absolutely free so you can use these images to create this website but i'm showing you that if you don't want to use this uh these images these patterns that i'm get that i've given you you can search on internet for some other patterns as well okay so now that you have your pattern now let's see how we can add that pattern be behind this button okay so to add this button to add this pattern behind this button we have to click on you know advanced and we have to go to background and we have to upload that pattern in the background but there is one problem over here let me explain you that if i try to upload that pattern over here in the background click on upload and let me upload that thing this is the one that we want to use select click on open click on insert now as you can see this is how it will look like if i make it no repeat still it looks bad if i i can change the position but it is not looking that great if because this is a block element it will display only till the height and width of this button oh i don't think you can understand this thing but let me show you how we can fix this thing first let me get rid of this background thing now if you want to use this button and if you want to upload some pattern behind this button you can do one thing you can add in a section and inside in a section you can add this button let me show you so you will see this option with your inner section drag and drop this thing over here so now as you can see inside this left column we have two more columns now obviously i don't want two columns i just want one single column so i can right click on this right column and click on delete now we have only one column now i can bring this button inside this inner section now what i can do is i can click on this button or i can click on this option edit in a section if you follow my cursor click on this inner six dots i can now let's give it a height so you'll see this option over here height option select minimum height and now as you can see it's so much space uh below this thing obviously i don't want this much space i just want probably 120 pixels now the reason i'm adding this space at the bottom is because i want this thing to show at the bottom as well now i can do one more thing i can change the column gap for example if i hide this thing you will see there is extra space if you see this is where this content starts and this button is now you know little bit towards right side we have some space at top also and also at left hand side and you know some space at right and also at bottom so if you want to get rid of this space you can select this option column gap and you can make it no gap now if you see this thing this also starts in the same line so this is what this thing will do now we can do one thing we can simply add that pattern behind this thing behind or in background of this inner section so go to style select background option and select that image so select this pattern click on insert media and now as you can see this is how it looks like now whenever you add any image it will automatically be repeated so because this is a very small image this is getting repeated so first thing that you should do is turn this repeat off if you turn this thing off now as you can see we have only one option now you can also change the position you can make it center left you can make it center right top left top bottom right you know all these positions or you can have a custom position if you want so in this case we do want a custom position so i'll select custom and now as you can see you can control x position and y position so i'll make it i'll bring it a little bit towards right hand side like this probably let me set this to 112 or 111 and for y i want to bring it a little bit up so minus 3 now as you can see this looks amazing i think this looks perfect so this is how you do it so once you do any changes on your website you should always remember to click on this update button so that you know changes these changes that you have just you know done on your website these changes are saved now at the right hand side we have this illustration so let's see how we can use these illustrations now again i'm saying if you click on that link this link that i'm talking about which is given in the video description below i've given this illustration all the images but let me show you how we can and from where you can download these illustrations so if you want to download these illustrations there is one website called undraw.com dot co actually go to undraw dot co slash illustrations you can do one thing whatever websites and resources i am telling you you make sure you note all these things down now here as you can see now many different illustrations are available for different purposes for example if you're creating a travel website you can search for you know illustrations related to travel if you want illustrations related to analytics anything like that you can do it here also you have the search option click on search and let's search for analytics and now as you can see you will see all the illustrations related to analytics now whatever you want to use you can select this thing and you can also change the color scheme so here this is the default color scheme if i want to probably red color some other color scheme for my website i can select this color i can change this to red and now as you can see the color scheme is now changed to red now whatever image you want to use for example if you want to use this image click on this and you can download png or svg if you don't want to do any changes on this you can download the png and you can upload this image on your website or if you want to further more do some changes on this file you can download the svg file and let me show you how we can do changes on this svg file so first download the svg file on your website on your computer now as you can see this is downloaded now let me open this file so show in folder alright so here is the file now you can do one thing you can use coreldraw to do some changes on this website now obviously if you don't have coreldraw you know how to get it on internet so you do i don't have to tell you that thing you once you download coreldraw you just have to right click on this and select open with and select corel draw whatever version you're using now don't worry this thing is not going to be very technical i'm going to show you very basic things basically if you don't want to make any changes don't follow this step if you want to do some more changes in this illustration uh it is only for that purpose all right guys so here as you can see because we have downloaded the svg file we can make some changes let me first bring it over here now we can see everything now suppose if i don't want this red color we had we have this red color but the color of this yellow did not change so i can click on this yellow thing and now as you can see at the right hand side we have different color palette i can make it this color or some other color this green color i can select this orange option i can change the color for this as well okay probably some other color like this so you can do some changes like this and once you have completed these changes you can do one thing you can press ctrl e on your keyboard to export this file and make sure under save as you have selected png this will make the background transparent now we can give any title to this thing and you can simply click on export and because this file is pretty huge i don't want this big file i can do one thing i can decrease the width so width can be something like 900 and the height will automatically change now as you can see this is much better so because the file is now smaller the file size will also be smaller and also always make sure that this transparent thing is ticked okay this transparency thing is tick mark if you remove this stick here now as you can see have this white background make sure this thing is tick mark so that you have transparent background now you can click on ok and this file will be exported let me show you this thing now as you can see this is the file if i open this thing so you can use coreldraw to make some changes on these you know pages or on these files now since you have this illustration now we can upload this illustration on our website so we can come over here we have to use this image element simply drag and drop this image element at the right hand side upload some image so again i'm saying i have already given you this illustration so this is the one i'll select this thing click on open click on insert media and now as you can see this is how it will look like now again make sure to always update the changes that you have made on your website now let's see how we can add this thing in the background i don't know you can see this thing or not this green thing is added in the background and this makes your website more you know professional if you see throughout the website if you see some other pages as well you know in the in this section in this blog section i have added this big shape in the background if you see some other page like your about page i think i've used this thing as you can see this small shape over here in the background so if you want you can create these shapes and you can use them in the background it will make your website look more professional so let me first show you how you can create these kind of you know shapes so again you can go to freepik.com to download these shapes i don't know what you can search let's search for shapes okay as you can see there are many different shapes available basically you can download this thing and you can you know change or this style of this thing according to you so let me show you a very simple example let's select a very simple one let's select the first option this looks good so you can download this thing for free click on download and select this option free download okay now you'll see a zip file will be downloaded now as you can see this zip file is downloaded now click on this or open the zip file and you will select this eps option eps file select the cps file click on extract to and again wherever you want to extract i want to extract this thing to my all right so i want to extract this thing to this folder click on ok cut this thing again i can open this thing and now as you can see this is the file again you can right double click on this to open this file in coreldraw click on ok and this is how your shape looks like now let me show you how we can do some changes obviously this is not a coreldraw you know tutorial but i'm just showing you some changes if you want to delete something i don't want these extra things so i can do it like this delete them using my mouse i can select this section delete it and now i don't want this thing as well so i can delete it like this you can just click on that and you can delete it and i don't want this text as well so i can delete them all now as you can see have this shape now if you want to increase or decrease the size of this shape you can simply click on this and do it like this for background also okay like this so once you have this shape and once you like whatever shape you have selected and again you can change color as well you already know this thing now once you like this thing you can simply again press ctrl e on your keyboard and you can again make sure it is png give some title and export this file so this is how you do it or if you want a simple version or if you want to do it in a simple way you can go to a website called canva.com so on this website you can create any kind of things uh if you see this recently i have created this thing uh just for demo purposes so if i want to create anything like this i can click on create a design i can select a custom dimension and let me select a width 1280 and height will be probably 500 okay click on create new design now once you have this design you can do one thing at the left hand side you will see elements click on elements and here you will see shapes here as you can see shapes let it load properly okay go go to gradients actually go to gradients and here you'll see so many different shapes that you can use under gradients click on see all and you will see all these options so whatever you like you can use this thing for example let's use this one click on this it will automatically be copied i want to you know rotate this thing like this increase the size all right and now as you can see very much similar to the one that we have in our demo website okay you if you want to change the color obviously you can click on this and you will see this color option over here this is gradient color which is combination of two color if i select this color and instead of this if i select probably this color now as you can see the color is now changed the gradient is now changed if you want single color you can select same color for both the option now as you can see this is a single color thing now once you have created your shape you can do one thing you can download this thing so once you click on download make sure png is selected now there is one problem over here you cannot download the transparent version so to download the transparent version you have to use you have to upgrade to pro or you can use a 30-day trial period but if you don't want to do that don't worry let me explain you a simple version or a simple way a free way of doing this thing first of all just download this thing under png so select png click on download now once you have this file let's see here's the file now there are many more websites that you can use to make this thing transparent right now this thing the background is white if you want to make it transparent there are many more websites if you want you can go to this website remove dot bg this website will simply remove the background thing as you can see over here for free upload an image and it will remove the background and it will give you the main thing if i click on upload image and select any image probably let's select let's select this image or maybe this image select this image click on open and let me show you what happens once you upload this image now as you can see the background is automatically removed for absolutely free and you have this thing now you can download this thing so similarly you can download you can upload your file and this will remove the background and you will get this image or you can go to this website pixlr.com pxlrpxlr.com select this option pixlr e click on launch pixlr e basically this will be the url pixlr.com e now here you can click on open image and download the image that you have you know select the image that you have downloaded from this canva so i think this is the image that we just downloaded so select let me open this thing yeah this is the image so select this image now once you have this image you can now remove the background using a very simple tool which is called the mask tool if you hover this thing as you can see click on this scissor icon it this is the mask tool and over here you will get many different options select this magic mask select this icon now click on your image and now as you can see the background is gone and you have a transparent background now you can simply click on file and you can export this image so i can click on save control s i can make sure it is png so that you have transparent background click on download and this file will be downloaded and now you can use this you know a background less image on your website like this one so this is how this thing is done now again i'm saying these things are also given to you in video description you don't have to follow my steps i'm just showing you how you know people create these different things and how they use on a website and how to how they implement these things on the website now if you want to use this thing in the background let me show you how we can do this thing so for that you have to click on edit section now for many times it happens that for the first section you don't get that edit section option so for my case also i cannot see that option if i add some other option over here at the bottom another element another section at top of every single section you should see this six dots i can edit section if you click on this at the left hand side you will see edit section options but many times for the first section this thing will be hidden for you so if you want to fix this thing you can do one thing at the bottom left you will see navigator icon click on navigator and click on section the very first thing okay the very first section click on section and now as you can see at the left hand side it says edit section which means this is related to section setting of this thing now here i can go to style and i can add this shape in the background so i can add this option background type and i can upload this image the shape image which is over here let's see this is the image select this image click on open click on insert media and now as you can see this is how it looks now first thing that we want to do is we don't want this thing to be repeated i want the position to be top right okay and this is how it looks like this is pretty big so i can decrease the size here you see the size option you can have a custom size and instead of 100 i'll make it let's see i think 60 percentage looks good so i can select 60 percentage now let's add some space at top and bottom so i can go to layout and we can give a custom height so that we have some space at top and bottom as well so under height select this option and make it a minimum height and instead of 400 i'll make it 650 and now as you can see we have some space at top and also at bottom and now this section looks perfect click on update now once you have created one section you should always see how that section looks on a mobile phone because our main aim is to make our website 100 mobile friendly i can do actually one more thing we can uh add some extra space in between as you can see the space between both the columns is very little so under column gap we can add wide or wider so this will add this extra space over here okay narrow wide whatever space you want you can add and click on update now if you want to make this section mobile friendly and tablet friendly you will see this icon over here at the bottom left responsive mode click on this icon click on mobile now as you can see this is how it looks on mobile phone so let's fix this thing because this is not looking perfect so first of all click on this heading and let's change the size of this thing for mobile phone as you can see now remember whatever changes i'm doing this is happening only for mobile phone if i again come back to desktop uh the changes will be same and whenever you select mobile or responsive mode you should always see we are changing the size besides size you should see this mobile icon which means that the changes that you are doing right now it will it will occur only on mobile phone now once you decrease the size you should always make it center align on mobile phone these things align center looks better select the second option text editor again for size let's make it 15 pixels and let's make it center align select button button size looks perfect just make it center align and we can do one thing we can add some space at top i i think we need some space at top over here so i can select this first option go to advanced dealing this padding and under top padding we can add probably 50 pixels or 75 pixels and now as you can see we have some space at top so this looks perfect click on update if you want to see how this looks on tablet you can select this option tablet option and this is how it looks on tablet i can again do one thing i can fix this thing oh for tablet maybe i want to do one thing i don't want two columns i want a single column which means that this thing this left column will be on top and this right column will be on bottom in bottom just like in mobile phone as you can see the image instead of getting at left it is at the bottom so for tablet also if i want to do this thing i can click on edit section under column width i'll type hundred percent okay for second also i'll select this option column width i'll make it hundred percent now i can go ahead and make uh any changes that i want to do so first of all i will select this option edit section i'll add some space at top and bottom so for padding top will add maybe 50 pixels okay like this we have enough space at bottom so i don't uh think we need any space at bottom this looks perfect click on update and again come back to desktop and now as you can see desktop no changes have taken place it is looking perfect alright guys so with this your first section is now 100 completed now i took a lot of time to create the first session so that you know i wanted you guys to understand every single step now for all the other sections we will increase our speed we'll go a little bit faster obviously because if i go at the same speed the tutorial length will be pretty longer so i don't want to make this tutorial five six hours long tutorial i want to keep it short probably under two hours so let's see how we can now create a second section okay so now to create the second section we again have to come over here click on this plus button and again if you see over here for this section also we need two different columns so we'll select two columns now first of all the first thing that we need over here is this video so we'll come back to elements and we will search for video which is over here so select this drag and drop this video element over here you have to upload whatever video you want to embed over here you can upload that video link so i'll go to my youtube channel and let me upload my latest video how to create a school management system website very amazing uh if you want to create a school management system wherein teachers can take attendance you know or they can take exams zoom live classes everything is given in that so you can simply watch that tutorial very important and i think very useful so whatever video you want to embed you can simply right click on that and click on copy link address come over here under link delete this thing and paste in your link this video will be embedded if you want you can do one more thing you can you know add some other overlay on this like this image this kind of image any image like this one so you can enable this option image overlay and you can upload some image so let's upload probably let's upload this image click on open so this is pretty huge image i don't want to use this image uh you should not be using as you can see whenever you upload an image you you should see what is the size of this image now very soon i'll show you how you can reduce this thing in fact let me show you whenever you want to upload whenever you want any images like this one for example this image and all these images you know this uh stock images if you want to upload and if you want to use these images for your website there are many useful websites that you can go to the one that i use the most is unsplash.com so you can go to unsplash.com you can see some really cool images are present over here so whatever category you are searching for for example i want to uh image related to meeting people are in meeting so i can search for meeting or meeting room or you can search for corporate and you will get all these you know stock images for free so whatever image you want you can simply select that image and click on this download free button now these images are pretty huge you know these are all full size images so this will be something sometimes like 10 mb is 20 mb so obviously this is not at all sensible to upload no not at all sensible to directly upload these images on your website first you should do some changes on this website you should you know resize the image and you can also change the resolution and all i'll show you how to do that first of all if you want to download this image you can simply click on this download free button and this image will be downloaded as you can see this is 6 mb so this is pretty huge image now another website that i use a lot is pexels.com so you can go here and again in this also if you want you can search for meeting or you can you know search for corporate anything like that you will get all these stock images now whatever image you want you can simply select that and download it so we have already seen how to do this thing simply click on this and click on free download now because these images are pretty huge you can do one thing you can go to a website called reduce images and here you can click on select image and let me show you the image that we in fact let me just select this image this is also pretty huge this is 400 uh m 400 kb i guess in fact let me just select this image this was 5 mb as you can see and pretty image size is also you know 5 53 55 into 4 000 pixels so pretty huge image now the thing that i want to do over here is i want to change this thing to pixels and i want to make the width as one two eight zero and i want to decrease the quality of this to probably 75 click on resize and let's see now as you can see instead of 5 mb or 6 mb now it is only 213 kb you can again go ahead decrease the size of this image and also decrease the quality of the image and you can have you know even smaller file sizes or you can go to another website called squoosh dot app and you can upload your image over here and you can do one thing you can simply drag and drop that image so let me see that image first so this was the image i can simply drag and drop this image over here now in this you can also see these changes let me break it over here so first of all we want to resize it so we'll tick mark this resize and instead of width you know 5350 i'll make it one two eight zero and height i don't want to maintain aspect ratio so for height maybe i'll select 720 or you can also do one thing you can you know crop this image if you want and over here under quality you can decrease this thing and you can see the changes between these images okay if i do it like this you can see the changes so whatever you like you can select that option and you will see this file size over here at bottom right now it is 134 kb so you can reduce the file size like this and after that you can click on this download button and this new file will be downloaded so make sure whenever you upload or whenever you download any images like that first you resize that image and you also decrease the quality of that image and after that you upload on your website or else your website will take a lot of time to load so let me upload some other image over here let me select let's scroll down let's select this image this is only 100 kb so i'll select this image click on insert media and this is fine now you can do one more thing if i click on this thing it you know just starts starts playing i can do one thing i can enable this light box so when i click on this first it will show me this light box and now i can play this video so you have this option as well now below this thing i want to add this simple text so i can copy this text come over here and again to add this thing there you know you can add heading or you can use text editor whatever you want i want to use heading so i'll drag and drop this heading over here i'll add this text like this and we'll go to style change this text color to this color we have already added this color in the color palette so i can select this thing and this is the color now let's change the typography so i want to decrease the size to 14 and i want to make it lighter so 400 okay let's add some space as well line height so 1.4 all right and i think this looks good now i want to do one thing if you see over here at the left hand side we have some small space over here and we also have this border at the left hand side so to add these things under padding you can select this option left and you can add some padding at left maybe let's add 25 pixels now we can select border and select border type solid and only in border left select four pixels let's choose this color and let's make it lighter like this let's see now as you can see this is how it looks like now once you make any changes on your website always make sure to update that page now let's see how we can add these things now once you once we add this section once we create this section all the other sections will be pretty easier because as you can see the style of this title subtitle separator this button is very much similar for all the other sections so once we create this section all the other sections will be you know very easy and it will take hardly a few seconds or just few minutes to create those sections so let's add these things so first of all we want to add this text so i'll copy this text come over here drag and drop this heading at the right hand side add any title you want now for this style of this thing we have to change the color to let's see we have this red color so i'll select this red color now for typography now again and again we don't have to change the typography default typography is reported but you're doing changes uh you know we are making it pop in second and again so again to save some time over here you can click on this hamburger i can this three lines i can click on default fonts now for all these primary secondary body and ask accent text you can make this thing pop in so you don't have to do it again and again default font family will be poppins so heading sub heading body text also will be the same font family and action text will also be the same font family so again we'll save some time we don't have to set you know typography phone family poppins every single time now i want to decrease the size to 16 and i want to make it lighter at 500 okay so this is how this will look like then after that we have this text so i'll copy this bring this heading over here just below this thing paste in this thing go to style and this is big so first of all color is this color now we don't have to change the typography to pop-ins this is automatically poppins so i'll make it 45 and let's add some line height that will add some space at top and bottom if you if i add this thing you can see the changes on your website let me make it 1.4 now as you can see it has added some space at top and bottom and finally let's add this simple divider so we can come over here and we have this divider drag and drop this divider over here i don't want this to be hundred percent i just want this to be probably 50 not percentage 50 pixels so i'll click on px type in 50 over here now we'll go to style and i want to make it bolder so 4 pixels and now as you can see this is pretty bold gap will be zero and this color will be this red color now we can do one thing we can add some as you can see below this uh separator we have a decent amount of space at bottom so i can add some spacing or some padding at bottom so maybe i want to add 30 pixels at bottom okay so this is how it looks like then after that we have some simple text so i can copy these text from here come over here and use this text editor now paste in your text over here whatever text or type in your text go to style it is already popping so we don't have to make it pop ins change the color and let's change the size so i think this size looks good or maybe let's make it 16 a little bit bigger and let's make it lighter at 300 pixels and if you want you can also add some line height i think line height looks good but if you want you can even increase this thing to 1.7 or 2 and again after this also i want to add some padding because as you can see below this text we have a decent amount of padding at bottom so we can go to advanced under padding bottom i can type in 30 and now as you can see this will add this padding at bottom then after that we have this button so we don't have to create this button again we have already created a similar button at top so we can do one thing save some time right click on this button click on copy come over here right click click on paste we have this button we can do some changes this button says take a tour so instead of get started now i can type take a tour and we can also change this icon so again we have the same right side thing but this icon is a little bit different maybe this i can select this click on insert okay now as you can see this is how it looks like you can also make some changes in padding i think i'll add let's see i think it looks good i don't need to change this thing just click on update now finally let's do some changes in the section background so if you see properly if you see carefully we have image in the background and on top of that image we have this overlay color and we also have some space at top and bottom and then after that we have this pattern over here so to do these things you will click on this option edit section and first of all let me do one thing let me add this background image so under background i'll select this option and i'll add this image let me show you that image over here this image okay this is also as you can see downloaded from unsplash so select this image click on open and i have already uh you know done some changes so this is only 94 kb click on insert media and you will see this image in the background i want to change the size to cover so that you know it displays the entire image and i want to change the position to center center now we can do one thing we can add some space at top and bottom first so under padding top and bottom i'll add 100 pixels okay only at top and bottom now again come back to style and let's add background overlay so select this option and uh select color you can select this color maybe not this color let me type in this color f7 we'll be using this color a lot so again for this color color also i'll add this under my list now once you have this color let's increase the opacity so that it becomes darker like this let's make it 94.95 okay 95 looks good and i think this section is also now completed click on update again you can go ahead and you can see how this looks on mobile phone and you can do some changes i think we can add some space in between and one more thing the width of this section is also pretty small i have just noticed so you can do one thing code to layout first of all let's add some space in between so under column gap i'll make it wider and now as you can see there is decent amount of gap between columns and i don't want this column width to be this much which means that the width the content will be inside this much space so i can decrease this space for example if i type in 800 over here now as you can see the content will have to adjust only between or only within 800 pixels i don't obviously don't want to make it 800 i want to make it a little bit bigger a little bit wider to maybe 140 or 1040 so for content with i think 1040 looks better and this is how your section will look like you can do one thing this image is floating at top not at not in middle so you can set this content align vertical align to middle and now as you can see this everything is now aligned in middle click on update okay so once you create this section now let's see how we can create our next section which is also pretty easy we'll come over here click on this plus button three columns because right now as you can see one column two column and this is your third column now the thing over here is that first two columns are pretty small and the second one is bigger so this is 25 percentage 25 percentage and 50 percentage so total should always be hundred percentage so that it displays in one single line so i'll select this option edit column make it 25 select the second option edit column okay click on this make it 25 as well and the third column will automatically become 50 percentage now here let's start with this text okay so i'll copy this text like this come over here and drag and drop this heading thing heading element paste in this text let me bring it at top again you can do one thing you can add that breaks to make to make sure that this thing comes in two lines if you want you can do that now go to style let's style this thing i want to make it white color but right now if i change this color to white this will disappear because the background color is also white so we'll change the color later on right now you can set it to you know to any color you want now we can change the typography it is already popping so we don't need to do that we can increase the size make it lighter and let's add some line height of 1.4 em now what i want to do is as you can see on top of this thing on top of this our text there is this space so i can select this option go to advanced under padding under padding top i'll type in 325 okay or whatever space you want now as you can see we have this space at top so once you once you've created this text now we can add this image in the background and we can add this overlay on top of that image so select this option edit column now go to style select background image upload this image now for this also if you see if you download any images like this one and if you want to crop that image for example as you can see this was the original image and i cropped it to make it something like this so let me show you how we can do anything like this so you can do or you can do these things on a website called photo.com f o t o r and you can click on edit a photo first let it load you can create a new design make a collage or you can edit a photo so click on edit photo if you have a full size image you can you know do some changes i can click on upload now as you can see for example this is the image i'll select this image click on open now we can crop this image like this and i want to make it you know the width should be i would basically want to make it you know rectangular image vertical image like this one okay the one which we have used over here so you can simply crop this image like this on photo.com click on apply you can rotate this image you can do some basic changes like brightness contrast you know you can increase this sharpness you can increase the saturation okay you can do these things as well you can fine tune you can you know do some changes with the color okay you can resize the image you can do all these things so once you like this image once you find the perfect thing you can click on apply and you can now download this image so you can click on the save button and you can give it any name and click on download and this file will be saved and you can also see the file size let's upload the highest high quality this is 99 kb so you can download these images you can do some changes cropping like this and once you have this image you can come over here click on upload and let me upload this image this one and we had one more and this one okay i'm uploading these two images for the first probably i'll select this column or this image click on insert media this is how this image looks like because the image size is bigger i can set this size to cover so that it displays the entire image and now we can add that overlay so go to background overlay if you want you can add a single color overlay like this or maybe this or if you want you can add a gradient overlay so select this gradient and now as you can see overlay of two colors now what i want to do is first color should be transparent which means that there shouldn't be no color at top and at bottom i want this color okay you can see the changes over here as well at top there is no color at bottom we have this dark blue color and i want to change the opacity to one okay so very dark now we can do one thing we can right click over here click on duplicate to duplicate this column uh let me right click and delete this empty column and again we have to change the column width so click on edit column go to layout change this to 25 percentage second also will be 25 percentage now we don't have any space in between so i can do one thing i can click on edit column go to advanced and for margin left and right we can add probably let's see 10 for second also click on edit section go to advanced for margin left and right we can add 10 pixels so that we have this space in between now i can click on this text and i can change this color to white color or whatever color you want select this text change the color click on update now as i said earlier because we have already created these things now it will save a lot of time so let me copy paste everything so i'll copy this thing paste it over here copy this title paste it over here copy this separator paste it below title and after that we have some text so copy this text paste it over here and at the bottom we have the link but before we add that link let's change the text so right now at top it says what we do so i can click on white chooses and i can just change the content now as you can see styling and all is present we just have to change the content for title also i just want to change the content to this thing and i want to do one thing this size is pretty bigger so i can decrease the size a little bit this is 45 let's make it 35 all right and we can do some changes with the text as well let me delete this text fine now at the bottom i want to display this text so i can do one thing i can bring this heading over here copy this thing i think it is not heading it is button as you can see we have this icon over here so i can delete this heading i can bring button over here enter the text add some icon here right side arrow probably this i can select this click on insert after this thing now i'll go to style i don't want any padding so i'll make padding 0 and also i don't want any background color so i'll make background color transparent like this and for text color this color now let's change the typography let's increase this size so for this maybe let's see 25 okay this i think looks good let's make it underline now click on update so as you can see once you have this thing now everything becomes much easier we just have to copy paste this style now let's add some space at top and bottom padding at top and bottom so click on edit section and now we can come come over here under advanced and let's add padding of 100 pixels both at top and bottom and i can do one thing i want to increase the width of the content a little bit so i can go to layout and under content with i will type in probably let's add one two eight zero now as you can see width is increased if you compare the top section in the bottom section the width of this section is now increased and you can also add some space column gap over here if you want so we can add column gap of wide and now as you can see this is how it looks like again you can just go ahead and click on update and this thing this page will be updated the changes will be saved now let's create our next section which is also very simple section so we'll click on this plus button now we want to add only one column copy paste everything from here to save some time paste in this thing copy paste it over here and we also have this separator so copy the separator and paste it over here now obviously everything will be center aligned so click on this make it center align change the content so change this text select this make it center line and also change the content for this one it says our services so we'll type in our services over here now below this thing we want to add multiple columns so for that we'll add inner section at the bottom now here as you can see by default we have two we can right click on this edit column click on add new column and now we have three different columns now inside these columns we want to add this icon box so come back to elements and search for icon box like this now there are two options this is the one i can box and this is i can box by ekit i just want to use the regular one you can use any one of these so i'll just drag and drop this icon box over here select the icon we want this charts icon so i'll search for charts select this icon click on insert now let's change the view or style of this thing you can have it stacked or you can also have it framed and for framed also you can make it send a circle or you can make it square so we want to make it frame circle now for title i want to make it digital marketing or whatever services you provide and some text about those services all right now let's uh change the style of this thing so go to style now the first thing that i want to do is i want to make this border of this circle you know more darker so or more bolder so i can select this option here it is border width make it 4 pixels and now as you can see it has become more bolder now let's change some settings related to color so here the color is this red color so we can change this primary color to this red color now let's do some changes for the content select content and here we have the color of the title which is this color as you can see for this let's increase the size as well so select this typography and let's make it 20 pixels rest everything is fine select this option description change the color and let's increase the size for this one as well make it 16 and if you want you can make it 300 just to make it a little bit lighter and click on update now you can do one thing you can click on this edit section because edit column actually because we want to do one thing when you hover over this thing as you can see we see this very light box shadow so if you want to achieve this design you can uh you can do the changes and you also want to do one thing as you can see on top of this i can and on left right from every side we have this padding okay this space so let's see how we can add that space first thing simple things space go to advance and let's see let's add maybe 50 pixels from all sides or you can do one thing you can add 50 from top and bottom and 40 from left and right once you have this thing come back to style select border and select hover because we don't want border uh regularly when someone hovers over that icon box we want that you know effect over there so in the box shadow just click on this button and it will automatically add this shadow as you can see now i want to do one thing i want to you know make the corners a little bit around as you can see the corners right now are very sharp we can make the corners rounder so we can come over here under border radius let's select 30 again let's see now as you can see corners are now rounded and i can change the color of this thing so i can select a color like this and you can also make it lighter decrease the transparency and now i think it looks perfect so once you have this thing you can now duplicate these columns and now we can delete these empty columns and you can go ahead duplicate this entire section right click duplicate and now to make changes to the second one click on the second one change the icon to this icon this is also very similar chart i'll select this one click on insert title is marketing analysis and this is how you can just go ahead and do some changes now click on update now in this section we have done some changes first of all click on this edit section let's add some padding at top and bottom so this time i want to add more padding at top and bottom so i'll add 150 both at top and bottom i also want to change the background color as you can see the background color of this section is different so we'll go to background select this color and select this color f7 f7 fc which we have already added now i want to add some space or some divider shape divider both at top and bottom so you will see the shape divider select top and there are so many as you can see this is drop then we have clouds if you see this is the clouds option then we have waves we have curves i want to select waves like this and for bottom also i want to select waves you can see the changes over here you can do some changes for example you can increase or decrease the weight or width like this you can also change some do some changes in the height and let's see let's make it like this you can also flip this thing like this and you can invert it if you want okay so you can do some things like this thing and after that you can simply update this page and with this this section is also completed now let's create a next section which is very simple we have only this simple testimonial thing so we'll add a single column over here copy paste these things from top so click on copy paste it over here copy paste this thing and again copy this divider from here and obviously paste it at bottom now you can just go ahead and do the changes in the content and after that we have to add this testimonial section at bottom so come back to elements and search for testimonial now if you search for testimonial this is the one that we want testimonial by ekit so drag and drop this testimonial at bottom and there are so many different designs as you can see when you hover over that i want the first design that is selected okay now go to testimonials section i just want one for now so i can delete all the other okay so that it it does not move like this now click on this testimonial client name is john doe or whatever the name is all right designation probably ceo at any company name okay so probably this is ceo at some company then review text which is a text like this okay lorem ipsum any text like this so i'll just copy some text paste it over here and this is how it will look like now client avatar and logo this is the low this will be the logo at top and this will be the client avatar so logo first let's upload that logo let me select this client photo as well and select this logo click on open for now i want to upload the logo so i'll select this logo click on insert media logo is present now select client image select your client image alright so this is how it looks like now let's do some changes let's do some styling options so go to style now first thing that i want to do is i want to let's see we have description let's do some changes in description which is this text so i can do some changes over here i can change the height to 20 and we can make it lighter like at 500 this looks better now let's do some changes to this option client details now color will be you know this color so i'll select this color over here this primary color and i'll increase the size so under typography for first thing for first name i'll make it 13 okay this is the second one make it 17 and for second thing okay first thing was over here that is why select this option make it 30 name will be 30 and designation will be 17 pixels and color for both will be this primary color now if you see one thing when i however this image we have this option we get this animation i don't want any such animation so i can see this option i think it is over here let me see okay so it is under client under client you will see client image background type if you select this option and if you select any color now as you can see we get this color so what i want to do is select any color and after that just make it transparent okay like this now as you can see you don't have any changes when however this image nothing happens so this looks perfect i can now click on update come back to content and now you can add some more testimonials i'll simply duplicate this one and it one more testimonial will be added and this will be a slider you can go to settings to control the slider let me add let me do some changes in the second one client name i'll change the name over here similarly client avatar you can do that or you can do some changes on that as well okay you can add some other image and now as you can see this is working you can go to settings and slice to show will be one slides to scroll will be one and you can decrease the speed i think this is pretty fast so i can make it 2500 which is two and a half seconds okay or you can type 2000 which will be two seconds now click on update finally i think we can add some space at bottom and top so select this option go to advanced and under padding top and bottom i'll make it 100 pixels click on update okay so let's create a final section which is our block section now before we create a blog section first we have to create these blog posts so to create these come back to your dashboard click on post now one blog post will be automatically created this is a dummy one hello world make sure to first delete this one now to add a new post or to add a new blog post you can simply click on this add new now let me do one thing let me open a simple blog post with so that we can simply copy paste things from here so this will be your title of the blog you can enter your title over here then when you scroll down this is your content so i'll simply copy the content and paste it over here you'll you'll be typing your content over here now go to document you can add a featured image for your document so i select this image as my featured image and you can also add a category so if you're talking about different things you can add different categories so in this as you can see we are talking about seo so i can give it a category of seo now i can simply publish this post and this is how easy it is to create a post once you have created a post now you can do one thing you can right click on this section click on copy all right click over here click on paste so we can copy paste the entire section so that we can save some time now come back to homepage in the demo website scroll down and here you will see this is your title so i'll change the title and instead of this thing right click click on delete i don't want testimonials we want these blog post over here at bottom so we'll come over here search for blog and select this option blog post not this one search for post and you have to select this one option post grid drag and drop this thing at the bottom and you should see a section like this now first of all i don't want this title at top this my post title so i can click on this option post content and here as you can see heading of the grid i don't want anything over here so i'll simply delete that thing i also don't want this filteration so i can go to setting you will have this filterable option over here make it know then over here i do i i want to display my thumbnail then i want to display the title and this meta description but i don't want to display this text this excerpt or this summary so i can come back to this content click on post content and you should see let me just increase the size a little bit you'll see this option display post summary make it no and now that is now hidden and this is how it looks like so this is how you make this website now one more thing if you want to add this big shape in the background you can simply go ahead click on edit section go to style we have seen this thing multiple times go to background upload this image which is already given to you and i've also explained you how you can create these simple images click on open click on insert media you have this image over here first of all make sure it is no repeat and let's decrease the size to custom [Music] and position let's make it top center or top right fine click on update i think you can decrease the size even more let's make it 60 not 60 let's make it 75 i think 75 looks perfect select this thing and click on update and finally you have this option and so let me very quickly create this thing simply copy this title paste it over here let's see what we have we have this button so everything is already present we just have to copy paste everything copy this button come at bottom paste it over here make it center align select this option edit section give it a height whatever height you want 400 450 500 let's select 500 and you can add this image in the background which is also given to you this map dotted map image if you search over here here it is as you can see select this map click on open click on insert media once it is uploaded i think this is pretty large file 500 kb so i think you should not use this thing let's first reduce the size of this thing so go to reduce images now let's select that image which is over here click on open let's see the size size i think is fine width and height is fine i just want to decrease the quality to 65 click on resize now 140 pixels i think this is fine we can download this thing let's see what is in png your png is even bigger so jp jpeg is fine now come over here upload the new resized image download and here it is map open this file okay this is much better now this is very dark so i don't want this dark image okay let's do one thing let's not upload under background let's upload under background overlay so that we can control the opacity as well select this image click on insert media make this size cover and now let's decrease the opacity to 0.25 or whatever you want like this okay i think even more 0.15 probably click on update so with this this entire page is now 100 completed so once you complete this page you can now come back to your dashboard and if you see your website in a new tab let's see now as you can see your home page looks perfect oh okay we missed one thing animation very simple thing let me very quickly show you that as well click on edit with elementor now if you want to add any animation you can just click on that element go to advanced and you have motion effect you can select anything so for this fade in now as you can see we have fading down for the second one go to advanced maybe fade in up so similarly you can go ahead and add animation to all these elements all right now come back to this option now let me show you this was the first thing how you can create a website or a page using uh using elements from scratch now let me show you two other ways very quickly so i'll just add a new page i'll give it a title of demo make it hundred percent full width and disable the title now let's click on edit with elementor now i'm showing you how you can create a page using blocks so blogs i've already shown you what are blocks these are different sections this is your hero section this is your about section so these this is basically about blog hero block and services block this kind of thing so using this block you can do one thing you can first create the layout and later on you can design it so add to add a block click on this option add template and click on blocks here it is as you can see third option our first option blocks and now as you can see we have different blocks over here you can also see blocks based on different category for example for first block we can search for hero block so here it is hero now whatever block style you like there will be some free and some premium as well so premium you cannot download it or you cannot use it for that you'll have to use elementor premium so suppose let's use this one this is a free version select this click on insert now to insert this thing first you have to click on get started connect your website with elementor so simple just click click on this button connect button and now this will be inserted so you have your first section so now to create your second section click on this option and search for about block and now remember one thing as well first let me just upload this blog if you see my website what i have done is i have created i have followed a process of called you know dark and light so first thing is lighter we don't have we have a very light background or maybe we don't have anything in the background in the second section we have something in the background so this will be called darker section or darker background or darker section so light section dark section then again light section then again something in the background which will you know technically make a dark section then again light then dark so you can follow this process so here's i have done the same thing first is dark then we have light section which is nothing in the background then similarly you can go ahead you can add some more sections so this is how you do it now once you have the layout once you have all your section now you can go ahead and design this website however you want it and i've already shown you how we can design this thing so this was using blocks now this these things that that i was using right now these were the default blocks by elementor we have all also used a plugin we have also downloaded a plug-in called e-kit elementor if you remember so you will see this button if you have downloaded that plug-in ekit button and once you click on this button you will get some more blocks and templates and these are much better ones let me show you and now as you can see these are ready-made pages but we want blocks or sections so click on sections and these are ready-made sections and these are pre-designed as you can see if you want hero section you will click on hero or i think they call it header section i guess let me see let's see banner i think okay they call it banner section now some are premium some are free you can see when you hover over that if it says go pro it is premium or if it's if it does not show anything if you just shows this insert this is free so for example i can just insert this thing so this is pre-designed so this is a little bit better than that one previous one so you have this section now again you can just go ahead click on ekit element and you can you know use the same layout and similarly we had also used or we have also imported or installed one plugin called nvr2 elements which according to me is the best plugin for elementor free plugin so if you have installed that plugin you will get this button and r2 elements click on this and here also we have free blocks so suppose if you want header block or hero block click on hero now these blocks are the best you know the nmr envato blocks and water element kits and you know templates these are the best design elements and blocks so i would recommend you to use envato ones as you can see a very professionally designed and you can see all these options so whatever you want to use for example if you want to use this one or maybe this one select this click on insert template and now as you can see this is imported or inserted again you can go ahead a free blog maybe let's add focus boxes and these are different boxes as you can see uh pre-designed suppose if i want to use this one i can click on insert template and this is also 100 imported for you now this was the second style using blocks let's see how we can create a website which is the most simplest way of creating a website using templates pre-made templates so first of all let's use the default premium default elementor template so you will go to pages and here as you can see most of the good ones are obviously premium ones so if you see uh some of the most of them are actually free some of them are premium so whatever page you want you can select this thing now again i would recommend you to use this nvr2 elements now the reason i am recommending another is all the other pages whether it's e kit or elementor you will see home page looks different and for about page you don't have very similar design but in envato elements we have a complete kit if you click on free kits now as you can see there are so many different pre-made layouts for restaurants for example if you like this layout you can click on this you can click on preview first of all now the best thing about this nmr element is you have a complete package let me show you for example you can you have a design for home page and there are several you know three four different designs for home page if you don't like this design you can add this design and for about page you have a similar design so you don't have to you know import different pages and different designs all the pages and now as you can see the font family which is use the color scheme which is used everything is consistent throughout this package so this is the best one if you want to create or if you want to import the home page you select this home page which is so here first let's come over here if i like this i can click on ins install kit now once this kit is installed you can go back to install kits click on this option if i'm creating my home page i can click on insert template and this entire template will be inserted let me show you now as you can see this entire template is now imported for you so this is the most easiest way of creating a website using pre-made templates all right now let me cut this page now let's see how we can create different pages the about page contact services page and blog page basically obviously we we will not be creating this thing because this will take a lot of time i've already shown you how we can create a website from scratch using blocks and also using templates so as i have said you earlier there is a link given in the video description below if you click on that link you can download a zip file when you unzip that file you will get all these images for free and you will also get a folder in this folder you have some files uh you have this about us contact us services file so you have to import these files so click on pages click on add new let's create our about page let's give it a title of about us or just about if you want let's make it hundred percent full width and disable the title section click on publish now click on edit with elementor now select this option add template go to my templates we don't have okay we do have templates but you can import these templates which i've given you for free so click on import template select file and open this pages folder select about us click on open this template will be imported on your website if you want you can use it we don't want to use it right now first let's import all the templates now select and import the second template which is your contact template and now select and import your final template which is your services template now because we are creating our home page we'll select this above because we're creating our about page we'll select this about us and click on insert and now as you can see your entire about pages now in front of you whatever changes you want to make i've already shown you just click on this image you just click on these things and you can just replace them with some other things okay now click on update now let's again come back to your dashboard and now let's upload the contact page so let's give it a title of contact and let's make it hundred percent full width and let's disable the title section publish this page click on edit with elementor click on add template my templates we have already imported the contact template so select this option contact us agency click on insert and we have this template over here now the main thing that we want to do here is this contact form so your contact form is looking good but not looking great if you see this contact form which i've created in the demo website this looks perfect this looks professional so if you want to create a similar contact section you can open dashboard in a new tab click on contact and here you have your contact form one click on edit and again open the file that you have downloaded and select this option contact form open this contact form file copy everything from here come back to this website delete everything and whatever you have copied from this page paste it over here and click on save now again if you come back over here and refresh this page now this is how it looks like now once uh there is one more file if you see css file so let me show you i'll show you actually after a few minutes how you can import that css file and after that your contact form will look something like this okay for now we can leave it like this if you want to change this address you can click on this pencil button and you can enter your address whatever address you enter here it will automatically show on this map now again come back to dashboard and let's create our services page so click on pages click on add new let's add services title make it hundred percent full width and disable the title section publish this page and after that click on edit with elementor now let's follow the same procedure click on this add template my templates and here we have services click on insert and these this page is now also present for you all right after that just click on update now let's create a block page so for that we don't need any template you just have to create a new page and give it a title of blog like this click on publish and just like we set our homepage we have to set this page as our blog page so go to settings hover over settings and click on reading and under post page select the blog page and click on save changes and that page is now set as your blog page now finally let's do some final customization on the website okay before that let's create a menu and let's create a footer okay so we don't have any menu over here and we also don't have any such footer so let's first create our menu so to create your menu hover over appearance and click on menus now let's give it any title i'll name it main menu you can name it anything you want you can name it primary menu or just menu and after that just click on create menu now select all the pages that you want to display on this so i want to display all these pages you can also rearrange these pages like this and once you have set this thing just tick mark this thing at the bottom main click on save menu if you now come back to your website and refresh it you have your menu at top now let's see how we can create these footers so come back now under appearance click on widgets click on leave now here as you can see we have footer one two three four so under footer one i want to add this simple thing okay this simple about thing so i can come back select this option text widget select footer one click on add widget now first of all i want to add this logo at top now we haven't yet created our logo now there's a complete different tutorial on youtube on my channel how to create a logo but if you want to create a simple logo like this one you can again use canva.com to create a logo click on create a design and search for logo if you don't see logo over here search for logo like this and here as you can see logo there are different uh you know dimensions and for different type of uh category i just select logo and there are so many different pre-made logos for you you just have to you know enter your own things on that you can see all these designs at the left-hand side whatever logo you want for example if you want a logo like this one you can click on this you'll have this design over here now instead of thunderbolts you can just click on that and you can enter your name or your brand over here all right let me decrease the size to 32 and your logo is now ready you can now download this thing all right so you can do it like this or you can do one thing let me again come back to home page if you want to create a very simple logo like this one which i've created over here you can click on create a design and let's select a custom dimension let me select a width of probably 244 and height of 60 and let me add simple text okay as you can see there are so many different styles for text i just want a very simple text very simple style so i'll select this add heading i'll enter my name or my brand name or my company name i'll just enter marketing over here i'll increase the size of this text like this all right let's change the color to probably let's select this color maybe this this so whatever color you want to select that color now for m i just want to change the color of this letter m to some other color like this and now as you can see have this design now click on download png click on download and now your logo is now ready so you can use this thing or you can use the other method that i have shown you how to create different logos once you have your logo you can click on add fi add media upload your logo over here let me upload this option click on open click on insert into post you can also increase or decrease the size of this image like this okay and be below this thing i want to add simple text click on save now for the second i just swap for the second section or for the second column in the photo i just want to display my menu okay that have created at top so to do this thing i'll click on this option navigation menu select footer two click on add widget enter title under select menu select main menu click on save if i again refresh this page these two things will be present as you can see this about thing and this menu is now present now let's add these two things recent post and contact info so for recent post you'll see this recent post option over here drag and drop under footer three and this is uh done now contact info drag and drop under footer four i don't want this extra text so i can delete this text and now again you have address title and content so if you want to display your address don't change the icon class and title just change this content so instead of this address delete this thing and enter your own address similarly for phone and mobile also if you don't want to display fax delete everything under fax similarly if you maybe don't want to display a website delete everything under website and also if you don't know a display skype delete everything under that after that if you come over here and refresh this page now as you can see this is how it looks like obviously we will be designing this thing we'll change the design very soon for now this is how it looks like now let's do the final customization so click on this customize link which is given at top now let's start from top so first of all if you see on top of your header we have this section we have one more section on top of header so that is the top bar so click on this top bar from the left hand side here you have top bar click on that click on general and simply untick this thing and that section will be disabled now i want to do one thing actually let me do one thing let me go to pages i want to make the menu on home page transparent right now it is not transparent so i can click on home click on edit now scroll down and here you see header and under header style make it transparent click on update again under customize page refresh it and now as you can see we have a transparent menu i also don't want this line if you can see this border at bottom so for that we can go to header general and i can disable this thing header border bottom that thing is now gone now let's upload the logo so click on logo under header upload your logo like this and just crop this logo maybe i want to select this much section click on crop image this logo will be displayed over here if the logo size is bigger you can have a maximum width of 140 and maximum height of 50. all right now click on publish again come back now let's change the color of this menu so click on menu link color let's change this to some other color whatever color you want link however color you can leave that thing now click on publish now let's come back and change the typography for menu and for all the other things so select typography first let's add let's do the changes with main menu so click on main menu for this i will increase the size instead of 13 i'll make it 16. now as you can see much better click on publish again come back and i also want to do one thing if i open a single post if i open this blog post let me show you one thing you can see the content over here is this gray color i want to change the content color to black so click on body and change the font color of body to black now as you can see this is all black and this is looking much better very easy to read now come back let's do changes to this footer so again come back and select this option footer widget now for footer background color i want this color to be f7f7 fc okay this color and for text color and all the other colors you can set this to this color or whatever color we have used over here our primary and secondary color let me again go back over here use color picker get our primary color from here paste it under text color okay much better and for link color also instead of white i'll just paste in this color all right now click on publish now again come back and let's do some changes with the footer bottom now as you can see that is now hidden so select this footer bottom and first of all change the text color to white now you can see that properly at the bottom and if you want to change the footer thing copyright text instead of oceanwp theme by nick i can type in made by near shake you can use html elements so here if you want to add some links or anything now as you can see this thing is now hidden the title of this is now hidden if you want to do some changes to this you can go to typography select this option footer widget heading change this color to black color now you can see it properly you can also increase the size and make it bolder like this click on publish now if you see block page this is how the blog page style looks like i want to change this thing so we'll come back select blog block entries and block style instead of large image i want to make it thumbnail and now as you can see we have this style this looks much better click on publish okay so with this your entire website is now completed you can now cut this thing your home page you can now see your services page blog page all the other pages are now present you block page contact page okay one more thing contact page this form is not fixed click on customize and open that file under pages you have the css file open this file it will look something like this copy everything from here under customize you will see at the left hand side custom css click on that and paste in this thing over here now as you can see automatically your contact form style is now changed now publish this page and cut this thing so with this your website is now 100 completed so i hope you guys find this tutorial helpful if you find this tutorial helpful and if you want to watch more useful and amazing tutorials like this one make sure you guys subscribe to the channel and also click on the bell icon so that you don't miss any future notifications if this video was helpful for you make sure to give a thumbs up to this video share it with your friends on facebook twitter whatsapp whatever social media platform you use and throughout the video if you have any doubts any comments any sessions for me you can always leave them in the comments section below and thank you so much for watching this video see you in the next one

Channel: Nayyar Shaikh

Views: 101,424

Keywords: create a website, make a website, create a wordpress website, wordpress website, wordpress tutorial, wordpress for beginners, wordpress video, wordpress, elementor tutorial, how to make a website, wordpress elementor tutorial, wordpress elementor, wordpress elementor tutorial for beginners, nayyar shaikh, elementor, elementor wordpress, how to make website, how to make website for free, wordpress website tutorial, create website, build a website

Id: BKQlPUy2r7Y

Length: 150min 55sec (9055 seconds)

Published: Sun Aug 09 2020