How to Make a WordPress Website for FREE 2023 - WordPress Designing MasterClass - Elementor & Phlox

Hello friends I am nishik and welcome to the free WordPress designing masterclass for 2023 and Beyond train this video I'll teach you how to create and design a professional and beautiful website using WordPress and only free resources so to create this website we'll be using only free resources we'll be using the best and free WordPress theme the best in free page builder and will also use 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 resources they use for things like illustrations stock images patins 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 like how to use colors and what colors to use to make your website look professional we'll learn how to use contrast and fonts and how to design backgrounds using different simple and free online 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 I'll give you free layouts that you can simply import and get your ready-made website for yourself or for your client I'm also giving all the images that I've used to create this website for absolutely free and also this website is 100 mobile and tablet friendly and creating this website is super easy you don't need to know any programming or coding knowledge to create this website it's just simple drag and drop now before we proceed further let me show you a very quick demo of the website that we'll be creating in this video now first of all this is the website Let me refresh this website so that you can see all the animations and all so here as you can see we have these beautiful animations first of all if you see at the very top we have our header and this is a floating header you can see this is not attached at the Top This is a floating header and this theme that we'll be using to create this website has custom header and footer Builder which means that you can create your own custom header for example if you don't want a header like this if you want a full width header or if you want to attached header or if you want your logo in the middle for example and if you want it if you don't want these text instead of these text if you want a button over here whatever you want you can design your own custom header and footer in fact there are many different pre-made header and footer design available I'll show you how you can use that and design and just customize them according to your needs now in this particular header you can see we have this beautiful line at the top okay we have this beautiful border and we have made it a gradient border if you see at the left hand side we have this light color and at the right hand side this border is getting darker so this is a gradient design and this color this purple color is the primary color that we have selected throughout the website so this is to make your website more you know more professional and more beautiful you should always select a primary and secondary color and also you should select your primary and secondary fonts and you have to use these colors and forms throughout out the website to make your website look consistent so it should not happen that when a person goes to the home page they think that this is a different website and when they go to the about page they think that this is a completely different website that should not happen your website should be consistent throughout designs fonts colors everything should be very consistent so here in this in this header you can see at the left hand side we have our logo in the middle we have this menu when you hover this you can see this Dot and the color also changes and at the right hand side I have given this phone number and some social media links again I'm saying instead of phone instead of this phone number and social media links you can have a button over here you can have some text over here whatever you want then we have our first section our hero section in this we have a subtitle we have our main title then after that we have some text and we have this beautiful call to action button over here in the button also if you see we have used this gradient color we have used this light and dark color shade for the button and we are also using the shadow and we are we have given this Shadow also the same color and when you hover this color we have this simple animation and also the hover color changes then at the right hand side if you see we have this image now this is not my image but there are many different websites I'll talk about and I'll show you those websites from from those websites you can download free professional images so if you don't have a professional image for your website you can download it for free without any copyright issues or anything like that then after that I'll show you how you can edit those images for example this was a regular image then I added this shape on this image okay so you can see we have this beautiful shape okay so I'll show you how you can also do this thing then on top of this image we have some things for example we have this option we have this pattern over here this dotted pattern we have this line pattern over here then we have this option and all these things are positioned very perfectly as you can see then in the background if you see we don't have a white color we have we have the same purple color but we have used the lightest shade of this purple color so again I'm saying just to make your website more consistent and in the background also you have this shade now if you scroll down you can see we have the second option and throughout you will always keep on seeing these beautiful animations now the second section is this section where in which showcase our different services and again we have used beautiful icons over here again I'll show you how you can get these icons for free and we have used beautiful colors again then when you scroll down you will see the third section this is your about a section if you see we have this title over here again using the gradient background we have these different options these are all different patterns and again this is a different image we have added this shape to this image I'll show you that how that is done in fact even if you see this section background you will see this different shape over here okay this shape over here then this shape at the top okay so we'll see how to do this thing then we'll also see how to add the portfolio or section over here so you can add your projects or your portfolio section so if you click on a single portfolio you can see you can create a portfolio page here as you can see this is the title of the portfolio short description about the portfolio long description then if somebody wants to see some demo images related to the project or the portfolio they can see that if you want you can also give them the project URL name of the client one when was the release date and if they want they can visit this project okay they can click on this launch project and they can visit this project then if you scroll down you can also see previous or related projects or portfolios related works you know you can see all these options then at the bottom we have the footer but let's again come back to the home page let's see few more things then we have our next section after the portfolio project section we have this testimonial section again if you see very unique looking testimonial section we have used these three testimonies so here we have used this image and again in the background we have this very different kind of shape I'll show you how to use this shape and after that we have our next section which is our team section so you can showcase your team over here then we have the blog section okay this is how the the block section looks like again I'm reminding you everything is created using absolutely free resources only now blog section is also very important for your website because these blog posts will help you to generate some extra traffic through organic Google search results now if you open a single blog post you can design it however you want it I've just kept it very simple without any sidebar everything in Center aligned as you can see so I've kept it very simple again I'm saying if you want you can completely change the design of this thing you can have a sidebar you can you can have this image at the top you can make this image full with you can change the positioning and alignment of this title and so on okay but this is how a single blog post looks like again let's come back to the home page scroll down and after that we have another call to action section and at the bottom we have our footer in fact this call to action section is attached to the footer so wherever you go you'll always see the call to action and this footer together now again I'm saying this is also a custom router you can design your footer however you want it I've again added this beautiful waves thing at the bottom you can see this shape divider wave shape divider and then this thing curve shape divided at the top and then this thing this is also part of the footer in the footer we have created this menu we have our logo we have contact information and we have this newsletter thing over here so if you want you can also connect your website with different newsletter platforms like MailChimp or some other platform and you can collect email addresses from here then at the bottom we have the copyright text now let's again go back to the top now let's see some more pages now in this page in this website we'll also see how to create some other Pages like this about page here again if you see the consistency is throughout the website we have used the same font same color design and also very similar icons as well okay the design is very consistent again if you see this is going to be your about page then after that we have another page we have our services page so what all services you provide or what all services your client provides you can add this page and you can display this Services thing then we have the projects page or your portfolios page here you can showcase your different projects or portfolios or your work and people can click on that and they can see the single portfolio thing then you have the blog page now in this Blog Page you can see this is how this Blog Page looks like okay this is the blog archive page wherein you can showcase all your blog paste all your blog posts in one single page then we also have the contact page okay this is how the contact page looks like you can give your address phone number working details working time email addresses then when you scroll down we also have this form if somebody wants to contact you they can simply fill in this form and click on send message okay so this is your contact page let's again come back to the home page all right so this was a very short demo of the website that you will be creating in this video I hope you guys like the demo website now if you like this demo website and if you want to create these kind of beautiful websites if you want to learn the whole process how the thing works make sure to watch the complete tutorial now before you proceed further make sure to subscribe and click on the Bell icon so that you don't miss any future notifications if you find this video helpful give a thumbs up to this video and share 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 suggestions for me you can always leave them in the comments section below now let's start creating this website rest now to create any kind of website whether it's an e-commerce website a simple blog Business website portfolio 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 blogdoot.com youtube.com google.com all these things are different domain names so we'll also have to register a domain name on the Internet so that whenever someone wants to visit your website they can simply type in this domain name in the browser URL bar and they can land on your website this second and the most important thing is your website's hosting hosting is basically a server or a computer wherein your entire website is saved so if you see this website from top to bottom all the different sections all different pages database everything this entire website is saved in a server and that server is running 24 7 so that whenever someone wants to visit your website from any particular country at any given time they can always see your website live because your server 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 dependent on your hosting so your website speed your website's performance the user experience of your website your website security and even your websites ranking in Google search results is totally dependent on your hosting so if you select a good and reliable hosting everything will be amazing your website's Speed and Performance will be good user experience on your website will be very good your website will be very much secure So for anybody to attack or hack your website it will be almost impossible and most importantly you will get better ranking in different search results and obviously in contrast to that if you select a cheap crappy hosting everything will be opposite of that now there are literally thousands of different hosting providers available in the market but unfortunately only handful of them are really good enough to consider but you don't have to worry about that I'll recommend you one hosting which is very very affordable but at this same time very good hosting the services the Speed and Performance that they provide is best in the market so you can simply do one thing open a new tab and type in blogdoot.com hostinger in fact you don't even have to type in this thing there is a link given in the video description below you can simply click on that link and you should be redirected to this page now this is the only thing that you will have to purchase hosting without hosting obviously you just cannot proceed further rest everything themes plugins designs layouts everything will be absolutely free even the page builder we are using is absolutely free this is the only thing that you will have to purchase now first of all we will be using Wordpress hosting not the regular web hosting because we'll be using the WordPress CMS we we need a hosting which is specially crafted for WordPress websites so make sure you click on that link so you're directly redirected to the WordPress hosting and not the regular hosting page for example if you just go to hostinger you will be redirected to this page the regular web hosting page the pricing is almost same but the Speed and Performance and these services are very different so we want to go to the this page WordPress hosting again I am saying you can just go to that link blogdo.com hostinjure you'll automatically be redirected to the WordPress hosting page now if you scroll down you can see this is specially crafted for WordPress they are using the lightspeed web server and with that they are also using cloudflare CDN you can see the trust pilot rating is also very positive almost 5 star rating and that is more than 11 000 reviews then if you scroll down you can see there are four different plans available with your single WordPress WordPress starter then we have business WordPress and WordPress Pro now for most of you guys I would recommend you to start with this WordPress startup plan this is the most affordable and this is the plan that you should always start with now with this plan let me just show you few of the features that you get with this plan with this plan you can create up to 100 websites so today you're creating this website this beautiful Business website tomorrow maybe if you want to create another Business website or maybe for another business or for a client or for a friend or family you don't have to purchase a new hosting you can host up to 100 websites in one single plan so this is really amazing then after that you get 100 GBS of SSD storage now for this for if you see this website that I've created over here the entire storage the entire size of this website is hardly 100 MBS so basically with 1GB you can create 10 websites like this one and here you have 100 GBS of storage so this is more than enough and most importantly this is super fast SSD storage now most of the hosting providers use the HDD storage to host your website but here at hostinger these guys are using this super fast SSD stories to host your website so when your website is hosted on SSD storage and servers your website is approximately 30 to 40 times faster as compared to regular HDD storage or server now with this we also get free business email account so instead of a regular email account like Niger at gmail or Nair yahoo.com you can create an email account or you can create an email address with your own website name for example my website name is blogdoot.com so I can create an email like Nair blog2.com so that is also available here we have unlimited bandwidth and unlimited databases again most of the hosting providers they have limited bandwidth and databases but here we have unlimited to bandwidth and databases then for security we have unlimited free SSL certificate so if you go to My Demo website you can see we have this lock pad over here if you click on this lock pad here it says website is secure so this is your SSL certificate we are getting free unlimited SLS SSL certificate and we're also getting free cloudflare CDN so this will protect your name servers then when you scroll down we have few more options we also get a free domain name so domain name also you don't have to purchase you can get domain name for free then we have WordPress related options we have manage WordPress WordPress acceleration so for WordPress they're using the lightspeed web server so basically they're using server based caching to improve your website Speed and Performance now there are many more features you can read about that later on but for most of you guys as I said earlier I recommend the WordPress startup plan very affordable and very good plan so you can select this plan click on this add to cart button here as you can see they will first ask you to select a period so if you want to if you want to go with 12 months 24 months or 2 years or 4 years obviously the higher billing cycle you select the better discount you will get and also you are getting discount on all years for example if you just select 24 to 12 months or one year you're getting discount or 75 discount on the first year but if you select two years 24 months you're getting discount 75 percent discount on both the years okay so you have to pay regular price from the third year but for the first two years you're getting the 75 discount similarly if you are smart enough and if you go with the 48 48 months plan which is four years plan you're getting 75 discount for four complete years so this is really crazy and if you just compare this thing for example if you go with the 24 months plan if you scroll down you'll see just have to pay 85 dollars and you'll get even more discount I'll give you a coupon code you can enter that in you can get even more discounts so like less than 80 dollars and if you compare with some other hosting for example uh earlier I was recommending A2 hosting so for 8 to hosting for the very first year you have to pay around 130 dollars and here for two years you're paying just 85 dollars and again I'm saying you'll get even more discount even on that and not only that even after renewal you will get discount so if you select two years for example then after two years when your plan expires they will also give you the expiry date so so if you select the two years plan your your plan will expire on 30th December 2024 so even after that your your plan will renew at eight dollars per month not the regular twelve dollars or fifteen dollars per month so even on renewal you're getting discount so the renewable price is also heavily discounted and this is a very unique thing about hostinger mostly times what happens is if you select any other hosting plan you will have to pay around 100 for the first year but when you renew after one year for the second year you'll have to pay around three hundred dollars just to renew your account but here that is not happening so I would highly recommend you to select at least 24 months plan or two years plan so that you get Reno 75 or 80 discount on both your ears obviously if you want you can even go with for your clan okay so select this plan scroll down now the second option is to select and to create your account now to create your account you don't have to fill in a long form you just have to enter your email address and they will create an account with this email address just make sure that whatever email address you enter this is the correct email address there is no spelling mistake or anything and make sure to remember this email address so this email address will be a login email ID so whenever you want to log into your hosting your account you'll have to enter this email address then if you scroll down you'll have to select the payment method so you can make them many different payment methods available in fact if you go with some other country for example if you log in with India you will get you know many other payment gateways which are not available over here so based on your country you'll be redirected to some other website and you'll have more payment gateways option so if you're visiting this from India you will have net banking you will have UPI you will have phone pay Google pay all those kind of payment it is paytm and all those payment gateways but at least you'll get these kind of payment Gators like you can make payment through your credit card debit card or even your ATM card you know and then after that you can make payment through PayPal Google pay alipay or you can even make payment through coin gate okay so all the payment gateways are available and if you want even more discount you can click on have a coupon code and enter my coupon code near and awar click on apply and you will get even 10 more percent discount now here as you can see now you just have to pay 76 dollars for two complete years of Wordpress hosting not the regular web hosting WordPress hosting that two for two complete years so this is really amazing now once you do all this thing just click on this submit secure payment button and once your payment is complete you will automatically be redirected to a new page now in the previous step what we did is we set our email address and in this place we have to Now set a new password so whatever email address and password you will be setting you have to remember this email address and password because this is going to be a login email ID and password and also make sure that this password is 100 secure and this is a strong password which means that you have used letters numbers special characters to create this password again I am saying make sure you remember this password and whatever email address you have sent in your previous step because this email and password will be your login ID and password now once you do this thing after that again click on confirm and proceed further now you will see this page and this is basically just a welcome page this is just to welcome you uh there's nothing on this page you'll just see this start now button once you click on this button a new process will start for you so let's click on this button now here as you can see first of all they are asking you for whom you are creating this website for yourself for a client for a company you work for for somebody else now based on your situation you can select your answer then they will ask you what kind of website you're creating a Business website blog portfolio online store again whatever type of website you're creating you can just select that thing maybe I'm selecting a Business website now this thing this is basically just a simple survey okay so if you want you can fill in this thing or if you want you can even skip this survey so you'll see this skip Link at the very bottom of this screen if you click on this skip link this survey will be skipped for you and in The Next Step you will see this thing now they will ask you to select a platform so what platform you know use WordPress woocommerce there are some other platforms available as well there is one more option migrate my website so if you already have a website created with some other hosting and maybe if you're not really happy and satisfied with this Speed and Performance of that hosting you can easily migrate your website for free to host Ranger I'll explain you the migration process in the next step in this step I would recommend you to select this first option WordPress option so click on the select button the first option now they will ask you to enter your email ID and password now this email and password is for your WordPress dashboard so whenever you want to log into your WordPress dashboard this is the email and password you that you'll have to enter again I'm saying remember this email and password as well if you want you can set the same email and password over here as well and make sure to remember this thing now once you enter the email and password again click on continue then they will recommend you few templates now these are all pre-made website kind of thing so these are all pre-made designs and pre-made templates we don't want this thing so we'll again skip this thing so to skip this section as well you can click on this skip Link at the very bottom skip I don't need a template click on this thing now as I said earlier with this package you are getting a free domain name so whatever domain name you want to register for free you can select the first option there are two more options buy a domain use an existing domain we don't want to buy a domain because we're getting it for free and the third option I'll explain you about the third option later on first let's select the first option claim of free domain click on the select button and type in whatever demo domain name you want to register for example if I want to register this domain name dot Co dot in so I can type in a shake and from here from the right hand side domain name extension list you can select.com.net dot fund.click.help.co.in whatever domain of extension you want I want dot Co dot in so I'll select this thing now you have to click on search now this will search whether this domain name is available or not and if the domain name is available you will get this message that this domain is available you can now click on continue and proceed further now this was the first option claim a free domain if you see the third option use an existing domain now this is for those people who already have registered a domain name outside host Ranger maybe if you have already registered a domain name on GoDaddy name cheaper some other website and maybe if you want to use that domain name with host ninja then you can select this option the third option use an existing domain so click on this select button now type in the domain name that you want to use with host Ranger so type in the domain that you have registered on good ID but you want to use that thing with host Ranger so there is one domain name that I have registered on GoDaddy and I want to use that domain name with hostinjure and that is blog dude so I'll enter this domain name over here and again once you enter this thing you can click on continue and proceed further and now they will show you where your domain name Ray is registered and what is your current name server we don't have to do anything over here we just have to click on this continue button again and now finally they will show you this thing and here you can see what is your current name server location so because I'm from India for me Asia data center location is selected if you want if you click on this thing you can even change your data center location so here you can see we have Asia we have Singapore we have data centers in Europe in USA so whatever data center location you want you can select this thing and after that you can click on finish setup now basically data center location uh should be the target audience so if your target audience is in India you should be selecting India data center location if your target audience maybe is in USA then you can select some data center in USA now this setup is completing for you basically what is happening right now is once you click on finish setup or what what is happening right now is WordPress is getting installed on on your domain name so this will take two to three minutes so let's wait okay now as you can see this is 100 completed and once it is completed you will see this page here you don't have to do anything you just have to click on this logo that you see at top host Ranger logo click on this logo and now you'll automatically be redirected to your Edge panel so this is your Edge panel this is basically your control panel for host ninja so you'll be controlling your hosting from this page now over here you have to click on hosting and because we have selected the blog to domain you will see this this domain name will be available for you you have to now click on manage and you will see this button over your WordPress dashboard click on this button now once you click on this button you will see this page now in this example I'll be using this domain name web 2023 dot block tool now whatever domain name you're using you will always see this page here make sure that SSL certificate is active for you so here as you can see SSL is active for me then after that also make sure that Force https is on for you and light speed caching is also on for you okay make sure these things are active for you and at the right hand side you can see what is the current WordPress version and PHP version that you're using now we don't have to do anything over here we just have to click on this edit website button now once you click on this button a new tab will open for you and now you will be automatically logged into your WordPress dashboard so this is your dashboard in fact this is your post page we can come back to our main dashboard if you click on this W icon and if you click on this dashboard thing this is your main dashboard okay this is how this page will look like now this page the dashboard page is the most important page of your website because you'll be controlling your entire website from from this page so if you want to change the style appearance of the website if you want to write a post to create a page manage page posts comments anything like that you'll be doing everything from this page and whenever you want to log into this page or whenever you want to land on this page there are two ways of doing it first of all you can just enter your website name for example your website name is blog so you can enter blog.com and after that put a forward slash WP hyphen admin your landlord this page now another way of doing it is you can come back to your Edge panel and you can click on this hosting Okay click on manage and after that click on WordPress dashboard and you can click on this edit website will automatically be logged into your dashboard okay now whenever we install WordPress on a new domain name there are few basic things that we have to understand and the few settings that we have to do so let's see that now first of all you can see there are some widgets on your dashboard these are not really useful so we can get rid of them so we can click on screen options and we can untick everything from here okay make sure you have a nice clean dashboard over here now with the left hand side we have some options second option is your post option now under post you will see hello world is automatically created for you this is just a dummy blog post later on in this video we'll see how we can create our own custom blog post okay under the blog page we have created different blog posts so later on in this video we'll see how we can create our own custom blog post now if you click on the blog page you can see these are all the blog posts so we'll see how I create how to create a custom blog post like this one so these blog posts are created from this Blog Page this is a dummy blog post later on in this video we'll delete it then we have the media option now whatever media files thumbnails images you have on this website all these media library all these media files will be available in the media library you can add new media from here you can click on add new or you can just drag and drop media files over here you can manage them from here then we have the pages option which obviously will be used to create different pages like your home page about page your blog page products projects page all these different pages then after that we have the comments option now whenever you have any comments on your blog post or any other place you always see those comments over here so you can now approve them and approve them if you want to reply to this comment or if you if you want you can even mark this comment spam or you can delete it then leave all the other options come to appearance now under appearance you will see few themes will be automatic directly installed for you and one of those themes will be activated so in this case this 2023 theme is activated now if you open your website in a new tab so if I open this website in a new tablet see here as you can see this is how your website is looking right now now this design and appearance of your website is because of this theme 2022 theme a 2023 theme now let's go ahead and activate some other theme for example let me activate this 2022 theme so if I click on this activate button and again if you come back to this page and refresh it now you'll see your website design is completely changed now this is because of this theme 2022 theme so this is basically what a theme does a theme changes your website style and appearance now we just need one theme activated over here so all the other themes we can just click on them and we can delete them in fact we don't even want to use this 2022 or 2023 theme we'll be using another free theme one of the best themes available in the market for now you can click on plugins the next option now under plugins also you'll see so many plugins will be activated for you and first of all let's understand what this plugin is we have just seen what a theme is theme is basically the design or appearance of your website as for plugin plugin is kind of an add-on or some software that will add some extra features or functionalities to your WordPress website for example our website is just a simple blog over here if you want to convert this website into an e-commerce website there is another plugin which is called woocommerce you'll have to install that woocommerce plugin to make your website an e-commerce website so whatever new features you want for example if you want to add the contact form feature if you want to create a form on your website you'll have to install a plugin for that you'll understand more about this thing later on in this video for now again I would recommend you to delete all these themes so first you have to deactivate them so you can click on deactivate it like this okay let's deactivate all the plugins okay and now let's delete them so again one by one or if you want to save some time you can just tick mark this thing it will select everything now under bulk action select delete and don't delete this plugin untick this thing make sure all the other things are tick mark just untick the light speed cache we want to keep this plugin because this is going to improve your website Speed and Performance here as you can see this is a caching plugin so all the other plugins make sure it is tick mark select delete from here and now click on apply so all these plugins will be deleted for you now we have the settings option click on that now in the settings first we have basic and general settings so you have to give your website some name so for example I want to give my website a name of blog tool okay and after that you have to give your website some tagline so maybe my website is a WordPress agency website a website agency website so I can type in this thing over here okay so enter tagline you will be describing your website in few words okay here as you can see here it says in a few words explain what this site is about okay that is going to be your tagline then after that make sure your email address is correct and now you can do one thing you can also make sure that anyone can register a stick Mark okay people can come and register as a subscriber now in the time zone you can select the time zone and based on your country you can select the time zone I am from India so I am selecting the Kolkata time zone now click on Save changes now in the settings you have permalinks click on that and some other permalink structure will be selected you have to select this one post name permalink structure select this and click on Save changes again come back to your dashboard with this all the basic settings related to our WordPress website are now 100 completed now let me again come back to the edge panel and show you few more things now as I said you earlier that you can create up to 100 websites uh with this plan now in future maybe if you want to add one more website in this hosting plan how you will do that so let me show you this thing and with that I'll also show you one thing if you have some external domain name for example if you have registered your domain name on GoDaddy and if you want to use it with host Ranger how you can do that okay you have to do one setting you have to change the DNS server I'll show you how that is done first of all come to websites maybe if you have if I want to create a new website I'll click on this option create or migrate our website okay now I'll have to select whether I want to create a website or migrate a website so I'll select this option I want to create a website okay now what platform you want WordPress obviously we want WordPress so we'll select WordPress now for WordPress dashboard we have to enter the email address and password for the WordPress dashboard same steps which we have already seen they will recommend you a few plugins we don't want it so we'll click on skip again they will recommend you few themes we don't want it again we'll click on skip now the same step is happening again we have already seen this thing claim a free domain bio domain this time you want to select use an existing domain so we'll click on select and you have to enter this domain name so there is this domain name.com that I've registered on GoDaddy maybe I want to use this domain name with host Ranger so I'll select this domain click on continue now this will tell me where this domain name is registered so here as you can see this registered on God ID this is my existing name server okay it is hosted on A2 hosting currently we want to change this thing we want to host it on host Ranger okay so we have to change the existing name server to this required name server okay this thing at the right hand side so go to good idea or wherever you have registered your domain name here as you can see it is on good ideas I'll go to godaddy.com login to your account and once you log into your account you will see all the different domain names that you have registered so as I said earlier we are using we'll be using.com selection.com click on DNS now whatever domain name registrar you're using whether it's GoDaddy whether it's namecheap you'll always see the DNS option so you have to select the DNS option and you have to change your name server here as you can see this is my current name server I want to change it they might ask you a few things so they might ask you whether you whether you really want to do it so you have to select the bottom option yes enter my own name servers now you you'll only see two options by default so you have to delete this name server like this come back to this page copy this name server paste it over here then copy the second name Server Like This and paste it over here make sure no extra space or blank is available and after that click on Save now once you click on save it can take up to 22 24 to 48 hours to link your domain name with host ninja so once you do this thing now click on continue and if after that you can finish this setup all right now once it is done again you don't have to do anything just click on this host changer logo at top you will come back to this page now let's see how you can migrate your website again steps are all same you can click on this option I will if you click on the user icon you will see migrate website click on this migrate website option click on ADD request now enter with what domain name you want to register or migrate so maybe I want to migrate this thing block dude okay and you can use this option use WordPress login so you can enter your WordPress login URL basically you can enter your WordPress dashboard link which is your website name slash WP hyphen admin after that you can enter your WordPress username and password and they will you know it might they will migrate your website for free if you don't understand anything if you have any problem you can always is raise a ticket and they will help you out okay so this is how you migrate your website and this is how you connect external domain name with hostinjure and how you add you know multiple websites here as you can see we have added two websites you can add 10 20 30 different websites in one single hosting plan again let's come back to our dashboard first now let's start installing all the required themes and plugins first let's install the page builder because that is the most important thing so page builder will help you to design and create all these kind of different pages so this entire page in fact this entire website is created with this page builder and this is a free page builder you don't have to purchase it 100 free so to download this page builder you have to open a new tab and type in blogdoot.com Elementor okay this is the page builder that we'll be using now earlier they had the free option over here right on the website you could just click on that and you can download the free version but I think they have removed it recently here as you can see now they only have paid version so if you want to use Elementor Pro on you know one website you have to purchase this plan in so on but we'll be using the free version we don't want to use the prepaid version I'm just showing you that this paid version is also available if you want to use the paid Elementor Pro on 25 websites if you want to use this page builder paid Page Builder on 25 different websites you can and purchase this plan so you can just click on buy now and get you can purchase this plan and here as you can see 199 for 119 and you can use this page builder Pro 1 Elementor Pro expert on 25 website if you want to use in use it on one single website you can just select this essential plan click on buy now and you can use it in one website okay here as you can see for just 59 but as I said earlier we'll be using the free version so to download I want to install the free version you have to click on login you have to login I already have an account so I'll be logged in if you don't have an account you will be asked to sign up now once you sign up you just have to enter your email address and password whatever email address and password you want you can just set that thing and you will automatically be signed up on your website so just two things to sign up on the website for free now once you sign up you will see this screen okay you have to do some changes in the URL bar after my.elementor.com you have to type in this thing welcome slash install so basically your domain name should be my DOT elementary.com slash welcome slash Auto hyphen install okay whatever you see on your screen type in this thing and press enter now you will see this page over here you have to enter your website name okay so my website name is this I'll enter this website name or website URL click on check for WordPress this will check whether WordPress is installed on your domain name here it says yes now you'll get this option click on install Elementor and Elementor will be installed for you as you can see Elemento website builder at the bottom right corner you will see the install now button click on that and now here as you can see your automatically redirected to your dashboard and Elementor has started installing for you once it is installed you can click on apply activate plugin and you can basically activate this plugin then you will see this thing again you can click on this skip link or if you want you can click on this x thing you can you can cut this thing all right now let's get rid of this widget as well okay now there are few more plugins that we need so for that you can click on play plugins you will get all the plugins over here you don't have to open a new website click on add new now the next plugin that we need is for portfolio so if you search for portfolio in fact if you have you have to search for flux portfolio phlox portfolio Okay you will see premium portfolio features for Vlogs theme install this thing this is by Avatar now this will help you to use this thing this will help you to create these kind of you know portfolios or projects and if somebody clicks on that thing you can design your own portfolio or Services page or you can see your Works page or your projects page okay and this is how your single portfolio or your project will look like now don't activate this plugin right now we can activate all the plugins at once so this will save you some time next plugin is contact form 7 this is the next plugin that we need contact form 7. so install this one contact form 7 install this this will help you to create contact forms so if you go to the contact page we have created this form over here this is create using this contact form 7 plugin then we have to search for mc4wpmc4wp okay this is the one mc4wp MailChimp for WordPress install this one now this will help you to create this our newsletter thing over here yes you can see in the footer we have used this newsletter this will help you to create this thing now once you do this thing you have to now go to appearance now we need to install a new uh theme and this is also going to be a free theme so just like all the other plugins this is also free so you can click on add new and under search search theme search for flocks p h l o x you'll get this thing over here install this theme now once it is installed you have to activate this theme so click on activate and once activated they will ask you to install you will get this button basically and they will ask you to install this Vlogs core plugin you can click on install if you don't see this pop-up over here if you don't get this button you can also do this thing under appearance you will see install plugin if you click on that link you will get this flock score plugin installation link let me show you first let's uh first let it get activated first okay now it is activated and you will see this page now under this option if you click on under flux if you click on plugins here as you can see under recommended plugins we have flux portfolio which we have installed then we have all the other plugins whatever plugins you want all the plugins will be available over here so if you want to add some extra plugins you can do that thing from here now let's click on plugins and let's activate all the other plugins as well and make sure to always update uh the theme or Plugin Whenever there is any new update available for theme or Plugin make sure to always update it now tick mark mc4wp flux portfolio and contact form 7 and under bulk action select activate and click on apply make sure all your plugins and themes are now activated next thing that we need to do is we need to make sure that auto updates is available so for example if you see for Elementor the current version is 3.9.2 maybe after one week new version comes 3.9.3 then we don't want to do it manually we want it to get updated automatically so again you can stick Mark enable auto updates for all the plugins and also for theme go to appearance and click on this theme and click on enable auto updates now you can even delete this 2022 theme okay now this is the free version of theme we are using this theme is also available in pro version in the premium version and at a very affordable price so if you open this link blogdoot.comx will automatically be redirected to this page and here as you can see just for 39 dollars you can purchase this theme for Lifetime okay so you don't have to renew it every year for Lifetime you can purchase this theme okay this is the theme so if you just spend some extra money you can have the premium version and with the premium version here as you can see you have 200 plus completely built websites plus many different you know Elementor elements and different widgets which are you know created for you many different pre-made designs and layouts are also created for you just for 39 for a lifetime okay again I'm saying we are using the free version but if you've spent just some extra dollars you can use the provision as well now once you install this Vlogs theme and once you install all the free plugins that have shown you over here after that you can now start creating this website now first of all again if you come back to your website refresh it because we have changed the theme the design of the website is changed now this this website by default is very wide I don't like this thing I want to make it like this here as you can see the left hand side and also at the right hand side we have a nice amount of space if you see nice space both at the left hand side and at the right hand side the content starts from here left and right we have some space but here if you see content is starting at the very left and ending at very right so we want to get rid of this thing we want to decrease this space so to do this thing you will see this customize Link at top click on this customize link and over here you have to select this option you will see the general option click on General and select General layout and by default here as you can see 1600 pixels is selected we have to select 1200 pixels now if you hide this thing now as you can see we have nice space at the left hand side and also at the right hand side same thing for the block also come back now click on blog and because our blog also if you see the demo website blog also we have some space at left and right okay so we want both for archive and also for single block we want this extra space set left and right so again you can come to a customize click on blog single post for single post also you can select 12 1200 with for Blog Page also you can select 1200 width okay like this and a single block rest everything is fine there are other settings as well but we'll see those settings later on for now you can just click on publish now I also want to do one thing if you see the default font family that you're using throughout the website this is the font family that we are using okay this is called nunito font family so you can do one thing you can come over here click on this option General option select General typography and under General typography setting you'll see body okay you can click on this pencil button and the font family you can select you can just type in unit n-u-n-i-t-o okay select this option and now as you can see the design of this text is changed we also want to change the font family font style basically we want to change the font style for title for all the other things so you'll see heading select heading and again under font family select unit okay now as you can see home also is changed similarly for all the other option heading to heading 3 heading 4 make everything new toe okay n-u-n-i-t-o select the same font family throughout this website okay and finally for heading 5 as well foreign okay same font family now I'll explain you and I'll show you the I'm I'm just setting this font family because this is the font family that will that I'll be using but I'll show you like thousands of different font families or font Styles basically font Styles letter Styles you can select any one of anyone that you like I like this one for this website so that is the reason why I'm selecting this thing now let's again come back to the dashboard now let's actually start creating the home page so to create a new page you click on pages at the left hand side and sometimes it might happen that these pages will be created for you okay home page contact block page all these pages are created for you sometimes it might happen that these are not created for you so let me actually do one thing let me delete these pages okay you don't have to do it I'm just showing you that even if it is not created for you automatically how you can do it from scratch to so to create a new page or to create your home page you can click on this add new button now because this is our home page under title we'll type in home okay so just type in home now if you just publish this page right now and if you open this page in a new tab okay you see this view page link or if you see this thing at the right hand side uh page address this blue button view page if you click on this thing you will see this page so this is how the home page is looking right now now we have to do some changes on this page first of all we don't own this title and we also don't want this breadcrumb because if you see on the home page we don't have any such title or breadcrumb okay like this thing so what I'll do is I'll select this option I'll select the title bar and I'll make it no okay then after that for the layout we want this option full content or full width option the third option select this option okay third option and after that for top margin you will see display top margin we don't want it so we can make it no and after that display uh go to button we want it so we can make it yes go to button is this if you scroll down here as you can see at the bottom right corner you'll see go to to top button okay so this is the we want this button so we'll make it yes yeah rest everything is fine okay so you have to do one thing you have to make the title bar no under layout make it content full width okay and disable uh top margin and once you do this thing again if you update this page again if you come back over here and refresh it now you'll see a blank page okay so now here as you can see we have a blank page we don't have any title subtitle now we can design our own website but if you see in the URL bar here it says your website name slash home and if you see the demo website here does not say slash home although we are on the home page it does not say slash home and if you click on blog if you click on your website title you're redirected to some other page okay some a page like this as you can see so what is basically happening right now is this page that we have created this home page this is just a regular page we have named it home but just by naming it home this does not become your home page we have to set this page as a home page so let's see how that is done again come back to your dashboard click on this W icon WordPress icon now click on settings or hover over settings and click on reading and over here you will see your home page displays right now your home page is displaying your latest post we want to display a static page so select the second option a static page and under home page select this home and click on Save changes now again come back over here now if you see now you'll see once I refresh this thing you'll still be on this same page but this slash home will disappear let's see if I refresh still on the same page slash home is gone now if I click on blog dude still on the same page so this page has now become our official home page now if I click on pages now here as you can see besides your home page now it says front page this is now your official front page now let's start designing this page so to design this page you'll click on this edit button and you will get this button added with Elementor because of the Elementor page builder click on this button edit with Elementor button now first of all Let Me Explain you what this element of page builder is and how it works now all these Pages whatever Pages you see whether it's the home page about page Blog Page all the pages are divided into different sections so for example here as you can see this is our first section hero section then this is our second section Services section then we have the third section about a section fourth section is our recent project or recent work section and similarly we have few more sections so basically you have to create your website section by section and we'll be using these elements here if you see at the left hand side we have different elements these elements are used in fact I have used these elements to create this entire website and I'll show you how you can use these elements to create this website okay so first what you do is you add a new section so to add a new section or to add a new row you click on this plus button and you select how many columns you want so in this case in the first section here as you can see we have two columns left hand side we have the text right hand side we have the button in the next section or in the next call in the next row we have four columns 1 2 3 and 4 okay then in the third one we have two columns and so on and so forth so maybe I want three columns so I'll select three columns over here and now you'll see a page like this now once you select the column you will see at the left hand side earlier we were seeing the elements now the elements have disappeared and now we see this setting edit section okay now again if you want to go back to those elements you can click on this nine dots icon if you see this nine dots icon click on this thing and now you're redirected to this thing and this is the element that you have to use for example if you want to create a button like this you can just drag and drop this button element over here and again once you use any element left inside settings will change now here it says edit button and for every single element you will have three options content style and advanced okay whatever element you are using these three options will be available content style in advance under content you'll just change the content for example uh what is your link what is the text so instead of click here I'll Type in read more now as you can see text change under style you can change the style for example instead of white color text I want to make it let's say red color text now as you can see text is red instead of background color this color we want to make it maybe let's see this green color background okay so you can do it like this so this is how you can design your website this is how you can design your page this is basically how you can design your element whatever element you are using button element or whatever element then under Advanced you will see all the layout option background option positioning animation all these options again if you want to come back to elements click on the nine dots icon now maybe if you want to use icon okay this icon element so you'll simply drag and drop this element maybe I want it in the middle column so I'll drag and drop it over here again at the left hand side now you see edit icon now instead of this star icon if you want maybe some other icon maybe upload icon will select the upload icon then if you want to do this styling you can change the sizing of this thing you can even rotate the icon you can then change the color of the icon okay whatever color you want you can change the color of the icon like this okay and then under Advanced you can change the margin positioning Z index motion effect all these things okay so this is how it is done now let me actually delete this thing so I'll click on delete section and now let me show you from scratch how you can create this website so first let's see how we can create this section this home page section the hero section here as you can see we have two different columns left inside we have this text right inside we have the button so we'll add a new section click on the plus button we want two columns we'll select this two column thing now with the left hand side the first thing that we have is this title subtitle and text so for this there is one Element called modern heading if you search for modern heading you will see this thing okay you can just click on this search you can just click on the Search widget and search for modern heading once you see this modern Heading by flocks you can simply drag and drop it over here and now what we do is we just select this option this is our title why chooses so I'll paste in this thing under title why choosers then we have this is our subtitle so I'll copy it like this and I'll use this thing and we don't want any divider here as you can see divider is on if you see over here we don't have any divider let me hide this thing if you click on this thing hide panel this will be heading if you see now we have this divider we don't want this divider so I'll do one thing I'll make it no now if I again hide this thing that divider is gone Okay then if you minimize this thing and maximize the second one secondary heading now in the before text type in this thing whatever want whatever you want as your secondary heading type in that thing then we also have this text so again I'll copy the text under description I'll paste in the text now whenever you copy and paste don't just paste it like this okay just don't don't right click and click on paste or don't press Ctrl V okay if you just press Ctrl V it will also copy this styling sometimes so best way to copy paste text from any website is to follow this option copy it from here okay come over here and to paste it press Ctrl plus shift plus v okay this is the best way to paste text from different website on your website okay so this will now copy only this text and this will not go copy any styling now go to style now let's see how we can style this thing so first of all we have to style The Heading In The Heading you can see this size is very small the size of the heading is small and this is the color that we are using now if you go to any website and if you see any beautiful color and if you want to know what color code if you want to know the exact color code of this thing we can just click on this thing for example if you select this like this and right click on this and click on inspect now once you do this thing you will see a page like this now here at the right hand side you have this CSS thing you have this styling thing and here you can see the color code over here okay if you see properly this is the color code copy it like this just you just need to copy it you can cancel this thing come back to your website let's paste in this color over here so here as you can see we have the color for heading make sure you're under heading and under color select this color and paste in the color now as you can see the color is changed now you can do one thing you can save this color code because you don't want to go again and again and copy the color code come over here paste in the color code so you can save this thing so to save this color code you can click on this plus button create new Global color and you can name it anything so I'll name it purple okay or whatever color name you want and click on Save next time when you want to use this color you can simply click on the globe icon and here as you can see this purple color code is already present for you now we have changed the color let's change this styling okay so we'll come over here under typography click on this pencil button this is already in unit 2 so you don't have to change the font family change the size okay so you can change the size like this or maybe if you want to change the font family you can come over here select the font family or font style and you can see hundreds of different font Styles you can also see this style how that will look like okay for example if you want this Berkshire swash you can select this thing and this is how your font family will look like okay so whatever font family you want you can just do it like this and you can search for that thing okay if you want any cursive we can select this caveat for example okay or if you want you can go to this website fonts.google.com and over here you can see all the different font families you can just type in any sentence and you can type you can see how that will look like okay in what font family if you want to you see specific specific style or type of font you can search for that as well font properties uh not font properties you can select typing under category yeah maybe I want only handwriting thing so I can untick all the other thing and just make sure handwriting is on and now as you can see we have all these handwriting thing all the handwriting fonts available whatever font you like you can use it for example cookie is a good font family I use it very often so maybe if you want to use the cookie font family you can come over here and search for cookie select and now as you can see this is your font family you can increase or decrease the size okay this is how you design it so this is a very very you know useful website phones.google.com always come you can always come over here to see what font family what how your sentence will look like in what font family okay you can also search for some other languages for example if you want to see Arabic font family which font families are available or which font families are supported which font families basically support Arabic you can search for this so here as you can see note to Natural leak this is again very useful for Urdu for some Regional languages you can see what font families support this thing okay so you can use this thing if you're creating a website in Arabic you can use these font families so if your text is in Arabic instead of English you can select that thing now again we don't want this thing so I'll select the default font family okay so I'll go back to default and we don't want this big we want to decrease the size of this thing we want to make it 20 and after that you can select the weight you can increase or decrease the weight now if you select 900 this will become very bold as you can see if you select 100 very light you can see this thing we want to keep it in Center so maybe 500 you can also change the line height if you increase or decrease the line height line height is basically the space between the line if you hide this thing and if you select it here as you can see this thing is line height what how much space you want at top and bottom okay so that when you are adding multiple lines for example here we have two line you can select how much space you want between each line so that is what a line height is so now I'll decrease this thing we don't want this much I just wanted to show you basically the most uh the basic concept for line height is make sure that your line height is always double the font size so if your font size is 20 line height should be 40. okay this is the common thing if you want you can do some changes as well obviously but this is the default position then after that you can also add some letter spacing or word spacing so between each letter you can add some spacing like this okay as you can see between each letter and also between each word also you can add some spacing I don't want to do this I just wanted to show you latest spacing I want to add it but not this much just one pixel okay a little bit spacing between these letters all right so with this we have completed this thing now I want to select the second option okay you can also control how much margin padding or radius all this thing you want so maybe if you want to control the margin you can dealing this thing first maybe I want margin at bottom 20 pixels okay so here as you can see you can type in 20 pixels much Genet bottom now let's hide this thing let's select the secondary heading okay which is this thing this is your secondary heading and again if you want to see the color you can just select right click inspect you can see what color code they're using so here here as you can see this is the color code they are using if you click on this color this is the color code this is basically the black color press you can cut this thing and you can commercial for color you can type in this color okay for black color code is 0 0 if you type in zero zero zero six times this is the color code for Black so I'll again save this thing and I'll name it black click on create now let's select this typography let's increase the size now this is going to be quite big so I'll change this thing to 74 pixels and I also want to make it Bolder okay so I'll select 700 pixels weight now as you can see we have a lot of line height we don't want Line This Much line height I just want little bit of line height so I'll just type in 80 pixels over here okay now as you can see 74 pixels is the size and 80 pixels is the line height okay earlier in the previous thing I exp I told you in fact it was a mistake that the line height should be the same also should be the double in fact line head should be the same most of the Times line height should be the same okay so whatever your font size is line head should also be the same if your font size is 80 you should see you so you should have line height of 80. again I am saying not compulsory this is just the default value that you can have then after that for this also if you want some letter spacing or anything like that you can have it we don't want it so I'll you know just bring it like this and again how much space you wanted bottom you can control that I don't want that much space I'll type in 20 at bottom okay so we want 20 pixels at bottom you can also control the max width okay so for example I want to maximum width of only 450 so you can have 450 over here or if you want you can have you can increase or decrease the max width okay so maybe I want 550 max width okay then we have the description option this simple text so we'll select this thing again let's see the color this is a light color that they're using I think dark gray color or light black color you can see okay here as you can see is the color code if you click on this thing this is five five zero five zero five zero is the color code okay so we'll come over here paste in this color and again I'll save the color in fact I name it this same color code so we know that this is light black color kind of thing okay light shade of the black color now for this size will be just 18 pixels and we want it lighter so you can select 300 or 400 whatever you want okay this is lighter font family font weight and after that for this also if you want to add some lattice spacing or line height so for this maybe line height of 30 pixels just to increase some line height between these lines okay and after that for this also Max with I'll select 550 okay you can increase or decrease the max width as you can see maximum width you can increase or decrease it like this I'll type in 550 over here then at the bottom we have this button okay so for this button we'll you will use the button element now the multiple button elements so here we want to use this one button by flux you'll see at the top right corner it will say flux okay so this one button by flux drag and drop it at the bottom first of all the text over here says read more we have read more but we want it capital we want it all uppercase okay so we'll Type in read more over here now we can also link this thing so when somebody clicks on this read more button where do you want them to be redirected so later on when we create the home page all the other Pages we can select that thing for example when somebody clicks on read mode we want them to be redirected to the about page so you can have that thing as well so you can type in the about page link over here and we have not yet created that page once we create that page we can add that link now let's style this thing first of all what shape you want so here as you can see this is rectangular shape the corners are all sharp okay now if you select this shape in the second one rounded now the corners are rounded if you want to make it circular you can also select this circular now the corners are now circular okay so we are using this circular option or we are using this curve option so we want to use this thing now for padding padding is this space uh let me show you what padding is if you just delink it it will become zero now as you can see no padding so how much space you want from all these sides so you can have that padding over here now for padding I want for for top and bottom I want 15 and for left and right we want 40. so 15 top and bottom 40 left and right okay so this is your button and after that we have this skin now there are some pre-made skins if you just select the blue color for example this is the blue color style that you get green color so they have some pre-made designs available if you want you can use it I don't want to use this thing I want my own background color and all the other colors so we'll select the background type okay now over here if you see this color this is a gradient color and the right hand side we have dark purple at the left hand side we have in fact at the left hand side we have dark and at the right hand side we have the light shade of the same color so let's see how that is done so for that under background type you will select the second option first is classic second is gradient you have to select gradient for the first option we want dark purple now is is you can see second color is already selected we don't want this color so for the second color I want light shade of this color so let me actually see if we can get this color code right click on the button click on inspect yeah this is the second color ad77ff okay I'll copy this color code come over here paste in this color code and I'll save this thing as well okay I'll name it light purple for example okay or whatever color you want create now here as you can see we have this style now the degree is a 180 degrees okay so one at top and one at bottom so the darker color at top and lighter at Bottom I want the darker color at the left hand side okay okay so you can change the angle here as you can see once you do any changes this is how it will look like so whatever angle you want you can select this thing maybe I'll select 115 okay 115 is looking good so I'll select this Angle now we can also add the shadow you can see we have this shadow in the uh button so to give it some more emphasis we want to add this Shadow okay so first I'll copy the color code this color code dark color color code go to box Shadow click on this pencil button by default you can see once you just click on this pencil button for box Shadow this Shadow is already applied over here this black color shadow I want to change the color of this Shadow okay so I'll click on this pencil button under color type in this color or paste in the color okay now as you can see the shadow is very much visible now you can also control where do you want the shadow horizontally vertically and how much blur you want more and less then how much spread you want you can also select all these options okay if you want to keep it very simple so for horizontal I'll select three vertical it will be four and for blur we want to keep it at 10 and I don't want any spread so maybe zero okay just the default option and I want to decrease the transparency I don't want this dark shadow so I'll decrease the transparency of this Shadow maybe till here okay this is looking good okay so the second option is to decrease or increase the transparency okay so maybe I'll keep it at here all right now it is looking much better if I hide this thing we have this beautiful Shadow and all now we we have few more things to do we don't have any icon over here so we'll skip the icon click on text let's fix the text first of all I don't want text Shadow if you see properly there is some Shadow on text as well I don't want that shadow so if you click on this pencil button click on this color and as I said you earlier the second option is for transparency bring it at the extreme left okay so that the transparency is zero okay so we don't have any Shadow for text we don't want any Shadow for text now let's change the typography for this text now font families nanitos so we want to change this thing we don't want uni to font family for the button we want Poppins font family so if you search for pop-ins you will get this pop-ins font family select this thing and for size I want 16 pixels okay increase it and after that I want to make it lighter so I'll select 300 weight okay and after that we want line height of 23 okay now this is looking so much better if you want you can also add some letter spacing if you want one pixel not 12 one pixel letter spacing or if you want even you can also add decimal if you want 0.5 for example you can have this much as well okay this is now looking much better let's bring it at left so click on wrapper and select alignment left Okay now click on update whenever you do any changes on your website always make sure to click on this update button so that whatever changes you have made is now updated now at the right hand side we have this image okay so here you can see we have this image so these kind of images you can download it for absolutely free if you want if you go to this website unsplash.com you can download these kind of images for free there are other websites as well for example there's another website pixels.com if you go to this website specials pixels.com you can search for anything for example if you search for office team anything like that okay here as you can see you can get these kind of images for free whatever image you want if you want a guy in blazer for example you can just type in guy Blazer okay whatever you want okay a girl on bike okay you can type in that thing and you will get images for that all right and hundreds and thousands of different professional images you can get it for free similarly whatever you want you can just search for that maybe I want to use this one okay this image maybe let's use this one okay this is looking good now to download this image you can just download just click on download free but these are very big sizes okay big very big file size and resolutions we don't want this big image so always click on this you know down arrow over here you'll you can now select this thing for example if you see the original sizes 5760 and something like that we want this medium size okay this small size basically so click on this medium and download the medium size for this one now once this image is downloaded you can use this image on your website but that is not to very much recommended because if you directly use on your website we don't want to directly use this image we want to add this shape on top of this image so there are several ways of doing it the one option that we are going that we are going to see is there is one website called pixlr.com okay pixilla.com e p x l r p i xlr.com e now here you can click on this option create new and you can select the width and height that you want so in this example maybe we want 550 width and 580 height if you want you can hit and select 750 780 850 880 anything like that or 800 by 800 you can select that as well now once you select this thing click on create now you'll see this simple canvas over here now we we want to use that image on top of this canvas so we'll click on this plus button if you see at the you know bottom right corner we have this plus button we have to add a new layer of image so click on ADD image layer now you can use this image click on open and here as you can see because this is a big image this is how it will look like if you want to resize this image you can do that thing as well okay you can do it like this you have to find the corner here's the corner you can do it like this you can resize the image all right like this all right and maybe you can select what section you want so maybe we want this much section okay now whatever shape you want you have to select the shape so for shape again we have to add a new layer okay so we'll click on this plus button again and this time we'll select shape layer Okay click on shape and this is the default shape that you'll get if you want to use this shape you can use it if you want to use maybe this rounded shape you can use that if you want to use Circle you can use this circle or if you want to use some other shape you can click on custom okay after that you'll see this shape option click on this and you'll see all these custom shapes so for example you can use this one okay this is a good shape or if you want you can use this one as well okay or if you want to if you want you can even use some you know abstract shape like this one okay so this is another shape you can first of all increase the size like this okay let's see just make sure this is not cutting fine so maybe this is looking good now once you have this shape selected after that you can click on this magic band icon okay here you see the magic band thing select this and now click on this shape now this shape will be selected as you can see the answer is selected you can now click on this image at the right hand side you can see this layers we want to select the image layer so click on this image layer and after you click on this image layer press Ctrl I to invert this selection now the image is selected and now after this once once you select this thing after that just click on delete now the image is deleted now once the image is deleted if you want first of all click on this thing first of all let's deselect this thing so press Ctrl D everything is now deselected after that you can click on this Arrow icon okay arrange icon and now if you remove this piece if you just move this space here as you can see we have the image so in fact again you can do one thing you can select the shape and you can delete this shape okay delete it like this and now we have this image in this shape whatever shape you selected and now we can go ahead and you know uh save this thing so click on file save make sure it is PNG okay so that we have transparent thing or else this transparent thing will be replaced with white background we don't want that so make sure you select PNG or web P okay anything like that PNG is also a good web piece also good whatever you want you can select this thing in fact web p is better because the file size is smaller as you can see webp and this size is 77 KB sometimes webpage not accepted so you have to see that so maybe I want 90 quality so I'll select click on save as and maybe I want to I'll just name it shape Okay click on Save shape dot webp now you can use this image on your website so if you come over here and if you use the air first of all you have to drag and drop the image element at the right hand side okay in fact not the regular image element let's search for advanced image okay drag and drop the advanced image element over here now click on this thing and upload this image webp image that you just downloaded okay so as you can see this is the image we'll select this click on open and once it is installed click on insert media and you here you have this beautiful image make sure you select full size image for this one okay and after that whatever you want you can do it now I don't want to use this image I want to use obviously if you want you can use this image I just wanted to show you that this is how it is created I just want to use this image that I have used in the demo website because we want to just create the same website as the demo website so what I'll do is I'll open I'll upload that image over here in fact if you see let me as I said ideally in the introduction I'll be giving all these images whatever images I've used to create this website I'll be giving everything for free so there will be a link in the video description below if you click on that link you will be redirected to my website blogdoot.com and here for every single tutorial I always create a blog post like this one for example for my business listing tutorial multi vendor e-commerce tutorial gym website tutorial whatever tutorial you open you will see a page like this so once you click on that link which is given in the video description you'll be redirected to a similar blog post at top you will see the video that you're watching right now and after that few important links and over here at the bottom you'll see download free images once you click on this download button a zip file will be in you know uploaded for you a zip file will be downloaded for you and this is how this ZIP file will look like okay this is our ZIP file looks like you have to right click on this this is not the file by the way I have not in fact created the file but by the time you're watching this video that file will be created and you can download it once you download the zip file you have to right click on this and click on extract files once you click on extract files you will have you will have this media folder over here okay under media folder you will see all these images that I've used I'm giving it for absolutely free we also have pages okay Pages Styles I'm giving everything for free I'll show you how you can use these pages in style but you can see the images and everything is now present for you so let's see let's use these images again I'll come back over here I'll replace this image with my own image okay so I'll open the media folder and let's see I have this image I think this is the one okay so this is the one this is the image that we want to use I'll select this click on open now click on insert media okay where I have this image over here now once you have this image after that you can again click on make sure to always click on update and now let's do one thing let's add these options so here as you can see these are patterns if you see this dotted pattern and then we have this thing then we have all these options these are some some of them are images some summer pattern again I've given you these things as well if you open the media folder and here as you can see this is the this is one image I've given you all these images that I've used to create this website okay so if you see this purple circle this is this pattern okay this purple circle pattern that is the one if you want you can use your you can create your own patterns as well so there are many different websites in fact you can create your own illustrations you can create your own pattern instead of this image if you wanted to use some illustration you could go to this website undraw.com slash in fact undraw dot Co slash illustrations so if you don't want to use any image like here we are using this image instead of this image if you want to use any illustration like this you could use this illustration as well maybe if you want computer or any other thing you can just search for this if you click on search maybe I want to suppose mobile illustration so if you search for mobile here as you can see so many different illustrations if you click on maybe let's let's select this one maybe I want this one so you can select this click on download PNG if you want to have different color you can select the color code as well for example if you want this in orange color a purple color okay whatever color you want you can select this thing and then you will get this color code you can click on this thing and you can download it so this is the website from where you can download these kind of illustrations and if you want to create your own patterns like we have this thing you can go to this pixlr.com you can create your pattern over here as well whatever pattern you want for example here as you can see this line pattern you can select this option come over here select the draw icon okay create your own patterns like this okay these are obviously this is not good this is very bad but you can use some Advanced things to create any pattern like this or you can download your free patterns as well like this dotted pattern so for that you'll go to this website toptill.com designers slash subtle patterns okay this is the link you have to go to and here as you can see whatever you want to search for again you can search for that thing over here if you want to search for dotted or if you want to search for some other thing you can search for that thing you can click on view all tags and whatever you're using maybe if you're searching for patterns with coffee you can select coffee and it has coffee mug in the pattern click on this thing okay it is not the coffee mug thing is somebody just uh scanned a coffee cup and they have this thing but if you want a dotted thing fabric thing as you can see fabric pattern white pattern whatever pattern you want you can select that thing okay I want to select this option I'll again come back here as you can see we have floral pattern as well so these are all different patterns that you can use instead of if you want a dotted patterns as well you can use dotted patterns as well many different like thousands of different patterns are available maybe if I want to use let's see let's see let's use this pattern okay maybe I want to use this pattern so you can select this thing and you can click on download pattern a PNG file will be downloaded for you here as you can see now again if you open this file this is how it will look like now we don't want to use it like this we want maybe a circular pattern let's see how we can make it circular so for that you can go to this website photo.com fotor.com I'm basically just giving you all the different you know so all the different resources free online tools that you can use to do all these things non-photo.com you can click on Editor Photo and you can click on open photo or open image and let's select that image that we just downloaded this one open okay now once this now this image is installed now I don't want this image in this shape I want to change the shape so what I'll do is I'll click on adjust and under address I'll crop this thing but I'll crop it in this uh in this circle thing okay I'll select this circle and now as you can see you can select how much you want to crop I want to crop this much Okay now click on apply and now we have this pattern over here okay in circular form or if you want it in different shape you can have that thing as well if you want you can even blur this if you want you can add you can rotate it you can resize it you can you can do all this thing if you want to add some other element on this on top of this one you can do that thing as well here as you can see all these elements are available for you so here also you can search for your own patterns actually okay so we have these elements available now once you have this pattern you can click on download and again make sure you download in PNG so that you have transparent background okay and download this thing and this will be downloaded for you all right so this is how you can create your own patterns if you want to use the regular rectangular pattern you don't have to edit it just download it and use it on your website okay let's see how we can use this pattern on websites like this one for example I want to use this thing okay so again we'll do one thing we'll use Advanced image search for advanced image drag and drop on top of this image okay and let's upload that image okay I'll go to Media and in fact let me upload this dotted all these images at once just to save some time this pattern also and all these images purple circle we have this thing I think we had one more image for the title here it is let me upload these images for now okay okay sometimes you might have some problem with the SVG file okay because these were all SVG files they did not they were not uploaded properly so don't worry you there is one another way of uploading the SVG files you can come back to your dashboard click on media and you can upload the SVG files from here from the media folder so I'll do one thing I'll select all the SVG files okay SVG files will look something like this with Google Chrome icon or Microsoft Edge icon okay so these are all images as well but these are different you know the file file format is different you can drag and drop these and now as you can see these are all getting uploaded now this is as you can see lighter version okay okay smaller one this is a little bit darker version but okay you can see the size and everything is given to you now let's use this image first of all we'll have to click on this image choose image if you have any problem you can refresh this page now again click on this image and now we can select this image let me select this darker one we have used the darken a darker one over here so this is the dark one click on insert and now as you can see we have this image but we don't want it over here we want it at the on top of this image and over here at the bottom left corner so first of all under image size I'll make it full go to settings and if you want you can also increase or decrease the size for example Max width if you want a smaller size you can decrease the max width thing okay I'll delete it I want the same size now go to Advanced to change the position of this thing you have to select this positioning option okay you have this positioning by flux select that and select absolute positioning okay now this will disappear because uh because this is this image is now behind this thing behind this main image so if you want to bring this uh image on top you can do one thing go to layout and change the Z index to increase the Z index to 1. once you increase the Dizzy index to 1 or if you don't see it on one you can keep on increasing the number until an unless you see this image I'll just keep it at one now once you keep it at one again if you come back to positioning now you can change where you want this image so from Top I want to bring it at uh at bottom and from right over here all right like this all right so this is how it is looking again if you hide this thing you can see how this will look like and you can again always come over here go to style if you want to increase or decrease the size maybe we want only 80 percent okay I'll select percentage eighty percent all right you can always increase or decrease the size okay maybe I don't want hundred percent I want 80 again you can go to Advanced go to positioning and you can control where you want this image all right so maybe we want it over here fine now let's again use the advanced image drag and drop it over here at top of the image now this time let's use this one click on insert image size this will be full size go to Advanced click on this image go to Advanced make sure again Z index is at least one then go to positioning absolute positioning and wherever you want it okay so from top I'll bring it over here and all right okay so you can just bring it wherever you want fine let's use another image for the third one for this one so we'll upload this image click on full size first of all and this is pretty big and this is because the background color is also white we are not able to see properly so we can do one thing we can also add Shadow to this image as well so if you go to this option go to this style and add box Shadow okay now we'll see this is how it will look like now we can again under Max width we want to decrease this thing to maybe 60 percentage all right and now I'll bring this thing again make sure at least Z index is one and then go to positioning absolute and you can change the positioning okay so I want it over here right and this is how it is looking you can see if you have any problem you can go to style and actually you can do one thing background color make it transparent like this it will look much better all right so we have this thing we have this Shadow and all this is how it is looking you can change the Box Shadow if you want to make it uh darker or if you want to an increase or decrease the horizontal and vertical thing in case the blur and all you can do that thing okay this is how it is looking you can change the shape and everything but this is basically how it is looking okay this is how you use all these options again I'm saying once you do any changes make sure to always update this page now once you do this thing finally we have to do we have to see this option we have to see the main row or main section now in the main section you can see we have this background color so I'll copy this background color this is FC fbff or if you want you can do one thing for this background color we want if you see properly the background color is also very light shade of this purple color so if you want to have different shades of this purple color you can go to this color see the color code this is your purple color there is one website called make 18 Shades so if you go to this website make tins and shades and if you paste in whatever color code and click on make tins and sheets here as you can see we have all the different shades lighter and darker shades for this color I want the very light color over here so I can copy this color code this one come back to my website select edit section now go to style I want this color in the background so I'll select background type color paste in this color okay now this is very dark like it is very light but still it is dark so you can do one thing you can increase or decrease the transparency so we can make it a little bit more transparent okay like this okay now it is looking purple but very light pale color a color purple okay so this is how it is looking and this is looking much better now we need this extra space at top because our header will be hanging around at top or it will be you know it will not be sticking at top so we have some extra space so we need to add some extra space at top so we'll select this option we have added this background now we'll go to Advanced and we'll add some padding from top so select this option and at top padding we want 180 pixels like this okay now it is looking extra but once we create the header uh this will look better header will come over here and that top header will disappear then it will look much better then after that we also want to do one thing we want to add animations in fact before that we also have this uh we have this as well we have this image as well at the left hand side so let's add that image as well I'll add Advanced image and this time we'll maybe add this image over here below this button and light one light image okay full size go to Advanced and after that we'll go to positioning absolute okay it is over here from Top it will be over here but from right let's bring it over here let's see how it looks okay it is disappeared and decrease it a little bit okay now this is how it is looking okay you can play around with these numbers whatever you think is good okay you can keep it maybe not this much a little bit more let me type custom 520 all right now it is looking much better okay again I'll go ahead and update this page now let's see the animations if you refresh this page you will see all kind of different animations over here so as you can see we have this animation for all these things so if you want to add animation for example for for this modern heading we want to select this thing for animation you will select Advanced and you will select this option if you scroll down you'll see entrance animation now what animation you want we want to fade in down okay not fading down fading up and they are fading up one feeding up to all these things now for how long you want this thing so how slow or fast you want this animation so if you type in 1000 it will be one second okay so let me make it two thousand now as you can see it will be a much slower animation you can also add some DeLay So maybe I'll add delay of 200 milliseconds which is 0.2 seconds okay now under easing we want to select quart out okay you also you'll see this option quart out select this option now for the button you can select this button and whatever animation you want let me again refresh it see what button animation we're using so button animation is also same go to Advanced entrance animation will select again fade in up but this time let's select the regular fade enough or maybe fading up two okay you can just play around with this as I said earlier now duration this will also be same 2000 seconds or 2000 milliseconds which is two seconds and delay a little bit more so 300 milliseconds okay then you can select the image let's select the main image okay the main image go to Advanced and entrance animation this will be let's see let's select scale down for this one okay we have this scale option if you select scale down this is how it is looking but we want to obviously make it slower so 2500 and we also want some DeLay So 400 delay may be okay now for all the other images we'll select this image same thing uh we'll go to entrance animation and for this we'll select scale up okay scale up is looking good for this one and this will be fast so maybe one second but with 600 delay okay if you don't understand these things and for for ease in always select this squat out q u a r t out then select this option and this will obviously fade in from top and you won't understand anything but once we refresh the page you will see the animation entrance animation I'll select fade in uh down okay fading down one and this will also be maybe 2600 slower and delay of maybe 600 then finally the third image and we can select to maybe coming from right so this will come from right entrance animation slide from right okay maybe I want this one okay again this will also be slower so 2000 milliseconds or if you wanted to make it even more slower you can increase the number and delay will be for this maybe 800. update this page now if you open this page in a new tab if you go to your home page here you can see all the animation and everything is now working with delay and everything if you again refresh this page okay this is how it is working and this is looking much much better with animation and everything you know this is looking much better so this is how you can create this section and this is how you can add all these beautiful animations now with this we complete our first section let's see how we can create our next section now we'll be going a little bit faster I spent a lot of time because you know this was the first section I wanted to I wanted you guys to you know learn everything from scratch and understand everything properly now I hope I hope now you have a better idea about how this plugin works and what this color and everything how it works okay now we'll go a little bit faster now our second section is this section so to create this section again to create a new section we'll click on this plus button and this time here as you can see we have four different columns so we'll select four columns now in the left column we have this simple title subtitle so we have already seen we we use the modern heading first title subtitle now this time our title is our services I'll type in our services over here and services spelling and after that our subtitle is this okay and we don't want any divider so no dividers subtitle is this we are here to make your website now for the title uh the color is white will change the color later on because if I change the color to white right now okay here as you can see it will disappear because the background color is also white so we'll change the color later on for now what I'll do is I'll change the styling so we'll select the typography change the size to 20 pixels weight will be 500 and line height will be 40 pixels and we have nice amount of space in each letter between each letter so letter spacing will be 4 pixels this time now margin bottom will be adding 20 pixels okay we have already seen all these things now let's select the secondary heading now this secondary heading this is a little bit bigger in Boulder so we'll increase the size for this secondary heading to 32 pixels make it 700 because we want it bold and line height will be 45 pixels now I don't want any spacing at bottom so margin I'll make it 0 from all sides okay so margin will be zero now we want this thing uh this background thing and again this is gradient at top we have light and at the top we have this at the bottom we have this dark color and we also have very light box Shadow so let's see how we can do that so for that we'll say select this column so click on edit column okay now go to style select background and this time again we'll select gradient first we'll select the light so we'll say light purple for the second one we'll select dark okay nice looking and we don't have to do any changes because this is looking good then after that we have to add this Shadow okay so if you see border we have the box Shadow and we want this color for this shadow I'll copy the color come to the Border select shadow and paste in the color okay make it a little bit lighter now for the shadow horizontal we want this thing to be zero and vertically we want three okay and blur if we want it more okay you can increase the blur so in this case I want to make it 45 all right then after that we also want to add this border radius because if you see the corners are rounded over here if I scroll down if I hide this thing we want to make the corners rounded so for Border radius I'll type in 15 pixels now we want some padding from all sides okay so we'll select padding option let's see the padding option we go to Advanced we have the padding padding is basically here as you can see this is the text at top of the text left right and at the bottom we have this space so we want that space so padding this time I won't be using pixels I'll be using percentage so I'll select percentage sign over here if you see we have this percentage sign so for top end bottom I'll add 17 percentage and for left and right I'll add 9 percentage this is how now it is looking all right now I'll again click on this thing and change this thing Okay click on this thing okay heading okay we wanted to add 20 pixels margin at bottom now we'll add well we can change the color to white and color for white is FFF six times okay and again I'll add this color in my color code name it white click on create now for this subheading we don't have to select this color we can just click on this globe icon select white color okay now this is how it is looking now if you just create next section both these sections will touch each other so we want to add some spacing as you can see we have some spacing okay this is another spacing this is not padding this is margin because margin is outside the box padding is inside the box okay padding as you can see is inside the Box between this blue color border between this text and between this background color margin is outside the box so again if you select edit column go to Advanced we have the margin delink it we want 15 percentage or 15 pixels in this case both from left and right okay 15 pixels left and right now as you can see this is outside the box so margin is outside the box padding is inside the box simple okay then we have this option we have the second option now in this case we want to use the info box because we have the icon we have the title and we have the description so for this we'll be using the info box element so again come back to elements search for info box drag and drop the info box element first let's select the icon so in this case we want this glass icon okay let's see or maybe we will search for magnifying glass and here it is okay we'll select this icon click on open we cannot see the icon because the default color for Icon is white if I go to style and change the color you can see that thing for example let's go to icon and let me change the icon color to maybe this purple color now you can see the icon okay again come back to content and select under content the title over here is optimize and SEO okay obviously you can have any title you want and under description this is going to be our description so I'll paste in this description now I'll select the header and we don't want button so we'll select the button and no button okay now go to style let's design this thing so header position where do you want your header so header position and everything is fine we'll select the icon okay select the icon first because this is the first thing now what icon size we want so in this case we want 38 pixels okay and padding okay if you add icon background color for example in this case color of the icon is white and background color is some other color let me see what color is this this yellow color code let's get this color code here it is copy the color code ffd 100 okay so I'll add the color code over here under background color I'll add this color okay and icon color will be white so we'll select white color now I don't want this much spacing or this much padding so I'll decrease the padding to first of all we'll make it percentage and I'll decrease the padding to five percent and now this is looking better okay this is how I wanted it then after that let's see what we have next we have the title so for title what color we want so we want this color black color so I'll change this thing to this black color then after that for the typography we'll change the size so for this example we wanted 22 pixels and we want to make it Bolder at 700 and line height of 41 or just 40 okay 40 41 whatever you want now for bottom space whatever space you want you can select bottom space I don't want any space or unlike the default spaces looking good so no spacing needed then after that we have the content now content is at the bottom one so for this I'll change the color to 5050 a little bit lighter color okay so that is going to be our content now the typography this is going to be 16 pixels and will make it lighter at 400 I think it is already by 400 and line height will be 25 pixels now you can select some padding I don't want any padding so I'll make it zero okay so here now as you can see everything is now fixed now how much space you want at top and bottom you can control that thing as well I don't want this thing I'll go to wrapper now the wrapper first of all I want everything left so I'll select left icon is not bringing coming left but I'll show you a simple CSS trick which you can use to bring it at left but but text here and everything is coming left as you can see so this is working now first in fact let's actually first see the icon let me update this page come back over here refresh it so here you can use custom CSS as well so if you right click on this icon and click on inspect okay and I'll select maybe this one okay this is so once you select this thing uh the icon class here as you can see is aux hyphen Ico icon hyphen box so basically icon box okay so this is the class this is called the class if you see the very first thing this is the class and you have to select this option wherein everything is selected the icon selected background selected margin and padding is also displayed so the orange color that you see that is the margin and the green color that you see that is the padding okay so padding margin and even the content is selected and the very first class name that you see this is the main class name okay so what I'll do is I'll add I'll copy this class name come back over here and go to Advanced select custom CSS this one flux custom CSS and if you see they have given you uh this example this is how you should be using CSS okay I'll type in selector first type in selector give a space now before this CSS class you have to add this dot okay this full stop so at full stop then add the icon class okay or the CSS class not the icon class then after that open this this thing curly braces now here what we want is if you see if I show you this thing we have this spacing at left and right okay this margin this green this orange thing so I don't want this orange or I don't want the margin at left so we'll do one thing we'll select margin left so you just type in like this and you'll also also get these recommendations so select margin left and after that type in 0 okay like this and make sure to end it with this thing with a semicolon make sure to end this thing with a semicolon now as you can see this is how it is looking you don't have to do anything just copy this thing type in this thing whatever you see on your screen just type in this thing under custom CSS and this will become at left now you can update this thing okay let's let's see the wrapper now wrapper is this basically the entire content okay so let's add something under the wrapper so for wrapper for top and bottom I want 10 pixels okay and for left and right we want 40 pixels okay like this so we want this spacing 40 pixels left and right and top and bottom we want 10 pixels okay so for the icon thing we'll be using the header option and header padding and header padding bottom will add maybe 20 pixels okay so this is how we can add this extra space below this thing now again click on edit column and now we can add whatever column padding and margin you want so here also will do the same thing that we did with the First Column will add this margin of 15 from left and right okay and let's change the background color for this thing to White so go to style and background color change the background color to white and let's add this Shadow so that we can see the difference and for vertical we'll set this thing to 3 and blur obviously it was 40 okay like this and Border radius will make it 15 pixels just to make sure that our Corners are now nice rounded all right this is how it is looking and over here under padding will dealing this thing and at top only at top we want 20 pixels all right now it is looking much better now you can do one thing you can copy it like this paste it over here so just right click on this thing this element info box click on copy then right click over here click on paste right click click on paste now for column right click on this column and click on copy now right click on this column and click on paste style okay we want to paste this styling all right now as you can see this will save you a lot of time now for the second one just click on this thing change the icon to this pencil icon or this design icon okay this one okay change the text to designing okay the title to designing and just change the color Okay background color of the icon rest everything will be same and here as you can see this saves you so much time okay so this is the color I'll get the color code all right this red color and again obviously this Shadow will box Shadow okay we did not add the icon Shadow so select this icon shadow add this color and you can increase or decrease this thing and you can do some changes so make sure you add this Shadow for all these icons and click on update okay now let's select the main row we have to do some changes over here in the main row so select the main row go to style we want the same background color like we had in the for the for the top section so again go back to top section style copy the color code okay copy this color come over here second section style background paste in the same color code now go to Advanced and let's add some padding at top so we want 150 padding at top we want this extra space at top all right bottom we don't want anything just update this thing and with this we have also completed our second section okay now let's do very quickly let's create a third fourth all these other sections as well now once we create the third section after that our work will become very easy because after that we'll have to do mostly just copy paste for example if you see this thing this is all copy paste the title subtitle then the button same design title subtitle same design again title subtitle button only the left section we have to change but the title section Remains the Same okay so hopefully this will save us some time let's create a third section okay come back over here add a new section divide it into two columns now here this is all the same thing okay so again we'll not waste a lot of time over here you can go you can follow the same process like we have image then we added then we added Advanced images and we added positioning so here also we have to do the same thing first add the main image under Advanced image at the main image so let me upload the main image click on insert media and make sure this is full size image okay this is our main image and after that let's add all the other images okay these are all the extra images so again we'll add the advanced image and at top of this image maybe we want this click on insert media we want it be behind this thing so if you want this thing behind it so you can do one thing first click on the main image and change the Z index to 2 okay change the Z index to 2 then select this image make it full with first now change the Z index to one okay so this this will go be behind this 2z index okay so the higher the Z index the top uh you know it will be on the top now let's again select the positioning make it absolute and let's bring it to a show right a little bit down right let's see all right nice looking okay like this maybe a little bit outside fine click on update now these are also you can see these are also just simple images so you can use the same thing Advanced image at top and these images are already present for example if you want this one click on insert media okay and full size wherever you want we want this thing again behind this image as you can see half thing is cutting behind this image so this will be also Z index one okay we want this thing to go behind the image then again positioning absolute and let's see where it is here it is you can see I hopefully all right bring it okay all right update it now similarly for uh for this image this image and this image also you can use the same Advanced image and do this simple positioning then at the right hand side we have this thing we have the model heading again so we'll you know use this modern heading drag and drop the modern heading title is about us okay we don't want divider so no divider this is our subtitle right so we'll add this under subtitle and after that we have the text which is our description now let's style this thing so first of all for the title for the heading this is black color so we'll change this not the font first change the color to this black color then select this font now for this one we'll make it 20 pixels smaller and the weight will be 500 line height will be 30 and latest spacing this time will be a little bit more 4 pixels right and after that margin bottom we want 20 pixel space at bottom if you want you can even increase or decrease the number maybe 24 25 it all depends on you then we have the secondary heading which is a little bit bigger now this time don't change the color because it does not matter we'll be using custom CSS to change the color because the color also is as you can see if you see properly the color also uh is this gradient color okay so you cannot do it with Elementor but you can use custom CSS to do it if you want simple color you can just change the color okay and then go to typography and you can increase or decrease the typography first size I want to make it 50 we want to make it Bolder at 700 and line height will be 65. now imagine button in this case will be 25 and we want to bring this in three lines uh in fact in two lines but we want to you know decrease the width okay so we'll increase if you want to bring it in three lines also you can do it you can decrease the width to maybe 350 something like this but I want to bring this thing under 5 450 width all right like this this is how it is looking then after that we have description okay this is five zero color then we have typography and the size for this one will be 16 pixels 400 is fine just increase the line height to 25 or if you want you can even make it 30 pixels right if you want so whatever line height you want you can set that thing then after that we have the button so we'll copy this same button because the design is like you know exactly same so we'll just paste in this button over here all right we just need some extra space on top of this button so we'll select the button go to Advanced and just extra padding or margin at top of this button okay so maybe we'll add 30 pixels or maybe 40 pixels margin at top or padding at top both will do both margin and padding will do now let's select this column and click on edit columns you're not able to do sometimes some if if some things are overlapping for example this is overlapping so I'm not able to click on edit column for the second one as you can see when I try to do it this thing is getting selected so if anything like this happens you can do one thing you can use the Navigator if you see at the bottom left you have the Navigator option click on that here you can see this entire option now you you can see this is the column that we are talking about the second column okay under which we have modern heading and button so you can click on column and then you will get edit column option now the left hand side we want this space okay this space at the left hand side so I'll go to Advanced and margin again make sure this is percentage and only at left only at left I'll add maybe 27 percentage like this okay now it is looking like this much better click on update now let's select the main row so select this row to click on edit column now we can also set a height so minimum height I want 800. okay so this will increase the height of this thing and everything we want in Middle it is already in middle but if it is not in Middle you can select vertical position and all this thing to middle so everything will be will come in middle by default now for the background color we want this color so let's see I think this is F1 I guess yeah this is F1 color so I'll come over here background color and type in F1 F1 F1 and again I'll save this color maybe we'll need this in future all right so we have this color in the background now what I want to do is I want to bring this a column at top okay and let me let me explain you I want to bring this column at top and this column is uh in even touching this column if you see this is the services section but this column this is the about section so about section is going and touching half of the services section so how you can do it first of all again click on edit section go to Advanced first let's add some extra spacing at top extra padding at top so for padding I'll add 200 pixels at top okay now I'll add margin but this time we'll add negative margin because if I add positive if I just add margin for example 100 pixels this will leave this space but I want this is basically coming down but I want it to go up so instead of positive I'll just add minus sign before this and now as you can see this is going up okay and maybe I'll add minus let's see minus 185 yeah minus 185 is looking good okay so I'll update this thing or don't update it for now now because the this is bringing a top we want this section at bottom and the above section at top so again simple Z index select this select the top section Services section Advance Z index type in one okay now as you can see this is how it works now select the second section the bottom section again if you're not able to do it because of this overlapping and all you can use the Navigator and select the bottom section which is this section and now as you can see everything is working and for this what now we want to do is we want this shape divider you can see at top if I hide this thing this is just a simple line but I want this shape divider like this curve okay you can see this curve and at the bottom you can see this is also this shape that we have you know to divide this column or to divide this row or section so for top shape divider we'll select style we'll go to shape divider for top now for top let's see what we have so for top we have a simple curve so I'll search for curve which is so which is over here we'll select curve now if you want you can also add a color if you don't want any color so we'll make it transparent maybe okay maybe let's leave the color just leave it as it is okay just click on this thing this icon this will make it default now what your width or and height you want you can control this thing for example this is how it is looking if you want to control the width you can do it like this if you want to control the height okay you can increase or decrease this thing all right this is how it will look like so this is your top then let's select the bottom one select Bottom now for bottom I will uh we'll use this option okay waves you have these waves we also have waves brush and we also have some more we have I think one more was good let me see I think it was mountains yeah mountains mountains we are using in the footer if you see a footer Mount we are using this mountains in the footer all right but in this case we want simple views okay now again you can increase the increase and decrease the height and width like this and you can control the shape all right okay maybe this is looking good so you can control the shape and everything for this thing and after that you can just go ahead and click on update and with this your second section is also hundred percent completed now if you want to change the color we have seen how to have a simple color we already have a color for the heading but instead of this color if you want to maybe a gradient color like this one then you can do one thing again open the media folder under media folder you will see the pages folder and under that you will see style CSS copy that in fact open that and here here as you can see this is title now if you do if you're getting confused in this CSS you don't have to do any CSS just have to copy paste but there is this YouTube tutorial that I have if you go to my YouTube channel and if you search for that CSS tutorial in fact I would recommend you to just search on YouTube CSS okay and I would recommend you to watch this top video how to customize and design in fact you can watch all my CSS tutorials mostly the first 152 minutes one you'll learn a lot about CSS how this thing works okay right now you don't have to learn anything you just have to copy everything basically I just just understand this much that this is title okay we have this forward slash you know Asterix so this is title so that so that you know what this code is for okay so this much code till the next title starts this is where the next title starts so this much code is for text gradient color okay which means that we want to change the background color of this gradient of this text to gradient so you'll copy this much like this just copy this much select modern heading go to Advanced select custom CSS and paste it okay now as you can see as soon as you paste in this thing the color changes but the color changes to something different and I'll explain you why the color is changed to this thing first update this thing so basically what is happening is the color is changing to your primary and secondary color if you see if you read over here this is your secondary this is your primary color so whatever you set as your primary color and secondary color that will be the color for this one okay so this is a simple CSS now let's see how we can control how we can change our primary and secondary color so for that you'll have to click on this hamburger icon this three lines icon if you see my mouse cursor hamburger icon site settings and font Global colors okay and this is your primary color the blue color that is the reason why we have this blue secondary color is the gray that is the reason why by at the end you have the gray so for the primary color we want this color code so I'll copy the color code okay and paste it over here now as you can see the first color has become this thing for secondary color I want this light purple color as my secondary color again now it is looking better you can now update this thing okay so this is how it is done a simple CSS if you don't want to you know get into CSS just you can leave it at simple color you don't have to do anything all right and again make sure to always add animations and all I'm not doing it because I've already shown you how to add animations but if I just keep on adding animations for every single element that will take a lot of time but I've shown you how to do that thing so you can go ahead and add animations to these elements now let's see how we can create our next section which is this project section or recent work section now for this again we'll add a new section so we'll come over here add a new section this time we want a single row okay so if you want you can have this option like you can have actually let's have let's have a single row and then after that we can have this inner section okay now the left hand side we have this thing okay you can copy uh we can we can have we have the modern heading so we'll drag and drop the modern heading over here okay this is our title then we have our subtitle okay which is our secondary heading and we don't want this divider so same thing in fact okay why we are wasting this time let's delete this thing copy this title subtitle from Top paste it over here okay because you already have this tiling and everything we just need to change the content so recent work is the title and our web design projects this is the subtitle okay and we don't want description over here so I'll delete this description go to style and we can increase the in fact just delete this Max width delete this Max width thing we want full full width Max uh then after that we have this text so we can use this simple text editor for this one okay just simple text editor and after that we can go to style left align everything is fine if you want to change the color to any color you can do that and after that if you want to increase the size for this text for example you can do it as well now we want to make this thing we want to bring this thing in in middle so we'll select inner section and make sure vertical align is Middle okay so that it is in metal then after that we have this option so for that we'll add let's see now let's add another row for this one single row single column and inside this we want to add this option we want to add the portfolio option okay there are multiple options so here we want to use this one grid Carousel portfolios drag and drop this one grid Carousel portfolios now first just update this page and leave it as it is what we want to do is first we need to create a portfolio Okay so we'll come back to this dashboard page to create a new portfolio you will have to hover or portfolios and click on add new now let me actually do one thing open this portfolio page so that we can copy paste the title so this is the title basket of flower on table so I'll copy the title then after that this is the short description okay now first let's copy the long description the main thing okay this is the featured image the image at top is the featured image whatever text you want you can type in the text then after that you can also add some images columns for example if you want multiple columns you can search for columns this also works very much like Elementor so here also you can search for columns if you want two columns and inside this column if you want you can have text maybe this much text in left hand rest of the other text we can cut it and we can bring it over here under paragraph all right then after that if you want to add image for example you can search for image element again you can see simple and whatever image you want you can upload that image so let's see okay maybe we can upload these images all right so maybe I'll upload these two images maybe first one this one okay then again you can add one more image and so on now for the featured image okay I want this image maybe as my featured image which is this image okay this is the featured image and overview overview is this short description overview and overview title this is the short description title okay rest everything looks good URL for launch button so whenever somebody clicks on this button uh launch project they will be redirected to what website or what page you can enter that thing okay enter your project URL after that who the client is so maybe Acme media is my client what is the release date then tune okay maybe right then let's see and rest everything looks good you can do few more changes uh you know we have a lot of options so here you can just play around and see all the different options and you can do some more changes over here change the background and all now at the right hand side click on portfolio this thing portfolio now you can select a category for this for example this one I think belongs to some category so let's add some category maybe this is related to technology so we'll add technology category Okay click on add new portfolio category untick the uncategorized now if you want you can also add some tags like media could be a tag again technology could be a tag then after that featured image again I want to upload this featured image and after that you can publish it let's open this viewportfolio as you can see this is how it is looking we'll design it later on we have to we have to you know add designing option customization we'll be doing at the end but basically you can see this is how it is looking whatever text and everything you entered everything is working fine so once you create this portfolio after that you can again come over here first let's refresh this page now go at the bottom and here as you can see we have the portfolio first click on this thing go to layout let's start from layout we want three columns okay so select three columns under setting and after that number of posts to show we want to show only three posts okay and after that let's see let's go to style now what size of image you want you can select that thing if your image is 16x9 you can select 16x9 if your image is four by three or whatever the size of your images you can select that thing you can always play around with this thing then after that what border radius we want border radius because you can see the corners are rounded so we'll type in 15 over here under border radius now let's see the title this was image let's see title so for that title we have the black color so I'll select this black color typography will increase the size of this thing to 20 pixels make it 500 all right and line height of 30. then after that if you want to add some spacing at bottom you can do that thing as well then we have info meta which is basically your category okay now for this one I think color is fine your color is fine change the thing and style we want normal this is italic we want normal this is italic we want normal okay then after that we want capital letter I guess yeah everything is uppercase so transform into uppercase so everything Upper Keys then after that you can increase the size or if you want you can even decrease the size I'll make it 12 pixels and line height of 30 right and we want to make a bring everything in Center so let's see under content where we can it will use the CSS for that don't worry we can use the CSS to bring this thing in the center but this is how it is looking as you can see we have the title we have the category name let's actually search for grid I think we we had to use the regular grid portfolios not the grid Carousel portfolios let's use this grid portfolios hopefully we should be able to copy styling let's see let me try it again layout will be three content we want to display number of number to show we want three we want we don't know any titles and we don't want any filter so make the filter no good style Let's see we can copy this style right click copy right click paste style yeah we can do it yeah style and everything paste it so we can delete this thing okay so if we wanted to use the regular grid portfolios fine now let's select the wrapper we can do the wrapper setting over here now for the padding we'll again select percentage and for top and bottom we'll select 7 and for left and right we'll select four okay like this and at the bottom we want 10 pixels of spacing and after that again open this CSS thing here is home portfolio section you can see and let me break it like this increase the size till here okay so home portfolios section copy it go to Advanced custom CSS and paste in the CSS and now as you can see you'll get this style this looks like this one now click on update all right so if you want again you can do some changes wrapper I think let's decrease the padding a little bit maybe uh bottom we already have so much padding so on in wrapper I don't want any padding at bottom so I'll make it zero this is looking much better click on update now we have this button so you can again copy and paste in this simple button copy it paste it over here okay and bring it in Center first and we want to bring maybe 100 pixels padding at top all right update okay let's add some spacing at top four over here in the in the top section select the main section and let's add some spacing at top select the main section and if you want you can add some margin maybe let's add a six percentage okay select percentage then type in 6 update or if you want you can have pixels as well okay it all depends on you if you want pixel 60 pixels you can select that thing all right then we have our next section let's see how we can create this section as well now this uh this section has three different columns if you see these two are in one column this is another column and the this one is the third column so we'll add a new row and divide it into three different columns in fact let's do one thing let's first add a single row okay let's add a single row single column and inside this thing add this inner section drag and drop the inner section and divide this inner section into three columns by default we have two columns if you want to add one more column you can right click on edit column and click on add new column and now we have three columns all right and now inside this thing we want to use our testimonial element so if you again come back search for testimonial obviously we want testimonial by flux bring it over here and upload this image I've given you these images as well if you scroll down here it is open this image insert into and you can change the size to full width okay and this is looking a little bit weird but we'll fix it don't worry now the content the name here whatever the name is you can type in the name and after that whatever the text is okay this is the review and this person is manager if it is now under we don't have any manager position so instead of that we want to you know in customer occupation we want to just paste in this thing okay this quotation mark so that we can design this quotation mark all right and image is fine now look let's go to style and style this thing now first of all image we want hundred percent width okay so events select percentage select hundred percent like this okay and we don't want border radius we don't want it circular image if we want border radius but a little bit only for top over here for top two options okay so we'll select this thing for top and only for top in for for right so top 15 right 15 rest 0 okay now it will look like this then we have top and bottom space how much space you want top and bottom so for top we don't want in space but Bottom I want to decrease space the reason because I want to bring this thing uh at top okay on top of this image basically so again I'll type in minus 70 so this will come at top you can see the name and all it now is on top of this image will fix it don't worry but at bottom you can type in minus 70. now let's design the name okay this name so you can see this is the color and size is also big so first we'll change the color to primary color and after that we'll increase this size to maybe 23 pixels and make it 500 line height may be 30 32 right now occupation occupation is basically just that uh you know just this quotation mark so we'll select white color first of all for occupation okay now you can see this quotation small quotation mark will increase the size so that you can see it properly and will also change this thing to dominate okay this font family and we'll increase this size to 100 pixels right because it is white you cannot see it properly now you can decrease the weight to 300 and line height will be 116 all right and again I'm saying because it is this color if you change the color you can see this properly okay again let me change this thing back to White NOW select the review which is this text okay this text is your review for this we want to change this thing to black color change the typography first of all make sure this is italic okay because of this styling so we'll change this thing to Italy and after that whatever text and whatever you want so maybe for this we will make it 22 pixels right and I think line height let's select 40 pixels a little bit more then we also have this padding option okay this padding so make it zero first now for top I don't want any padding because we already have so much space so 0 from Top now for right we'll add 40 pixels and from bottom 85 left will add 40. so right and left 40 note no spacing at top and bottom will add 85 all right then we have the content box the main element now the content box also you can see from all sides we have this 15 pixels border radius so border radius will add 15 pixels from all sides and we don't want padding this extra spacing in this image and all we don't want that so zero now it is looking much better still we need to do few things but still it is looking better than what it was looking before now box Shadow you can select this thing just to add this simple shadow and maybe I'll increase the spread a little bit okay make it lighter let's see but this is how it is looking now once you do this thing again you can select this column in in a column click on this edit column option and from margin left and right you can add again 15 pixels or you can even add percentage like left and right you can add 1.5 percentage okay so if you want you can use percentage if you want you can use pixels it all depends on you now to furthermore design this thing you can again go to this CSS thing and you will see this thing home testimonial section and it ends over here so I'll start from here and this much copy it under custom CSS based in this thing and now you have this design click on update okay so basically what is what we are doing is we're changing the title okay this is the title we are changing the position absolute so from bottom we are adding 37 pixels okay this all simple thing whatever you're doing in Elementor this is just written in text now maximum with also we are setting now this thing called column title after this is for this line okay this border okay so this thing is for that border now for column subtitle okay this is for this option all right subtitle as you can see we have this background color gradient background color we have increased the width and height and all to make it circular so simple CSS if you want you can use this thing now what I'll do is I'll right click and duplicate because we have as you can see we have one more at the bottom now because we added this negative margin this can create some problems so click on the second one bottom one and over here come to this option and select margin 0 and after that margin top maybe add 90 pixels then you can copy this one paste it over here and after that what we'll do is we'll bring everything in middle so we'll select edit column and vertical align middle okay so that it it comes over here in the middle then after that you can also go ahead and change the text title and all those things okay right see okay let's paste in this CSS fine update this thing and finally you can copy this thing and paste it over here copy the button so as you can see saves you a lot of time paste in the button and not this much space at top Maybe 10 pixels or even less update it all right now for these two coins as well uh select the middle column and margin left and right we'll type in the same thing uh percentage 1.5 okay left and right same thing with the third column D-Link margin left and right 1.5 okay now it is looking much better and if you see this demo website okay in demo website I think we have added a lot more margin over here so we can fix it don't worry we can just select this thing instead of 1.5 uh let's do one thing let's add uh maybe five from right and 20 from left 20 percentage from left 5 from right change the title and now looking better click on update right so you can do something like this as well now finally we have to select the main row okay this row and add some space at top so main row okay this one go to Advanced and top margin will add 12 percentage okay again I'm saying percentage pixels you can just keep on adding decreasing the number whatever looks good to you you can keep it then finally we have this big image if you see in the background this this thing let's see how we can add that one okay so what we'll do is we'll use Advanced image and drag and drop the advanced image in the main column not in these inner columns in the main column okay okay here now upload this image which is this image I have given you this image insert media full size all right go to Advanced and it is behind so we'll do one thing let's let's try it first let's try the positioning absolute okay it is already behind so which is good now from right we'll bring it maybe over here till here and do one thing select this option select this testimonial and also add background color so under content add background color of white like this okay and do the same thing for these options as well Style because if if you see properly if you don't add the background color white you can see this color is mixing over here so if you like that thing you can have it or if you want you can add background color white for the content so this is how it will look like so whatever you like whatever style you like you can have it update it then let's see what we have okay we have only two more sections left okay we have this export section team section basically in this block section and both are hopefully easy sections let's see and for okay I by mistakenly refresh this page now for this section we will first add a new row go at the bottom add a main row and this is going to be single column copy and paste the title subtitle from Top maybe let's copy this one this one copy the title paste it over here right recent work is the title meter expert team and we also have this text so I'll copy the text paste it in the description go to style uh bring it in Center let's see okay here we have alignment under content bring it in Center and we want it in two lines I guess for the description so we'll select the description and increase the width maybe till 5 30 okay update it then below this thing we want this inner column okay I think yeah in a column so drag and drop the inner section we have two columns fine now inside this we want to use this one we have we want to use this staff option or staff element so drag and drop this stuff element over here now you will just copy paste all these things so the name is Albert Owens Wilson I guess copy and paste in this thing designer so again copy paste and about this person under the content all right then we have the image you can also set a maximum word so that you know all these have you know similar amount of word only four lines like that then we have the image you can upload the image I have given you these images as well if you scroll down for example let's select this image insert media and we don't want this shape we want rectangular shape so we'll select this thing and we don't want full width we want a custom size okay so in this case we will select 260 by 296 okay this is the size that we are using so I'll click on apply all right and make sure this is this rectangular shape now enable this thing social so that we can also add Social Links of this person and Twitter Facebook Google Plus Flickr whatever you can add these things right then we have this option styling option now under styling first we have the title so the color of this title is this uh primary color so we'll select this primary color and we'll change the sizing we'll make it 28 500 44 line height and bottom will select bottom space in fact will decrease some space so again we'll add -5 to decrease some space if you want to uh two degrees even more you can increase this number then we have this thing we have this designer thing which is a subtitle this is this text color I guess now let's add maybe this color okay and style will be normal not italic so we'll select this thing now for this size we'll select 16 pixels 27 line height all right and at bottom will add let's see maybe 18 pixel space then we have the content and this is how it looks like okay so we'll select the content color whatever color you want maybe we will select a little bit lighter color and after that whatever text you want so we want 16 pixels and 400 is fine and line height will be 25 all right now let's select the socials color here as you can see we have this primary color again so we'll select this thing and padding let's select the padding now for padding I'll select let's see for top and bottom I'll select 25 and 30. 25 at top 30 at bottom and I don't want this thing okay or maybe we have okay we have this thing but let's select the wrapper now how do you want this style so we want this third style I guess let's select the third style then you'll see this padding for Content wrapper select this thing D-Link everything and over here only at right side only at right side add three percentage for select percentage and add three percentage only at right side we want some padding at right all right then after that we have the Border options so we'll select this option select border and let's add a shadow okay this powder shadow all right first let's add border radius of 15 or maybe 20 if you want and after that maybe let's add 20 and then add border box Shadow and you can change the style of this Shadow this is how it is looking uh till now once you do this thing again go back to this styling and just for some extra styling you can select this thing home team thing and paste in this thing okay just for this extra styling bringing this image at top and adding some spacing from all sides now click on update once you do this thing you can duplicate it for this bottom one okay we have this one at bottom click on the bottom one and change the name and everything same thing okay change the name change the image of this person maybe let's select this image okay and let's add some spacing so go to Advanced and let's add margin of again 90 or 95 pixels now let's select the column so select this inner column select this column option and for margin left and right again if you want 1.5 percentage which is 20 pixels okay like this now you can again do the same thing copy it paste it over here copy it paste it over here okay now let's select this row and let's increase the Gap so Gap will make it wider okay so that we have this space between these options okay so very important Gap wider now go to padding okay now from Top Again percentage I'll select percentage from top I'll add six percentage right maybe one okay and bottom okay we have we don't want bottom left one okay left and right one and from Top we want six or maybe if you don't want left and right I think don't need just add six pixels or six percentage at top just for this extra space then select the main row which is this one okay select this one and let's add padding of 200 both at top and bottom this extra space top and at the bottom for this space okay because now we want to add this background thing we want to add this shape divider so when whenever you're using shape divider always have this kind of extra thing with you okay some extra space is always good for that so select this main row again go to background and I think we can again use this F1 okay or if you want you can use F3 whatever you want and shape divider select the shape divider for top let's select curve here it is and we want to invert it we want this kind of curve if you want you can increase the width and height like this all right whatever you want okay then for bottom also do the same thing curve this will also be invert and you can increase or decrease the numbers and again for this also you can see the color is getting into this so if you want you can click on this thing go to style or maybe let's select content we should have background color somewhere let's try to here under Advanced background let's select white color let's see whether this works yes this works okay so this is how it works copy do the same thing for all the other options select this option go to Advanced and background add white color all right now looking much better click on update all right so this section is also done maybe we want some option over here let's add some margin select this option let's add we want more so let's add six percentage at top okay or maybe 20 percentage at top six was a little bit less so 20 percentage at top click on update and with this we have also completed this section and finally last section click on plus button and here we need two columns okay and we'll select this one okay so First Column if you click on edit column we want maybe 25 or 30 okay and second one will be 70 automatically or if you want you can make it 40 60 or if you want you can make it 33.66 okay you can do it like that now this is all simple copy paste from Top it and paste it over here just make it left align and change the text only two lines right and you can select how much space you want at bottom and then we have the button so we'll get the pattern from here paste in the button right now at the right hand side we need the block but before that first we'll have to create blocks we have not yet created any blocks so to create a blog we'll again come back to our dashboard click on post now few dummy blog posts will be created for you I would recommend you to delete it and create your own blog post so click on this add new button let me add let me open this single blog post just so that we can see how this blog post looks like and we can create our own blog post now this is the title of the blog post basic thing title and after that whatever the content I have already explained in how you can make it in two columns if you want to make it in single column mod double column you can have it I don't want this Laura MIP Sim text so maybe we will let me select this text come over here all right so this is uh thing and if you want to add two columns or multiple columns you can click on this plus button select columns okay we'll select this paragraph okay same thing in the right or maybe write the right hand side I want to add an image left inside paragraph right inside image so Media Library and let's select to maybe this image click on select okay you can increase or decrease the size of this image as well if you just do it like this you can increase and decrease the size change the alignment make it Center or wherever you want okay and if you want to just like Elementor again I'm saying if you want you can click on plus button add gallery list button whatever you want you can add those things all right then at the right hand side you have to give it a category now this category is different earlier what we were doing is that was for portfolio what portfolio category this is for blog so if you're writing about marketing then maybe this is under marketing category we also need the featured image so like this here as you can see we have this image as the featured image let me actually use some or maybe let me just use this image as well this is a featured image okay now you can publish it so this is how you can create your blog post pretty simple and after that if you come over here let's use this blog post Elementor here so if you search for okay we have to use this one grid and Carousel post okay drag and drop it over here now how many columns we need let's see I think we need only two yeah we just have two columns so we'll select two columns and uh we can display grid content layout whatever you want to display you can go to display and you can select that thing so you want the title uh we want to post info but we want the post info before title if you see over here first we have the date then the title so we want it before title okay and we just want the date we don't want the uh author we don't want category and we don't know anything else I guess don't want to display the read more so no read more don't display meta after con we don't exactly we don't want to display the excerpt so no excerpt and rest everything I think looks good no like button comment number display the post content as well and rest everything I think looks good let's style this thing let's see the content first number of posts to show just want to display two post all right and go to style image size you can again go ahead and select this thing it is already uh this radius is present so we don't need to change this thing now select the title now for title what color you want okay we have this black color for everything so we'll select black color now for text size we want 24 00 and maybe line height of 35 all right if you want maybe not 500 let's make it 600 okay a little bit Boulder then after that let's see what we have we have post info which is this date it will select this five zero color and we'll make it 1500 or 15 pixels all right and if you want to add some space at bottom maybe seven pixels not eight a wrapper let's select the wrapper then now for wrapper we don't want any padding for main so we'll make it zero and for the content you can add 21 and 30. so 21 from top and bottom and 30 from left and right like this okay so that we have this kind of space and we don't have read more so that is fine now again you go to Advanced and just add this custom CSS for home block section until here all right paste in this thing okay so if it is looking like this go to layout and make it a grid modern style okay then it will become like this okay nothing else to do update it and finally select the main section and select margins so let's add some margin from top and bottom so maybe 130 from Top 100 bottom update it and with this we have completed the home page like we have completed the desktop version whenever you create any page using Elementor you should always see how that page is looking on a mobile phone and on other devices so let's see so if you want to see how this website will look on a mobile phone you should do one thing click on responsive mode here you can see this icon at the bottom left response remote select mobile phone all right let's start from Top all right so first let's select this text go to style first of all we want to bring it in Center for mobile phone now whatever changes you're making make sure you have the mobile icon besides that okay so only make those changes which has this mobile icon so that this change will take place only in mobile phone so alignment we can change the alignment in mobile phone so we'll make it Center go to your style headings finds uh secondary heading I want to decrease the size so again you can see if I select the typography we can change the size for mobile phone so because we have the mobile icon present so I want this much but I don't want this I'll decrease this thing okay we will select 40 or maybe 50 line height right then we'll select the button go to style and you can see the way you can see the alignment for mobile so Center this is looking good and all right we'll select this uh thing let's let's select the column for mobile phone I want margin of 15 from all sides okay select this thing because you can see at top and bottom it is touching so we want margin of 15 from all sides for all of these options okay select this one as well all right then this is fine then because we are using this extra spacing click on this thing no extra spacing okay it was in column I guess let's see where we have this thing okay we we have this thing so it is this column what advanced so zero okay or maybe if you don't want zero let's add a um let's add 10 pixels a 10 percentage from left and right okay or maybe not 10 just 5 from left and right and change this styling so click on this text decrease the size of subheading it is very big all right and also maybe 50 pixels not even 50 let's add 40 pixels line height all right similarly for all these things you can just go ahead and decrease the size again if you see any thing like this select this column and add 1.5 from all sides all right to 1.5 yeah now we can add 1.5 even at top at bottom and also at left maybe at top we want to 1.5 is not working because still we have this space so maybe five okay or maybe 10 percentage again select this column and we don't want this extra spacing just five from left and right five percentage from left to right and you can change the size and this is also not looking good so again select this thing we don't want this 20 pixels we'll make it zero okay then we'll select this text select the wrapper click on this thing stuff go to style wrapper okay so you can select the padding for main wrapper and add some space from left and right so maybe 10 pixels from left and right or maybe not 10 20. from left and right okay now looking much better again you can see and you can copy this thing paste Style paste a style paste style to save some time and rest everything is looking good update it okay now it is looking better on a mobile phone as well all right so make sure you always check how your website is looking on a mobile phone now you can cut this thing now your website is 100 mobile friendly as well and with this we have now finally 100 completed the home page and we have learned almost you know most of the things in the home page now let's see how we can create some other pages so let's come back to our dashboard click on this hamburger icon exit click on apply leave you'll come back to your dashboard and now let's create our next page let's create a blog page so click on add new give it a title of blog and we want box layout so select box layout and we don't want any title bar so under title bar setting no title bar and publish it now just like home page we have to set this page so come back to your dashboard however settings click on reading and under block page or post page select the blog page click on apply now if you go to your website let's see your website name slash blog here as you can see this is your block page looks very different don't worry we'll fix it later on at the end of the video we'll see the final customization for now we have created the block page now let's create some other pages so click on pages in fact we don't have to create Pages because you can see just for creating one single page it took us some time some time okay so we'll do one thing we'll create we'll just import these Pages I'll give you all these layouts let me show you okay these page layouts I've created all these Pages for you just have to import it on your website so how you'll do it click on add new to add a new page let's first name it about okay and after that make it full width and title bar no title bar okay publish it edit with Elementor now click on ADD template instead of now instead of this plus button this time you have to click on ADD template button folder icon go to my templates and import it click on this import link if you let me again show you click on ADD template this import button click on select file Pages now import all the files click on open first time it will ask you to enable and import click on enable and import and this will import your about page in fact you can import all the pages over here click on import again this is your contacts page again click on import your footer okay again import you have your header again import and let's see what we have we have projects and we have Services finally right so we have imported all the required Pages now because we are creating the about page we'll import or will we have imported the about which will will just insert this page about is flux 2023 insert this page and here you have your about page whatever changes you want to make you can easily do it okay we have already seen all these things this is your info box this is your simple modern heading this is a simple image Advanced image we have seen everything you can just go ahead and do any changes according to your needs change the title change the icon we have seen everything click on update and this is created for you again come back to your dashboard so hamburger icon click on exit come back let's create our next page click on add new let's create our projects page or your portfolios page again full width title bar no publish it click on edit with Elementor again and click on ADD template go to my templates we have already imported it here it is projects insert it and you will see this design is already added for you click on update if you don't see this thing you can just refresh it sometimes it happens and now as you can see this is working all right you have this thing and again come back to your dashboard it will display all the because we have only created one project so if you have created in multiple projects you'll see them as well click on exit come back let's create our contact page so these pages are all created for you just to save you some time the the reason I wanted to show home page everything from scratch you know so that you can learn the process then after that whatever changes you want to make in the home page contact page or any other page you can do that by yourself because now you know how to use colors how to use you know elements how to do animation and all now go to title bar make it no publish it and edit with Elementor this is going to be our contact page so add template my templates and here is contact page inserted and obviously because your contact page you will click on address go to content instead of this address add your own address click on phone go to content instead of this phone number add your own phone number obviously now under contact form uh it will say contact form not found under shortcode delete delete this thing and come back to your dashboard over here you will see your contact click on contact over here you'll see this contact Form 1 will be created for you edit it now whatever you see over here delete everything okay now go back to this media folder and under media folder open the pages folder and select contact form copy everything from here paste it click on Save now once you click on save you will get this shortcode copy this shortcode come over here paste it under this shortcode and now as you can see this is how your form will look like and now you can update this page all right so you have also completed your contact page finally we have our header and footer okay before that let's do one thing let's actually create a menu so we can hover our appearance click on menu so to create a menu you hover over appearance click on menus okay so looks like they have already created some menu for you so if you select this option click on header primary menu click on select you will see your menu they have created let's actually do one thing let's delete this menu let me show you from scratch how you can create your own menu so to create a new menu you click on this option create new menu okay and you name it anything you want I'll name it main menu you can name it primary menu whatever you want click on create menu now what all pages you want to click on view all I want home blog about contact you know all these pages and okay we did not create this Services page I guess okay so you can just go ahead and add the services page as well super simple just import the template and once you add this thing make sure to tick mark this thing header primary navigation okay make sure you tick mark this thing then click on Save menu you have created your menu and finally Let's do let's do the final customization if you come back to your home page everything is looking perfect if you see except for the header and footer if you see header is missing rest everything good everything good then footer is missing so let's fix the header in footer so for that you will click on customize in fact we'll fix the header and foot and with this same time we'll also fix all the other things first we'll obviously do the header and footer then we'll do all the other customization thing as well let's start from header so if you if you want to change this header you can do one thing you can click on header header templates and you will see this header flocks 2023 just select that template okay now as you can see this is how it will look like uh it is not displaying your um your logo like this because you have not uploaded your logo so I'll show you how you can upload your logo first just click on publish now if you want to do any changes in the header you can click on edit with header Builder it will open a new tab and it will open Elementor and you can do some changes for example if you want to change the phone number click on this phone number just click on it like this and instead of this phone number whatever phone number you can just type in that phone number over here all right like this and similarly for the social media links click on item or number two and uh let's actually see this thing yeah uh if you want to change the icon by default we have this Facebook icon if you want to change that icon you can change it and after that under link enter your Facebook link okay then similarly for uh second one is Pinterest enter your Pinterest link then enter your Twitter link and if YouTube link okay then click on update and if you click on this thing this is this will need your logo okay so let's upload the logo under customization come back again come back and click on General in fact not General I think under site identity here is you can upload your logo let me upload my logo from here under media I have this logo you can upload your own logo obviously I'll select both for the header and footer logo let me see here it is okay so for header I want this logo this is my header logo I'll click on select skip cropping and once you upload this thing your logo will start displaying in the header let's see now as you can see looking better publish this page come back now let's see the footer so click on footer footer template here also you'll see footer Vlogs 2023 just select that thing if you go at the bottom you'll now even see your photo let's go here as you can see and again make sure to first publish now again to change the photo click on edit with footer Builder okay we have this thing under foot or knife you don't want this thing in the footer you can just delete it now this is the image instead of this image you can upload your own logo now in this select the menu we have created the main menu so we'll select this now click on this instead of this second insert this email change the emails all the same thing modern editing and same thing is used now under this option under MailChimp you have to add your you have to add your mail stream form okay so you can use MailChimp to do free email marketing first go to your dashboard now if you don't know anything about email marketing or MailChimp you can again go to my YouTube channel if you want you can just go to YouTube and search for Naya Shake MailChimp you will get a video about that because you can see how you can do free automated email marketing with the MailChimp so make sure to watch this video if you want to learn more about email marketing now I'll just show you the basics about how you can use this newsletter thing so first of all you need to click on MC for WP MailChimp for WordPress you need to connect your webs website with MailChimp by entering your MailChimp API key so you can go to mailchimp.com login to your account now once you log into your account you will see your profile at the bottom left click on that click on your avatar or your profile picture click on profile and show click on Extras API key and you will get your API key if you scroll down here is your API key copy it paste it under your API key click on Save changes now it will your website will be connected here as you can see now to create a new form under mc4wp click on form and name it anything I'll name it form one then after that you can select any list click on add new form and this is how your thing will look like everything is fine I just don't want this label you see this label thing don't want this label delete this label thing all right click on Save changes all right again let me show you that thing just make sure your thing looks like this and the rest everything is fine make sure to click on Save changes and now you can come back to your footer and you can select that form first you'll have to refresh this website again and now it will automatically display here as you can see if not you can click on this thing and you can select your form one now click on update now again come back to your dashboard now if you see your website now for example if you open the website your home page looks a little bit different header is creating some problem let's see some other Pages projects page looks fine Blog Page looks fine about is fine contact is also fine homepage is creating some problem so what we'll do is we'll edit the home page and we'll change the header style okay so under header option you will see header or settings let's see header template settings I think so under header template settings you will see this option header overlay select yes okay and update this thing let's again try view page and now as you can see looking much better if you see some other Pages everything is now fixed okay so header is now 100 fixed again come back to the customization let's see uh the blog page we have to fix the blog page because Blog Page looks a little bit different okay this is your blog archive page so come back select the blog section first select block page this is related to block page now first of all we have this thing this big blog post at top I don't want this big one so first select this option uh block site a slider and make it no this thing will disappear okay now we can work with this one I don't want this right inside a bar over here so I don't want sidebar so I can come back all right and I'll select this option block page and I don't want this sidebar first of all I want to change the styling to this one this sixth one grid one okay if you click on grid this is the one that we want what all things you want to display let's see the block pitch so that we get an idea we just want to display again date author and title okay not comment number not categories this date author and title we don't want to display this thing as well no read more so none number of columns I think we have three columns so I'll select three columns okay and number of columns in Mobile is one number of columns in tablet should be two and let's see we don't want sidebar so select the first option so the sidebar will disappear we don't want this excerpt so we'll make it none block content length none okay all right so this is looking good we have to add the CSS again to make it look good so if you again open this CSS thing final CSS if you go at the top at the bottom actually main CSS copy everything till bottom all right come back to your customize come back come back custom CSS additional CSS actually paste in this thing as soon as you paste it you can see this is working now publish it come back again let's open this see uh this thing and let's see how this single blog post looks like so if you open this thing click on blog a single post click click on the first option here also we don't want any sidebar so select the first option no sidebar and after that we want 1400 make sure it is 1400 and uh medium content select medium content let's hide this thing let's see okay maybe not medium let's select narrow content okay let's see yeah so if you want narrow content or if you want to medium content you can have medium content as well okay just make sure this is 1200 pixels so maybe you can even decrease this thing to 1000 pixels for this block page only for the block page okay let me size what all things you want to display all right rest everything I think is looking good don't need to do anything else click on publish and let's come back actually yeah rest everything I think is looking good we can now cancel this thing cut this thing and with this your website is now 100 completed I hope you guys like this tutorial if you want to watch more videos and tutorials like this one make sure to subscribe and click on the Bell icon so that you don't miss any future notifications if you like this video 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 finally thank you so much for watching this video see you in the next one

Channel: Nayyar Shaikh

Views: 505,901

Keywords: wordpress tutorial, wordpress tutorial for beginners, wordpress website, make a website, wordpress 2023, elementor tutorial, how to make a website, create a wordpress website, wordpress elementor, create a website, elementor wordpress, nayyar shaikh, wordpress, wordpress elementor tutorial, elementor, phlox wordpress theme, wordpress tutorial 2023, wordpress 2022

Id: jSPQVpIaPrY

Length: 177min 23sec (10643 seconds)

Published: Mon Jan 02 2023