How To Make a FREE Professional Website ~Step By Step~ 2024 (WordPress And Elementor For Beginners)

creating websites would be the easiest thing ever if you just follow this one stepbystep Master Class let's have a sneak peek at what you learn in this tutorial I will show you how to get your own domain name with a super secure SSL certificate we will be using Wordpress to create our website it's used by the best companies and artists to create their own website it's also used by 43% of all websites on the internet and it's free we will use a free theme a free page builder called element enter and all free resources to create our amazing website by the way you don't need any kind of design skill nor any coding experience this tutorial is for complete beginners and by using Elementor page builder we will create everything just by drag and drop you can change any font size any color you can play with all the spacing you learn how to create awesome web animations modern button effects perspective effects cool card Hoover effects you will learn how to create a logo by using a free online tool how to make this awesome homepage with modern and trendy animations I will show you everything from scratch unlike other YouTube tutorials I won't be using any ready template kit I will show you how to create an amazing about page like this how to create this Professional Services page and single Services Pages then how to create a f functional contact form inside of your contact page also I will show you how to write perfect blog posts with categories featured images and blog details within classic editor people can also comment on your blog post I will show you how to copy and paste from one page to another page to save your valuable time and most importantly we will learn how to make any website 100% responsive for tablet and mobile devices after completing this tutorial you can create all these amazing websites by yourself you can do it for your own or for your clients now let me introduce you to myself my name is Jim Fahad I'm a full-time professional web developer even in the past I have completed so many freelance WordPress projects for my clients so basically you are learning all the best methods and techniques from a real professional web developer already so many people started their web design career after watching my tutorials so please grab some coffee grab some water you can be the next I'm really excited if you're excited like me please give this video a big thumbs up this is the only thing I want from you other than that this video is completely free for you just have a look if you like this video then from YouTube's left bar you can go to your like videos and find this video easily later all right we will be creating our beautiful website in easy for steps first I will show you how to get your own domain name and web hosting I will also provide you a 78% discount link link then how to install WordPress then how to install a free theme and a free page builder finally we will start creating our amazing website step by step also I will be adding a time stamp in the description so you can always jump into the necessary part you need let's now start with step number one which is to get your domain name and web hosting so first of all what is a domain name domain name is basically your website address like Facebook has facebook.com Amazon has amazon.com we have Jim Fahad digital.com similarly for your website you need an address that will be your website name.com and what is web hosting web hosting is the storage space for your website all the images text you will have in your website all will be stored on your own web hosting as you are owning your own web hosting so there wouldn't be any limitation you can run ads you can upload any text or images you can upload any theme or Plugin you want you are the in charge of your own website now how to get your own web hosting with a free domain name so first just click on the very first link in the description below this video or you can just go to Jim Fahad digital.com slm myhost and this will take you a special discounted hostinger page so why hostinger in my opinion hostinger is the most affordable and also the fastest we hosting provider available just have a look into all their trust pilot reviews people are super happy with their hosting speed affordable pricing and customer support now from here you can change the language if you want maybe you speak Spanish or Portuguese or Hindi you can select your language from here one thing I also do want to say is that this page changes quite often in fact they probably change it once a month so if this Banner or this whole interface looks different than this one don't worry Don't Panic this happens quite often in is the same website let's now scroll down a bit here you will find all the different plans by the way here we can see three plans but sometimes you may see four plans here just don't panic because you can create your website with any of these plans but as you just starting out I recommend taking this premium or this business plan with both of these plans you can create up to 100 websites for example today you are creating a portfolio website tomorrow you want to create a Business website and the next week you may want to create an e-commerce website so you don't need to purchase hosting each time you can create all the websites within this same web hosting plan so here with this Premium plan you will get 100gb SSD storage with the business plan you will get 200 GB nvme storage and with all of these plans you will get all the features like unlimited free SSL so all of your websites would be in Crypt and super secure unlimited bandwidth so there wouldn't be any limit how many website visitors you will have free email you can create hundreds of professional email addresses like info@ yourwebsite.com or admin yourwebsite.com like this then free domain yes like I said you will get a domain name for free you will also get tons of Wordpress features like oneclick WordPress installation free automatic website migration so if you want to move your existing website from another hosting provider to hostinger they will transfer it on behalf of you how cool is that now let's talk about security personally I'm very serious about website security and hosting it just nailed it with all the features like Cloud flare protected name servers malary scanner and all these I have had very bad experiences with other web hosting providers we have got so many malare attacks and we had to pay the hosting providers additionally to use their other security tools but here in hostinger you are getting all the security tools for free all right let's now select a plan and like I said you can take any of these plans based on your needs so for now I'm taking the Premium plan you can upgrade it later any time so click here on add to card all right let's just go ahead and scroll down right here you are going to see different pricing options now this is referring to how long do you want to host with hostinger so we have 1 month 12 months 24 months and then we also have 48 months first of all I don't recommend going with this 1 month plan because you see it's almost $12 a month which is super expensive we don't want that my recommendation would be go with 48 months so for the first 4 years you just need to pay $2.99 per month that will save you in total $432 and then after those four years you start to pay only $6.99 per month which is still super affordable for a web hosting plan that can hold up to 100 websites but if you want to start with 2 years or one year you can click over here and then in your first year you just pay $2.99 per month and you are still going to create up to 100 websites and after that first year you start to pay $9.99 per month so the longer the first period the more discount you will get when you renew the plan so if you have the budget and you want to get the most discount possible you can go for the 48 months plan and after those 48 months you start to pay around you know $6.99 per month instead of $9.99 but wait there is more if you just click here on continue here you need to create your account but you see all these fields are optional you just need to select your country otherwise I'm skipping this form because we can add this informations later after creating our account so let's scroll down here you just need to put your email address here I'm writing my email address make sure to put your best email address because they will create your Hosting account with this email address let's now click on continue and here like I said I have got more Sur es for you so here you see it says have a coupon code just click there and here if you fill in with my special coupon code which is jfd 10 and you click on apply you will now get a total 78% discount canot believe we are getting super fast web hosting with a free domain name for the full year only for $32 what an amazing deal right here at the left side you can see different payment options so you can pay using your credit card PayPal Google pay alip pay or even you can use your cryptocurrency also you may see more different local payment options based on your country so here let's just scroll down here I'm putting my credit card information now click on submit secure payment then it will redirect us to the control panel let's set a very strong password here let's retype the password let's confirm it then you can see an interface like this but let's say for some reason if you just got logged out you can again just go to hosting.com from the top right corner click on login then here you just need to put your email address and the password you have just set that will take you inside of the hosting a dashboard and here you see it's asking to verify our email address and it's very important so now I'm going in inside of my email inbox and here you need to click on this verify email button so it's now verified from this interface you see it says premium web hosting just click on this setup button you can see the same setup interface what we have seen at the very beginning here from here click on start now let's skip this by clicking here as we want to create our new website so from here it says create a new website just click on select we will be using Wordpress to create our website so from here let's select what press here put your email address and set a very strong password I'm giving mine let's click on continue I don't want to add any plugins so I'm deselecting them all let's now scroll down click on continue we also don't need any theme from here so scroll down and click on Escape SK if you already have your domain name you just want to transfer it in hostinger then you can select this option but now as you have got a free domain with hostinger so here I'm selecting this option it says claim a free domain so click on select first of all from here you can select any extension like. online. link. shop but I'm selecting extension because websites look more professional and legiate but you can select any extension you want and then within this field you need to write your desired domain name you can put your name or your business name it should be your website address so take some moment think about it and put that domain name here I'm typing here gy Toots and let's now click on this search it says domain is available that's awesome let's now click on continue now we need to fill up some details for my domain registration so here here I'm selecting my country Bangladesh and I'm selecting personal then click on Next Step here I'm quickly putting my name and contact details and now click on finish registration now click on finish setup and then just wait a little here WordPress will be installed on this brand new domain name you see the percentage here we are almost ready to go so we have successfully completed our domain registration now first just have a look inside of our control panel so from here click on manage site I know it may look overwhelming but it's super easy actually you don't need to do a lot of things here within this C panel just do a few things let's go inside WordPress dashboard so click on WordPress overview here and from this place just make sure this Force h htps option is turned on then click on this edit website button it will redirect us within our brand new WordPress admin panel so right now we are inside WordPress admin panel or WordPress dashboard I will make you familiar with all of these options like posts media Pages appearance plugins users all of these actually all of these are super easy and self-explanatory but now before doing any other thing the first thing I want to do I want to clean up my press dashboard because personally I love to work in a clean environment so here we can see some notification we can just close it by clicking on this x also we can minimize all of them or we can do one thing from here open the screen options and we can actually deselect all of them so the dashboard is now looking much cleaner and I want to clean up my WordPress dashboard more so to do it we can just go to plugins to install plugins and here we can see some plug plugins that came with default WordPress installation but I don't need any of them by the way if you wonder what is a WordPress plugin WordPress plugin is basically the extra app or extra addon like thing which extends the functionality of your WordPress website and of course we will be using some plugins but we actually don't need this specific plugins that came with by default so you can delete all of them by selecting one by one or you can select all of them by checking here and from bulk action first of all you need to deactivate all of them so I'm making them deactivate click on apply and then let's select it again now from bulk action click on delete then click on apply the browser popup says I'm sure or not yes I'm sure so just click on okay so all the unnecessary plugin has been deleted cool the next thing I want to show you how you can change your password so to do it from left side side hover on users from there let's go inside profile and from here you can change the admin color scheme so from here if you want you can make it to light or modern or blue actually it doesn't matter because only you can see it so I'm just keeping it to default and then from here if you want you can change this language by default it's English but if you want you can change it to your native language and from here you can change your first name so I'm just giving here my first name which is GM my last name which is Fahad also here I'm just changing my nickname to Jim Fahad and here this one that display name publicly as this is important so here I just want to select this variation it says Jim Fahad because let's say if you write any blog post so on your blog post your this name will be shown as the author of that blog post like here it says Jim Fahad so so here you need to put that name here I'm just giving Jim fad name and then from here if you want you can change your email address from this place and here let's keep everything default by the way if you want to change the profile picture I mean your WordPress profile picture you can do that from this place you just need to click here and then you can change your WordPress profile picture and then here under account management you can set your new password so just click on set new password and here WordPress is suggesting as a very strong password if you want you can use it but I want to use a password which is easily rememberable for me so first of all I'm just hiding it and here I'm typing uh password so here it says medium but for now I'm okay with it so let's scroll down and click on update profile now at this moment I want to make you familiar with two basic terms one is the back end or the dashboard of our website and and another one is the front end of our website so right now in this place this is the dashboard or the admin panel of our website because only we can see it as we are the admin of this website now if you want to see the front end of the website so all you need to do you just need to click over I mean hover on the site name and from this place you can click on visit site I'm just opening it from a new tab so here on this tab we can see the front end of our website the whole world can see this portion of our website so at this moment our website is looking like it of course we will change it the way we want but at this moment this is the front end of our website by the way we can see this black top bar here as we are logged in but other visitors cannot see this black bar at the top by the way here before doing any other thing I just want to do some simple settings so from settings first of all let's click on General and here you can change your site title so here you can put your business name so here I'm just typing Jim Fahad digital and here you can uh write some tagline so here always try to write something meaningful actually it will also help you to rank on Google search engine so here I'm just writing best web design agency in California and then you don't need to miss with this URLs just keep them the way it is and also from here you can change the site language and here's the different time zone option if you want to have any different format like this first the month then date then year so you can change them in between I'm just keeping everything the way it is and clicking on Save changes and the next thing I want to do from under settings let's go to peral Links this is very important so so here you may see the permal link default structure is set to day or name sometimes you may see it set as plain but I always recommend to keep it as post name because if you just keep them as plain you see your any post Pages link or any other Pages link would be look like this so that would be your website name.com then forward slash and this kind of bizer number but if you keep your uh permal link structure to post name then your other Pages URL would be like your website name.com SL then the pages name or post name which is uh human readable and it's good for search engine optimization so I'm keeping it as post name let's scroll down and click on Save changes all right so the thing we were talking about the dashboard or the back end of our website and the front end of our website so this is the back end and this is the front end so first of all if you want to change the look and feel of your website because right now it's looking like it if you want to change the look and feel you need to change the theme of your WordPress website so we can just go back to the dashboard now to change the theme from left hover on appearance from their click on themes and here we can see some themes actually they came with default WordPress installation but actually I don't want to use any of these themes but I just want to show you one thing right now this theme is active it says 2024 but let's say if you want to active any other theme for example here is hello Elementor I'm just clicking on activate and now if we go to the front end and refresh the page you see the look and feel of our website has been changed so it actually depends on the theme but actually here instead of hello Elementor I want to use another theme so from Top you can just click on ADD add new theme or from bottom you can just click on this big add new theme button and then here you'll find lots of free themes here so I'm just searching here for Cadence theme so here I'm just writing Cadence oops I have just misspelled so Cadence spelling should be k a d e and c e this one so here we can see the Cadence theme just click on install and let's now click on activate to activate this Cadence theme and here at the top is suggesting us to installing the Cadence stter templates but we don't need it because we will be creating everything from scratch so I'm just closing this I mean notification from top and now if we go to the front end and refresh the page we can see the look and feel of our website has been changed I know if is still looking pretty boring pretty plain but no worries because we will be creating everything step by step and to do that the first thing we need is the page builder okay so like I said we will be using element Page Builder and it's completely free to get element free version you can just go to jimf digital.com I will put this Pages Link in the description so from that page if you just go under important links here you can see get Elementor free version just click there that will take you to the Elementor Pro purchase page though we will be using the free version but let me just give you a tour of the elementer pro version so here if you use elementer Pro you will get more options and features like here the 82 Pro widgets theme Builder form Builder popup Builder all of these Advanced options and you can take any of these plans according to your need so not only your own website you can create your client Advanced website like blog or Advanced e-commerce websites very very easily but like I said for this particular tutorial we will be only using Elementor free version so the first thing we need to do you need to create a free Elementor account from here so from Top click on login and for sure first of all you need to create a free account so from here click on create an account and here you can use your Google Facebook or Apple account also so you can click on continue with your email so you know you just need to push your email address and password then you can create your free Elementor account as I already have my account so I'm not creating I mean I'm not recreating any account so after creating your account you can just click on sign in and by using your email address and password you can login within Elementor okay so just after creating your free elementer account you can go back inside of your your WordPress dashboard then from here we need to install Elementary plug-in okay so to do it from plugins let's now click on add new plugin and here from WordPress directory we need to search for Elementor from this search panel I'm just writing Elementor and here you go this is the Elementor plugin you see 5 million people are using it I mean 5 million Active installation it has got so from here click on install now and then to activate it click on activate and actually we can es skip this on boarding so from top right corner click on this x Also let's just hide it from screen options let's hide the elor overview and close it now here we actually need some other plugins so let's now install and activate them so from plugins click on add new plugin and and here I'm searching for elements kit so here I'm searching for elements kit this is the plugin elements kit Elementor addons click on install now we will be activating it later for the moment just install it and the next one I'm searching for J element so this one J Elementor kit click on install now and then the last one is the m form which we will be using to create our contact forms so here's the M form Elementor contact form Builder click on install now so we have just installed them now to activate them from here plugins go to installed plugins we have activated only Elementor but now we need to activate this three so we can select this three now from bulk actions click on activate then click on apply so now all these four plugins are installed and activated successfully now I'm really excited to show you the power of Elementor page builder we will be creating our awesome Pages by using Elementor but now before doing any other thing of course we need to create our pages right so from here from the left side over on pages and here we can go inside all pages by the way here we can see some dummy Pages we don't need it so just select all of them together from B ction click on move to bin and click on apply so the unnecessary Pages has been deleted now I want to create our homepage first so click on add new page and here I'm giving the page name as home so from top right corner click on publish and click on publish button once again by the way here I want to tell you one thing up front if we just go to the front end of our website and if we refresh the front end you see we are at the default domain which is gy tos.com we cannot see the homepage what we have just created instead we can see the block post here why is that because by default WordPress shows all the block post on the homepage this is the default settings but we don't want that right we want a custom homepage on the default URL and for that reason I have created this homepage and now I just want to set this page as the homepage okay so to do it let's now go to settings and then click on reading here it says your homepage displays I just want to select a static page and homepage I just want to select it as home the page we have just created now let's scroll down click on Save changes and if we now go to the front end of our website and now if we refresh it we can see here the homepage we have just created I know it's nothing crazy but but at least we can understand this is the homepage that we have just created all right let's now go back to the WordPress dashboard and now from here go to pages to all pages because now I just want to make you understand how the Elementor page builder works it's really fun to work inside of elementer page builder so from here let's go inside the homepage click on edit and of course I want to create our page using Elementor page builder so from here click on edit with Elementor that will take us within Elementor page builder by the way here at the top we can see a popup I don't want it and I cannot see the crossbar so actually I need to zoom out our page so I'm from Mac I'm pressing command minus so it's now zoom out let's click on this x to delete this popup and here I'm pressing on command zero again to get the default ratio of the browser all right so we are now inside Elementor page builder here's the font part begin so here let me introduce you with this interface here at the top we can see the logo and the homepage link basically this is the header and this header is coming from our Cadence theme also here we can see the fter it's also coming from the Cadence theme and here this is the main canvas so we will be creating our main website within this beautiful canvas and at the left side everything we can see all these are Elementor elements or Elementor widgets like here we can see heading elements or heading widget here's the image widget here's the video widget text editor widget button widget you can name it and also if you scroll down here you can see some widgets and also you can see the lock icon because we are using Elementor free version and these are included only on Elementor pro version so if you purchase element pro version you will also get access to this widgets as well like animated headline Gallery price list pricing table and not only this widgets you can also get access to Advanced functions like e-commerce functions block functions and popup I mean lots of other Pro functions but for this particular tutorial as we won't be using Elementor pro version so I'm just minimizing it and here you will also get all of these widgets like counter icon list image AR all of this now let me just give you a basic idea how this amazing page builder works so here first of all we need to take uh structure so I'm clicking on this plus icon you can take any of this structure I'm just selecting this one and you can make its height I mean you can increase its height from this place you can just drag this minimum height bir to the right side so if you drag it to the right side the height is increasing if you drag it to the left you see the height is decreasing so everything within this area is your Canvas OR this container so I'm just keeping it as 500 just like this and for the moment I'm just keeping the justify content to centered I'm explaining it a bit later and now let's say if you want to give it a different background color you can do that just go under style tab from here click on background type to this classic option then click on this color Pier now from this color Pier you can select any color like this also you can just drag this color will so you can play with this colors and for the moment actually I just want to take this black color now within this area if you want to add any element or widget you can just click on this plus icon also you can do another thing you can just click on this Rubik's Cube icon just click there so you can get access to all of these widget so first of all let's say if you want add any heading let's just drag this heading widget within this area here so you can see the text here you can make the text alignment to right aligned or centered aligned if you want to change the text you can just triple click over here or you can change the text from this lift field so here I'm just writing Jim Fahad digital like this then if you want to do some styling with this text you need to go under this style tab from here you can change the text color so by default it's getting this bluish color but you can just open up this Color Picker and you can select any other color I'm just keeping it white and then oops just open it then from here from this typography option you can click on this pencil icon and from here you can change the font family and here you can get access to all the free Google fonts so you can select any of them so for example here I'm just selecting this font you see the font has been changed instantly how cool is that also you can search for any font so here I'm searching for one of my favorite fonts which is Poppins font and then you can increase the font size just by dragging this bar to the right like this you can decrease the size just by dragging to the left just like this then you can make it Bolder or thinner so if you select light you see it's now becoming thinner if you want to make it bold just select a higher number like 700 then you can make them all upper case or all lower case or all capitalize the way you want also you can play with this style like you can make them italic or we can just keep it default you can mess with all of these options also there are some other options like later spacing so you can also control the space in between of each of these letters so if you just drag it to the right you see the space started increasing also you can decrease it like this now let's say if you want to add some other element right underneath this heading you know you can just click on this Rubik's Cube icon then from here let's say I want to add some text so drag this text underneath here in this place we can see the text here if you want you can change the text from this field then if you want to do some styling just go under style tab from here you can make the alignment to right aligned or centered aligned you can change the text color from this Color Picker like red or white and you know you have all the typography option you have just seen for this heading so here you can see it as well so all the font family option size all these options are available here as well so I'm just increasing its size a little bit or we can just keep it like this and then here underneath let's say if you want to add a button okay just click on this Rubik's Cube icon and from here here is the button widget just drag this button underneath this heading here we can see the button here so now in this button instead of click here if you wanted to say any other thing for example contact now so you can write that within this field and within this link field so for example I'm just writing https colon Jim Fahad digital.com which is my main website so now if anyone clicks on this button that will take them to my website I mean in this link now you can make the alignment to right aligned or centered aligned and also you already guessed it right if you want to do some styling you just need to go under this style tab from here you can also play with the typography then you can change the background color for example instead of this green I want to make it for example red so I'm dragging it to this corner and let's make the color to Red so now our button color is red here I want to show you another interesting thing let's say Say by default the button color is red but on Hover I want to change its color how can you do that just go under this hover tab now on Hover just select the Color Picker for example I want this blue color so this blue and here have a look in the normal stage it's the red color but when we hover on this button it becomes the blue color how cool is that all right so this is the basic concept so if you want to edit anything so for example if you just want to do some adjustment with this paragraph just click over that element I'm clicking over this text editor so you will find all the available options here so no matter which element you select you will always find these three tabs one is content another one is style and another one is Advanced tab I'm talking about this Advanced tab a few seconds seconds later but for the moment just keep that in mind if you select even this heading you will find the content tab style Tab and advanced tab so here let's talk about the advanced tab I have selected the text editor widget let's say I want to add some space here at the top or at the bottom so now from under Advanced tab here is the margin option first of all I'm just unlinking it and let's say I just want to add some space at the top here so you can add that space from this place so it says top I want to add 20 pixel of space so I'm writing 20 you see 20 pixel of space has been added at the top also I want some space at the bottom so here at the bottom I'm adding 30 pixel of space so in this way you can adjust the spacing from under this Advanced tab which is available with each of these elements like here so the summary is if you you go under content you can change the main content or text or links if you go under style tab you can change all the designing stuff like their color typography all of this and if you go under advanc tab you will find all this spacing staff so this is basically the main concept so you can just go I mean you can just click on this Rubik's Cube icon and you can drag any of these elements from left side to the canvas then you can design them by going under the style tab you can uh add any spacing by going under the advanced tab okay and let's say if you have changed your mind if you don't want any element you can just right click over that element then here you'll find the delete option you can just click on delete that will be deleted instantly and basically I want to delete this whole container so from here click on this x to delete this container now I want to make you understand the con concept of the flex container because if you understand the flex container concept you can create any structure by yourself okay so from here if you click on this plus icon you can see the different default structures like this but we will be focusing on this main two structures the first one this is the direction I mean column based Direction and this one is the row base Direction okay you'll understand it better while um completing the explanation so first of all I'm selecting this column based structure so let's select it so basically this is our container everything you can see within this pink border this is our container so first of all I just want to give it a height and remember this is only for demonstration purpose so here your understanding is very important okay so here I'm just making the minimum height for example we can just type here 600 so everything we can see within this this pink Line This Is Our container or we can say it as our parent container okay now within this parent container I want to take some child container Okay click on this plus icon and here we can drag this container here within this place and we can do some work with this child container so here first of all I'm making the content width to full width here the width instead of percentage I'm making it in pixel so we can give it a very straight pixel number so it's width would be 200 pixel or we can also give it a height so let's give it 100 pixel of height okay let's give it a bit more WID maybe 250 just like this and now I just want to give it also background color so you can understand how it works just go under the style Tab and from here let's just give it uh kind of greenish or light green color just like this now here I just want to duplicate this child container so right click over this child container click on duplicate also right click over this child container and click on duplicate so here this is the parent container and within this parent container we have got three child containers here now I have selected this parent container and from here under items you see the direction is set to call or vertical because this is the default even if I just click over here you see the default one is the colum or the vertical one so I'm selecting it right now their direction is column based that's why here right after our first child here we can see the second child and right underneath we can see the third child container now have a look if we just make the justify content to centered they are now vertically centered here at the top we have got the same space Also here at the bottom we have got the same space so it's now centered vertically and then if we make the Align items to centered you see they are now centered horizontally because we have made the Align items to centered also if you make the Align items to end that will become the right aligned if we make it to the start it will become the lift aligned so let's just keep it to centered so same for the justify content if we make it end it will become the bottom ended if we make the justify content value to start it will be aligned from the top let's just keep it to the centered also if we change the direction to the row instead of column just like this you see now the Childs are one after another horizontally instead of vertically so here is the first child right after that here's the second child and here's the third child also with the justify content if I now make the justify content value to end you see they are now right aligned all together if I make the justify content to start they are all left aligned all together so let's just keep it to centered and then if I now make the Align items value to end you see they are now bottom aligned Al together if I make the Align items to start they are now top aligned all together so in this way you can create different structure the way you want and here you can also play with The Gap value because here you see in between the Childs here we can see some space so you can control the space from this place so here by default the value is 20 you can make it for example 40 or if you don't want anything you can just make it to zero so there is no space in between but I just want to keep the default 20 pixel of space and here another thing you need to understand whenever you make any settings from the parent container that will be applicable only for their immediate child okay what I mean by that let's say if you take any element within this child container so here click on this plus icon and let's say I just want to take a button within this middle child container so here it would be depend on the settings of its immediate paren settings so its immediate parent is this container not this container right so if I now select its immediate parent this container let's select it and from here if I just make the justify content value to centered you see the I mean this button is now centered vertically also the Align items if I make it to centered it's also centered horizontally here within this middle container I mean middle child container so whatever Flex settings you set here that will be only applicable on its immediate child basically it's very easy concept so for some reason if you get confused just watch the last 3 to 5 minutes you can understand it properly all right so finally we are done with all this theoretical step because personally I also don't like this kind of theory I love to do everything in Practical so no more more theoretical explanation so I just want to delete it so from here click on this x to delete this explanation part let's now create our amazing website step by step by using Elementor Page Builder and you see it's a tutorial around 3 to 4 hour long so if you are ready to invest your next 3 to 4 hour then you can follow this whole tutorial but let's say all of you don't have such long time let's say if you are in rush and if you want to make your website really really fast instead of watching this 3 to 4 hour long tutorial then I have another way for you on that case you can use some ready template from kit papa.com of course I will be creating this whole website from scratch step by step by using Elementor page builder but this kida.com is for the people who want to create their website really really faster Okay so so here let me just give you a quick tour of kitp papa.com so here basically you will find all the ready template kit for different kind of websites it might be any website for education or health medical or real estate or food AC agency Sports Photography you will find almost all website category within the kida.com and not only your business website you can create your client's website by using these ready templates Within a few clicks so here I just want to give you an example let's say you have got a client who is a lawyer and he wants his website really really faster then you can just go inside of this lawyer category and here within this category page you will find different uh ready kit for the lawyer category so here I'm just going inside of this kit and here just have a look so here is the interesting thing here before purchasing the ready kit you can actually preview the whole website from here you just need to click on this live demo so you can see everything within this beautiful ey frame so you can check all the pages all the sections and everything from here so you can just go to other pages from the same place and not only that you can also check the responsiveness you can just check the tablet view from here you can check the mobile view from here so you can check everything up front then you can also check all the details about this kit also here is another interesting thing with each of this kit you will find the video installation guide so instead of watching this kind of 3 to 4our Long tutorials if you want to make your or your client's website really really faster you can just follow this 3 minute long video guide if you purchase this kit okay so from here if you just play it you see it's only 3 minute long so just by following this 3 minute guide you can install and activate and make your website or your client's website live okay and here you see their price is only $14.99 which is really affordable because you see you can create this kind of multi-page website and you can charge your clients easily couple thousand for that so it's a great win for you and let's say if you are an agency or if you are a freelancer and you need to create lots of website frequently for your clients then you can actually take their buy all package so right now you see there is a discount going on so from here click on the grab the deal so instead of purchasing each kit separately you can get all the access of their kids also you are get I mean you will get access to their all future kids okay so all their kids right now they have 150 Plus kids and they're adding 10 plus new kids every month so you will get access only for $99 that's a great deal and here for this particular tutorial let's go back to homepage basically we will be creating a website which is like this kit so here I'm searching for Nexus let's search for it and here is the kit let's select it and like I said I will of course show you how to create this website from scratch step by step but now I just want to show you if you don't want to follow this tutorial and if you just purchase this kit how easily you can install this kit on your website so here let's say if you just purchase this kit and I believe I don't need to show you how to purchase a kit you just need to click on add to cart and you need to pay them 15 bucks and right after purchasing this kit actually not this kit we are searching for Nexus this one so let's just select it so let's say if you just purchase this kit you will basically get a zip file just like this and you need to import that kit on your WordPress website I'm just showing you quickly how you can do that so you can just go to your WordPress dashboard this is a completely new WordPress install I have just installed it only to show you how to install the Kit and here if I just just go to appearance to themes you see I have just activated the Cadence theme here and also if we go to plugins I have just installed and activated Elementor plugin nothing else now to import the kit you just need to go to Elementor settings here go under Advanced Tab and from here you need to enable unfiltered file uploads this option so I'm just enabling it scroll down click on Save changes now from under settings let's now go under features tab so here the flex container is by default on so we don't need to do anything here just go under Tools go under import or export kit now from here click on import a template kit here start import and here you need to select the file you have just purchased so in our case that's this ZIP file we can drop it here so it's just making sure if this file is safe of course it's safe for us so click here and click on continue then here make sure everything is checked click on next also keep everything checked click on import and here just wait a little bit maybe it will take 30 to 40 seconds just don't close the browser wait a little all right it's now says your kit is now live on your site so click on close so now from here if we just hover on our site name then click on visit site and here we go we can see the website has been I mean the kit has been installed and activated properly we can see all the elements here within few seconds so the homepage is looking perfect also if you go to about page so here everything is looking great so we have successfully installed and activated the kit Within few clicks and once again if you face any problem you can always just go to the product page and you can see the installation guide from here and also if you feel any problem or if you need further help you can just go to the kit Papa fooder and then you can contact them through this support page all right so once again this is only for those who has less time and want to create their website really really faster so I'm just closing it for the moment Also let's close kitp papa.com because now I want to show you how to make our amazing website step by step from scratch by using Elementor page builder so let's now start by creating our hero Banner area and you know to create I mean to create any structure first of all we need to click on this plus icon so here we can see all the available structure I just want to select this column based structure this one and here you know we can take any height so we can just drag it or we can write manual here so here I'm writing 740 pixel height so here this is the height and here first let's make the Gap value to zero because I don't want any Gap in between the Inner Elements okay and here I want to add a background image so from here go under style Tab and from here click on this background type and from here we will be selecting the images by the way if you want to follow along the whole video and you if you want to use the I mean exact same images what I what I'm using in this tutorial so you can just go to gimf digital.com I will put this Pages Link in the description so from here under important links here you see download the images I have used in the tutorial so basically after downloading it you will get a folder like this so here you will get a folder it says image and another one one is templates so basically we will be using this image folder so go inside of it and here you'll find all the images Okay so let's now go inside element of Page Builder and here click on this plus icon to upload the image so from here click on uh media library or you can just click on select files then from your computer you just need to select the folder so I'm going inside of image folder and here basically we will be needing all of these images so you can upload one by one or just like me I'm selecting everything by clicking on command a and then uh we can just click on this open Button you see all the images are uploading together here so here for the hero Banner I'm selecting this image click on select and now from here from the left side you can adjust the position like you can set top Center or you can set bottom left or there are so many options you can see here so for now I'm just selecting bottom center this option and here you can make the repeat value to no repeat and display size I'm just making it to cover so it will cover this whole area I mean this whole container okay and also I want to add some space here around so from Top go under Advanced tab first of all we can make the padding value to I mean you just can I mean you can unlink this padding so from here just click on this icon so they are now unlink you can put here different values for different side so here for the top side I'm adding 180 pixel of padding here you can see the space has been added and here for the left and right I'm adding 30 pixel of padding just like this and for bottom I'm adding 120 pixel of space here and also I want to add overlay color over this background image so to to do it just go under style tab from here open the background overlay and here click on this classic icon and I'm giving here a color code so which is HH 1D 1729 so it's kind of dark blue color and also you can adjust the opacity so if you drag it to the right you see the opacity is becoming I mean the overlay is becoming more darker so you can play with it but for now I'm just keeping it 0.2 just like this and then we can add elements within this container so the first thing click on this plus icon and here I want to insert a heading so from here I'm dragging this heading element here and you know you can just say anything but here I wanted to say welcome to gy oops gy toots agency you can write here your agency name now I'm making their alignment to to centered and now I want to change its color so go under style tab from here open the color pier and I just want to make its color to white okay and then from here from the typography click on this pencil icon and you know from here from this family option you will uh you I mean you can use all these free Google fonts so if you click here you already see it on the demonstration portion of this tutorial so from here you can also search for that so here I'm just searching for DM sense this font and here we can make the font size to 18 pixel here we can adjust the font weight so for now I'm just keeping it to 400 then here I just want to make everything in uppercase so from transform I'm making it all uppercase and then you can also play with the line height line height actually means the space in between of two lines so from here line height I'm just making it to 15 pixel and here's the lat spacing option so first I'm making it in em and I'm giving it to 0.2 em of lit spacing just like this and then we can play with their spacing so go under Advanced tab here I just want to add some space here at the bottom so first of all I'm unlinking the margin so only at the bottom I'm adding 15 pixel of margin so you see 15 pixel of space has been added at the bottom in this place now I want to add a background color with this text so to do it from under this Advanced tab let's now scroll down here we'll find the option background so open it and from here background type and you know from this Color Picker you can select any color so from here I'm just giving the color code which is 7 2 4 3 F2 so this color and now here I want to make it like so here you see the background is covering the whole area the whole width of this container but I don't want that I just want this background color just behind this text so to do it make sure you have selected this text then from under advaned tab open the layout and here you just need to make the Align self to centered so now the background color is only behind the text all right now I want to take another heading so click on the Rubik's Cube icon from here let's drag this heading underneath here so here I just wanted to say trusted digital marketing agency so here I just also want to make the digital to cap okay so here I want to add some line break because right after digital I want a line break so I'm putting my cursor here right after digital let's hit enter and also after marketing so before agency word hit enter so they are now into separate lines also I'm making the alignment to centered now you know how to style this heading so go under style tab from here I'm making its color to white now let's play with its typography so from here I want to use a different font for that so it says s that would be s y n e so this font and I want to make it really big so let's make the font size to 100 pixel then the default font weight 600 is fine now from here line height I'm first making it in em and let's give it 0.8 and then here later spacing again I'm making it in em and here is the tricky part so I just want to make it in a negative number so here I'm writing my minus 0.04 and we have already selected the EM value from here and then I just want to add some space here at the bottom so from under Advanced tab unlink the mergin only at the bottom I'm adding 50 pixel of margin and then underneath this heading I want to here I I want to put here two buttons so I want to align the two buttons within the same line and to do it we need to wrap the buttons within a parent container okay so from here click on this Rubik's Cube icon and here first I will be dragging a container so from here let's drag this container here and here I also want to show you another good practice because when you will have more structure more layouts so you may become confused uh which which container is basically what so to remove all the confusion you can rename the name of the containers so you can also follow the structure how you you made it so from here let's open the Navigator so just have a look this is the main container we have created so this is the main parent container so we can just double click over this container to rename it and here I'm just naming it Banner container just like it and now if I open the banner Banner container here we can see the first heading here we can see the second heading and here we can see another container so this container is within this Banner container right so here I just want to rename this container name as inner container because this is an inner container of the banner container right so here within the inner container so here is our inner container so if you select it you can work with that particular element from left side just like this so here the first thing I want to do I want to make the direction to row because within this area I want to take multiple but buttons so they will uh be visible one after another horizontally like this that's why I'm making that direction to row and then from here I'm making the content width to full width and also I'm making the justify content to centered then here I'm making the Gap value to zero because I don't want any Gap in between the two buttons and also let's go under Advanced tab I'm removing the padding so let's give the padding value to zero now here let's insert a button so we can first drag it to bottom so you can see everything properly so from here click on the Rubik's Cube icon now from left side I'm dragging this button by the way if you for some reason don't find any element you can also search for that so here I'm just writing button so you can see the button widget here drag it inside of this container here now have a look on this Navigator so you see again I'm just minimizing everything now this is the banner container within that we have one heading here is another heading and here we have got one inner container which is basically this one now within this inner container we have one button here so you can easily see the whole structure by using this Navigator it's really handy when you design anything step by step okay so for now let's do some styling with this button first of all instead of click here I just wanted to say explore now so explore now and here you can link it with any link so for example I just want to link it with kitp papa.com only for give you an example okay so now let's do a little bit of styling now go under style tab from here first open the typography because here I want to give it DM sense this font font size would be 16 pixel and here font wa let's give it 700 also here line height I'm giving it 30 pixel now from here the first thing the text color we can keep it white but from here let's give the color to white and then the background color instead of any solid color here I want to use a gradient color so from here select this gradient option so here you see here's the first color and here's the second color so that's why you can see the green color here at the top and it blends with this red color so here first I'm selecting the first color that would be hash 7243 F2 and then here's the second color that would be Hash A E8 triple F so a E8 f f f then if you want you can also play with the type so there are two types one is linear and another one is radial but 99% cases I used the linear option because this one is best and also you can adjust the angle so if I move the angle you see they are changing their angle so here I just want to keep it as 45° just like this so the first color is starting from this angle and it fits with the second color here and then I don't want any border with the cornner so I'm making the Border radius value to zero and then here let's add some p ing so I'm adding 15 pixel of padding but let's unlink it because at the left and right I want more maybe 50 pixel so yep it looks perfect and then on Hover I want it color to be changed so from here let's go on Hover and the text color it would be # z f oops 0 f 0 F0 F so initially we can see the color is white white but if we hover you see the color is becoming black now if you want you can keep it like this but actually I want to make it more cool just by adding some animation and to add the animation we will be using some custom code custom CSS code it's not anything difficult because I already have prepared the code for you you just need to copy the code from my website to your website it's simple like that but again I'm saying if you want you can just keep it simple like this but if you want to add the cool animation like me then you can use the course I'm providing you so here before applying the code make sure you have selected this button now just go under Advan tab because here I'm just making sure the margin value is zero and padding value is zero and now to I I mean now if you want to add the animation you need to add the code snippet within the website so here if you want to add any code snippet if just I mean just click on this Rubik's scbe icon first of all here I'm searching for HTML widget this one so within this HTML widget we can add the CSS course so here let's drag this HTML code anywhere of the page so I'm just dropping it here in this place by the way whatever you will write within the HTML code it won't be shown on the real website so we can only see this HTML CES or snippers within this Elementary Builder but on real browser it won't be shown so it doesn't matter where you put this HTML course right so from here within this HTML code just go to jimf digital.com the link I have provided in the description from here if you just scroll down you will find the code so it says button CSS so it start from here and ends in this place so you need to copy this whole thing from here so here just from start from this style let's now scroll down scroll down and oops not this much we just need to take this portion so this area just right click over here click on copy now go inside of element of page builder So within this uh field right click over here and click on paste you see we have pasted the code here but now if I hover on this button nothing is changing because if you want to enable this code you need to apply a class name with this particular button right so from here click on this uh button editing handle this pencil icon click here now go under advaned Tab and you can add any class name from this field it says CSS classes so you have added the code here but if you want to activate the code I mean if you want to activate the animation you need to add the class name with this particular button okay so so these both things are important you need to write the code here within the HTML field and then you need to apply the CSS class name with the element in our case is the button so select the button so here under Advanced tab here is the CSS classes field and the class name would be just go to the website so from here if I now scroll down here I have also written it so button classes there are two types of classes one is solid button hover class and another one is gradient button hover class you will understand it because it it's really easy you just need to copy and paste okay so first I'm just selecting or copying this class name just right click over here click on copy now within the his I mean within the Elementor Builder here within the classes field right click over here and paste the class so now have a look you see we have got the kind of isq effect so you can also minimize it you can understand it properly if I now minimize it you see we have got now a excute kind of button and now if I hover here you can see the beautiful hover animation it looks really cool and now I want to show you another cool thing so here first of all I just want to duplicate this button so right click over here click on duplicate and here we can see the new button just click over this button because here instead of Click now let's say I just wanted to say get started and let's say I just want to link it with any other link for example Jim fad digital.com only to give an example and here first of all let just go under style Tab and here text color I want to give it as #1d 1729 this black code and the background color so instead of the gradient color just select this classic color and I want to give it white background color and here with this one on Hover I want to make this color to white so go to hover the text color will become white on Hover just like this and then with the second button instead of any solid animation I want to use I mean the second option so from here you see this the first one was the solid button hover class and the second one is the gradient button hover class so from here I'm just copying this this class name just copy this whole thing from here let's copy it you can also easily copy it by pressing command C or if you're using PC you can just press crl C so I'm pressing it just copy it and within this place so make sure you have selected this button go under its Advanced tab within the class field first of all let's remove the class name from here now I'm pasting the second class I have just copied so right now if I hover here we can see the beautiful effect here now you may ask me hey Jim you have used these bluish colors or these colors how can I change these colors with my own brand color that's a very legit question right so if you want to change these colors you can also do that as I have used the custom code so to change these colors these animation hover colors you just need to go inside of the custom code and always you can just click over this HTML element also from the Navigator you can always check this is the HTML element right so just click over this HTML element and now here have a look you don't need to understand all of the CSS course because you actually don't need it for this particular tutorial but if you're interested it's uh really great skill if you if you know CSS but that is a different thing for now let's skip all of this course you just need to work with this thing so here have a look here we can see first hover red color right so just have a look here so we have used the gradient color with this one the second one because on Hover we can see this gradient color so let's say instead of this color if you want to use any hix code instead of this two you can do that but here let's say I just want to use red and green for example so here the first color I'm just writing here red and the second color I'm just writing here green now if I hover here you see the hover gradient color is now becoming the combination of red and green but I don't want that so I'm just pressing command Z to going back and then with this one it says hover solid color so at this moment if I hover we can see the background color is becoming white because this hash then 6f this is the white color code but instead here if I just write for example pink so here if I fin now over here we can see the background color is becoming pink but I don't want that so I'm pressing common Z to went back to the previous color all right we can now minimize the Navigator here by the way another important thing whenever you do any work and if you don't want to lose your hard work just make sure you have clicked on this update button to save your work so I am now saving my work and here the next important thing we have already created the Beautiful Banner here the next important thing is to make it responsive for other devices like tablet and mobile because nowadays you know more than 70% of users came from different devices mostly from mobile devices of course and now let's see how you can make anything responsive for mobile devices so here this is looking great for desktop device and here from the bottom left side you can just click on the responsive mode click there and now at the top we can see three different icons so this is for desktop and we have already done the designed for desktop device now if we click on the tablet device we can see the preview of the tablet devices so now on the tablet device actually everything is looking great you can just keep it like this but I'm just showing you some options so here let's say if you want to change something only for tablet device how can you do that so first of all let's select this main container and here go under layout tab you may remember we have given the minimum height to 740 pixel on desktop let's say if you want to change this height only for the tablet device you can do that from this place so if I here write let's say 400 pixel or maybe 500 pixel so oops it's 50,000 not 50,000 we should write here just for example uh uh 800 of height so now you can see the height of this Banner is 800 pixel and it's only applicable for tablet device if we go back to the desktop device you see it's still remaining to 740 pixel so now let's go back to the tablet device and here also instead of giving any specific value you can write your custom number like any percentage or any other thing so to do it here instead of pixel I'm just selecting this custom option and here I'm just writing 100% just like this so the minimum height would be always 100% of the device and then only for the tablet device I want to adjust the padding so go under Advanced tab here this padding is for desktop but now I want to customize it so I'm making it to 30 but at the top and bottom we can increase a little bit so unlink it at the top I'm adding 140 pixel and here here at the bottom I'm adding 180 pixel of padding just like this so this is only applicable for tablet because you can see uh at the right side of this padding there is a little tiny tablet icon which means it's only this values are only applicable for the tablet device and the desktop values will remain the same for the desktop okay and for the desktop I mean for the tablet device I also want to reduce the size of this heading so select this heading here now go under the style tab open the typography so for the desktop 100 is fine but for the uh tablet device I just want to reduce it to 70 pixel so it looks good on tablet and also I think we are good to go with the tablet now let's go to the mobile view so on mobile view we can do a little thing so first of all let's select this main container here we can adjust the padding so here um first giving 20 all around now unlink it because here at the top I'm giving and3 pixel and here at the bottom let's keep it 180 pixel of padding and then here this heading I think on mobile device we can make it a bit smaller so select this heading now go under this tile tab from the typography I'm making it size to 16 pixel and this main heading select it just from the typography I'm making it size to 58 pixel only for mobile device because here we can see the mobile icon and here I also want to increase the line height to 1 em just like it then with this buttons let's select the button so here I just want to reduce the button size to 14 pixel and then from here just go to the padding here I'm making the padding value to 10 at the top and bottom and 30 to the left and right just like this so let's do the same thing with this one go under style tab so it would be 10 and to the left and right I'm making it to 30 also from the typography I'm just changing the font size to 14 pixel so the banner area is also looking great on the mobile device also at the tablet device and on the desktop device for sure so we are done with the beautiful hero Banner area now before moving forward okay just close it also let's close the navigator so before moving forward I want to show you another important thing because you may see just select this okay let's select this uh heading and if we go under its Advanced tab you may remember we have given the background color from here so let's say if you want to reuse the color on the other places so also we have used the font family on this text so if I just go under typography and you see the font family is seen so just like this if you want to reuse any color or any font over and over on your website there is a best way to do that because let's say if you have used this kind of green color on your website and if you have used that on all the readings background or all the buttons and after one week you think no this color is not uh best for my brand I want to change this color to red color so what usually you need to do you need to change all the colors manually from here also from the second place also from your 100th place but instead what if if you uh change this color from one place and that will be applied on all other places so that's the Global I mean that's the global settings idea came from so we need to preset some global settings in our elementer so to do it because we can use that later again and again okay so first of all let's just save it just click on this update button and I want to do some global settings so from the left top click on this hamburger icon and then from here go inside of site settings first let's go inside of this Global colors and and here we can see some predefined colors like primary color secondary color text and accent color so I just want to change them first and then if you want you can add as many as custom colors you want so first the primary color instead of this so first click on this Color Picker and I want to set it as 0 f 0 f 0f and the secondary color it would be hash 7243 F2 this color and then the text color so the text color would be # 6 C6 a72 and then the accent color would be the same as primary so it would be # 0 F0 f0f and now like I said if you want you can add as many custom colors you want so from here click on ADD colors and you can name it anything so I'm just naming it color one for example and here's the color code which is Hash 1D 1729 this color and then let's add another color so I'm just naming it as color two and the color code would be hash E6 E2 EF this color so we have just preset all the global colors and by the way if you just open the theme Global color you may see some other color these are basically coming from the theme and we are using Cadence theme so we actually cannot delete it from here but don't worry about it because we won't be using these colors so just focus on these Global colors we have just created now just click on this update to save all these colors now from Top let's go back and now go inside of the global fonts so from here the primary font I just want to change the font family so from here I'm making the same font here s and then for the second I mean secondary font secondary fonts here I'm just giving it DM sense then for the text I'm again giving here DM sense and here also I'm giving the font size to 16 pixel and you can also preview it how it's looking right so this one is the primary here is the secondary this one is the text and also have a look this one is the accent so it's looking like it at this moment but from here if we change you see the default font family is droto but instead here if we give it DM sense you see it's changed and looking like it and I'm giving the font size to 16 pixel and font weight to 700 just like this all right so just save it by clicking on the update button and let's go back now let's go inside of the typography field here so for anybody text you can now select the global color so you you don't need to give the global color I mean you don't need to give any custom color to all the paragraphs or any text like that so from text color I'm just yeah here is two options okay so uh first I need to clarify these two thing if you if you want you can use any custom color for all the body text color and as we have preset some colors so you can uh select that color by clicking on this globe icon so from text color select the this globe icon and you can see all the global colors we have just set so for the body text I just want want to select the text color text Global color so I'm selecting it also the typography we have set the global typography which is text so I'm selecting that now have a look let's work with all these headings so first I'm starting with the heading to this element so it color would be our primary color I'm selecting the global primary color and then let's select the global typography which would be our primary but now I just want to customize it a bit so click on this pencil icon so the default F Family scene is fine but font size I just want to make it as 45 pixel then from here let's make the line height in em and I'm making it to 1.2 em the L spacing would be also em and that would be minus 0.05 em all right so heading two settings is fine now heading three so I want to give the heading three color to our Global color one this color then from here typography I'm giving it secondary Color Oops not secondary color I just want to give it primary because I want that SC font here as well so I'm selecting primary now from this place you see the font family is SE here I want to make the font size to 30 pixel then here I'm making the line height to 36 pixel and similar like before here I'm making the oops here just first make it em and that would be 0.05 em then here with this heading four we can just select the text color and now here I'm selecting the secondary font and now from the typography you see the font family already got the DM sense here I'm making the font size to 16 pixel default font weight 400 is fine and here here I'm just making the line height to 22 pixel just like this so everything is looking great just recheck the typography so from here let's open it yep the default body uh font family DM sense is fine it's automatically getting 16 pixel but here I just want to make the line height to 30 pixel all right now let's click on this update button to save it and here you see we have given all the global colors and Global fonts now here one important thing we need to do because sometimes we give Global colors and Global fonts from Elementor but we see some error something is getting from the theme so avoid all those confusion you can just click on this settings option so or here actually I can show you the usual way because let's say you you uh may not see this yellow area on your Elementor so how can you access that so first of all let's close it click on this x now from here let's go inside of Wordpress dashboard so click on this hamburger click on exit click on apply just click on leave so basically you can always go inside Elementor then click on settings so here you see these two options disable default colors disable default fonts so we need to select these two so the default fonts and colors won't get from the theme settings it will get from the elementary settings that we have just set so make sure you have selected this one also this one now click on Save changes now we can go inside pages to all pages and here we we this is the home page just click on edit with elementer and here I also want to do some global settings because we need to do that over and over again for example let's have a look when we have created this Banner let's select it and you see we have given the gaps value to zero because the default gaps value is 20 so actually I always want to keep the Gap value to zero also I always want to start from the padding value to zero so I don't want their preset 20 pixel of spacing okay so you can actually manipulate them you can change them so from here click on this uh hamburger icon again now go inside site settings and this time let's just go inside of layout and here the container padding so by default I don't want any padding space so I'm making it to zero and here you see the default Gap value is 20 I also don't want that if I need any Gap I can give them manually later but by default I don't want any Gap so here I'm just selecting zero let's click on update then go back and also sometimes you may see your uh body I mean websites body's background color is a different color sometime it happens if you use a different theme so just to make sure just click on the background from here select this classic icon and I want to give the default body background color to white color just like this let's save it let's now go back and here I always love to use editing handles because let's say if you want to duplicate this button you need to right click over here and you can duplicate it from here then if you want to delete it you can delete it from this place but if you want to do your work more efficiently or quickly then you can enable the uh editing handles option so you just need to click over this hamburger from here go inside user preferences and here by default editing handle is turned off but if I make it on now have a look so if you know hover on any element you see there is a quick duplicate option there is a quick quick delete option with any other uh elements like with this container we can see this as well with this heading we can see this as well so it's super handy and also there are other options like responsive preview so okay we will talk about this later when this thing will come but here have a look let's say if you love to work in a dark theme so from here you can change the UI theme to dark just like this but for now I'm just keeping it to autod detect and here is the panel width so basically this is your panel this left panel so actually you can always drag it uh to the right side to make it bigger or you can shrink it just like it but when you refresh the page you can see the default value what is given here which is 300 so I'm just leaving it with 300 there is no problem with that and for the moment click on this update button by the way right after uh set up all this thing always make sure you have refreshed this page one time because sometimes uh there might be any cash issues or any other issues so just make sure you have refreshed it once so I'm refreshing the page and not only for this time when you create anything on Elementor and you cannot find any error you see you have done everything right but something is looking fishy some something is not working perfectly on that moment you uh you can consider there is some cash issues on your browser because this is a live editor you know so sometimes this kind of thing happens so if you feel like that you just need to uh save that page on that moment and you can refresh the page so later you may see everything has been fixed by itself all right right underneath here I want to create a client logo Carousel and I have said you before if you want to create your next section you can just click on this plus IC it will be created here but as I said this HTML element would wouldn't be shown anywhere so no matter if you create the section uh right underneath the HTML element or at the top of the HTML element it doesn't matter okay so you can either click on this plus button or this plus button both will work so now I'm just clicking on this plus icon click on this plus icon and here this plus icon I'm taking this structure and go under Advanced tab first I'm making the padding value to zero now let's unlink it because here at the left and right I'm adding 30 pixel of padding now within this container I want to take one child container so from here click on the Rubik's Cube icon let's drag this container inside here now with this container I want to add a border color at the bottom only so from here just go under style tab from here open the border and Border type would be solid and like I said I want to apply the Border only at the bottom so unlink it and only at the bottom I want to uh use one pixel of border and the Border color would be our Global color too oops here is the color this color and then with this inner container I want to apply some padding so go under advaned tab first uh I'm giving 60 pixel all around but now unlink it because here at the left and right I don't want any padding and here you may remember one thing the Navigator this is the life saer because you already see uh all the names are becoming container which is very confusing that's why I have renamed the container names for the banner area so let's do the same for this area as well so this underneath area this one so I'm just renaming it as HTML container so you can always understand that the HTML courser within this container and the container we have just taken I'm just renaming it as the logos container so here is the logos container and within the logos container we have taken another container so is the inner container of its parent now within this inner container I want to take the logos so click on the Rubik's C icon and here I'm searching for logo so this one and this one is coming from E kit that means Elementor kit the plugin so I'm using this client logo widget drag it within this area here and now so within this area we can use the client logos first of all I just want to delete all of them now let's open the first one it says title one I don't want to use any title but you are open to do anything you can make your own design I just want to use any logo here so click on this logo so for example I'm just using this invert logo here now from the settings so you can also mess with this settings if you want so slide to show I want to display uh five logos in a row so just like this and open the logo we only have one logo at this moment for the moment I don't want to use different logos so I can just duplicate it from here let's duplicate it couple more time only to give you the proper example just wait a little we can see all the logos are here and as we have selected from settings the slides to show number is five so five logos are showing at a time and then this slides to the next logo right so now let's go under style tab from here I'm making the padding value to zero also here minimum height I'm making it to zero so we can see only the logo we don't want that space at the top and bottom now let's open this logo option here I'm making the mer margin value to0 then here is padding so here at the top I'm giving 27 you see it's been applied and here I'm giving 23 at the bottom just like this and then I just want to reduce the opacity of the logo so from here instead of one I'm just giving it to 0 maybe 0.3 just like this and then you can see by default there are some Shadows but I don't want that so from here box Shadow I'm making all the value to zero so there is no Shadow here but here on Hover I want to make the logos color to uh I mean I want to make the opposite value one on Hover actually by default it's that so here on Hover oops not in Shadow but on the border type here just go under opacity I mean just go under hover here by default on Hover the opacity value is one that's why when we hover on this logo we can see the real color of that logo but also I want another thing so from here just go under this main hover tab on Hover I also want to make it background color uh bit lighter so from here let's select the color code so that would be hash F4 F5 f8 just like this so initially it's looking like it and while you hold over it's becoming this light color so it looks really great and we just need to make sure it's responsive so click on the responsive icon go to tablet view on tablet view everything is looking great but I think we can adjust the padding so select the main container go under Advan tab from here uh unlink it so here at the left and right I'm giving 20 pixel of padding instead of 30 and then here we can see at a time we can see two logos but for tablet just go under oops make sure you have selected this uh element which is the client logo element so select it go under the content tab here go inside of settings so slides to show for tablet I'm giving here three so it's now looking perfect but for the mobile device mobile device everything is looking great but here instead of one I want to show here two logos just like this all right we have done the responsiveness of the client logos area let's now create our next section that would be the services section so right underneath the logos area you know you can just click on this plus icon to create a container at the top of this HTML area so click on this plus icon click on this plus icon and this time I want to take okay so let's take this container as well like before so I'm taking this structure and here the first thing I want to do I just want to make its direction to row just like this and then this one is very important just make the rep value to wrap I'm making it wrap because the Inner Elements will take their own width you will understand it properly when we will create the Inner Elements just for the moment keep the wp value to wrap and you see the Gap is coming automatically zero because we have given the global Gap value to zero now with this container go under Advanced tab here padding I'm giving padding value to 30 but here at the top I'm giving 100 oops 120 and at the bottom I'm giving 80 pixel now within this container I want to take an inner container so click over here now take one in our container as just want to give it some space at the bottom so from here unlink the margin at the bottom I'm giving 50 pixel of margin Bottom now within this inner container I want to take some heading so click on this plus icon here I'm dragging this heading element and I want to make it heading four so H4 now I want to change this text so here I'm pting some uh damy heading and now I'm making its alignment to centered and you see as we have say I have selected the H4 The Heading 4 is getting all the styles from Global heading 4 so this is the reason I have preset all the global settings earlier okay so if I uh just make it to H3 it's getting all the globally styling what we have uh given to the heading 3 here is the heading to just like this so here I'm making it to H4 now here with this heading at the right side of this heading I want to add some uh border or element you may you may see or you may name it so let's add that thing here but to do it again I'm saying it's pretty cool if you just want to keep it like this but now to make it more cool I want to add some custom code so the symbol would be at the right side of this area Okay so first of all let's again open up this custom snippit and this time we will be pasting the snippet right underneath this code here so just go to jimah digital.com and here let's scroll down here it says subtitle border okay so right underneath subtitle border you can see this little snippet so I'm just copying this whole snippet from this place let's just copy it now go inside Elementor and remember we need to put this within the style tag so right after this I'm just making some space so here within uh this place before this style tag here anywhere of this place I'm just pasting it right click over here click on paste so it's here at this place so these are basically the code I have just pasted and now you know whenever you put any custom code we need to do two things so we have first uh pasted the code and also we need to add the class name with the particular element in that case this is the heading so just select it go under its Advanced tab here we need to paste the class name so go to jimah digital.com and here we can see subtitle class so the class name would be this just copy it and I'm pasting the class name within the class field here now actually the uh I mean the icon has been added but we cannot see it is at this right side so to fix it make sure you have selected this heading from under its Advanced tab you need to make its align self to centered so we can see the symbol here at the right side by the way this is not an image this is created by custom CSS code so you can change this color as well with your own color so if I just go again inside of the code so just uh from here okay so you can uh change the code from here as well so here instead of this color if you want to use your brand color so of course it's a gradient color so here if you change the first color as red and the second color as for example blue you see these two colors are coming from this place so they are gradient color uh combining with the red and blue just like this but I'm just going back to the previous color but you now know from where these colors are coming right now underneath this heading I want to add another heading so okay first let's close this responsive bar from Top now click on the Rubik's scbe icon here I'm dragging another heading underneath this here and I'm again pasting some heading text here in this place and I just want to make the alignment to centered then go under Advanced tab unlink the margin because only at the top I want to add 5 pixel of margin and then here actually I want to make it with custom width so no matter how many words you put here that will be uh adjusted within that width so let me give you the example here withd I'm making it to custom and then you can adjust the width you see the text are adjusting with it within that width so here I just want to keep it to uh 50% and I want to make it centered you may remember we have given uh the centered alignment from here but it won't work as we have given it custom width so now if you want to make it centered just go under advaned Tab and from here make the Align self to centered so it's now centered here now here we can again look at the Navigator because like I said I always love to rename things to make it easier so here first make sure we have created this container and this area is for service so here I'm renaming it as service container now within the service container here we have taken another container so we can just rename it so here I'm just renaming it as inner one container So within the inner one container we have this first heading here is the second heading let's now minimize the inner one container because right underneath the inner container not within the inner container right underneath the inner container I want to take the single service curs or Services container okay so click on this Rubik's Cube icon and here let's drag this container underneath here so just make sure if you minimize it and if you see this container is also minimizing within this container so which means this container is went inside of this container but I don't want that so first of all uh okay first of all I'm just renaming it so we can just rename it as service one okay so I don't want it within the inner container so first of all I'm just moving it outside of the inner container but now not at the top of this so I'm making the inner one container at the top of service one so here within the service container okay let me just minimize it one more time so this is the service container open it here within the inner container we have this two heading but here this service one is not within the inner one container it's a different container okay so let's now open the Service one this container so here I'm making the service one this container content width to full width I'm making their width to 50% then I want to add some margin at the bottom so un link it at the bottom I'm adding 40 pixel and then only at the right side I want to add 20 pixel of padding now within this service one I want to add inner container So within this area let's click on the Rubik's Cube icon here I'm dragging this container within the service one and we can rename it as inner 2 for example actually you can name it anything I'm just giving only to make it easily understandable for me so I have selected the inner two this this container now I'm making the minimum height to 350 pixel and then also from here I'm making the Overflow to Hidden so let's make it then go under style tab because I just want to give it a slight Shadow so from the border let's open the box Shadow so it would be the vertical value would be 10 and then the BL value let's make it to 60 and then I want to okay so you can see it properly so you can select the shadow color from here I want to make it really transparent because if you drag this color bar to the right side you see the shadow is becoming too sharp I don't want that I want to make it really uh transparent just like this so overall it gives us a visually Shadow Vibe all right now with this go under Advanced type because I want to add some padding so UNL the padding by the way these numbers are very important you need to give the same numbers otherwise it won't look cool you know so first of all I'm just giving the Top Value to 50 the bottom value to 50 and then the left value to 40 and the right value I'm giving here 270 later we will be adding some class name with them but for now I'm just skipping class names let's just focus on this structure how I'm creating it now within this inner two container I want to take another inner container so click on the Rubik's SK icon and from here let's drag this container within inner 2 so you see within inner two we have another container I just want to rename it as inner 3 so for inner three I'm making the content width to full width and here you can give any uh width with this container so here instead of percent um giving it in pixel so here I'm just giving it to 270 pixel oops 270 or 20071 then I also want to make the from under additional option overflow value to Hidden so when we will do any animation nothing will be uh at the top of this element so make sure you have also done this now within this container within this inner three I want to insert an image so click over this Plus on and let's drag this image widget here so okay so let's put an image here click on choose image let's select this image the service one image click on select now I want to make this corner rounded so to do it make sure you have selected the parent container of this image which is inner three so I have selected inner three go under style tab open the border and here the Border radius I want to apply it only at the top here so unlink it at the top I'm giving here 400 pixel of Border radius so only this corner is becoming rounded if I give it to the right as well you see this corner is also becoming rounded but I don't want that I'm making everything zero just the Top Value to 400 now I want to position it at the right and bottom corner so make sure you have selected the three this container go under Advanced tab from here set the position to Absolute and now from right side so horizontal orientation would be from right so default zero is fine but you know you can just adjust it the way you want I'm just keeping it to zero and vertical orientation it would be from bottom also you know you can adjust the position but I'm just keeping the vertical orientation offset value to zero so it's here at the right bottom corner then let's do one thing just select this image click over this image now go under Advanced tab just to make sure you have given a higher Z index number because it's necessary for the animation for now I'm not explaining the Z index is kind of more CSS stuff so for the moment just keep the Z index value to higher than one so I'm keeping the Z index value to two now I want to use an icon here in this place so first okay let's minimize this inner 3 because I don't want to take that icon within inner 3 I want to take that outside of inner 3 within the inner 2 okay so here now click on the Rubik's Cube icon but I don't want to use any icon I will be using image so here is's the image widget let's drag it here we can adjust I mean we can readjust the location from the Navigator if it went wrong so I have just puted the image here you see the image is in this place so just make sure if we just minimize the inner two you see this image is outside of inner two but I don't want that so open the inner two now first I'm just dragging this image at the top of inner two here but now let's minimize the inner two because I want this image at the bottom of inner 2 so I'm dragging this inner at the top of the image here in this place so here within the inner two we have got this image and here is inner three and within the inner three we have taken this image okay so this is the structure now within this image that we have just taken we will be adding an icon okay so let's choose the image from here for the first one we can select this icon and click on select by the way if you wonder where to get this kind of beautiful PNG icons then you can go to one place or one website which is called flat icon.com so here you can get unlimited not actually unlimited but a lot of free icons so here if you just search for any icon you'll find that so for example let's say you want any education related icon just search for it so here you see there are 600k Plus education icons so you can select this icons from this place there is a download button so you can download the P icon from that website from this flat icon.com website okay so I have collected the icons from that place so go inside of element page builder now make sure you have selected this image from the Navigator and now just have a look at this Navigator if we didn't rename the uh container names it would be super messy we cannot understand by ourself how this structure is working so everything while looking like container inside container then inside another container like that but as we have renamed the container's name now we can easily understand what is inside of which container right so from here from inside of inner two I have selected the image or the icon now go under style tab here I'm making its width in pixel let's make it to 34 Pixel now go to padding because here I want to apply 30 pixel of padding with this icon and then here I'm making the Align self to left and similar like before I also want to work with its position so from here make the position to Absolute now here I want it from right side so from right it would leave only 75 pixel so from here I'm giving here 75 pixel and then from Top it would leave 60 65 pixel of space so from here I'm giving it to 65 pixel so it's in this position but now you see it went underneath of this image because is it Z index value is higher so if you want to put anything at the top of other thing you need to make that zindex value bigger than the other element so this imagees zindex value if we click over this image just go under Advan tab you see its Z index value is two so if we want to make this image at the top of this image so that's Z index value should be higher than two so now let's select this image so here is the image within the inner two select the image and here we need to make its Z index value higher than two so here Z index value I'm making it to three so it's now at the top of this bottom image then I want to make it background color to white so let's just okay let's scroll down and from here background open the background type so here let's just give it white color and also I want to make their Corners rounded so open the borders and here border radius I'm making it percent and here I'm giving it 50% also we can give a little bit of Shadow so it would look like it's floating at the top so box Shadow here horizontal value zero and here vertical value 10 and blare value let's give it to 60 but you know I just want to make it more transparent so maybe just like this it looks perfect now right underneath this icon I want to add a heading so click on the Rubik's Cube icon from here let's drag this heading underneath here so you see from the Navigator it is just going underneath this here is the image and right underneath here is the heading they are not going inside of inner 3 so you can minim minimize the inner three they inside actually within the inner two we have three elements right if I minimize it again within the inner two here we have one image one heading and one child container which name we have renamed it to Inner three okay so we have worked with the image here is the heading now let's work with the heading so I just want to change the heading I inan heading text so I'm just replacing the text here also go under advaned tab here under I'm adding 15 pixel of margin bottom then here the same thing Z index value to two right underneath here click on the Rubik's CU icon and here I'm just dragging this text editor field here underneath also I'm pasting some dummy text here and I just want to make it Z index value to two as well by the way everything is looking great but I think we can reduce the size of this heading so select it go under content tab by default it's heading to but instead I'm making it to heading three so right now it looks perfect by the way if you want you can just keep it like this but now you know I always love to use some kind of Animation so with this container now I want to use the animation so to make the animation we need to do two thing first of all we need to add the code snippet and then with these elements we need to add some classes okay but if you want you can if you don't want that uh hover animation you can just keep it like this you don't need to add that CSS code or the CSS classes with this elements okay but if you want the animation just follow with me okay so here first of all I want to add the code open the HTML snipet and here right underneath the existing code so just make sure you have put it before the style tag here so I'm making some empty space Here and Now go inside of jyah digital.com so here let's scroll down it says service animation CSS so you need to copy this whole snippet from here so from this place let's just copy it so from here let's copy this code snippet go inside of Elementor and here I'm just pasting the Cod snip eight you know we have pasted the Cod snip eight here but we cannot see any change in this place because for sure you know we need to add the class names so here if we go again on the website here we can see service classes so this one is for service one so go inside Elementor and that's why this renaming is important so now go inside of service one we can minimize the service one so start with service one go under its Advanced Tab and we will be pasting the clust them within this field so from here for the service one we are just copying this class name let's copy it and paste it within this place by the way while we will be copying and pasting uh this area then we will be needing this class names but for the moment we just need this class name then here for the service inner three class this would be the class name so I'm just copying this class name go inside elementer and here within the service one actually here we have done one mistake because you see while we're Hing here the here is the animation is going outside of the area which is we have done the mistake here so instead of putting the class with this service one card so let's just remove this from this place so I'm removing the class name from this place actually instead of this service one this card we need to go inside of this container it says inner two so go under its Advanced Tab and within this field here so let's just just copy this class name from this place go inside of Elementor and we can paste the class name here so have a look right now it's looking great but now we need to add some classes as well so here let's select the inner three so with inner three we need to add the class name so here we can see with inner three we need to add this class name let's copy it and we can paste the class name here now within the inner three we have inserted one image so this is basically this image so select the image go underneath Advanced Tab and here we need to apply a class name as well so from here it says Service inner three image class so that would be image let's copy it and with this image I'm applying the class name here now here let's go to jimah digital here it says Service icon class that would be icon here's the H3 would be title and this one would be text so from inside Elementor so this three basically select this image or icon this one its class would be from here its class would be icon then this heading this is the heading three select it go under Advanced Tab and its class would be title and then the text editor go under Advanced tab its class would be text now have a look if I just overover here we can see the beautiful animation here I know if you're a beginner you can do some mistakes like you can uh put the class name to any wrong element that's very normal just follow the last 5 to 7 Minutes very attentively so you can create this exact same awesome animation like this now you know we can easily just duplicate this container but but before duplicating it I want to do one thing I want to just make sure it's looking great on mobile and tablet so I want to do the responsive design first because let's say before doing responsiveness if you just duplicate it then you need to do the responsiveness on the other curse separately but if you do the responsiveness beforehand and then if you duplicate the element so you don't need to do the same work two or three times more right so I just want to make it responsive first so I'm selecting this container and make sure we are starting from this service one this container now let's go to the responsive mode first go to tablet device so you see on tablet device we need to fix something so first of all we have got a huge space on inner two so select the inner two because here you see at the right side we have got 270 pixel of padding we don't want it at tablet so I'm making the padding value to 30 then let's select the inner 3 this container so here is the inner 3 this area but you know what I want this image at the top in this place so let's just minimize it and we can just drop it at the top of this image here so you see the inner three this element is at the top here also desktop it won't be changed because we have set its position as abolute position so there is no problem if you put the inner three at the top of this image so let's go to the tablet view so now I don't want this rounded corners on the tablet only so from here make sure you have selected this inner three go under it style tab open the border and I don't want this border radius on tablet so from here I'm making it to zero so it's looking pretty nice and within inner three we have got this image so select it always make sure it's width is 100% so by the way if you want you can keep it like this but I'm making its width to 100% And then let's go back to Inner three this container go under its Advanced tab unlink the margin so here we can adjust the bottom margin according to our need so let's do other work then we can come back to this place so first let's start with this image so which is basically this image let's select the image and here only for the tablet device just go under its style Tab and here instead of 34 we can make it to 28 pixel then go under Advanced tab I'm making its margin to zero also only at the tablet device I want to make it centered aligned so from here align self I'm making it to centered and then the position it would be from right let's set the offset value as zero and here from Top let's set the offset value to zero then with this H3 and text just select the H3 go under content make the alignment centered only for tablet device and for this paragraph select it you can just click over it now from content we can make the alignment to centered now here with this heading select it again go under advaned tab I want some space at the top so first unlink the margin and at the top I'm adding 80 pixel I think it's too much so we can add 30 pixel at the top and bottom let's add 15 pixel now here with this icon or this image let's select it and here margin bottom we can actually add some negative value oops okay first let's make it zero and unlink the layout actually instead of this image let's select the inner three this one because we have already made the margin value to zero now from here you can adjust the position so I'm just clicking on this down arrow because we need some negative value so let's just play with it I think -48 pixel looks perfect with this card so on tablet device it will look like this now have a look how it will look on mobile device so let's go to mobile device so here I think everything is looking great but I don't want this padding here so make sure you have selected this service one this container so I don't want any padding so I'm making the padding value to zero and also I want to give it a width so if anyone uh show it I mean if anyone visit the site from a wider Mobile screen they can also see the WID I'm setting now so from here only for mobile device I'm setting this containers width to 400 pixel minimum oops not within the height field I should give it within the width so the width would be 400 pixel all right now we can go back to the desktop view from here because now I want to duplicate it so from the Navigator make sure you have selected the service one because I will be duplicating this one so let's copy this service one so right click over here click on duplicate and then here I'm just renaming it as service 2 then just duplicate the service 2 and here I'm renaming it as service 3 Let's just duplicate is as well so here I'm just renaming it as service 4 so now have a look so right now this service 1 2 3 and four everything is looking great animations are working perfectly but now I want to give give it a really nice look look so here with the second one I want this curved image here so overall these four Images together will look like a circle okay but if you want to keep it like it you can do that but I'm showing you how you can make it more cool okay so let's select the second one you can also select that from Navigator so from here let's select the service 2 so first of all go under its container and here we don't want the space to the right right side instead we are uh let's add the padding to the left side 20 pixel here then within the service two here let's select the inner two because we need to adjust the padding as well so go under advaned tab here at the right side I'm adding 40 pixel and at the left side I'm adding 270 pixel and here you know with the inner two we also need to change the CSS class name because here it says service block one so here just keep everything same so here keep the inner box everything same just instead of one here I'm writing two okay just like this then from here within the inner two we have inner three select the inner three go under its Advanced tab because we need to adjust its positioning so it would be from left and from bottom now let's go inside of inner 3 and here is is our image but we have given the Border radius with the inner three so select the inner three go under its style tab here is the border and instead of top so I'm making the Top Value to zero this time I'm giving the value to the right side so here is 400 so it's looking like okay let me move the Navigator so here it's looking like this but we also need to adjust this position here at this place so to do it from here let's select this image or this icon go under its Advanced Tab and here we just need to make the horizontal orientation from left side to 75 pixel so its position is now looking great now let's do some work with this third one so it would be our service 3 let's go inside here select the inner two and here we just need to change the class name so here instead of one I'm writing here inner two oops I'm just writing here service block two now let's go inside of inner 2 select the inner three go under Advanced Tab and here I'm changing it position so it would be from right side and here from top side so in this position also uh let's go under style tab open the Border because here instead of top let's make it zero but I want it at the left side so here it would be 400 so it's looking like it let's adjust the position of this image so let's select this image go under Advanced Tab and from here it would be from right 75 pixel is correct and vertical orientation would be from bottom and it would be 65 pixel so in this position it looks great now let's work with the service four so from here I'm selecting service 4 go under Advanced tab here similar like the service 2 I don't need this right padding but we need left padding just like this now within service 4 let's open it select the inner two and go under advanc tab you know instead of one here it would be four the class name then go under Advanced tab from here we need to adjust the padding so it would be 40 and here it would be 270 now within inner 2 let's select iner 3 go under its Advanced Tab and the position the horizontal orientation would be from left side and it would be the vertical would be from Top now let's go under style tab open the border the Top Value here would be zero instead the bottom value would be 400 also we need to add adjust the position of this icon so from under Advanced tab it would be from left it would be 75 and it would be from bottom to 65 so now if I move the Navigator have a look here this areas animation is looking really awesome but also we need to check the responsiveness so from here okay for the moment just save it because I don't want to lose our hard work so okay for the moment M I'm closing the Navigator just click on this responsive mode go to the tablet first so on the tablet view I think everything is looking great so yep I think we just need to adjust the position of these so from here let's select it and here we need to do just one simple thing like we need to just make its offset to zero also the vertical offset to zero so same with this icon as well so from here just offset value would be zero also here vertical orientation offset value would be zero same with this one so here the offset value would be zero also this offset value would be zero all right so all these curs are looking great on tablet device and I think we can also adjust this heading so select it for tablet device let's just go and style tab because I want to reduce it size to 36 pixel and also we can just go under Advanced Tab and only for tablet device we can make it with to 65% so it's now looking great on tablet device let's now move to the phone device or mobile device so here let's select this container and here I think we can adjust the padding make it 20 now let's link it at the top I'm giving 120 and bottom let's give it to 80 pixel then with this text or this heading now first um making it within we can also give it in pixel and let's now make it to 345 pixel just like it and we can also make it size a bit smaller so only for mobile device we can make it to 30 pixel so this area is now looking great on mobile device also on tablet device and on the desktop it's looking great for sure so don't forget to click on this update button to save your work and by the way you know you can easily change all of these images icons and hitting the way you want for example here if you want to change this image just select this image and instead you can use this image for this one select it and you can oops you can select this one then for the fourth one let's select this one so in this way you can easily change all the images and for this icon let's select this icon go to go under content tab from here for the second one let's select it for the third one oops go under content tab let's select this one and for the fourth one let's go under content select this icon and selected so in this way you can also change all of this heading I'm doing that really quickly and coming back to you so I have also changed all of this heading now click on this update button to save our work all right let's now move to our next section that would be the portfolio section so here we can you know you can just click on this plus icon so I'm clicking here and let's take this structure this time and here I'm setting the minimum height to 590 pixel and then I want to give it a background color so from here from the Color Picker the color code would be # 15101 e so this kind of dark color and also I want to use a background image so from here or we can give it as a background overlay so just choose the image from here now I'm selecting this PNG image this one so it says portfolio BG pattern now click on select you can see it here right so now I want to adjust the position let's make the position to Center Center here repeat value to no repeat and display size let's make it to cover and also I want to give it some padding so here first I'm making 230 pixel let's now unlink it because here at the top I'm giving here 120 and here at the bottom let's just keep it 0 pixel and now here I want to add a subheading and heading and you know what we can actually reuse this subheading and heading so from here I'm just right clicking over here click on copy and here right click over here click on paste so the heading is here also with this one copy this heading from here and write underneath this subheading right click over here and click on paste now the first thing I want to do I want to change the color of these headings so from here let's make the text color to white also for this one let's select it and from under style tab let's make its color also white now I just want it to say recent portfolios so here I'm typing recent portfolios and here I'm just pasting another text here so this is our heading now right underneath this area here I I want to take another container and basically the uh reason behind the space here I'm taking because I will be uplifting this container that I will be creating here at the top so you will understand it properly let me just make it first so first of all okay so here actually I forgot to rename this container so from here open the Navigator and from here so we can rename it as portfolio container and within the portfolio container here we have got two heading and right underneath the portfolio container click on this plus icon and here let's take another container here and okay so I'm selecting this one and for the moment I'm just renaming it as card wrapper because my goal is to wrap some inner curves within this container so here let's just move this or for the moment we can just close it and here first Gap value I just want to make it 30 for this one then let's add some padding so from here first I'm making the padding value to 30 and let's now unlink it because at the top we don't need it so here at the bottom I'm making it to 120 pixel now within this container I want to take another container click on this plus icon and here I'm dragging this container and here let's open the Navigator because I just want to rename this container as for example block one or you can rename it as card one like that because we will be duplicating this container later okay so first of all with this one I'm making the content width to full width and here I'm making the width to 33.33% also from under Advanced tab I'm making the adding value to zero and margin value to zero now here within this container okay let me open the Navigator so from here within the block let's insert another container here so here is one container so it's within the block one and I'm renaming it as image box and here within the image box okay first of all with this image box I'm making it overflow value to Hidden so nothing will be overflowed over this container and here within click on this Rubik CU icon I want to take an image so here is the image widget and you see it's inside of the image box container let's choose an image from here so for this one let's select maybe this one or let's select this image click on select and here we can see this area and with this image I just want to make it width to 100% now right underneath this image box container I want to take another container within block one so click on the Rubik's Q icon here I'm dragging the container underneath so here just make sure it's not inside the image box I want to keep it within the block one so here here is the image box I want to keep the image box at the top oops just like this so here within the block one first we have got image box and there is an image within it and here is the new container I just want to rename it as content box or in short cont box here with this content box first I'm making the content width to full width and then we can make it width to 85% or 86% let's go under its Advanced tab I'm making the margin value to zero now I want to position it within this area so to do it let's go under Advan tab from here let's make the position value to Absolute and here the horizontal orientation I'm making the offset value to 20 pixel and from bottom it would be 20 pixel and here I want to keep it at the top of everything so here I'm making the Z index value to 99 all right now within this content box container I want to insert a heading so from here let's drag this heading within this place and I'm making this tag as span I just wanted to say for example marketing now I just want to make it color to white color and let's add some padding from here so we can add first 30 now unlink it because at the top and bottom I just want to add five pixel of padding just like it then I'm giving it a custom width and we can give its width in pixel let's make it 150 pixel then underneath here here is the option for background so from this place I'm giving it a background color which is # ae8 ffff or we can use it as a gradient so let's select the gradient color so this is our first color and as our second color I'm using hash 72 4 3 F2 and from here let's make the angle to 270 now underneath this heading I want to add another heading widget so from here click on the Rubik's Cube icon and here I'm dragging this heading element here let's paste here some dummy content and now let's go under style tab here I'm making its size to 24 pixel also the line height we can keep it 29 pixel now let's give it some padding so from under Advanced tab here first I'm making a 24 pixel now let's unlink it because here at the left and right I'm giving here 35 pixel of padding also I'm giving here a custom width and it's also in pixel and let's give here 270 pixel and I want to keep it always LIF align so align self I'm giving it from start let's now give it a white background color so from the background let's now select the classic option and here I'm giving it a white color also I want it to be looked like something floating so here I want to add some uh Shadow so from border let's open it and from the box Shadow here we can just keep everything same or we can keep the vertical value to 10 blare value to 30 and I just want to make the opposite really lower value just like this all right so far it's looking like it if I minimize it you can see it properly so actually it's looking like it and as always if you want you can just keep it like this but I want to add some animation with it so first of all let's open it and within the HTML first I will be pasting some code so let's open it and here underneath all these CSS lines so first of all here let's create some space now go to gahad digital.com you know the link is in the description so here if I now scroll down it says portfolio animation CSS so it's only a few lines of CSS so from here let's just copy this code so here just copy it go inside Elementor and paste the code here and now you know we have pasted the CSS code we just need to add some class with this portfolio section so first of all let's start from here so it was our card wrapper container this one you may remember so here within this area we have taken the single card or the block area so this is the block one let's first select the block one you can copy and paste the class name from here as well so portfolio classes here you see it's a single block class that would be project- block so let's copy it now go inside elementer so this is the single block from under advanc tab here I'm pasting the class name now within the block one here we have got image box let's select the image box container because here from here you see within the single block here is the image box class that is image box so here um going under Advanced tab let's paste the class name and here we can see s within single block there is a Content box container so that's class would be content dashbox so copy the name go inside elementer and here is the content box so from under Advance tab within the CSS classes field let's paste the class name here now have a look the card area is looking the same but now if we hover on the single card or block we can see see this beautiful hover animation it looks really cool and now we can easily duplicate the block area so this is our block one let's minimize it and we can now right click over here click on duplicate and here we can rename it as a block two then here we can just duplicate this block two and we can rename it as block three but we can see the block one 2 and three they positioning one after another vertically why is that because they parent this card wer container we just can go under its layout tab and we need to make its direction to row so they are now one after another horizontally now you know you can easily change the images just click over the image and from here let's select another image this one let's select it and for the third one let's select this image so here I'm selecting this image select select it so they are now looking really great and you know just by clicking over any text you can change the heading like here I'm changing this heading as well so far this area is looking great now I just want to lift this area at the top of the previous section here so to do it first of all I'm selecting this parent container you can see here is the card wrapper container I have selected it go under its Advanced Tab and here just have a look here so first I'm unlinking it and have a look let's just keep it aside if I put here for example 100 pixel of margin you see it's creating 100 pixel at the top of this area and if I keep it zero it's remaining like this but if I start creating some negative value so it's now going at the top so it's creating negative space right right so here I'm just putting - 295 pixel so just have a look now it's looking really great I I personally like this kind of overlapping design now we just need to check how it's looking on tablet and mobile so from here let's click on the Navigator so oops not Navigator let's now click on this responsive mode and here first go to the tablet view so here these headings are looking great because we have copy and pasted this heading we have made them responsive earlier so we don't need to do it again and here I think we need to do a little bit of work so here with this one let's open the Navigator so I always use Navigator because I just want to U make sure I have selected the correct container okay so here let's click here again and here we can see we have selected the image box this is the reason so I wanted to select this the block one this container so let's minimize it also minimize it minimize the block three because I want to work with this three so select the block one I want to make it with so just go on the layout tab and instead of this let's make it in percentage only on tablet device I'm making its width to 47 or a little bit 47.75 per. same with the block two so it would be person 4 7.75% also with the third block so it would be percent 4 7.75% now have a look this block 1 2 and three they are within this card wrapper container this container so this card rapper container is the parent container of this three blocks Now by default if I select the card raer container and go under its layout tab you see by default def fault their W value is selected to no WP and when any parent container is set to no W value their child containers like block one 2 and three they always try to adjust within its parent container within the same row but now have a look if I just make this card wrapper containers wrap value to wrap they are now originally taking 47.75 of width so this is how this value work it helps the child containers to take their original width and now here I want to do another thing so just have a look here so these two are here and this one the third one is left aligned but I want to make them centered aligned for that reason here I'm making the justify content to centered so they are now centered align only on the tablet device so the tablet device is looking great if if I now go to the mobile device so here at the mobile device this area is looking great and this areas are already looking great so I don't need to do anything on mobile device all right just click on this update button to save our work and let's go back to the desktop view so now if you want you can leave the homepage the way it is it's already looking great but here I want to add some other sections so let's scroll down here is our beautiful Services section and here is our beautiful portfolio section now in between okay let's close the navigator for the moment so now in between this portfolios area and this Services area I want to create another sections here we can name it as our FAQ area okay so here click on this plus icon and here let's take a container so I'm taking this container and here I just want to give it a background image image so from here let's select an image and I think this is a great background image so ifq Banner I'm selecting this one now from positioning let's make it to Center Center repeat value to no repeat and display size to cover and let's add some padding so from here I'm making the padding value to 30 you are already familiar with all of these so here the Top Value to 120 and the bottom value to 195 just like this and here also I want to add a overlay so go under here layout so okay just go under style Tab and from here open the background overlay and background color we can give our Global color maybe we can use the global color one and let's make it 0.6 so a bit darker like this now here first I want to add a heading so let's drag the heading from here I'm dragging The Heading element here let's paste some text here and now I want to make its color to white color so from the Color Picker let's make it color to white and from under content tab I'm making the alignment to centered also from under style tab I want to make it a bit bigger so from here I'm making it to 60 pixel and then underneath here I want to create a huge space so go under Advanced tab unlink the margin here I'm making the margin bottom value to 100 pixel because here I also want to add some other area or some other container and then to make it always responsive like this we can just give it a custom width maybe we can give it to 80% and you know when we give any width to custom width then this okay just go under content tab this alignment no longer work so what we need to do just go under Advan tab from the Align self we need to make it as centered now underneath this heading here I want to use a ifq section at the same time I want to use a contact form and actually I want to create the contact form step by step on our contact page so we don't need to do one thing twice so in this homepage I just want to import uh contact form template here so to do it actually we can easily do it because I already have prepared the template for you so you just need to import that template within this area so let's just click on this plus icon and here click on this plus icon as well oops just close it because this time in Just click on this plus icon and instead of clicking on this plus icon we need to click on this folder icon and now let's go under my templates this tab and you see we haven't added any templates yet so click on this top Arrow icon this is the import template option so this time click on select files and after downloading the resource file when you unzip it you will basically find these two folders one is image and another one is templates now if you go inside of the templates folder you will find all these Json formatt templates so here we can see this Jon file it says FAQ with form just select it and click on open and you just need to make sure this Jon file is safe of course our Json file is safe so I'm clicking here do not show this message again click on continue and we need to enable our website for uploading the unfiltered files so here I'm just clicking on enable and import and here we can see right underneath the my templates it says ifq with contact form so here click on insert and here click on apply and here you go we have got this layout but we need to do a little bit of customization so first of all let's go to jimf digital.com because here if you scroll down here you can see fq CSS we have some CSS for the fq area so from here let's just copy this CSS snippet from here so let's copy it go inside Elementor and here just scroll down within the HTML field just right underneath here before the ending style tag here I'm pasting the code we have just copied now have a look to our fq section here it has got the color but first i'm just making its color to white color so from here let's make it white and then also this question and answer this heading I'm making its color too oops from here let's make its color to white then with this right container let's select it go under its style Tab and also I'm making its background color to white and now within this area so here if you just put your hover we can see a green line here or you can just open the Navigator you can select this heading and just have a look just right underneath this heading we can see another wiget it says M form and I will be showing you how to create a form from scratch on the contact page but I'm just doing it really quickly so we don't need to do one thing twice so from here just select the mid form I can now just import the form that I already have created so from here click on edit form and you know from this place you can give it any name so here I'm just naming it my form form home and keep everything default just click on edit form and here you can create the form step by step but now I just want to import the template because I already have created that click on this folder icon now click on this import template icon click on select file and this time it says contact home. Json I'm selecting it click on open so here it is it says contact home click on insert click on apply and here is the beautiful contact form we have got so this field is for name here is the email field and here is the text area so whenever anyone fill up this form and click on send a message we will get a notification on our WordPress dashboard so if you just keep it like this there is no problem but I'll will additionally show you how you can create it from scratch now just click on this update and close this button so for the moment let's just close the navigator and have a look so here is our beautiful faq's so just click over this fq if you want to change this FAQ you can do that from left side so this one is the first one here is the second third and fourth one so you can change the question from within this field you can change the answer from here within this field so in this way you can create as many as ifes you want so you can just if you want you can duplicate it and then you can change the answers just like that or if you don't want it you can delete it from this place and here I want to tell you another thing as I have imported the template of this section like this fq and this form let's say if you want to learn how to create this area step by step as well then I'm not leaving you anywhere you can just go to Kit Papa YouTube channel you can just search for kitpa on YouTube or I will also put these YouTube Pages Link in the descript description on that YouTube channel I will upload the step by-step process of creating these areas as well so by following those tutorials you can create these kind of areas step by step by yourself so not only this area if I import any other template for any other sections or for any other Pages you will find their step-by-step tutorial on kit Papa YouTube channel all right now we just need to check if it it's responsive or not these areas are responsive because we already have done that before creating the template so here click on the responsive mode just go to the tablet device and have a look these areas are looking already great because I have made those responsive for you if I go to the mobile device you see this fq area is looking great all these accordians are looking great this form everything is responsive and here here we just need to fix this area because you see it's looking kind of weird so let's start from the tablet device so here let's first select this container because I want to reduce the padding first so here first I'm making them 20 or 30 pixel and here at the top let's make it to 120 and here at the bottom I'm also making it to 120 now with this heading let's select it I just want to make its size to 42 pixel and then I don't want any margin so here I'm making it to zero and then let's make it width to 100% so right now it's looking great on tablet device if I now move to mobile device so on mobile device we can just adjust the padding of this container select the container and here first let's make everything 20 now let's unlink it because here at the top we can make it to 120 and at the bottom we can make it 100 or 95 just like this and then I also want to reduce the font size of this heading so from the typography let's make it to 36 pixel so this area is looking great and these are already looking great so here we can just click on this update button to save our work let's go back to the desktop view here so far our homepage is looking great this section here this section everything is looking great and you know we will have a dedicated about page but if you want you can include an about section within the homepage as well so here I just want to add an about area right underneath this Banner So within this banner and this client logos let's click click on this plus icon click on this folder icon and here click on this import template icon click on select file and for this area here it says about section homepage so select this Json file click on open so here it says about section homepage click insert and click on apply and here we go if we scroll down here we can see the beautiful about page and here we need to modify a few thing and here I want to tell you up front this area you can see here actually this is not for desktop it's only for mobile devices so here we can see it because we need we we haven't turned off the mobile view option which I mean by that if you just click on this hamburger icon click on user preferences because you can create some areas which are only visible for mobile that will not uh be visible for desktop you can create any areas like that and this is one of that kind of area but here first we need to hide the hidden element here you see responsive preview hide element so if I hide it we can no longer see it but have a look now if I go to the responsive mode and if I go to the tablet view here we cannot see it yet but if we just move to the mobile view here we can see that area okay so it's only visible for mobile device okay let's now go back to the desktop view but here okay first of all if you want to change an image you know it's pretty easy just click over this image you can change the image just click over this image you can click over any text you can change that or heading or anything you can change everything even if you want to change this bar just select it or click over here so instead of 77 you can change the number you can change the text instead of marketing you can uh say it anything if you go under style tab so you know you can change all these colors and if you just go inside track you know you can change this active color with anything so everything is editable you you can just do it everything by yourself and like I said if you just go to Kit Papa YouTube channel you can see how these areas are made step by step because this tutorial is already so longer I don't want to make it so long so if you want to your if you want to make your website really quickly you can uh uh use this templates I'm providing but if you want to learn how these areas are made as well you can watch those videos so here I think we need to do a little bit of touchup so first of all I'm just making this color to white so just click over it go under style tab from here I'm making its color to white color and yep other than that it looks great but actually I have added uh some animation with this area as well but we cannot see it because we need to add the custom CSS code so just go to jimah digital.com and here right underneath the fq area we can see about section CSS so it's a pretty short CSS just this portion let's just copy this from here go inside Elementor and here within this HTML field let's now scroll down make sure you are putting it just before at the end of style tag here so I'm pasting the code now have a look at the about area so here it's looking like it and if we overover on any image you can see a glossy effect over these images so it looks really nice and like I said these animations are completely optional if you don't want to use it then don't just use it there is no problem because already it's looking great and here yep everything is looking great let's go to tablet view so here just have a look on the about area yep on the tablet it's also looking great and if we go to the mobile view just have a look here so on mobile view yep everything is looking great so here we just need to change the color because this is a different area created only for mobile devices so select it go under style Tab and here I'm making its color white as well so click on this update button to save our work let's close the responsive View and you know you can always minimize this bar from here to check the website to get that real view or you can do one other thing from here if you click on this eyeball icon just click there so your website will open up on a new browser I mean new browser tab so you can preview everything so here is the beautiful banner area we can see the amazing button hover effects if you scroll down here we can see the beautiful about area so here you can see that glossy effects and then if you scroll down here is the client logos area then here is our amazing Services area so here these over effects are really really nice and then scroll down here is the fq area so here people can just check all the frequently asked questions they can also immediately email you by uh just fill up this contact form and then scroll down here is the beautiful portfolio area and we have added the beautiful H effects here as well all right now we can move forward and create our other Pages like about page Services page and all other pages but now before moving forward if I now go inside of element page builder here you may remember here at the very bottom of the page here is the HTML uh element here so just click here now here is one problem because here you see all these hoer effects are Dependable on this custom CSS codes but as we have written this code within this Pages HTML code so it will only work within this page what I mean by that so let's say we will be creating our about page and we we might have more pages like Services page and on those pages we may have uh we may repeat these pages on other Pages like our our about page we may use uh this section Also let's say on the services page we may want to use this section so if we use this custom CSS code only on the homepage the other Pages sections hover effects won't work so to make it work first of all we just need to move this code from this Pages HTML snippet to our Global themes space so what I mean by that if you just go to the front end of the website from here you can go to your theme customizer so from Top Bar you can just click on this customize button or you can just go back to your WordPress dashboard then if you hover on appearance from there you can also go to here it says customize now have a look here is already an option to put your custom CSS code it's called additional CSS just open it and now here within this area you can put all the CSS code so it won't be only working for the homepage it will work for all other pages so from here if we just copy this code let's just I'm pressing here commment a to select everything and then I'm just copying it let's copy it now go inside of this theme customizer and now here I'm pasting it so I'm pressing command V and here is the code but now from here we need to remove the style tags so here at the Top Line This is the style beginning tag I'm just removing it from here and also at the very bottom here here is the ending style tag I'm also removing it and from here click on this publish button and now from inside this homepage we no longer need this code so from here let's remove the CSS code course and let's click on update by the way don't worry because instantly you cannot uh you can no longer see the hover effects here but if you now refresh the page because we have set the code from the global CSS so you need uh the course need to propagate from global settings to this page as well that's why we uh needed to refresh the page here we can see the hover effect so all the CSS effects are working perfectly so just refresh the page so you can see the changes all right now we can move to the next page that would be our about page so from here let's close it because at this moment we don't need it and now let's create a new page from here Pages click on add new page and here it would be our about page so I'm naming it as about click on publish click on publish one more time and now click on edit with Elementor and you already become familiar with Elementor page builder so from from this moment I will do everything a bit faster but still I will try to explain as much as possible so now on this about page I want to create the banner so click on this plus icon here I'm taking this structure and here I want to give it a background image so from here let's select an image so for this one I'm selecting uh here we can actually import another image so from here click on upload files or from here for the moment let's just select this image click on select and from here let's make the position to cender cender and here I'm making the display size to cover also here I want to give it a background overlay so from here the overlay color would be hash 13 13 13 and here I want to make it really darker so I'm making the opposite value to 0.8 also I want to give it some padding so from here I'm giving here 30 pixel and then from top and bottom I'm giving here 110 pixel of padding now within here click on this plus icon let's Drag The Heading element and I want it to say about us now I just want to make it color to white and I want to make it a bit bigger so I'm putting here 64 pixel also I'm making the line height to 1 em then here I just want to add some space at the bottom so I'm adding 17 pixel of margin Bottom now right underneath here I want to use a briad cramp so here click on the Rubik's Cube icon and here I'm searching for icon list widget so here's the icon list widget let's drag it here and from this place first of all I'm making the layout to inline this one and I will be using only these two so I'm deleting third one the first one I want to use it as home and I don't want any logo I mean any icon for that so from here I'm deleting this icon and here the second one that would be this about page so here I'm just writing about and here this icon I want to use it as a right Chevron icon so here I'm just searching for right so let's use this Chevron or angle icon so let's insert it and from here only with the homepage we can link our homepage here so here if I start typ typing home WordPress will suggest us I mean elementary will suggest us the page so this is the homepage let's link it so this is a link at this moment and now let's do a bit of styling so go under style tab from here space between I'm giving here 1 pixel and then from here the icon color I'm making it to white color and then for the text let's open it and from here I'm making the text color to white color also from the type graphy I just want to make the font size to 14 pixel and here I want to do one other thing but if you don't want that you you you can just ignore it but here you see the home is a link so I want to make this home link a different color so to do it what we can do here so you know you can just go inside gim digital.com and here it says bread cramp link CSS so here I'm just copying this CS CSS snate let's now go inside of the theme customizer because you remember we have moved our CSS code to the theme customizer so for the moment let's just save it and here I'm just opening this eyeball icon so from here let's click on customize or you know you can just go back to your WordPress dashboard and from appearance you can arrive in this place it's called theme customizer so from here open the additional CSS and here right underneath everything here you can uh enter as many space you want so here I'm just pasting the CSS NPP it I have just copied and now let's click on publish and then the next thing I need to do here bitcamp icon list CSS actually this is the same thing just uh just put any of the just copy or paste any of this course these two are the same thing so I need to remove one from here okay so from here it says bread cramp icon list class so just copy this class name from this place go inside Elementor and here make sure you have selected the icon list go under Advan tab here within the CSS classes I'm pasting the class name so at this moment like I said you cannot see it because it's not inside of this Pages HTML uh widget because you just need to update it and if you refresh it you can change you can see the change so from here I'm just refreshing it and here you see the link color is now our theme secondary color so we can now check the responsiveness of this area so just select this container go click here on this responsive mode click on the tablet icon the tablet view is looking great now let's go to the mobile view and here everything is looking great but let's say if you want just to go under Advanced Tab and here I'm just giving 20 pixel of padding but here at the top and bottom I'm just giving 110 pixel all right let's save it and close the responsive bar now right underneath this about area I want to use the same about section what we have done on the homepage so here if I just go back within the homepage Elementor page builder here so basically you can just open your homepage in Elementor in uh Tab and other tab you can open the about page here so if you follow this workflow your life would be more easier okay so here in this tab we have the homepage and in this tab we have our about page so go back to the homepage Tab and here on the homepage we have made this about area so from here you know we can just copy and paste from one page to other page of the same website so from here make sure you have put your cursor here on this six dots of this container right click over here click on copy now go inside of about page put your cursor within this Dash border area right click over here and click on paste and here you go it's instantly copied and been pasted here now let's say if you want to change anything only specifically for the about page you can do that from here but I just want to keep it like this for the moment here underneath I want to create a team members area so from here click on this plus icon here I'm taking this container let's give it some space so from here let's give 30 pixel of padding now unlink it here at the top I'm giving 120 and bottom let's give here 80 pixel and now here within I want to use the same heading and subheading so you know we can just copy and paste from here so let's copy this subheading from this place now let's just paste it here and also this main heading right click over here copy it and right underneath this subheading right click over here and click on paste now here instead of Welcome to agency I just wanted to say our secret in ingredient and here I want it to say our team and I'm making it to centered aligned and with this one let's select it and let's make it alignment to centered but you know it won't work because uh we already we already have explained it so you just need to go under Advan Tab and make the Align self to centered now right underneath here click on the Rubik's Cube icon I'm taking one rapper container so here underneath let's drop it and here I'm making its direction to row here I'm making the Gap value to 30 and here I'm just making its content width to full width or I think you can also just keep it as boxed there is no problem now here I just want to rename the container's name so open the Navigator so this is the container so this one's name we can say it as team container now within that here this container we can say it as team wrapper and now within the team wrapper this container I want to take the single team memb card so here let's drag this container over here and I'm just renaming it as team one and now with the team one I'm making the content width to full width let's make its width to 31 or a bit 31.5% now here I also want to add a bit of Shadow so go on style tab from here open the border and here is the shadow setting so from here you know I'm making the vertical value to 10 blare value to let's make it 60 just like other areas and here I'm reducing the opacity so let's keep it just like this and here I don't want any additional margin so I'm making the margin value to zero and here I want to add only bottom padding to 20 pixel now within here click on this plus icon I'm adding an image image wiget here let's select the image so from upload files click on select files the team members image let's select this three because we will be using all of them click on open for the first team member I'm selecting this image click on select and here I don't want to do anything crazy just go under style Tab and I'm I'm making the width to 100% And now right underneath this image I want to insert one heading so click on the Rubik's scbe icon here I'm dragging this heading underneath here so you see it's underneath the image here is the heading and here I just want to say his resignation so here for example he's a lid designer and here I just want to make it really smaller so from here HTML tag you can make it anything or you can if you want you can also make it to D and you see it's really smaller now let's work with its styling so from here first I'm making its typography go inside of here I just want to make it to the same font so here I'm typing same this one let's make the font size to 14 pixel and font weight to 500 then I want to just adjust the spacing so from here with the margin at the top I'm adding 20 and at the bottom let's add just 5 pixel and I of course want to make it to centered aligned and now here underneath I want to write the name of the team member but if from here I drag The Heading element here is one problem because I want to add a hover effect with the name so if someone hovers on this name it will be a different color but with the default heading we cannot do that so to make it happen we need to do a little hack so from here I'm just deleting this heading element instead from from here I'm just searching for the icon list widget this one let's drag it underneath this heading here let's delete these two I just want to keep one so here I'm just writing the team memb name for example here I'm writing Kevin Martin and make sure you have put a link here if you don't have any single team members page just put a hash otherwise it won't be counted as a link so put a hashtag here and then go under style tab from here first of all I'm making the alignment to centered and just go under content tab because I don't want this icon just delete it now go under the style Tab and from here open that text so the first thing I want to do here let's make the text primary color to the I mean text color to the primary color and hover um making it to our Global secondary color so here you see it's changing the color and and also from here the typography I just want to make it to same font and here we can make it 24 pixel and let's make its weight to 600 and here I'm just making its line height to 1.2m so right now it looks really great now underneath I just want to add some social icon so from here click on the rub SC icon I'm searching for social icons let's drop it here underneath the heading and you know these are the Social Links so you can post their Facebook Twitter Youtube or as many as social handles you want all you need to do if you want to add more social elements just click on this add item and then click on this logo and you will find all the social media icons here so for example if you're searching for Instagram I'm searching for Instagram here you go click over here insert it so in this way you can add as many as social handles you want and within this link field you can add your uh Instagram handle link within the Facebook link field you can add your Facebook handle link just like this so from here I'm first making the shape to Circle and then let's do a bit of customizing so from under style tab I'm making the color to the custom color so here primary color I just want to make it as our secondary color and the secondary color it would be white color and on Hover I just want to change it so let's scroll down and icon hover so here primary color would be our primary color and the secondary color would be white color so right now it's looking like it now from this icon option let's make it really small so I'm making the size to 10 here padding just keep it a one so at this moment it's looking like it I think we just need to add some space here at the top so go under Advance tab unlink the margin I'm just adding 10 pixel at the top all right so far this area is looking great I think we just need to make it responsive but before that we can just duplicate it so from this team container here is the team wrapper here is the team one so make sure you have selected the team one right click over here click on duplicate and then duplicate it one more time so here the second one would be team two the third one would be team three so here you can change this image with other image for example with this one then the third image let's select other image so just wait a little I'm selecting this image click on select so maybe if you want you can change the name as well so from here I'm just making it Daniel Dino and the third one you can just change it to anything you want so here I'm just typing their name so also you know you can change their resignation so here I'm just writing product designer with the third one here affiliate manager just like this so in this way you can create your beautiful team members area let's just check the responsiveness from here I'm clicking on the responsive mode so on the tablet just have a look yep on the tablet it looks great and have a look from mobile device on the mobile device let's start from top so yep I think we can just uh reduce the space here so select this container now from here let's just give it 20 pixel and now at the top let's give here 120 pixel and at the bottom let's give here 80 pixel so this area is also looking great on mobile device so just click on this update button to save our work and let's go go back to the desktop view and here right underneath the team members area I just want to paste the portfolio area from from our homepage so let's just close the navigator go back to homepage from the homepage let's scroll down I just want to reuse this area so first you you may see there are two containers so this one we need to copy this one and this one as well so first let's just right click over here copy it Go within the about page put your cursor here right click over here click on paste now from homepage let's just over here right click then click on copy go inside about page right underneath this place right click and click on paste so our beautiful portfolio area has been pasted here instantly how cool is that all right we can just save our about page so so far everything is looking great and we are done with our about page we have made the banner here is the about area here is the team members area and here is our beautiful portfolio area let's now create our next page that would be our services page so let's go back to our WordPress dashboard so I'm going back to Wordpress dashboard go to pages and click on add new page and here I'm just giving its name to Services click on publish publish one more time now click on edit with elementer and here on the services page I want to create the banner first so we can go back to our about page so from our about page we can just copy this Banner so right click over here copy this area within the services page right click over here click on paste and here I just want it to say services and also here instead of this about here I'm making it to services so so we are done with the banner and right underneath the services also I want to reuse the services section from the homepage so let's go back to the homepage and here is the services area so right click over here copy this Services section go inside of services page right click over here and let's paste the area it's really fun working inside of Elementor page builder because if you create one thing on a page you can reuse that on sever Pages within just two clicks all right so here is the services area and we can see the beautiful hover effects now here just think about it here you can put your four best services within this beautiful design you may have your other services or additional Services right so if you want to put them as well you can create a section like this so here I will be creating another section that's for additional services or other services so first here click on this plus icon I'm taking this uh row container I mean row based container row directed container so let's select it now here I'm making the Gap value to 20 Also let's go under Advanced tab here um giving 30 pixel of padding but I think at the top we don't need it just at the bottom let's make it 120 pixel and now within here click on this plus icon I want to take that single card so drag this container here by the way open the Navigator and here this parent one we can rename it as additional services and then within the additional Services I just want to name it as card one so later we can duplicate it and now within the card one I first of all let's just make the card one's content width to full width I'm making its width to to 25% and here I'm making its minimum height to 262 pixel also here let's go on this style Tab and from here later I will be making its background color to our secondary color but for the moment let's just skip it here I just want to give it a shadow so just like other Shadows of our website it would be 10 and here BL value to 60 and let's make it really transparent just like this and then also go under advance tab here I'm making the padding to 35 and here at the left and right let's keep the value to 20 pixel now here within click on this plus icon I'm just dragging an heading element I'm just pasting here some text and right after ux I want a line break so I'm hitting enter so you see here the line break is generated let's make the alignment to centered and here from this place I'm making the text color to our GL Global text color and from here I'm making the font size to 20 pixel here line height to 28 pixel and from here L spacing let's make it in em and I'm making it to 0.08m and then from here go under Advanced tab I just want to add margin bottom 20 pixel and here you are already familiar with the Z index so I want to keep it at the top of other elements so I'm making the Z index value to two now here underneath I want to add an image so I will be using the image widget for that so let's drag the image underneath here and I'm selecting the image basically let's upload the images first so from this place I will be using this icons so let's open it for the first one I'm selecting this icon let's select it and here the first thing I want to do I'm just making it size to 64 pixel then from under Advanced tab let's unlink it at the bottom I'm adding 30 pixel of mergin and Z index value to two now right underneath here click on the Rubik Cube icon I'm dragging this heading element I just wanted to say find more and HTML tag let's make it to H4 alignment to centered and also I want to make it Z index value to two then here I if you want you can just keep it like this but here at the background I want to create a circle shape so to do it first click on this Rubik's Cube icon and from here let's drag this spacer so I'm dragging this spacer underneath here and now here the spacer height I'm making it to 102 pixel go under its Advanced tab I'm making the margin to zero let's also make its width to same as its uh height so basically you just need to make sure the space uh height and you need to select the space width from here that should be same so here I'm making it 120 102 pixel as well I'm making their align self to centered now let's set their position so from here I'm making the position to Absolute now from left side I'm making it to 25% and from Top let's make it to 50 pixel you cannot see it yet but if we add some background color so from here background color let's add the color which is Hash F4 F2 F9 so you can see the shape here also I want to make it rounded so from border let's make the Border radius value in percentage I'm making it to 50% so if I minimize it you can see it properly you see the circle background here and let's open it now like I said if you want you can just keep it like this but I want to add the hover effect here now if you want to apply the same hover effect like me just follow the thing I'm doing here so first of all make sure you have selected this card one go under the style tab here I'm making the color or the background color to our Global secondary color and now first of all we need to add the custom CSS code so let's go back to our his dashboard or you can just click on the customize at the top or from appearance click on customize and here we will be adding our custom CSS open the additional CSS and right underneath everything so just go to Jim Fahad digital.com and here if you scroll down you see it says additional service CSS so from here we need to copy this so from here let's copy this snip it so just this and let's copy it go inside the theme customizer so here is the theme customizer go inside additional CSS so right underneath everything um just creating some space and let's paste the code here right click over here and click on paste now publish the code now we can go inside of the services Elementor Builder so here we have added the CSS code on the theme customizer now here within the services page we need to add some classes so first of all make sure this is the card and at the top of the card here we have the main parent container it says additional Services container this one so with this one go under Advanced tab here with this so from here from our website you see the parent container class would be service block so here I'm adding service block this and then here we can see single block so here that would be service box so from here the card one this is the single card go under Advance Tab and paste the code here and then here it says spacer widget so I'm copying this class name and within this place here is the spacer widget selected from under Advanced tab I'm just pasting the class name here now we cannot see the changes so you know just click on update button and then if you refresh the page so from here I'm just refreshing it or you can preview it on the real browser so if we scroll down on the real browser here we can see the card and if we hover here we can see the beautiful hover effect and also within the Elementor Page Builder and yep here it's updated as well but don't get confused because on Hover you see this heading is not becoming white and like I said before sometimes within Elementor page builder you cannot see the right thing it happens sometime but always check from the real browser so on real browser it's working fine which means it's all good all right now from here we can just duplicate this card so from here select this single card it says card one now right click over here click on duplicate again let's duplicate and duplicate it one more time so here the second one I'm just naming it to card two then the third one card three and the fourth one card four and now here I just want to make sure it's looking great on responsive mode so from here let's go to tablet so here tablet is look kind of congested so first of all we can do one thing select this parent container the additional Services one now from here I'm making the justify content to centered and here let's make the w a value to W only for the tablet device and now if you want just select the single curs and here I'm making their width in percentage let's make them 48 or 48 and half% so you know you can just copy and paste the thing to other cards so right click over here on this container copy it now with this card right click over here not click on paste just click on paste style so the style you have done with this one that will be pasted here as well so also with this one right click and click on paste Style with the one right click and oops right click and click on past style all right so they are now looking great on the tablet view let's have a look how they're looking on mobile so from mobile Device just scroll down so they are also looking great on mobile device I think we can just uh select this mother container or the parent container this additional services and here I'm making it width to 300 50 just like this all right so they're looking great and click on update to save it close the responsive bar so we are also done with our services page but here this one option is optional like we're done with the services page but I think we can add one more section that is the testimonial or your client's testimonial area so like other sections I have created that step by step and you can find the tutorial on kit Papa YouTube channel I will put the link in the description but here I have made the section for you you just need to import it here so click on this folder icon and let's click on this import template icon click on select file now from inside of the templates folder here just search for the testimonial Jon file so it says testimonial area. Json let's select it click on open and here it says client testimonial section so this one click on insert and here we go here is our beautiful testimonial section so let's close it you see and from here if you want to change anything so of course you want to change this with your real client headshot just click over here and you need to upload your client's headshot here it will be uploaded here you can just click over here and the you can change the name you can change the real text you can change the St rating so here r scale is 0 to five and let's say here if I put four you see it's four star rating but I want to keep it five and similarly you can uh change everything from here now let's say if you want to add more testimonial at the same area so you can just duplicate this thing or let's open the Navigator and have a look from here so here we can see this is the testimonial 2 and this is the testimonial one so here testimonial one 2 if you want more you can just duplicate the testimonial 2 so let's duplicate it and here we can see the testimonial 3 or you can do another thing let's just go back press on common Z so here we can see inner container this one you can duplicate this one as well so right click over here click on duplicate so you have got here two more testimonials and with this inner container selected go under Advan tab un link the margin at the Top If you add 30 pixel of margin or maybe a bit more maybe 40 pixel so here you have got two more testimonials you can just change the uh name and the real testimonial text their head shots and everything so I have done it only for the explanation but I really don't need it so from here open the Navigator I don't want this second inner container right click over here and click on delete so we we are done with the services page let's just click on this update button to save our work now I want to create our next pages and here is the services page as you see here we have the services and if anyone clicks on this find more button so we can create a single service page for each of the services if you want you can do that if you don't want you don't need that but let's say if you want to create a dedicated page for a single service you can do that so we can just go back so from here let's go back to our WordPress dashboard from here let's go to pages to all pages and here we have created our home our homage about page and services page let's create a single service page so let's say you may have different uh services like web design service or PPC ad service or affiliate service or SEO service you may have different Services right so for each of the services if you want to create a dedicated single page you can do that now from here click on add new and let's say I want to create a single service page for our web design service so here I'm just writing web design click on publish publish one more time and then let's click on edit with Elementor and I don't want to do too much with this page because I I already have created this page template so you can just use that so I'm just showing you how you can do that so from here now instead of clicking on this Plus icon click on this folder icon and now click on this top Arrow icon let's click on select file so here within the templates folder you will find this Json file it says single-service dojon select it and open it so here it says single service so click on insert click on apply now here is our single service page but I think we need to adjust something or the colors no problem with with that and let's see how you can customize it for a single service so this is a generic page you can customize it for the different pages so here first of all let's change this text instead of service details because it's generic I want to create it for web design service so here I'm writing web design and let's just make it oops from here makes it color to white and also from here instead of service details I wanted to say web design and here go under style tab I'm making the icons color to white and also the text color I'm making it to White so the banner area looks great and here is the web design Pages link so basically if you have multiple single Services page you can link them with this so let's say if you have web design service so here is the link for that link option for that just click click over that and you can put any link just like within the Link Field here I'm typing oops not home here I'm typing web design so here click on web design just like that and if you don't want any of them just over here and you can delete that okay and you can change the image if you want you can describe about your web design service or any other service also I just want to make its color to white color also this phone number color to white color so from here text color to white color and also this icon color so from here the icons color I just want to make it to White and everything is looking great and you may see it looks kind of broken actually it's not because if I just show you in full width you see everything is looking great now let's open it up and from here everything is looking great here is the FAQ area and you know what you can customize it the way you want like here I think we need some space in between so just select this heading go under Advanced Tab and here at the top I'm adding 40 pixel of space so in this way you can customize it and you may have different ifes for your different services so you can add them within the single pages okay so here we are done with the web design single page now here I want to do one thing as we have just fixed something like the color and this spacing here we have also changed this color so now I want to save it as a template and later we can reuse that okay so instead of the template that I have provided you can create your own template as we have just fixed these issues like the colors and other things so first of all let's just update it and here I want to change I I mean I want to save this page as a template so from here click on this top Arrow icon click on Save as template and here I'm just naming it as single service template and I wanted to say updated because we have updated the colors and other erors so from here click on save all right we can just now close it and let's see how we can create uh another page okay so from here click on the exit button now let's say I want to create another single service page so like web design I want to create another page and which is for for example I provide Google at service so here I'm creating another ad for Google ads and let's just publish it now go inside of Elementor page builder so here I want to use the template that we have just saved so click on the folder icon go under my templates and here you see it says single service template updated we have just saved it so click on insert click on apply and here we go you see we have all the fixed designs here but now instead of web design it would be our another service which is Google oops Google ads also here with this one I just wanted to say Google ads and let's say we don't provide this digital agency service so here with this one instead of it just click over here and and I wanted to say uh Google ads Google ads and if now anyone clicks over here that will take them to this particular page so from here I'm just writing Google ads and Elementary will suggest as the page so now as we are using it as a common so from other page if anyone clicks here that will take them to that particular single page and now you see right now we are not on the web designing page so it indicates what page are you in at this moment M so as this is the Google ads page so here the web designing this one go under style tab so I just want to make it text color to the primary color and as we are now at the Google ads page so let's select it go under style Tab and I want to make it as our secondary color so people can understand they are at the Google ads page and if you want you can also change the text for the particular Google ads service and everything is looking great so in this way you can create as many as single Services Pages you want for the moment click on this update button to save our work now we can move to our next page which is our contact page so from here let's go back to our WordPress dashboard now Pages click on add new page and here I'm just giving its name to contact click on publish and then click on edit with elementer now here first of all you know from any of the previous Pages we can just copy this area so right click over here copy it now within here to create the banner let's just paste it and here I just wanted to say contact and here also within this bread cram field I want it to say contact now let's first create the contact area so from here click on the plus icon here and I'm taking this row based structure this one now let's add some spacing so from here I'm just adding 30 pixel first now unlink it because here at the top I want to add 120 and at the bottom let's add 120 now here within this container I want to take one left inner and one right inner container so okay first of all let's just click on the Rubik scbe icon I'm dragging the inner container so here if I open the Navigator so here we can rename it as contact area so here I'm renaming at it as contact area and within the contact area here this one I will be using as our left area so select the left area I'm making the content width to full width here I'm making it width to 41 or let's add 6 41.6% or 41.66% and now also I want to add some padding to the right side let's add just 12 pixel now here I want to use the heading and subheading so we can go to any other page for example from here we can take this heading or from here let's say we can just go to our about page and we can take the heading and subheading because it's also left aligned so right click over here let's copy it now within this area right click and paste it also the next thing from here right click let's let's just copy it and paste it inside of the contact area here so first here instead of this subheading I just wanted to say need any help and with this one I just want it to say get in touch with us and right underneath here let's take some paragraph so I'm using Text Editor widget and you know you can write here anything you want also I think we can add some space in between so let's select it go under Advanced Tab and at bottom let's add 30 pixel of space okay now right underneath here I want to add some icon box so from here I'm just searching for icon box here we go let's drag it underneath here the first thing I want to do I want to make them lift aligned so from here and by the way if you want you can change the icon from here so the first one I want to use here phone icon so I'm just searching for phone let's say I want to use this so I'm selecting this icon click on insert now from here you can can change the heading you can change the description from here now let's go under the style tab or from here first thing I want to do the view here I'm making it to Stacked now go under style tab here first with the box I'm making the icon position from left side and vertical alignment I'm making it to Middle now let's style this icon so from here the primary color I'm just making it to our secondary color and here on Hover I just want to change its color to our primary color so it would look like this but the secondary color would be white so on Hover it would look like it all right and here I'm making the spacing to 30 the size let's just make it 25 here I'm making the padding to 27 now let's do a bit of work with this text so open the content here the title is spacing here I'm just making it to 15 and let's make its color to our Global color one and here typography we can use our Global primary typography but here I just want to make it size to 20 pixel then with the description we can use our Global color one here as well and here I just want to make the font size to 20 pixel and also line height let's make it to 30 ready now here I think we can add some space so let's select this paragraph or text editor now here unlink it only at the bottom we can add maybe 40 or let's just keep it 30 pixel of space okay so we have created this icon box now we can just duplicate it so from here let's duplicate it and here before duplicating it I'm pressing command Z or okay just keep it like it and here we can add some space in between so go under Advanced tab unlink the margin at the bottom I'm adding 20 or let's add a bit more maybe 25 yep it looks great and here you can change this icon with any other icon for example um just searching for envelope so here let's use this one click on insert then from here you can also change these questions here uh it's not question here I'm just writing WR email and here you can write your email address so here I'm writing one of my email addresses and then we can just duplicate it one more time or let's just duplicate this one so I'm duplicating it and here uh like the previous one so go under Advan Tab and here I'm adding margin bottom to 25 and with the third one you can add a pin icon so from here I'm just searching for pin oops not pink it would be pin so here let's use this one so it indicates it's a map maybe I just wanted to say visit any time and here's the office address in this way you can change all these icons headings and the descriptions and now here at the right side I want to take another container so we have done everything with the LIF container so here right after our LIF container click on on the Rubik SK icon and here I'm dragging the container underneath but you see it just went inside of the lift area I don't want it so first of all let's just make it outside of the lift area here and I just want the left one at the top like this and this one right after that so here I just want to rename it as right area and with the right area I'm also making its width to full width and here I'm making its width to 58.33% and also with this one let's add some padding to the left let's add 12 pixel and now within this right area I just want to use a map so from here I'm just searching for map here is the Google Map let's drop it here and you can put any address here so if you start typing here your address you can see that within this place then you can control the zoom option from here if you make it more zoomed out you see it's more zoomed here but we can just keep it as 12 then you can control the height from this place just like this and I just want to keep it as 550 pixel so if we minimize it you can see the whole view so we are done with this area let's just check its responsiveness so click on the responsive mode on desktop it looks great go to tablet view so here on the tablet view I think we can make it 100% with each of I mean each of them left and right so with the left one here go to layout and I'm making it percent to 100% let's open the Navigator so Yep this is the left one and then the right one let's go under layout tab here I'm also making its width to 100% but you see they are not the 100% of the width so we can just select this left and right parent this contact area and go under its layout if we make the wp only for tablet to WP value you see now they are getting 100% with each of them so here only for the tablet device you can add some space here at the top of this map so from here let's select this right container now here we don't want any padding so I'm giving to Z Zer but here we can unlink the margin at the top we can add 30 pixel of space or I think we can add 40 or 50 would be great so at this moment it looks great on the tablet device and if we go to mobile device on mobile device this I mean this map looks great and here we can do some adjustment for this space so select the main contact area their parent this one now go under advaned Tab and here I'm giving just 20 all around and now at the top 120 and at the bottom also 120 so it looks great but here we can improve this uh icon box areas a bit so first let's select the first icon box go under its content tab or go under its style tab so only on the the mobile device I'm just making the icon position to left so it's looking like it now let's go inside of this content tab here the spacing so I'm just reducing it to five or we can just make okay just keep it five and from here let's also reduce the font size so instead of 20 here I'm making it to 18 and here for this description text I'm just making it to 16 instead of of 20 so right now it looks great on mobile so we can just right click over here click on copy now you shouldn't click on paste because if you paste it all these icons and text everything will be changed we just want to change the style so right click over here then click on paste style so style has been pasted here you see all the sizes has been changed but now just go under the style tab you just need to make sure it's set to I mean it set from left sometimes you may see is from left but for the cach reason you cannot see it properly so just change it to other thing and make it to left so also with this one right click over here click on past style and similarly just go under its style tab just make it any other thing and then make it to make the icon position to left so all of them are left aligned I mean the icon is the left aligned only for the mobile devices so on the desktop they are remaining same the way it was now let's go back to the desktop view and here we will be creating our contact form so from here for the moment let's close the navigator and here let's click on this plus icon then I'm taking the first structure here let's give it a background color so here I'm putting hash e F0 F6 also from under Advanced tab T here I'm just giving 30 pixel of padding but then here at the top I'm giving 100 and oops 120 and at the bottom I'm giving 100 and then I want to copy and paste The Heading so let's go to any other page we can copy it from Services page let's copy it and I'm pasting the heading here then here's the main heading just copy and paste it as well underneath here now here the subheading I just wanted to say contact with us now and here for the main heading I'm just pasting some heading now underneath here I want to create the form by using mid form so click on the Rubik's icon here I'm searching for M form widget let's drop it here underneath so here it says no content is added yet so we need to create our contact form so from here click on edit form and here we can name anything you may remember we have imported one so if you want to use that imported one you can uh use that just by clicking on edit form but I'm now showing you how you can create a form from scratch okay so from here click on new and here I'm just naming it as my contact form we can select the create from scratch this option this is by default option so just keep it like it is and then click on edit form now another Builder will appear at the top of the browser so from here you can create your contact form so first I just want to create the structure so here click on this plus icon and I'm taking this Ras the structure within this Ras structure I want to take one left and right container so here click on the Rubik scbe icon first here I'm just taking one container here so drop it and again open the Navigator so this one I just want to name it as first row and within the first row we have got another container so I'm naming it as left just keep it left and with the left one I'm making it to full width let's keep the width to 50% and here with this one I'm making the margin value to zero and padding um only adding padding right value to 12 pixel now I just want to duplicate this left one so let's duplicate it and here I'm just renaming it as right and here I want to keep everything same but here instead of right side I'm giving the padding to the left side now here within the left field first of all I want to take the text field it's for the name so people can put their name within this field so click on the plus icon and here I'm just searching for text field here we go so drag this text field Within in this place and from here we can see this text at the top so which is label but I don't want the label so I'm just disabling this option and here is the name so always try to keep it unique so if you take another text element I mean text field you should change the name for that field so that might be mf- text D2 or something like that and here you can change the placeholder so here I'm just writing your name now let's go under the style Tab and from here you can also give the padding so I'm giving here 15 let's now unlink it because at the left and right I want to give here 30 pixel of padding now here input text color I'm just giving our Global text color and the background I want it to be transparent so for the background from here I'm just first taking any color my goal is to make it transparent so you can first take any color then if you drag this Bottom bar to the very left it will become transparent so it's now transparent then I want to use a border so from here let's select the Border type to solid I'm giving one pixel of border and then border color I'm first making it to Black and then I want to reduce its opacity so just like this so normally I want to keep the Border color this transparent but on hover or on Focus so whenever anyone typing their name I want to make the Border color to our secondary color so on normal state is this kind of transparent black color but on Focus I want to make the Border too solid and one pixel and the Border color would be our Global secondary color so here if I minimize it you see normally it's looking like it but if I uh put my cursor here and start typing you see the Border color is becoming our secondary color so it was the goal and now I also want to make the corner rounded so from here border radius I'm making it to 5 pixel and then let's do a little bit of work with the placeholder so open the placeholder so here I'm keeping the typography or we can just manually go here and I just want to make it size to 14 pixel so here it's looking like it and when we start typing for example Jim fad you see the color is now more darker that's our primary color all right so this is the name field and here within this right container I want to create our email field so click on this plus icon and here I'm dragging the email field within this place and you know what we can just copy and paste the style from the name field to the email field so from here right click over here click on copy now just select this email field right click over here and click on paste style so here style has been copied but we need to change few things by ourself so here showel I'm just hiding it and the name field says MF email which is fine on the placeholder I just wanted to say email address all right now we can duplicate this whole first row so from here let's just duplicate the first row and I don't want these elements within the first row so it's copied I'm just renaming it as the second row now from within the left field I'm just deleting the text let's just delete it and also from the right side I'm just deleting it actually we could rework over that but instead I find it's easier if you just delete it first and create from scratch then paste the style so here the third one is for subject so we can also use the text here but you know we can hide the label and like I said we canot use the same name for the other field so we have already used this MF text this name for the name field so here I'm just writing Dash and here I'm using subject this text and the placeholder it should say enter subject and I just want to copy and paste the style from other field so copy it and paste the style here then here within this container click on this plus icon here I want to use number field so people can put their phone number so here we go also I don't want to show the label on the placeholder I'm just writing enter phone and similar like before let's just copy it and paste the style here now let's just duplicate the second row so here I'm duplicating it and we can read rename it as our third row just like this and within the third row I don't need left and right because I will be only using text area so from here I'm deleting left and also the right one so within this empty field click on this plus icon and here I'm just searching for text area so here is the text area let's drop it here I also don't want this label and within the placeholder oops I just wanted to say write a message and then I also want to copy and paste the style here so let's just paste the style but as it's a different kind of field so we need to do a bit more customization so from here just go under style tab first I'm making is height to okay just keep it 150 um giving here five pixel of margin actually just unlink it okay first of all um just unlinking it on I want it only at the bottom so I'm giving here 15 pixel all right but now I want to make it 100% width so from here we can just go under Advan Tab and from here we can make the width to full width 100% And of course we should add some space here in between so here with the third row select the third row go under Advan tab unlink the margin here at the top I'm adding 20 pixel of space Also with the second row select it go under Advanced Tab and Link it at the top I'm adding 20 pixel of space so right now they have got the breathing space now here underneath I just want to insert the button so here you cannot use any random button or the Elementor default button because if you want to make this form working you should use the button of the mid form so here click on this Rubik's Cube icon and here is the submit button wiget let's drop it underneath here oops just underneath here or you can just drop this submit button within this area so here in this place so here in the label I just wanted to say send a message and you see by default there is some Shadow but I don't want that so we can just go under style tab from here let's open the shadow I don't want it so I'm just making everything value to zero also I don't want their corner to be rounded so from here open the border and let's make the Border radius value to zero then from under this button tab I'm just making the left and right padding value to 50 okay just unlink it here left and right I'm adding 50 oops just add 50 at the left and 50 at the right and from typography I just want to make make its size to 16 pixel and let's make its width to 700 then from here I just want to sync the design with our other buttons so I want to use the same gradient background color so from here let's make the background type to gradient the first color I want to use our secondary color and for the second color I just want to use another color what we have used HH a e a 8 FFF this color and then from here I'm just making our angle to 45 all right so for this button is synced with our other buttons and I just want to add a hover color so on Hover we can make the background color to our Global color so here we can use the global color one where are you Global color one so actually we cannot see it because we cannot scroll down through here but trust me it's there so I'm selecting it and on Hover we cannot see the change because we need to add here the gradient color with the same color code so here click on this gradient so also for the secondary color we can use that from this Global color so color one now have a look on Hover we can see it so to save our work so far just click on this update button and also we need to check if it's responsive or not so from here click on the responsive mode Let's go to tablet view so on tablet I think it looks good and let's go to mobile view on the mobile view I think we need to do a bit of work because there is no breathing space in between these two and these two also there is some room here at the left and also here at the right so here first of all let's start from here so I'm selecting this container I don't want this padding here at the mobile so I'm making it to zero also here with this one let's make their padding to zero so same with all the containers so select it and remove the padding to zero also with this one I'm making the padding to zero then here with this one actually we if we give some padding here it won't work we need to give the padding with the field so here I'm selecting the phone field go under Advanced Tab and unlink it at the top I'm giving 20 also here with the email address selected here only at the top I'm adding 20 pixel of margin so here it now also looks great on mobile device so click on this update button and then click on this update and close button here it looks good but I think we can change the placeholder color because we can barely see it but if I start typing here yep we can see the real text but the placeholders color is too light so I want to change that now click on this edit form again so select the my contact from this one click on edit form so here with the first one just go under style tab with the placeholder color so here I just want to select our primary color so same with all other fields so here placeholder I'm just making its color to our primary color also with all of this so just go under placeholder make it our primary with this one the phone number one I'm making it to our primary color also with the text area let's make it to our primary color so now just click on update and close and yep right now it looks good so click on this update button to save our work so now let's just check if this form is working perfectly so from here let's click on this eyeball icon to open the page on a browser tab so from here let's fill up this form so here I'm typing a fake name let's say he's a client so his name is John do and his email address is John oops John do 345 gmail.com and here I need a logo and enter phone number of course it's a fake phone number and he says I need a logo Areo free this week and let's now click on send message as a client and it says thank you form submitted successfully so now as you have the login of this WordPress website if you just go to your WordPress dashboard now from m form just click on entries as this is the first time so we may need to complete this onboarding process just click on next form next time you don't need to click over here so for the first time just click on next time time and click on Save changes so whenever anyone send I mean whenever anyone fill up that form so from your WordPress dashboard if you just go inside of mid form then click on entries here you can see that entry so right now we can see here one entry if I click on view we can see all the information that's been put inside of that contact form field so here you can see the name is jondo here is the email address here is the title I need a logo here is the phone number and here is the text details so you can you you you now have the email address so you can just get back to your client by replying into this email all right so we are almost done with our all major Pages now we want to do a last few things so here I want to show you how to work with all the blog related stuff like how to write a blog post then how to customize the blog archive page how to customize the single block post page all of them so here the first thing I want to show you how to create a block post so from LIF bar if I over on posts to all posts and here we can see a dummy block post actually we haven't created yet it came with default WordPress installation so first I'm just deleting it and also let's close this notification now if you want to create a new block post you just need to click here it says add a new post and here we can see the default editor default WordPress editor or default Gutenberg editor but personally I love to use the classic editor or the WordPress legac editor because it's really easy to follow follow that editor so if we want to enable the classic editor option first of all we need to install a plugin for that so first of all let's go to plugins and click on add new plugin and here at the first we can see the plugin it says classic editor but for some reason if you don't find it just search it by writing here classic editor and hit enter oops it should be classic editor now here you can see it's classic editor and it's by WordPress contributor so click on install now and then click on activate and now if we okay so here I see mid for minutes update so if you uh notice anything that some plugin requires update you can always update that from under here and that's why you can see this one symbol here so one of our plugins need to be updated so from here click on update now okay because it always based to keep your all plugins up to date okay now let's go to your posts and click on add new post now instead of the gutenburg editor here we can see the classic editor now you can write down your blog post title here and here I'm just writing top seven web design based practices for example and now we won't be using Elementor to write our single block post I personally love to use this classic Editor to write anything or any blog post and this editor is super handy it's just like writing on Microsoft Word or Google doc like that so here you can write anything for example this is uh blog post so you can write here oops a blog post you can write here anything and then you can customize it the way you want let's see if you want to make anything bold you can just select that word and you can make it bold if you want to make anything italic you can just select that and make it italic from here so here let's just paste some dummy text so I can make understand it properly so I have just copied some text and I'm pasting the text here now let's have a look how to work with anything within within this editor so let's say I want to make this heading uh I want to make this line into a heading so first of all you need to separate that just right after that h Ender or we can just keep it like this and here I want to make it a heading so from here from this option I'm making it to a heading three so it's becoming a heading three so similar with this one here I'm making it a separate line I'm making it a heading three also with this one just hit enter to make some space and select this line I'm making it to a heading three now let's say if you want to make anything a link so so I want to make this a link so I'm just selecting this word you can select multiple word as well if you want then click on this link icon then you can link it to any other website for example I'm just link it with kitp papa.com so if now anyone clicks on this text that will take them to kitp papa.com so in this way you can create your own blog post also inside of the block post you can add any image if you want so for example right underneath this paragraph I want add an image so here first I'm hitting enter and here I want to insert the image now click on ADD media from Top now you can use all the existing image from under media library or you can just go to upload files and you can upload any image so for the moment I'm just using any of the images so let's select this image and click on insert into post so here we can see the image by the way this image is looking super small you can also edit that just click over that image and click on this edit icon you see by default it's getting the minimum size but I want to make it to full size then click on update now we are getting the high resolution image but also if you want to make the image smaller or bigger you can just drag the corners of the image to make it the way you want but for the moment I'm just keeping it to full width okay so this is all about the text aor of your blog now have a look on the right side so here you see is categor so for any specific blog post you can use any category so for this one I'm clicking on add new category and I want to keep it under web design category so here I'm writing web design and then here click on add new category and you can use multiple category for a single block post so here I'm just writing another category name it's business click on add new category so in this way you can add as many as category you want now here you can also add tags so here for example I'm just writing a website design and you need to separate them by using commas so right after one comma here I'm writing tips and tricks for example then click on ADD you see the two text has been added now here we need just one other thing which is featured image so this is basically the thumbnail of your blog post so click on S featured image and for example I'm just using any of them let's select this image or from here we can use this image actually I want to use a high resolution image so let's select oops let's select this one okay for the moment it looks fine so click on S featured image here we go and from Top let's click on publish to publish our blog post and now if you want to preview the block post here you see it says View Post so I'm opening it from a new tab and here we can see our single block post so here at the top we can see the featured image that we have just set then underneath we can see everything like here is the our block categories here is the blog main title and here is the thing we have written using the classic editor and also here you can see some metadata like the author so here I have written it so here I can see my display name here is the publishing date here is the image we have uploaded from the editor let's scroll down here you can see the text we have added and here is also the comment option so whoever read this block post that visitor can comment down on this blog post and also this design is coming from our theme so if you want to customize this design according to your need then from Top you can click on this customize button so here it will take you to the theme customizer page now from left side go to here posts or Pages layout now here go inside of single post layout and from here you can actually customize it the way you want so for example if you don't want to uh show the post title you can just hide it from this place so here you see the title and metadata is not showing but you can enable it from here as well then here you can you will basically have all these options and all these are self-explanatory so you can just mess with them but I'm showing you a few so here the post title alignment so you see by default it's left aligned but if you want you can make it to centered aligned or let's just keep it to the left aligned and then here within the title elements here we cannot see the breit cramp because breit cramp is by default disabled so if you want to make it visible just click on this eyeball icon so here you can see the bread cramp or disable it so basically you can enable or disable all these options from here also here you can see the default post layout so right now our layout is looking like it but if I now change it to this one you see the layout has been changed but I love the previous one this one so in this way you can actually play with all the options all this are self-explanatory you can uh enable or you can just mess with all these options for example here we can see the here what should I say it's the featured image okay so if you want to change the ratio to 16x 9 or 2x 1 or 3x 2 you can keep everything I mean you can do all the settings from the left side so I'm pretty happy with the layout when you are happy just click on this publish button to save your work and now I just want to create a few more blog posts so go back to our WordPress dashboard now from Posts to all posts here we can see only one blog post because I have posted only one now just by following the same way just click on add a new post then we can add the title description then the categories tags and featured image we can uh post as many as block post we want so I don't want to make you bored so I'm just posting a few blog post and coming back to you all right so I have created all these blog posts and now uh you may see we have customized the single blog post page like this but we don't have any blog archive page so if we want to see all these blog posts on a single page or in archive we cannot do that because we don't have a dedicated block page so let's create that page really quickly so from here from Pages let's now click on add new page and here I'm giving this Page's name as a Blog now click on publish and we have created the blog page but WordPress doesn't know this is our blog archive page so we need to tell the WordPress hey this is this blog page is our post page so from left side overover on settings and go to R and you may remember from here we have set our homepage and we have selected our homepage so similarly for the Post page we need to select the block page now let's click on Save changes and from here if I now go to pages to all pages and here is the block page let's now click on view I'm opening it from a new tab so have a look here now this is our blog archive page we can see all the blog posts here by the way if you want you can also customize it from the theme customizer so from here click on customize and here it takes us to the theme customizer so from here if you want to customize it again go inside posts or Pages layout this time go inside here archive layout and here let's say if you don't want this title area you can just disable it so here we can no longer see that title and also if you want to customize this single curse then you can do it from here for example if you don't want to appear these titles you can just hide it so just like that or you can enable it so from here that was basically the title of the banner but if you want to hide this title then from here you can hide the title so you can no longer see the title or if you want to hide this meta description or this short description of the blog you can oops not this one just hide it that would be the exerpt so you can hide exit from from this place so basically you can enable or disable all these options just like the single block post page but personally I love to have a customized design for the block archive page but if you want you can just keep it the way it is but here I want to use a custom design for the block page and I have already created that for you if you want you can use that so I will be providing you that as a template but for the moment just click on this publish button to save this work now click on this x so let's just upload the custom block Pages design now go back to our WordPress dashboard from here let's select this block page click on edit but as we have set this page as our blog posts page so we cannot edit this at this moment so for temporarily we need to disable it as our post page so from here let's go to settings to reading and from here here post page for the moment I'm just clicking here on select so no page is selected at this moment click on Save changes and now we can go to pages to all pages and here is the block page now click on edit and here we can see the edit with elementer button click there and here I want to import the block Pages design so click on this folder icon and from here click on this top Arrow icon now click on select file and and you will find this block page. Json this file just select it and now from here it says block page template now insert it so here we go here is our custom designed block Rive page but first of all here we need to change the color so select it and from here I'm just making its color to white also with this braad cramp I'm just going under style tab first the icon color I'm making it to White and then the text color here I'm just making its color to white so this Banner is now looking great and here we can see all our blog posts so here is the blog thumbnail or the featured image here you can see the blog categories here at the top of the image here is the publishing date and here is the blog title a few text from the blog details and here is the read more button that will take as to the single block post page so here is other one and here everything is looking great and at the right side we can see the recent posts so all the recently published post will be shown here at the right side and here we can see the category but here we can do some work with this category so just click over here and first delete all of them just keep this one so instead of new technology we can just say it as business and here you can link it with the business category so whenever anyone clicks on this business text that will take them to the dedicated business archive page business category archive page right so here from just select the business category like this so you can add more categories so from here just duplicate it and here we have more categories for example from here we can see what categories we have so here web design we can just name it as web design and then we can add more for example so here we can add freelancing category and let's give the textt as freelancing so here we can see all the categories people can just go to the category page from here as well and also here at the top bar here is the search option but I think we can just change the color of this icon from here so just click on this pencil icon just go under style Tab and from here let's just open this search button option so from here the color I'm just just making it to white color so at this moment it looks great all right so I'm happy with the layout of this blog archive page now click on update button to save our work and here don't forget to do one thing because just have a look if I now go to the block page and if I now refresh you see we can see here all the block archives but still we need to check just go back click on this exit button and here from set let's click on reading and just make sure we have set the post page as blog click on Save changes so we can always see these archive page design here on our blog page so as we have selected the post page oops so if I just go to settings to reading as we have selected the post page to blog that's why it's getting the themes Blog Page themes blog design so we know as we have used the custom design so we no longer need to use this blog option so let's just keep it to select or anything default just click on Save changes and if we now go back to the block page and let's just refresh as we have designed it by using Elementor we have imported the design that's why we can see all the blog archives within this page and it looks really great now so far we're doing great and now just have a look if you want you can keep the header like this and here is the footer but I just want to improve it a little bit okay so first of all before doing this fer and header first of all I want to create our navigation menu so you can create your navigation menu just by going to the WordPress dashboard now from appearance then click on menus and from here you can create your menu you can give the menu any name so here for example I'm just naming it main menu now we can check this option and here these options are important the display location we should select the primary secondary and mobile all these and now click on create menu and here within the main menu I want to add the pages so let's go to view all I want to insert homepage about page basically I want to select all of them so from here click on select all then click on add to menu so here let's customize the order so first home then about and right after that I want to insert our services page and here um dropping the Google ads at the top here also the web design here now have a look I want to make this Google ads and web design these two as the submenu of this Services menu item so we just need to drag it a bit right side Here Also let's drag it this one so these two are now sub item of the services menu okay so from here click on Save menu and later I will call this menu within our header and just remember the name because we can only see this name from our Elementor dashboard which is main menu okay so within the main menu we have all these menu items now I want to insert our header so from left side just go inside here it says elements kit you may remember we have installed and activated this plugin so from here click on header and folder as we are clicking here for the first time so we just need to skip this onboarding process just click on all this next step and here click on Save changes now again from under elements kit click on header and fer and now from here go under header then click on add new and here I just want to name it as my header just make sure the type is header then condition to site and here let's activate it and from this place click on edit content now I also have created the header template for you so just click on this folder icon click on my templates then click on this top Arrow icon click on select file and here within the templates folder you will find header. Json just open it and here is the header file so click on insert click on apply and here here we go here is our logo I will show you very shortly how to change the logo or how to create your own logo but have a look here so here is the logo and here would be our navigation menu so just click over here and you need to select the menu name you may remember we have just created the menu and we have given its name to main menu so I'm selecting main menu and here everything is looking great but I think we can just make the background color of the top menu I mean top header to a different dark color so select it go under its style Tab and from the Color Picker we can select our Global color one so it's looking like it and here let's say if you want to link them with any other page let's say you may have your support page or contact page just click over here and let's say you want to link your contact page so just click over here and I'm just start typing here contact so here is the contact page just link it here then here is the social handling just click click over that you can insert any of your Social handl Lings within this field okay so far it looks great click on this update button if I now go to the front end of our website and refresh the page yep we can see our beautiful header here and here have a look if I now scroll down here we can see a sticky menu at the top but we can only see the logo here at the left we cannot see the navigation on the right side we should have a navigation here right so to do that just go back to the header within the header Builder so from here we need to open the Navigator so you will understand it from where that sticky header is coming so from open from here open the Navigator and here just have a look so here it says menu is sticky just click over that go inside of the menu sticky here is the first row so here is the first within the first container we can see the image and here within the second container here you see it says elements nav menu so elements kit nav menu so select it and here you also need to select our main menu so from here select the main menu now click on this update button to save our work now if we go to the front end of our website and if we just refresh the page and yes we can see the regular header here but if we now scroll down here we can see the sticky menu and also we can see our main menu here within the sticky menu cool so we are done with our header let's now insert our fooder so we can go back to our WordPress dashboard now from here from elements kit go to header and fooder this time select fooder then click on add new I am just naming it my fooder this time the type would be fer the condition keep it in site and then activ activate it and click on edit content now similar like the header click on the folder icon click on import template icon and select the fooder file so here is the food. Json now from here this is the fooder file so insert it click on apply now we can see our beautiful fter here but I want to make their background color to dark color so with this area just go under style tab here I'm adding our Global color one so the footer is looking great but this headings color I just want to make them white color like this and here underneath you can just click over here you can change this uh text with your own text you can change the link of this social handles from here then within this area you see these are basically the links so you can add here any custom link so for example within the about company you can just change it you can change the link with the about Pages link so let's select the about page so you can add more pages so within the news and media you can add the block Pages link just like that or you can customize it the way you want and also here I want to change its color to white color also with this heading I'm changing its color to white color also with this one let's change its color to white color so from here from the portfolio here you can or here instead of portfolio I can say it as contact so people can see your address your email and your phone number so they can quickly call you and also here underneath portfolio you can actually uh link them with any of your other Pages for example with this one I want to link it with any other page so here we have a dedicated Google ads page so here um linking it with this so not only uh not only the link of this website you can link them with any external website if you want so there are lots of option you can customize the way you want and here is the copyright folder so just select it I want to also make it background to a dark color I'm selecting color one and here you can change this copyright text you know it's a simple text editor so here I'm just writing copyright 2024 by Jim fad digital just like this and let's click on the update button to save our work so we are also done with our fooder and if we now just refresh our front end let's go to any pages so here we can see the header here is the sticky header and if we go to the bottom here we can see our Global fooder now just have a look how you can change your logo and the Fab icon so first of all let's have a look how to change your Fab icon so for example what is Fab icon Fab icon is that little tiny icon what you can see at the top of the browser here for example if I go to jimah digital.com here at the top you can see this redish kind of Icon so this is the Fab icon so if you want to add any Fab icon on your website you can just go to your WordPress dashboard now from appearance click on customize and here from the theme customizer just go inside of site identity and from here from the site icon click on select site icon and here just make sure the icon you will upload that should be in square shape so that might be 100x 100 pixel or let's say 64x 64 pixel so just make sure it's in square shape so it would look good on the top of the browser so here I'm just uploading one let's select this image you see it size is 300 by 300 so click on open so here is the Fab icon click on select I don't want to crop it so I'm clicking on skip cropping so here at the top we can see our little tiny Fab icon so for the moment click on publish and exit from the theme customizer the next thing I want to do I want to change our logo so here we can see the logo now I want to change the logo and you may remember we have designed our Header by using Elemental custom header so we need to change the logo from that place so now you can go to your header from two places first of all if you just go back to your what p dashboard now from here from the templates you can just go to saved templates and here you can see header footer so you can just click on edit with Elementor to edit the header or fter from here also if you just go to the front end of your website and as you logged in you can see this black bar at the top so if you now hover on edit with Elementor you can see all the available templates you can edit so here is the form template here is the header template here is the fooder template like this okay so from here I just want to edit my header so I'm just opening it from a new tab so I'm opening it from a new tab here now from this place I want to change this logo so click over here and you can upload your logo in this place also I want to show you how you can create your logo really really easily by the way I always suggest to create your logo I mean you can make your logo by using any freelancer by hiring them from the freelancing sites like five or upwork because it's really great to have some professional logo made by some professional designer but let's say if you're just starting out and if you don't have enough budget then you can create any free logo I mean you can create a free logo by using an online tool I will show you the way you can just go to this website it says logomaker.com it's logomaker without the e so from this website you can just click here on start my design so basically if you want to to use any icon with a logo you can select that from this place but I just want to keep it a very simple kind of logo so that would be only our brand name so from here let's click on this T icon which stands for text and here I just want to write gy toots then if you want you can change the color from this Color Picker so you can just uh use this color whe and you can change the color also if you want want to change the font then from here you can just select any of the types of designer pick or bold fonts and you will find the fonts from here for example if I select it you can see the font has been changed instantly but here I'm just going inside of designers's pick and from this area let's select here I'm just searching for right yes so here because is kind of similar with the same font we are using on our website so I'm selecting it and here yep it looks good but if I now save it our logo will be very smaller in size so for that reason first of all you can just drag this Corners so I'm making it smaller in this way and now click outside once now click over here again and if you just drag the corner in this way you see the logo is becoming bigger the bigger you can make it it will be more sharper on your website and now I just want to drag it at the middle of this canvas so here you can see the guideline so I'm just keeping it at the middle of this canvas in this place and here on our header we need to use a white color logo I mean we need to use a white color logo as the background is kind of Darker right so here actually we can make its color to white so just select it and from here from the color wheel I'm making its color to white we cannot see it because the background color is white and the text color is also white but don't worry because you know it's there so now I just want to save it so from the very top right corner click on Save logo and let's say if you have budget and if you want to pay them then you can just uh click here on download options then you need to pay them and you will get a very high resolution logo image but for this particular logo we don't need a very high resolution size because it will all it will be at justed within this narrow area so we don't need a very high resolution image or logo so from here I want to use the low resolution one that would work for me so click on download low resolution PNG file and here basically we need to put your email address so here I'm putting mine and oops here I'm putting mine and then click on I accept and click on send file to email now you can just go go to your email box and then you can download the PNG file from here just by clicking there all right now go inside of the header Builder and from here um just uploading the image click on select file and this is the logo I have just created let's open it and here click on select and here is our logo so click on this update button to save our work if we now go back to our front end let's now refresh it so here we can see our updated logo and it looks really great but now just have a look we need to fix one thing because if we just now scroll down you see on the sticky menu we can still see the previous uh logo here and it's color is kind of dark so we need to create another logo for that for this area so let's just go to logomaker.com again and from here so this one just keep everything same but I'm just making its color to black or we can use one of our colors so that is F0 F0 F0 this dark color oops it should be z f z oops from here okay let's just clear the color and here I'm typing # 0 F0 f0f so this is our Global color so I also want to save it from here click on Save logo here we can download the low resolution file from here and we need to write our email address accept it click on send file to email so here we have received another email just download the file again so here let's go back inside of the header Builder and have a look so if I open the Navigator again here you can see the menu is sticky this option go inside of that here is the first container So within here click on this image you see it's still the previous image so select it and here we need to upload the dark image or the dark logo so from here click on select file here is the dark logo you have just created click on open and from here click on select now click on update to save it and if we now go to the front end of the website refresh it here we can see the first white logo and if we now scroll down here we can see our dark logo here within the STI menu cool so let's just have a quick look from here and okay before doing any other thing just have a look from the header so here with the image I just want to link it with the homepage so here within the Link Field I'm here typing home and let's now just link it with our homepage and also with this logo just selected the white logo here I'm also start typing home and here is suggesting the homepage so just just update it to save our work now have a quick look from the front end so here is our beautiful homepage we have created we can see all the areas here all the animations and here is all the hover effects everything is looking great and here is the home contact form here's the FAQ area and here is our recent portfolio here is our Global fooder so everything is looking great let's go to our about page so here on the about page everything is looking great here is the team members area and now if we go to the services page we can see all the services related area here is the additional Services everything is looking great here is the testimonials and if we go to any single service page for example Google ads here we can see the single service details here now also let's go to block page so here we can see all the block posts and if we click over any blog post that will take us to the single blog post page so here we can see the thumbnail or featured image and the blog details here also if we just go to contact page that will take us to the contact page with the Google Map and here is the contact form everything is looking great all right so we have completed our amazing website design now just go ahead and make your own professional website I wish you all the best and I have just one request please comment down below about The Learning Experience from this video also please share this video on social media it would mean the world to me I will see you in the next video for now bye-bye

Channel: Jim Fahad Digital

Views: 266,698

Keywords: wordpress tutorial for beginners, wordpress 2024, wordpress 2024 tutorial for beginners, Elementor 2024, Wordpress tutorial 2024, Elementor tutorial 2024, elementor wordpress tutorial 2024, make a wordpress website with elementor, how to create a website for free, how to make a website, how to make a free website, Jim Fahad Digital, wordpress website tutorial, wordpress tutorial for beginners step by step, wordpress tutorial, wordpress, Elementor, WordPress Elementor, Jim Fahad

Id: c7vtdqiIEPw

Length: 287min 14sec (17234 seconds)

Published: Tue Jan 23 2024