How To Make A FREE Digital Marketing Agency Website ~ 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'll show you how to get your own domain name with a super secure SSL certificate we'll 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'll use a free theme a free page builder called Elementor 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 element or page builder we'll create everything just by drag and drop you can change any font size any color you can play with all the spacing you can put your own images within this amazing animated image masks you'll learn how to create awesome web animations such as animated spinning text effects service card hover effects team member hover effects gradient text and button hover effects swiping testimonial cral designing animated number counters you'll learn how to create a logo by using a free on online tool how to make this awesome web page with modern and trendy animations I'll show you everything from scratch unlike other YouTube tutorials I won't be using any rade template kits I'll show you how to create an amazing about page with team members area how to create this Professional Services page and single Services Pages we'll have a portfolio page and each of them will take you to that single portfolio page here you can explain the project case study then how to create a fully functional contact form inside of your contact page also I'll 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 posts I'll show you how to copy and paste from one page to another page to save your valuable time and most importantly we'll 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 either for yourself or for your clients now let me introduce myself first my name is air Hussein here in gyfa digital we've created thousands of websites for our clients as a team so basically you're learning all the best methods and techniques from a real professional many people have already started their Web Design Careers after watching our tutorials so please grab some coffee grab some water you can be the next success story 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 lik videos and find this video easily later all right we will be creating our beautiful website in just four easy 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 then how to install WordPress afterwards 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 just 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 hasf facebook.com Amazon has amazon.com we have gyfa 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 texts you will have in your website all will be stored in 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 plug-in you want you are the in charge of your own website now how to get 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 go to jahad digital.com SLB Best Host so why hostinger in my opinion hostinger is the most affordable and also the fastest web 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 so now let's just close this 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 the banner or interface looks different don't worry Don't Panic this happens quite often it's the same website now let's scroll down a bit and you'll find all the different plans here 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 own website with any of these plans but as you're just starting out I recommend taking this premium or business plan with both of these plans you can create up to 100 websites for example today you're creating a portfolio website tomorrow you want to create a Business website and next week you 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 the Premium plan you'll get 100 GB storage with the business plan you'll get 200 GB storage and with any of these plans you'll get all features like this unlimited free accl so all of your websites would be encrypted and super secure unlimited bandwidth so there wouldn't be any limit how many website visitors you'll have free email you can create hundreds of professional email addresses like info@ yourwebsite.com or admin atyou website.com like these then free domain yes like I said you'll get a domain name for free you'll also get tons of Wordpress features like oneclick WordPress installation free website migrations 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 hostinger just nailed it with all these features like cloudflare protected name servers malware scanners and all these I've had very bad experiences with other web hosting providers we've got so many malware attacks and we had to pay the hosting providers additionally to use their other secur tools but here in hostinger you're getting all these security tools for free now let's select a plan and like I said you can take any of these plans based on your needs for now I'm taking the Premium plan you can upgrade it later anytime so click on add to cart all right so here you're going to see different pricing options now this is referring to how long do you want to host with hostinger so we have one months 12 months 24 months and then we also have 48 months first of all I don't recommend going with 1 month because it's almost $112 a month which is super expensive we don't want that my recommendation would be to go with 48 months so for the first 4 years you just need to pay $22.99 per month that will save you $432 and then after those 4 years you start to pay $7.99 per per month which is still super affordable for a web hosting plan that can hold up to 100 websites but if you just want to start with 2 years or one year you can click over here and then in your first year you just pay $3.19 per month and you're 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 your plan so if you have the budget and you want to get the most discount possible you can go for the 48 months and after those 48 months you start to pay around $7.99 per month instead of $9.99 but wait there's more if you scroll down over here you see this have a coupon code button and now if you click on it then if you fill in with my special coupon code which is jfd 10 and click on apply you will now get a total of 78% discount now if we scroll up again and then select the one-ear plan and now scroll down can you believe that you're almost getting the same amount of discount and we're also getting super fast web hosting with a free domain name for the full year only for $34 what an amazing deal right so scroll up again now you see pricing is only $2.879 $78 per month for the first 24 months and $22.69 per month for the first 48 months as we've added the jfd discount code for now I will go for 12 months and then if we go here then put down your email address make sure to put your best email address because they will create your Hosting account with this email address now let's put a very strong password here now if we scroll down now you see you can pay using your credit card PayPal Google pay or you can even pay using cryptocurrency also you may see more different local payment options based on your country now if we scroll down and here I'm just going to put my card informations and then let's just click on submit secure payment so from here you can just skip this part and then it's asking if we want to create or migrate a website and since we're not going to migrate in your website we're just going to create one so let's just select create then click on next then from here make sure to select WordPress and then click on create with WordPress now here it's asking us to create login details for WordPress account so you already know what to do to create our WordPress account we need to put down our email and since my email address is already here I'm just going to put put a strong password here now I'm done putting my password so now let's just click on next now here it's asking us what type of website we want to build and according to the type of website you want to build you can choose any type from here if you're going to create a blog website you can choose blog if you're going to create an online business for your store then you can select this one now since the one we will be creating is for uh agency portfolio so I will be choosing this one then click on next okay now let's just skip this one now here it's asking us if we want pre-selected plugins for our portfolio so here let's just select this one because I want to select my plugins manually then let's click on next now since we're going to put our plugins manually let's just skip this one now here it's asking what domain name do we want to use for our website let's write air tutes which is short for abir tutorials now now as I'm done putting my domain name you can see that it's suggesting us a lot of other domain names with extensions like here you can see ayudes Doin abud Me aes.com and more from here you can choose any extension you like but I recommend you to choose theom extension because it sounds more professional and legit so I'm just going to choose aes.com this one and then I'm just going to click next now we need to fill up some details for my domain name so here I'm selecting my country Bangladesh and then I'm selecting personal which is selected by default then click on the next step button now here I'm just quickly putting my details all right so here I'm done putting my informations here so now let's just scroll down and then click on finish registration button so here it's asking us where is our portfolio target audience and here you can just keep this default one which in my case they have selected a data center in the United States Arizona the closest one they have to my country but in your case it can be a different one so you can just keep it to the default one or change it from here or you can also just change it later on so now I'm just going to keep it as it is and then click on the next button now it's installing WordPress so just wait a bit no need to rush it and as you can see our WordPress is being installed very quickly it's almost done we're pretty much there and right now we're at the control panel of hostinger here if we go into the Home tab you'll see in the account actions it's saying that they have sent a verification email to our Gmail account so let's check our email and in your inbox you'll find an email where it says verify your email address which is a verification email from the hostinger team so now from here we'll just simply click on verify email button here and then it will take you back to the hostinger control panel with the email address verified now from here I want to get my WordPress so from hosting and premium web hosting let's click on this manage button then it will take us to the hostinger dashboard then from here let's click on this WordPress overview and then if we scroll down we can see that it says WordPress admin panel so now if we click here it will take us to the WordPress dashboard now currently we're inside the word press dashboard or the WordPress admin panel and here I will make you guys familiar with all of these settings and options such as the post media Pages comments appearance plugins and all of these things and even though all of these things are pretty self-explanatory I would still explain it to you guys so you can have a better understanding of the options and features and you also get to save some time by not having to explore all of them by yourself and you can just start from the get-go so here we have our dashboard and as you can see that there there are so many pop-ups here which are here by default it will come here after the WordPress installation but let's not keep these pop-ups here because we don't want to work in a messy environment right so to make our workspace or our work environment clean we can just close these popups or minimize them so first of all to clear all of this you can just click on this dismiss button to dismiss them one by one or you could also hide or minimize them by clicking on these drop- down buttons like this and another thing you got guys can do to save more time is that go to the screen options here so click here and then you can just uncheck all of these from here so that they won't pop up again in your WordPress dashboard interface so now as you guys can see our dashboard is completely neat and clean but now I would like to clean up my WordPress dashboard even more and to do that we're going to hover on this plugins option then click here now as you can see that there are already some plugins installed by by default but to make our website we won't necessarily be needing these specific plugins which came by default so what we're going to do now is select all of them from here go to the bulk actions options and then click on deactivate now click on apply and as you can see that all of them have been deactivated now just like before select all of them again from here go to bulk actions and click on delete now click on apply now the brow popup is asking us if we are sure that we want to delete these plugins and since we're sure because these plugins are not the ones that we will be using to create our website we're just going to click on okay there you go all the default plugins were successfully deleted for a much cleaner look refresh the page again now as you can finally see that there are no plugins here at all so finally we're done with the process of clearing out our default plugins now you might be wondering what is a plug-in well plugins are basic basically these extra apps or extra add-on like things that extend or increase the functionality of your WordPress website and of course for our website we will be using plugins but the ones that we deleted just now we didn't really need them so now that we're done deleting The Unwanted plugins now we can finally install the plugins that we will be working with but before that I want to show you how you can change your WordPress password so for that first we will have to go to the users options and click on profile here you can change the admin color schemes as well currently it's given default but you can change it to light Modern Blue Ocean or any one of these you like now the main thing to understand from here is that if you change the admin color scheme only the admin panel color changes which is only visible to us so if you change these colors only you will be able to see the change in the admin panel it won't be visible to the rest of the world so for now I'm just going to keep it default then from here you can scroll down and now you can see that you can also change the language of your site as well from here you can choose any other language whichever one you like your mother language or any other language that you're comfortable with but for now I'm just going to keep it to the side default language which is English up next you can see that you can give your name here or you can also change the already given name anytime from here so here I'm just going to type my name now in this field I'm going to put my last name you can change or set your nickname as well now this part is very important you can choose whichever variation of your name you like from here but just remember that now let's say if you write any blog post the display name that you chose will be shown as the author's name on that blog post so choose your display name wisely I'm just going to choose abir Hussein from here then if you want you can change your email address from here you can scroll down down and change your WordPress profile picture from here by clicking on this blue highlighted writing and finally under account management you can change your password or set your new password by clicking here now here WordPress will suggest you a strong password but you can set this password to your liking now I'm going to change it to something easy so that I can always remember it so let's hide this and set our new password now once you're done with all these settings you can just scroll down and click on update profile and as you can see our profile was updated now at this stage I'm going to make you familiar with two basic terms one is the back end or the dashboard of a website and another one is the front end of our website now what you've been seeing until now is the dashboard or the back end of our website because only we can see it since we're the admin of this website now if you want to see the front end of the website all you got to do is is hover on the site name here and then go to visit site option I'm just going to open it in a new tab so now if we go here on this tab we can see the front end of our website and the whole world can see this portion of our website as well except for this admin panel bar that you see here and except for that everything else is visible to the rest of the world and for now our website is looking like this but surely we will change it it the way we want very soon but currently this is what the front end of our website looks like so now let's go to the back end off our website and before doing anything else I just want to do some basic settings and to do that from settings go to General and from here you can change your site title so here you can put your business name now here I'm just going to keep it the way that it is then in this field you can write some tagline but try to write something meaningful here because this will also help you to rank on Google search engine so here I'm just going to write best web design agency in California then you don't have to mess with these URLs just keep them the way that they are and again you can change the site language from here and here's the different time zone option if you want to have any different format like how you want the day month and year to be shown you can change them from here but I'm just going to keep everything the way they are and for now let's just click on Save changes now the next thing I want to do is go under settings and then go to permal Links now this part is really important as well here you may see that the perming default structure is set to day and name sometimes you might see it set as plain but I highly recommend you to set it as post name this one because if you keep them as plain you see that any of your post page link or any other Pages link would look like this which would be your website name.com then for Slash and then this kind of bizarre number but if you keep your permalink structure to post name then your other Pages URL would be like this your websitename.com then the pages name or post name which is more human readable and it's also good for search engine optimization so I'm keeping it as post name then scroll down and click on Save changes okay so the thing we were talking about the back end and the front end of our website so this is the back end and this is the front end of our website so first of all if you want to change the Outlook and feel of your overall website which is looking like this now so to change it you need to change the theme of your website now to do that go back to the dashboard hover an appearance then click on themes and here you'll see some themes which came by default with WordPress installation now for for this tutorial I'm going to use hall elementer theme but you can select any other theme of your liking from here so you can just click on add new theme here and add a new theme or you can also add new theme from here now from here you can choose any theme of your liking but I'm going to choose this hell Elementary theme so let's first install it and then click on activate to activate it now if we go to the front end and refresh our page we can see that the Outlook and the feel of our website has been changed now initially this might look very plain and boring but no need to worry because that's what this tutorial is for I'll help you create everything and make your website look fancy as much as possible and as professional as possible step by step from scratch now after all of this the first thing we need is a page builder right and for this tutorial we will be using elementer page builder which is completely free to get Elementor free version and you can just go to gyfa digital.com I'll put the link to this page in the description box down below so from this page if you just go under important links here under important links you'll see this get elemental free account so just click on this and it will take you to the Elementor Pro purchase page now even though we will be using Elementor free version Let me just give you a quick tour of the Elementor pro version here so here if you get the Elementor pro version you'll get more options and features features like the 82 Pro widgets theme Builder form Builder popup Builder custom code and CSS and so many other features and options now you can take any of these plans according to your needs so that not only your own website but you can also create Advanced websites for your clients such as blogs or Advanced e-commerce websites and so on super easily but as I said for this particular tutorial we'll be only using the Elementor free version so the first thing you need to do is create a free Elementor account now to do that just click on this Elementor logo here then from the top right corner click on login and of course first of all you need to create a free account if you already don't have one so from here click on create an account then from here you can use any of your Google Facebook or Apple account or your email to create an account so I'm just going to click here continue with your email and here you just need to put your email address and password and then you'll be all done with creating your Elementor free version free account but as I already have an account I'm not going to create another one and I'm just going to sign in with the one that I already have so after clicking on sign in I'm going to click on sign in with three email now here I'm just going to put my email and password of the account that I have already created and then I'm just going to click on sign in now go back inside of your WordPress dashboard and from here Reg just going to install our Elementor plugin okay so for that just go to plugins and then click on add new plug-in to add a new plugin and it will take you to the plugins page then from here you can search for any plugins you want to use and then install and activate it so first of all we're going to install Elementor page builder so let's type Elementor and here you can see the element website builder you can also see that there are more than 5 m in active installations so a lot of people are using it because it's actually really good so from here just click on install now then click on activate now let's add the other plugins that we will be needing for this tutorial and for our website so from here from the search bar let's search for elements kit light now install this one and to save our time let's activate all of the plugins that we are installing together in the end so for now let's just keep on installing the ones that we need now search for essential add-ons now install this one then search for Jag Elementor and install this one and lastly search for met form then install it wet now to activate all the plugins that we've installed together go to installed plugins under plugins now from here by clicking here select all of them then from bulk actions click on activate and then apply now this onboarding may appear so just click on next then click on next again and again skip this part and then click next for now let's just this part now let's go back to our plugins page again and here as you can see that all the plugins that we have installed have been successfully activated so now finally we're done with our plug-in setup section now let's go to the most exciting part which is Elementor Page Builder and I'll be showing you guys the true power of Elementor page builder by creating our super cool awesome pages so to First make our web page is super cool and awesome we do need some pages right so for that go to this Pages option and here you'll see some dummy Pages which were here by default but since we don't need these Pages let's select all of them together just like before then go to bulk actions click on move to beIN and then apply now I want to create our website's homepage first so to do that just click on this add new page option now let's give a title to our page which is home home then from the top right corner click on publish then click on publish Again by the way let me show you guys something interesting first so now if we go to the front end of our website you can see that we're at the default domain right but we can't really see the homepage that we just created it's showing archives which is the blog post archives now you might be wondering why we can't see our homepage here right and that is because by default WordPress shows all the blog post on the homepage which is the default settings of WordPress but we don't want to show the blog post at our homepage right we want a custom homepage on the default URL and just for that we have created this homepage now all we need to do is set this homepage as the default homepage of our website and to do that let's now go to Wordpress so just click on this WordPress icon then from under settings go to reading now you guys can see that here it says your homepage displays your latest posts and this choice is the Reon why our homepage was showing posts instead of a page and specifically our homepage so now to change that select this a static page option and then in the homepage select home this is the page that we just created right so now if we select it then in the homepage our just created homepage will be shown as the default homepage instead of the blog posts so now just simply click on Save changes now if we go to the front end of our website and then refresh it we can can notice the homepage that we just created right and currently it's nothing fancy because we just created it and our homepage is completely blank but now you can clearly understand how you can set a page to your default homepage so now let's go back to the WordPress dashboard then from Pages go to all pages now up next I will make you guys understand how the elementer page builder actually works which is a very fun page builder to work with so from here just go to the homepage that we created so click on edit and then from here on of of course we want to edit our homepage with Elementor page builder so from here just click on edit with Elementor which will take us within Elementor page builder now let's just close this popup and now we're finally inside of Elementor Page Builder and here is where the actual fun begins so first things first let me now introduce you all to this whole interface here that you see and this writing that you see here is actually the header of our website which is coming from our hallo Elementary theme and then at the bottom we can also see the footer which is also coming from the hello element theme and here what you see is our main canvas and this is where we will be creating our Pages for our website now on the left side all these things that you see are actually the Elementor elements or the elemental widgets like for instance here you can see the heading widget image widget text editor video button and all these widgets just name it and you'll find it here but these are actually the free ones now if you scroll down and look at these widgets wigets you can see that they have a lock icon right that is because these widgets are only available to the pro users I mean the Elementor pro version users so if you install the Elementor pro version you will also get access to these Pro widgets as well like the gallery animated headline price list price table and all of these other widgets and not only these widgets but you can also get access to Advanced functions like e-commmerce functions block functions and so many other Pro functions but as I have already said earlier that for this this tutorial I will only be using Elementor free version so we will just be working with these ones and other free widgets that we can find here so now let me continue with giving you guys a basic idea how this amazing page builder works so first of all in this canvas we need to take a structure and for that I'm just going to click on this plus icon then choose the flex boox layout then choose this structure which is column directed now of course you can always use all kinds of other structures as well but for now I'm just going to make you guys understand how this Canvas OR the overall mechanic works so that's why I just took the simple one so inside of our canvas we have taken a container because this is a container right now to change the height of your container you can scroll or drag this minimum height wheel here so you can drag it to the right and as you can see that the height of your container will increase whereas if you drag it to the left the height of your container will decrease it's as simple as that so let me increase the height just a little bit so everything within this area is your container inside your canvas so now I'm just going to keep it as 500 pixels so you can also manually put the value of your minimum height of your container from here so let's just write 500 and for the moment I'm going to keep justify content to center of course I will be explaining these things later on but now if I explain everything all together at once it might be a bit confusing for you guys so just hang tight with with me and you will get to know everything now let's say if you want to give your container a different background color you can also do that and for that you'll just simply need to go to the style tab here then from background type choose this classic option then click on this Color Picker and from here on you can select any color that you want and you can play with all these other colors as well but for now I'm just going to take this black color now let's just click outside now within this area or this container if you want to add any Widgets or Elementary elements you can just click on this plus icon or you can also do another thing and you can just click on this Rubik's Cube looking icon and we will get the same results because no matter whichever one you click all these elements will be here at your disposal so now let's say if you want to add a heading to your container all you got to do is click and press on this heading then drag it over here and then drop it and there you go now your container has a heading now if you want you can change the text of your heading from here by triple clicking over it or you could also change it from here this title field so here I'm just going to write gyfa digital now if you want to do some styling with this text you just got to go to the style tab you can then change the title alignment from here so as you can see that right now by default it's left aligned this one but you can make it to Center aligned or right aligned now I'm just going to keep it Center for now and then from here you can also change the text color which is by default getting this Canan bluish color but just like before you can just click on this Color Picker and then choose any color of your liking from here so for now I'm just going to keep it as white and then from this typography option you can click on this pencil icon and then change the font family to any other fonts here you can get access to all the free Google fonts you can just select any of them for example if we select this font as you can see that instantly the font of this title has changed as well how cool is that and also you can just go to this fonts family and search for any other font in this search bar so here I'm just going to search for one of my favorite fonts which is Poppins so now let's select this one then you can increase the size of your title by dragging this size bar to the right and you can also decrease the size by dragging it to the left then you can also make the writing Bolder or thinner by selecting any of these now if I make it extra light you can see that the writing is so thin and lightweight and then if you from here select extra bolt you can see that the writing has instantly changed to thick or heavy weight then you can make the writing all uppercase or lower case or whatever you like from this transform op so for now I'm just going to make it capitalized you can also switch the style from here you can make it italic now for now I'm just going to keep it sorry I mean from style I'm just going to keep it normal and just like that you can play with all of these options and after that these options come very handy as well for instance if you drag this wheel here this letter spacing wheel then the space between the letters as you can see is increasing if you drag the wheel to the right of course and then if you drag the wheel to the left then the space between the letters I mean each of the letters it's decreasing and also if you drag this word spacing wheel you see that the space between the words are increasing and then if you drag it to the left then the word I mean the space between the words will decrease as well now aren't these features super handy now let's say if you want to add another heading or another widget under this heading then you will have to go to the widget section again so now let's say I just want to add some text underneath this heading so from here you will just need to drag this text editor underneath of the setting right here and currently as you can see that a dummy text is given here and just like before you could change it by triple clicking over here or you could also change it from this title field or this text field then if you want to do some styling of this widget then you need to go to the style Tab and just like before you can change the alignment to Center Ed or right aligned so now let's just keep it centered and again you can change the text color by clicking on this Color Picker and then choosing the color that you want and then you guys can go to the typography option and we have already played with all these features so you guys already know what all of these things do now I'm just going to increase its size a little bit so let's drag it to the right and let's keep it this way now again let's say you want to add a button underneath this text so you just just need to go to the widget section Again by clicking here and here as you can see that there is this button widget so just like before drag this button widget and then drop it under here now let's say you want this button to say something else so for that you just need to go to this text field and write whatever you want the button to say in this text field here like for instance you want your button to say contact now and then within the sling field let's say if I write https colimas digital.com which is our main website now clicking on this button will take the website visitors to this website and again for the button you can do some styling settings from the style Tab and you can set its alignment to Center and from here you can also play with the typography the background color of your button the text color and all these things for example let's say we want the background color of our button to be another color rather than this green color so just click on this Color Picker and let's go and select another color so let's select this one so now this is our buttons color now let me show you guys something more interesting now as you can see that normally this button has this color right that we just set up right now but let's say when I hover over this button I want it to change its color so what do I do for that to do that simply just go to this hover tab this one now from under hover you can just click on this Color Picker of this color and let's say I'm just going to take this red color and now let's have a look at the magic so as you can see that in the normal State our button has this purplish color right but now if we hover over it you see it's instantly turning red Isn't that cool so this is the basic concept of normal and hover colors and the overall features of the container now let's say if you want to edit or change any of the elements or widgets that you you have already put in your container you can simply just click on that and no matter which one you select you'll most probably always get these three tabs which are content style and advanced now let's say for any of your content of your container or page for example for this text editor let's say I want to put some space on the top and bottom of this widget so what do I do now we just simply need to go to the Advance Tab and from here we can put the margin values specifically where we need the space in so from here let's just unlink the values and as I said earlier let's say we want to add some space to the top so for that we need to put a value to the top margin right so let's say I'm going to put 20 pixels of top margin now as you see just as I put the value over this top margin we got the top space over our quidget now let's say I want some more space at the bottom so from here you just need to set the bottom value so I'm just going going to set it to 15 pixels or let's say we want to put it to 30 pixels now see how much space we got under this widget of ours and this is how you can play with the spaces of the elements from this Advanced tab so the simple summary is if you go to this content tab then you can change the text or link or any other thing related to that widget contents and by going under its style tab you can change any of its Style styes like its alignment text color typography or any other thing related to its style and then from Advanced tab you will find this pce settings and all these other advanced settings as well and this is basically the main concept and then let's say you have changed your mind and there's some elements or widgets in your container that you don't want them there so for that you can just simply right click over that element so from here you can just right click over here or here and from there you can just delete it it's as simple as that now since I'm done explaining the basic concepts of the flexbox container I'm just going to close it by clicking on this X and then our canvas is as good as new of course we will be creating our whole website from scratch step by step by using Elementor page builder but this kitp papa.com is for those people who want to create their website super fast okay so here let me just give you a quick tour of kitp papa.com here if you scroll down you will find all the r template kits for different types of websites it could be any website for Education SE agency Sports and Fitness food and restaurant photography you name it you will find every category here and not only your website but you can also create website for your clients by using K papa.com template kits just within a few clicks so here let me just give you a quick example let's say you've got a client who is a lawyer okay and he wants his website to be made really really fast then for that you can just go inside of this lawyer category and here within this category page you'll find different types of rade kit for the lawyer category so here I'm just going to go inside of this kit so now let's just have a look here and now one of the most interesting things about kitp papa.com is that before even purchasing any website template kits you can actually preview the whole website from here just click on this live demo button then you can see everything within this beautiful ey frame then you can check all the pages all the sections the mesmerizing designs and effects and pro widgets as well and from here you can also go to other pages from the same place and not only that you can also check the responsiveness of the website template kit you can just check the tablet view from here it's looking stunning you can also check the mobile view from here this is how it's looking on the mobile view so you can check everything from here up front before even buying it and then if we go out you can also check all the details about this kit here and another useful thing is that with each of the kit you'll also find a video installation guide here so instead of watching this 3 to 4 hour long tutorial if you want to make your or your client's website really really fast you can just follow this 3 minute long video guide so if you play it as you can see it's only 3 minutes and 21 seconds long so just by following this short video you can install and activate and make your website or your client's website live Okay then if you scroll up you can see that that the template kit 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 a couple thousand for that so this could be a big win for you and let's say if you're an agency or a freelancer and you need to create a lot of websites frequently for your clients then you can actually take their buy all package and as you can see right now there is Discount going on so if you click on buy all or grab the deal so from here instead of purchasing each kit separately you can get full access to all their already made existing template kits as well as the future ones so if you scroll down you see that you'll be able to get more than 180 premium kits and they also add more than 10 kits every month so if you grab this deal then you'll get access to all this existing premium kits as well as more than 10 new kits per month which are yet to come only for $49 which is more than a great deal if you ask me also now let's go back to homepage and here for this particular tutorial basically we will be creating a website which will look like this so here let's search for digitize and here's the kit so let's click on it and like I said of course I will show you how to create this website from scrp scratch step by step but now I just want to show you that 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 just say if you want to purchase this kit you just need to click on add to cart and you need to pay them 15 bucks and right after purchasing this kit you'll basically get a zip file just like this and you need to import that kit to your WordPress website that's all you got to do so now you have both the options if you don't have time and you want to create this website super fast you could just buy the template kit and through this template kit get your website ready just within a few minutes with a few clicks or you could follow along with the whole tutorial video so now let's go back and create our whole website from scratch by using Elementor page builder now since we'll be creating a light themed website so make our Elementor light themed as well so to do that just go to this hamburger icon and after clicking on it go to user preferences here you'll find all these settings so from here I'm just going to change the UI theme to light as you can see that our panel color has changed to light as well and we'll understand these settings as well in the future but for now let's just save this by clicking on update and then let's go outside also to make our workspace more neat and clean we can do another thing which is just go to this settings option click here and from page layout select Elementary canvas so you see now our whole canvas is totally clear we won't even be having the header and footer to distract us while we're working with our canvas right and now finally I'm going to show you guys how you can create an amazing website just like the one that you saw on kida.com step by step from scratch by using Elementary page builder so let's start by creating our hero Banner area or our parent banner and as you guys already know know that to create any structure first of all we need to click on this plus icon then choose Flex boox so here we can select any of the available structures for now I'm just going to choose this one now you can always just change the structure that you put so as you guys just saw that I chose the structure which is column directed but from here from this direction field you can click on here and it won't be column directed structure anymore now let's keep these default values as they are but from additional options let's change the Overflow to Hidden here overflow basically means whenever you do any work inside your container sometimes The Styling or any widgets that you put might have effects that might overflow outside of your container the one that you're working with right so to prevent that from happening you can set the Overflow to Hidden so that your effects don't overflow outside of your container's body now let's do the styling of our container then from under style tab go to background and here let's choose the background type as classic now here we're going to put an image a background image in this container so for that you'll need to choose an image by clicking on this plus icon now if you guys are following along with the whole tutorial and you want to put the exact images that I'm using in this tutorial you can just go back to gyfa digital.com then from under important links you'll see this link here download the resources I've used in the tutorial so if if you click here you'll get a download link to all the images that I'll be using in this tutorial so let's go back to elementer and now choose our image by clicking on this plus icon as you can see that currently we don't have any media here I mean we don't have any images here so for that you'll need to go to upload files and click on select files so when you download the resources that I've used in this tutorial you'll basically find these two folders which is images and templates so if you enter this images folder here here you'll find all the images that I'll be using in this tutorial now you can select each image one by one to upload them in Elementor or you can do another thing you can just press and hold control or command if you're using Mac and then press a to select all the images at once then click on open and as you can see that all of the images will be uploaded in this field which is the media library of Elementor now as you can see all the images have been uploaded so for now our background image let's choose this black image here then click on select now as you can see that our images will be uploaded here so currently our parent Banner has a background image and that is why our container has turned completely black now let's do some settings for our image here so let's make the position to top right then repeat to no repeat then display size to cover so we're all done with the styling now let's go to the advaned tab here unlink the padding values then set the top padding to 250 keep right to zero bottom to 150 and left to zero as well now inside of our parent Banner container let's take another container and you guys already know that to take any widget you'll need to click on this plus icon or this rubis Cube icon so let's click here and let's drag this container over here now as you guys can see that we already had one container and inside of it we took another container so if all the containers are going to have the same name it might be a little too confusing to work with right and exactly for that reason we're going to rename our containers so that we don't get them mixed up between each other so now let's rename the first container as our parent Banner container and let's rename the one inside it as our hero Banner container now change its content width to full width then direction to row keep the gaps in their default values then we don't really need to do any styling settings for this container so let's go to the advanced Tab and here just set the zindex value to two now you guys might be wondering what is a zindex value well to put it in simple terms whenever any element's zindex value is higher than any other element then the one with the higher value I mean the higher Z index value will always be more visible and prominent over the one which has less Z index value so let's say if we do any settings under on this parent Banner container let's say we do that settings in this whole field over here and then we add any effects or anything on this hero Banner container then over the effects of this parent Banner container we'll be able to see the effects of this hero Banner container this one because this container zindex value is higher than its parent Banner container zindex value and that's the main zindex value concept now inside this herob Banner container this one let's add another container from here now drag this container with you here then let's rename it as our heading and text container because this container will have the headings and texts of our hero Banner now we don't need to do any settings with this container so up next let's add a heading to our container so click on this plus icon and then drag this heading widget over here now let's put a dummy heading in this field so let's write creative thinking then go to the style tab now currently it's given this default color but we're going to change the text color to white then go outside and let's do the typography settings so click on this pencil icon then set the font family to Bilbo swash caps so just write Bilbo and then choose this one then set the size to 35 pixels we to 400 sorry 400 then letter spacing to 3.5 then click outside and for now we're all done with our heading now again let's click on this Rubik's Cube icon then search for heading then select and drag this jacket heading under here now I'm just going to put some dummy titles in the title field now I'm back after putting the dummy titles now from Focus title display let's change it to inline then go to style tab sorry I mean uh go back to to content and here you'll see this separator here so let's turn it off because we don't need it so turn the show separator to no then let's go to the style tab then click on this title dropdown and to do typography settings again click on this pencil icon then set the font family to Ubuntu this one set the size to 55 pixels weight to 700 line height to 1.3 em so let's change the line head scale to em first and then set the value to 1.3 em now click outside and from color click on this Color Picker then set the color to white by dragging this color wheel to the top left corner there you go now click outside and then go to focus title set the color style to gradient background type to gradient as well then click on this Color Picker and here we are going to put a custom color code so for that in this field you can just click over here or you can just write I mean type in your keyboard and I'm just going to give it a color code of 5f 39 FF then click outside now choose the second color from here and let's also give it a custom color code now type 20 D9 A1 Okay now click outside now change the angle value to 90° then let's go to the Advan tab and here unlink the margin values Now set the top margin to minus 10 and bottom to minus5 okay and just like that we're all done with the jacket heading widget here now let's go to widgets again and then drag this text editor widget under here now go to its style Tab and let's also give it a custom text color so here write D9 D9 D9 then go outside and inside of typography Now set the size to 18 pixels then go to the advanc tab here unlink the margin values and only set the bottom margin to 20 so now we're done with the headings and texts now let's put a button underneath here so go to widgets then drag this button under here so in the text field let's write explore now then go to style tab and from under normal tab change the text color to white then background type to gradient and give the first color a custom color code which is 20 D9 A1 now go back then choose the second color from here and then in this field write 5 F3 9 FF then go back again and in angle set the value to 90° then set the Border type to solid all of the Border width to zero pixels and from here choose the Color Picker then set the Border color to 20 D9 A1 go out and let's do the hover settings because we want our button to be interactive and have a cool effect when we hover over it so again set the background type to gradient choose this Color Picker and then here write 5 F3 9 FF then go out choose the second color from here and give it a custom color code of 20 D9 A1 now go out and again set the angle to 90° there you go now let's see So currently we have this color while our button is in normal state but if we hover over it then you see we have this cool gradient effect awesome now minimize our heading and text container because we're all done here and let's add another container under here so you can just drag a container under here or from here you can right click over this herob Banner container and then click on add new container actually this container went outside of our herob Banner container but we want it inside our hero Banner container after our heading and text container so let's drag it over here and there it is now let's rename this container our images container because in this container we will have the banner images so from layout change the cont with to boxed then direction to row now go to Advanced tab because we don't need to do any styling here then unlink the margin values and only set the top margin to 65 pixels okay now inside of this image container let's take a image widget so from here drag this image widget over here then click here to choose an image so let's choose this one click on select and there you go our image has been successfully uploaded here now go to its style tab because we do need to do some styling for this image so here let's change the width scale to pixel scale and then make it to 300 pixels okay then change the Border type to solid and set all of the Border width to 10 pixels then click on the color of Border color and here give it a custom color code of 3A 3A 3A now go outside then set all the Border radius to 550 pixels there you go now go to the Advan tab here unlink the margin values and keep all the margin to Zer pixels then set the zindex value to two now here to make our Banner image look more cool what we're going to do is we're going to add add some cool animation effects on this image and don't worry you won't need to do any kind of coding for this image to have a cool animation because I've done all the work for you already so now to put the effect all you need is First Take a container so you can take a drag container from here or from under here you can click on this plus icon then just choose a structure and inside of this container click on this plus icon then in the the widgets field search for HTML and then drag this HTML widget here now you can put this HTML container or HTML widget anywhere in your website because only you the creator of your website or the person who is working in the back end can only see this widget people who are visiting your website from the front end won't be able to see this widget so it doesn't matter where you put it but just to be more organized I put it in the end so that it will always be in the end of what I'm working with and now to finally put the custom code for the animation what you need to do is go to gyfa digital.com and here just simply go here you see this animation pulse CSS so just copy this CSS code snippit from here until here then right click over it click on copy then go back to Elementor and in this HTML code field right click and then click on paste and your HTML code has been pasted here now you might be wondering since I've already pasted the HTML code snippet why isn't the animation still working well that's because to activate the animation or the effect of the HTML code snippet you'll need a CSS class name which you'll need to put inside of the CSS classes here so simply just go back to gyfa digital.com again and here under under this animation pulse CSS that we just copied you see this animation pul CSS class you just simply need to copy this whole CSS class name right click over it click on copy go back to elementer and in this CSS classes field right click and then click on paste and there it is you see how easily you could just activate such a cool effect and I assure you there's more to come I'll show you so many more other amazing effects so just stick with me and watch the whole tutorial okay now here scroll down and go to this border drop down and make the Border Type To None then set all the Border radius to 500 pixels so now we're done with this image I mean our hero image Also let's rename it as our hero image one okay now just like before let's go to the widgets then again drag this this image widget under here I mean beside this one let's rename this as our hero Image 2 now let's choose an image from here let's choose this image click on select and there you go now just go to a style tab then change the width scale to pixel then put the value of 380 pixels there you go now from under here put all the Border radius to 550 pixels then go to its advaned tab unlink the padding values and make the top padding to 50 while the left padding to 10 then from down here set the I mean make the position to Absolute then horizontal orientation to this one right and offset value to minus 80 pixels then vertical orientation to top and it's offset value to -150 pixels now for this one we're also going to put a cool effect on it but let's give it a different effect so now simply just go back to gyfa digital.com here then from under here copy this animation wobble CSS code snippet this one so let's copy from here and then until here then right click over it and click on copy now go back to Elementor and here you guys already know what to do just go to the HTML widget this one and then here after this bracket that you see here so just click over it and here make some space to put the new animation effect or the quot snippet that you just copied press enter enter enter enter so now we have this space and let's just paste our code snippet right here so right click over here and click on paste and just like before to activate the animation effect we need to go to this hero image and from its advaned tab you need to put a CSS class name here in this field so go back to gyfa digital.com then copy this and animation class name which is animation wobble so let's copy it from here till here now right click over it click on copy then go back to home and here put the CSS class name so right click over it and click on paste there you go so now this image has a pulse animation whereas this image has a wobble animation cool now from advaned tab go to its background so this drop down and here choose the background type of classic then let's choose an image so here let's choose this this herob border one image so let's click on select and now you see there's this Border in the background of this image now we just need to do a little bit of setting for this one so if we scroll down here you'll see these options and from here set the position to custom then only change the Y position to 30 pixels and scroll down and set repeat to not repeat then display size to custom as well and under here set the width value to 91% there you go see how cool it looks by the way since Elementor is an online page builder so always remember to save your work by clicking on this update button right here otherwise you might lose your work and your progress so it's always safe to just update and save your work every now and then there's no harm in just giving this button a click right so now let's minimize this container because we're done with it for now let's actually close this whole hero Banner or pan container now under this one we have this HTML container Also let's rename it as our HTML container and now between these two let's take another container so click on this plus icon choose the flexbox layout then this row directed structure and from here set the justify content settings to Center then go go to its Advanced tab unlink the margin values and only set the top margin to minus 2 then unlink the padding values and set all the padding values to zero then inside of it let's take another container and also let's name this container I mean the parent container of this one that we just took a minute ago so I've just renamed it as our float icon container because I'm going to be putting an icon which will be floating in this container which is not that big of a deal but it will increase the beauty of our hero Banner section so now for the next container that we took let's click over it and then set the content width to full width with scale to pixel and set the value to 125 then go to its style Tab and from its background dropdown let's select the background type to Classic and let's choose an image so from here let's choose this image which is the mouse background so let's select it now set the position to Center Center repeat to no repeat and display size to contain then click on its plus icon and from here drag this icon widget over here now from its content let's select an icon so choose this icon library and here search for Mouse solid so after searching for Mouse solid let's select this icon which is the mouse solid icon click on insert and there you have it now go to its tab tab then from under normal choose this Color Picker and set it to White now go back and set the size to 26 pixels there you go now go to advaned Tab and here we are going to also put another CSS class name here and for that before we need to add the code snippet so go to gy.com and from here select and copy this whole Mouse animation CSS code snippet so from here until here and then right click over it and click on copy now go back to elementer then go to the HTML widget and here again after this bracket make some space just like before then here just right click over it and click on paste now go to this icons Advance Tab and to put a class name here let's go to gyi digital.com then from here copy this CSS class name which is mouse animation and then right click over it click on copy go back to home then right click over CSS class's name and click on paste and there you go so now if we click outside here as you can see this is how it looks now let's save our work by clicking on update all right so now this is how our Banner section looks in the PC view so if anyone visits our website from any desktop or PC then they will get to see our website as this but let's say if someone enters our website from a tablet or mobile device of course they will see a different story right and for that reason we need to do responsive settings so that people can visit our website effortlessly no matter what device they're using so for that just go down here and click on this responsive mode and as you can see that currently we're in the desktop view but now let's do the tab settings which is the tablet portrait so let's do the responsive settings of that now just click over this tablet portrait and here let's start from the beginning there's not much we need to do here here we are just going to tweak some settings here and there so first of all let's select this parent Banner container and then from its advanced settings I mean the advanced tab let's unlink the padding values first then set the top padding to 160 pixels and bottom padding to 150 pixels now go inside the parent Banner container and choose this hero Banner container so as you can see that currently our images and writing are all here but the space is not that much which is why our image is getting cut off so let's put them one by one and set them in a manner so that they will show one after another one so go to the layout tab and from here set the direction to column see now first we have the heading and text container and then we have the image container so now let's do the heading containers settings first so inside of herob banner container select this heading and text container then from its Advanced tab set its zindex value 2 4 then go inside of it and choose this heading now go to its Advanced tab unlink the margin values and set the bottom margin to minus 10 now select the jkit heading this one then go to its advaned Tab and from here unlink the margin values again then set the bottom margin to minus 10 now let's minimize this one and select this images container and from its Advanced tab unlink the values of margin and then only set the top margin value to 150 pixels there you go now go inside the images container and select hero image 2 then from its Advanced tab set its horizontal Oriental offset to 20% so first change the pixel scale to percentage scale and then put the value of 20% so now we're done with the tab view let's do the mobile responsive settings so click on this mobile portrait and here again choose the parent Banner container first then from its Advanced tab unlink the padding values and set the top padding to 142 pixels then bottom padding to 80 now go inside of heading and text container then select the jkit heading this one then I'll link its margin values and set the bottom margin to minus 22 now inside of images container which is this one select hero image 1 and from its tile tab set its width value to 247 pixels now select hero image 2 and set its horizontal orientation offset to 0% then scroll down and select this background drop down then again scroll down and select its y position so here put the value of 30 pixels and with that we're all done with the mobile responsive settings as well and this is how it's looking and we already did the settings for the tab view which is also looking great so now let's close this responsive mode and update our work up until now all right so now before going any further I want to show you guys something really important so let's say if we select this heading and go to its style tab you guys may remember that we did a lot of settings for its typography right so from typography we've changed its font family then its size its weight later spacing and whatnot now just like this if you want to reuse any color or any fonts or font settings that you have already used over and over again on your website there's actually a more efficient and a better way to do it now let's say for this heading we have used this font family right so in future if we make any other sections of our website we would want to use I mean reuse this font family again and again so to save your time and doing the same settings over and over again or let's say you don't like this font anymore okay and after a month probably you just want to change the fonts and colors of the elements of your website so if you change the colors and fonts and other set ings of each of the elements one by one it would take you so much time and basically you will be creating the whole website all over again which can be so timec consuming and you will just be in a very big hassle which is a huge waste of time so now what if I tell you that you could actually change the color of your heading or any kind of other settings regarding the styling of an element from one place and one place only wouldn't that be a life and timesaver for you and that's where the global settings comes in so to select the settings of all of your headings or the selected ones that you want you can use the global setting feature to do that in a very short amount of time so to do that just go to this hamburger icon click here then from here let's go to site settings then you'll find this global settings okay and from here let's just say let's go to the global colors you can change the system colors from here and you can also add your custom colors in this field here so whenever you feel like using any kind of colors you could just just use them from here because you already have these colors at your disposal and let's say if you want to change the Outlook and feel of your website and change the colors and typography settings of your website as well so you can just change them from this global settings and after that everything in your website will be changed as well and you won't have to do all the settings one by one individually so now for our website let's change the system colors first and then we can also put some other custom color that we want for our website so first let's change the primary Global color from here let's just choose this Color Picker and in this field let's put a custom color code so I'm going to put 3 a 3 a 3A okay now go back then let's select the secondary color and here let's write 20 D9 A1 okay so the secondary color is ready as well now go back and select this text color and in this field let's write 7272 72 now go back and select this accent color then here write 5 F3 9 FF there you go let's go back so we're done with putting the system colors let's add some other custom colors of our own so let's click on add color and let's name the first color as our white color then choose this Color Picker and from here just scroll it over here you'll get this 6 FS which is a white color now let's add our second color color and let's name this our black color so let's choose this Color Picker and from here let's drag this wheel to here you'll get six zeros which is a black color now let's add our last color which is going to be a gray color so let's rename it as gray color then from the Color Picker in this field let's write D9 D9 D9 and there you have it now go back since we're all done here let's click on update then go back and select Global fonts now let's set our fonts so first of all let's go do the primary settings from here click on this pencil icon and set the font family to yuntu this one set it size to 50 pixel weight to 700 and then line height change the pixel scale to em then put the value of 1.3 now go back and whatever settings you do here you'll see the preview here of course so let's do the secondary font settings let's set it font family to Bilbo swash caps so just write Bilbo and select this one then set the size to 35 pixels weight to 400 let's keep it 400 then make its line height to 1.2 em there you go so we're done here as well now go to the textt one so click here set the font family to Ubuntu again then size to 16 pixels and line height to 1.6 em now go back and for the last one this accent one again set the font family to ubun 2 size to 16 pixels and line height to 1.6 em again okay so we're done here as well let's save our work then go back and let's do the settings for typography so from under body change the text color by clicking on this Color Picker and let's set a custom color code of 727272 then go out and inside of typography set the font family totu size to 16 pixels weight to 400 and Light L height to 1.6m now go back then from under link set this color to Global accent color which we just did the setting off a few minutes ago so let's select This Global accent color then go to its typography and only set the size to 16 pixels then weight to 400 now go back then for H1 color which is the heading heading one so by clicking on this globe icon select the global primary color then go to its typography and set the size to 70 pixels and weight to 700 then line height to 1.3 em now go back and go to heading two so here set the color to Global primary again then go to typography and set the size to 48 pixels then weight to 700 and line height to 1.3 em now go out and for H3 set the color to Global primary color again and inside of typography set the family to bbo swash caps right bbo then choose this one then set it size to 35 pixels weight to 400 and letter spacing to 3.5 pixels then we're done here now go to H4 so set it color to Global primary then go to typography set the family of font to yuntu then set the size to 22 pixels weight to 700 and line height to 1.3 em all right now for H5 set the color to Global primary again then inside typography set the font family to yuntu size 2 to 18 pixels weight to 700 and line height to 1.3 em and we're done we won't be needing a heading six for our website so let's update our work and actually the most useful part about global settings is that not only can you set the colors and typography of the desktop view but you can also do the responsive settings from here so for example let's say we're going to heading one so let's go inside of its typography and here as you can see that the size is given to 70 pixels which will be the size of heading one in the desktop view but let's say we want to give it another size so that it would fit effortlessly in the tab or mobile responsive view you can do that from here just simply click on this icon and then switch to Tab and here let's set the size to 60 pixels there you go just like this let's change the size of heading two so from here click on this typography and set the size to 44 pixels then go back and for the other headings we won't really need to do anything else because the size of those headings are already really small so they will have no hard time fitting in the mobile responsiveness but let's do the responsive settings for the other headings again so from here go to heading On's typography and by clicking on this icon switch to mobile portrait then set set it size to 50 pixels now go back and for H2 let's set the size to 38 pixels and for the last one for H3 let's set the typography size from here so let's set it to 30 pixels and we're all done now let's save our work so after all that we're done with the typography as well now close the responsive mode and let's go back and this is the last global settings that we need to do of are buttons so click on this buttons then from here go to its typography set the family to You Been 2 size to 16 pixels weight to 500 and then line height to 1 em now go back and from under the normal tab let's change the text color to Global accent color this one and from under background type so choose this Color Picker and from here let's drag this one this color wheel and take it to the most left so that it will be completely transparent now go back then set the Border type to solid and Border width to one pixels all of them now set the Border color to Global accent color and Border radius to 100 pixels all of them now go under hover tab here change the text color to Global white color then background type to gradient and color to Global secondary color color then choose the second color and from here choose Global accent color then from angle set its value to 90° and there you go so this is how our buttons are looking now now let's update our work from here and we're all done with the global settings so let's go outside let's click on this cross and now that we have done our global settings making our website will be super fast and super easy because we won't have to do these settings over and over again for each and every other element Bravo everyone okay so now to make our Banner look cooler let's add some other background images or objects in the background so first of all let's choose our parent Banner container this one let's go inside it now here inside the parent Banner container let's take an image so just drag this image over here oops it has gone into The Heading and text container but we want it inside our parent Banner container before the hero Banner container so let's drag it over and put it in the top here there it is now let's select our image first of all let's close this popup and then select our image then let's select this image shape 36 click on select now go to its style tab then set its width so change the percentage scale to pixel then put a value of 100 pixels now under the normal tab put the opacity value which is going to be 0.5 then go to its Advanced Tab and from under here make the position absolute then keep the horizontal orientation to left and offset value to 0 pixel also keep the vertical orientation as is but change its offset to 200 pixels now from here go to its responsive and hide it on tablet portrait and mobile portrait as well then let's take another image widget under this image so go to widgets then drag this image over here okay let's drag it over here again there you go now select an image let's select this object shape 35 click on select go to its style tab then put the width value to 28 pixels and opacity to 0.3 now from its Advanced tab make the position absolute again then only set the vertical orientation off set value to 130 pixels then go to responsive mode I mean this responsive dropdown and also hide this background object on tablet portrait and mobile portrait now go inside of herob banner here let's minimize this one and then go inside of its images container this one and now before these two images let's take other background images so first of all go to widgets then drag this image widget over here ah it has gotten outside but let's drag it over here there you go now this image section might look a bit confusing because you know we have put down our hero images which had various vertical offset values and horizontal offset values due to which putting other image widgets can be a bit difficult but just follow along and do what I'm doing and surely you'll have no problem at all so now for this image let's choose an image then again let's choose this object which is shape 36 now from its style tab set the width value to 100 pixels so 1 0 and opacity to to 0.5 now go to its Advanced tab set the position to Absolute then set the horizontal orientation offset value to 100 pixels and vertical orientation offset value to min-40 now let's take another image widget so go to the image widget and here we have this one let's drag it over here let's put it under this one oops it went over the first one but we want it after it it okay so there it is now choose an image let's choose this one hero shape 3 click on select now go to its style Tab and set the width value to 250 pixels then opacity to 0.25 now go to its advaned Tab and change the position to Absolute then set its horizontal orientation offset value to 30 pixels and vertical orientation offset value to Min - 180 pixels now let's set our next image so go to widgets and just like before drag this image widget over here now drag it under this one make it the third image then choose its image now let's choose this image which is hero shape 5 so click on select now we don't have to change its width so directly go to Advan tab then set the position to to Absolute and let's set its horizontal orientation to right okay I think you guys can see it properly so if we move this Navigator I think it's most probably Behind These two images so no need to worry our image has not gotten lost we just need to put its vertical orientation offset value so that it will go to its oriented Direction which is top right oh and also let's put its horizontal orientation value which is - 85 pixel you see there it is okay now let's set the vertical orientation offset which is going to be - 140 pixels and there you go okay so let's drag our Navigator back here and now let's set our last image so go to the widgets then drag this image over here and there you go it's already here under the first three images that we set just now now let's choose the image from here and here let's select this image which is hero shape six so click on select then go to its Advanced tab here make the position absolute then set the horizontal orientation offset value to minus 10 pixels and actually make the vertical orientation for this one bottom and just keep the upset value to zero so you see now we have this same kind of image one is at the top right of these hero images and one is at the bottom left so it's giving this a nice background effect and as you can see now these background images or objects are making our hero Banner look so much more interesting but let's not just settle with this let's make it even more interesting by adding animation to these background images Yes you heard it right we're going to do it but it's not going to be as hard as it sounds because since we have already put down the HTML quote snippet in our HTML containers HTML widget so now we can simply just put the animation class name in these CSS class classes of these images and they will instantly get the animation effect of our CSS code so now first let's go to chimpa digital.com and let's copy the name which is animation pulse so this CSS class name let's copy it select it and then click on copy now go back to elementer then let's put the pulse animation to this image so after clicking on it go here and then right click over it and click on paste and and there it is see how it's pulsing Also let's add this pulse animation to this image which is inside our images container of the hero Banner section so in it CSS classes field let's right click over it and click on paste then select this third image of this images container and in it CSS classes field let's right click over it and click on paste there you go so now we have these three images pulsing but let's add some wobble animations as well okay so go back to gyfa digital.com and from under here let's copy this one now this CSS class name so right click over it and click on copy now go to home and let's put the wobble animation to this image this second image inside of parent Banner container so in it CSS classes name field let's right click over it and click on paste there you go now not not only our hero Banner section is looking great and appealing but it's also looking Dynamic due to these moving animations of these pictures so the desktop view is currently looking great let's save our work by clicking on update but I think we need to do just a little bit of settings for the responsive modes as well for these background images or background objects so let's go to the responsive mode and click on Tab actually we don't need to do anything for for the tab portrait I think let's go to the mobile view I mean mobile portrait let's scroll down okay so here select this image one inside of this images container I mean this first image and from its tile tab let's change its width value to 60 pixels now go to its Advanced Tab and set it horizontal orientation offset value to 29% I mean pixel now select the second image and for this one again go to its style tab then set its width value to 165 pixels now go to its Advanced Tab and set its horizontal orientation offset value to minus 20 pixels and then vertical orientation offset value to Min -5 pixels then select this third image and from it style tab change its WID to I mean first change its scale to pixel scale then set the value to 150 pixels okay so we're all done with the responsive view as well let's update our work and close the responsive mode as well so now this is how it's looking and I think it's perfect so let's minimize our parent Banner container and let's create our next section so under this float icon container let's add another container so let's just go to the widgets or you know what under here you can just click on this plus icon and add a new container between this float icon container and this HTML container so let's click here then click on this plus icon choose the flexbox layout and let's select a new structure which is going to be our two column structure so select this one and let's name this container our about us container then from its layout let's just change the Gap values so make all the Gap values to 50 pixels now go to the advanced tab here unlink the padding then put the top padding to 60 pixels right to 10 bottom to 200 and left to 10 so we're done with our aboutus container now you guys may remember that we just took a two column structure so inside of our about us container if we open it you see we get these two containers which are both column directed here take a look you see and that is why this structure is called two column structure so now let's select the first container and let's name it as our left portion because it is going to be the left portion of our aboutus container then do its settings so from its layout make the cont with to boxed so we're done with this container now click on its plus icon and then drag an image widget here now let's choose our image from here now here let's scroll down and select this image this about one ticker shape so click on select then go to its Advanced tab set the position to Absolute horizontal orientation to right and leave the rest as is now go to widgets again then drag another image widget under here oops it went over it let's drag it under here there you go now select an image let's see which one we can choose from here yeah let's choose this one H1 about image three so let's click on select now go to its style tab change its width scale to pixel then put the value of 150 pixels then set the Border Type To None and change the Border radius scale to percentage scale then set all the Border radius to 50% okay now go to Advan tab here set all the padding values to 10 pixels then align s to start and put its Z index value to two all right now let's scroll down and here select this background drop down choose background type to Classic and select the global white color now go to this border drop down and here under normal set the Border type to solid then border WID to one pixel all of them border color to Global secondary color and Border radius let's change the scale to percentage scale and set the Border radius value 50% all of them there you go now under these two images let's take a new container so go to wigets then let's drag this container under here okay now from its layout make its content WID to full width give it a width value of 120 pixels minimum height to 120 pixels as well now go to it style tab here set the background type to Classic then let's give it a custom color code of E1 E1 ff99 then go back and choose an image from here so let's scroll down and choose this image background Circle image so click on select now make its position to Center Center then repeat to no repeat now scroll down and from under border set the Border type to solid then border WID to one pixels all of them and Border color to Global accent color also give it a border radius value of 50% so let's change the pixel scale to percentage scale then write 50 all right now go to advance tab unlink the margin values and only give it a top margin of Min -200 pixels then unlink the padding values and make all of them to zero Now set its align self to end then give it a z index value of five now we're also going to put some animation effects on this widget so let's go back to gyat digital.com and from here you'll find this circle animation CSS so copy this whole code snippet from here till here right click over over it click on copy now go back to home then go to this HTML containers HTML and here under this one let's make some space by pressing enter now right click over it and click on paste so now to activate the effect let's go back to gyat digital.com then scroll down and copy this circle animation class name then go back here select this container and in this CSS classes field put the CSS class name so click on paste there you go now let's also put another CSS effect here so again go back to gyfa dil.com then scroll down and select this code snippet background glass effect CSS so copy it from here till here right click over it click on copy now go back here and then go go to HTML and here click here I mean here then make some space then right click here and click on paste now go back here and just copy this class name then again here and go inside of this container now let's put this effect name here so let's just press on space and then right click over it and click on paste so now it has this glass effect on it so now moving forward let's add another widget so let's go to widgets here search for text path widget so now drag this one inside of this one this container I mean then write a dummy text over here then set the path type to circle now go to its style tab here set it size to 80 pixels then rotate to 13° then go inside of typography here set the font family to yuntu size to 50 then weight to 700 and line height to 1.6 em now go back and from under normal let's set its color to Global accent color now let's go to its Advanced tab here here change the position to Absolute then give it a horizontal orientation offset value of 20 pixels and vertical orientation offset value of 20 pixels as well there you go now scroll down and from inside of this border set the Border Type To None then border radius to all 50% and we're done here okay so now since we're all done with our text path container so let's let's minimize this container and under this let's take another image widget so from widgets drag this image widget under here oops it went inside our Tex path container so let's drag it over here first then minimize this one and let's take this image after the container now let's choose an image from here let's select this image this hero about image one so let's click on select now go to style tab here set the width to 270 pixels then set the Border Type To None border radius scale to percentage then all the Border radius value to 50% now go to its Advanced Tab and from here set all the padding value to 15 pixels and make the position absolute set its horizontal orientation to right and give it an offset value of 40 then the vertical orientation offset value to 50 pixels then give it a z index value of two now scroll down and go inside border here make the Border type solid then border width to one pixel all of them border color to Global secondary color and Border radius to 50% so make this percentage scale and all the Border radius to 50% all right now let's take our fourth image so go to widgets then drag this image widget under here wherever you want now let's drag it under this third image that we just did the settings for minimize this one and let's choose an image from here then from here choose this image image two and click on select now go to its style tab then make its width to 190 pixels border Type To None and Border radius to 50% all of them now go to the Advance Tab and here set all the padding to 10 pixels make the position absolute then horizontal orientation offset to- 35 pixels and vertical orientation offset value to 300 and 20 pixels give it a zindex value of two then scroll down and from here select background dropdown set the background type to Classic then choose the global color white now go to border and here choose the Border type to solid then border with to one pixels all of them border color to Global accent and Border radius to 50% all of them then let's take our fifth image so go to widgets drag this image over here anywhere let's drag it under here make it our fifth image actually I just noticed something you can see that these images are not inside of our left portion container it's outside of it so let's take it inside first then drag it under this container let's do the same for these images as well so let's drag it over here then under this container actually let's drag it under here then for this image let's int take it inside then let's drag it under here you see in these cases this Navigator can be a very helpful tool because since we have put down so many complicated horizontal and vertical offset values it can be a bit Hur sometimes to find the actual positioning of your images right so now that we're back on track let's choose the fifth image so now let's choose this one click on select then go to its style tab set its width to 120 pixels border type to none border radius to 50% all of them then from Advanced tab set all the padding to 5% so let's change the scale first and then write five here now set the line S to end make the position absolute then horizontal orientation to right and it's offset to 50 pixels then vertical orientation offset value to 490 pixels if we scroll down there it is now give it a z index value of two and scroll down and go to its background here under normal set the background type to Classic then choose the global white color then go to the border and make the Border type solid Now set all the Border width to one pixel and Border color to Global secondary color then change the Border radius scale to person percentage scale and give it a value of 50% all of them now we're done here and let's take our last image widget so let's drag this image widget over here it went up let's drag it under here there you go actually it went outside of our left and right container so let's drag it inside here now it's in the right place we almost made the same mistake again but that's totally fine because mistakes are the proof that we're improving right so now let's select our sixth image so scroll down and select this image here about one shape one image so click on select then from its style tab set its height to 200 pixels and object fit to contain then from under normal give it an opacity of 0.7 now go to its Advanced tab and make the position absolute then horizontal offset value to minus 20 and vertical orientation offset value to 100 pixels now let's take another background object from here so let's drag this image widget under here then choose an image so let's scroll down and select this image about one shape two click on select now go to its style tab and change the max width scale to pixel scale then give it a value of 215 pixels now from under normal tab make the opacity to 0.7 then go to the advanced Tab and here as usual make the position absolute then horizontal offset value to 100 pixels and vertical orientation offset value to 350 pixels now let's take our fin background object so let's drag this image wiet under here then choose an image then scroll down and let us choose this image yeah about one shape three so click on select now go to its style tab then set the height to 140 pixels and object fit to contain and set its opacity to 0.7 now go to the Advance Tab and make the position absolute then set the horizontal orientation to right and give the vertical orientation offet value a value of 300 pixels so now we're finally all done with the left portion of our container but to make it look even more cooler let's add our pulse and wobble animations again and for that we won't have to do much we're just simply going to put the CSS classes names in these fields so first of all let's go back to gyfa digital.com and here if we scroll up you'll find this animation pulse CSS class so let's copy this animation pulse now go back to Elementor then let's choose this second image and from its Advanced tab in this field let's paste our class name then select this third image and again go to advance tab scroll down and here put the class name again so you guys already get the gist I'm going to do the same for this images as well now choose this fourth image and put the class name here two then the fifth image let's do the same thing here there you go now let's set this animation to a background object as well so let's select this seventh image and in this field let's paste the name so now this is pulsing as well let's do the same for the eighth image as well and there you go now let's set an wobble animation as well so that it doesn't feel left out so from jyfa digital.com let's scroll down and let's copy this CSS class name go back to Elementor and let's choose the sixth image which is this background image so in here let's paste the code name there you go so now here we have contradicting animations these ones are pulsing and this one is wobbling and overall it's looking great so now we're finally all done with the left portion of our aboutus container so let's close it and then let's name this container the right portion of our aboutus container now go to its layout and make the continu with to box now inside of our right container or the right portion of our about us container we're going to put a heading so first of all go to widgets then search for heading and let's drag this jkit heading over here then let's delete the before Focus title then set our Focus title which is going to be about us then set the HTML tag to H3 Focus title display to inline then go to separator and let's turn off because we don't want to show the separator here now go to the style tab here go inside the title drop down then unlink the margin values and set all the values to zero now go inside of focus title then set the color style to gradient and background type to gradient as well now select the first color so we're going to select the global secondary color here and for the second color let's select Global accent color then set the angle to 90° and typography to Global secondary then go to the advanced Tab and Link all the margin values and put the bottom margin to minus 20 then under this jacket heading let's take a heading widget so go to widgets and then drag this heading widget under here and as usual let's put a dummy heading here then go to its advaned tab unlink the margin values and only give it a bottom margin of 10 pixels now under this heading we're just going to put some text editors here so go to widgets and drag this text editor widget under here now go to its Advanced tab unlink its margin and only set the bottom margin to minus 20 pixels now simply just add some more text editors here so we can simply just go hover over there and right click over it then click on duplicate now duplicate again and there you go but for the last one let's give it some margin so let's select this one and go to its Advanced tab then unlink the margin values and this time only set the bottom margin to 20 pixels there you go now let's take a button underneath this text editor so just go to widgets then drag this button widget under here now let's add a button under this text editor so go to widgets and drag drag this button widget under here uh-oh as you can see that our button is getting the hover settings right but in the normal State it's getting its color from the default Elementor color that is because there's a settings that we haven't done inside of Elementor so for that first of all let's exit from here click on live now go to Wordpress dashboard here go inside of Elementor and then click on settings here you see these two options disable default colors disable default fonts so you have to check these two boxes so that our button doesn't get default color instead of the color that we have given it so let's check these ones and then click on Save changes now let's go back to pages and then go to edit with Elementor of our home so now if we scroll down and then take a button widget under here then you see it's not getting the default color anymore in its normal state but for all the buttons in our website we want to add a gradient border because currently the border is looking boring because it only has one color whereas our hover effect has gradient colors so for that let's go back to jyfa digital.com and from here let's copy this button gradient border CSS so let's copy it from here until here right click over it click on C copy then go back to Elementor and inside of HTML container let's click on this HTML now if we go in the end here then tap on enter sometimes to make some space and right click over here then click on paste now you see our button is getting this gradient color effect we still can't see it properly because it has a default border as well so first of all let's click on this button here go to style Tab and set the Border Type To None there you go now it's looking so classy Also let's add a text here so go to content then in this text field let's write read more there you go so now we're all done with our right portion of the aboutus container and the whole aboutus container is complete as well so let's minimize this and update our work until now Also let's do the responsive setting for our About Us section so let's click on this responsive mode then go to the tab version now choose the about us container this one then make its direction to column now go to its Advan tab unlink the padding values give top padding of 60 pixels right to 10 bottom to 250 and left to 10 now choose the left portion container then set the minimum height to 400 pixels now inside of this left portion container choose the second image and unlink its margin then give it a LIF padding of 50 pixels now choose the third image this one let's scroll down a bit so this one and set its horizontal orientation offset value to 25% then choose the fourth image this one go to its advaned Tab and and make its horizontal orientation offset value to 0 pixels then choose the fifth image this one go to its Advanced tab then make its horizontal orientation offset value to 110 pixels and vertical orientation offset value to 453 pixels now let's close this lift portion container and select the right portion container here go to advance tab then make its order to start there you go now let's go ahead and do our mobile settings here again choose the aboutus container first then from its Advanced tab unlink the paddings and set the top padding to 45 pixels right to 10 bottom to 300 and left to 10 see now the padding is perfect then let's choose the left portion container and from its Advanced tab unlean the margin then only set the top margin to 35 pixels now inside of this left portion container choose this first image so this one and from its style tab change its height to 140 pixels now choose the second image then from its style tab set its width to 100 pixels now go to its advaned Tab and everything is looking great here so keep the margin all zero and padding to all 10 now then choose this container which holds our text path widget so inside of it change the width to to 120 pixels now go to its Advanced tab actually everything is looking great here so keep the margin as it is just keep the top margin to 168 pixels and the rest of the margin and padding to 0er pixels then select this text path widget and go to its style tab actually everything is looking great here as well so we don't have to do anything else here now let's choose our third image then go to its style Tab and here give it a width value of 200 pixels then go to it Advanced Tab and make its horizontal offset value to 10% then vertical orientation offset value to35 pixels okay now select this fourth image so this one and here keep the horizontal obset value to - 35 pixels and let's just change the vertical orientation offset value which we need to change to 380 pixels now choose the fifth image so this one go to it style tab Tab and set its width to 80 pixels then go to its Advanced Tab and set its horizontal orientation offset value to 20 pixels and vertical offset to 530 pixels okay so now we are all done with the mobile responsiveness as well and this is how it's looking let's check our tab View and the tab view is looking great as well so let's close our responsive mode and save our work by clicking on up upd date by the way don't worry about this text path widget because I know it's currently looking a bit weird but this is only looking that way in the back end of our website so if we preview it by closing this panel you see it's looking completely perfect in the actual preview so let's go out so now let's move on to our next section and for that just click on this plus icon then click on this plus icon here choose the flexbox layout and select this row directed structure now let's rename this container as our counters container or Also let's close this aboutus container since we're all done with it okay now back to our counters container now from its layout just change the justify content to space between then go to its style tab select the classic background type and let's insert an image now choose this image the funf fact background so click on select then set the position to Center Center repeat to no repeat and display size to cover now go to its advaned tab unlink the padding values set the top padding to 65 pixels right to 10 bottom to 55 and left to 10 now inside of this counters container let's take a widget which is going to be our counter widget so in the search bar search for counter let's drag this one over here then let's put a number suffix so put uh plus here and this title this counter projects completed there you go now go to the style tab then go inside of number and change the text color to completely transparent so drag it to the most left here then go outside and click on typography set the size to 80 pixels now go out then choose this text stroke and here write one pixel then give it a stroke color so write a custom code of 6 FS which is f f f f FF then AG zero there you go now go back and go inside of title here give the text color as Global white color then choose typography and give it a size of 22 pixels okay so now we're all done with this counter let's go back then go to widgets and drag this spacer widget over here now give it a space of one pixel then go to the advanced Tab and after scrolling down go to border here under normal tab set the Border type to solid then I link the Border width and only give it a right width of 1 pixel now let's give it a custom border color so choose this Color Picker and here write A1 a cb3 5 C okay now go back now if we click somewhere else you see this is how our spacer is looking it is very subtle and a very thin spacer so let's close this aboutus container again and inside here let's duplicate this counter to fill up our whole counters container okay so first of all let's just right click over it then click on duplicate then do it again and for another time okay now let's drag this spacer over here and also let's duplicate it two times as well now let's drag these spacers after these ones so let's first of all drag this one over here and then this one after here sorry let's drag it over here okay so now this is how our counters container is looking now let's do its responsive setting real quick so go to responsive mode and let's go to tab portrait here choose the counters container and then go to its layout then set the justify content to Center and gaps to to all of them zero then turn on the wrap now choose this first counter then from it style tab go to number here go inside of typography then change its size to 70 pixels now go to its Advanced Tab and Link the margin values and make all of them zero now go to width and change it to custom then give it a custom width of percentage scale the value of 45% now let's choose this spacer then from its advant tab change its width to custom width then give it a custom width of 1 pixel now I know you guys might be thinking that this is looking weird and not cool at all but just trust the process and let me show you a shortcut again so now we have done the settings of this counter and the spacer as well right so now simply let's just copy these settings and then paste them to these counters and spacers so first of all let's do the counter right click over here click on copy then paste the style to these counters so first of all let's do the second one here click on paste style then over the third one right click over it and click on paste Style again and lastly for the fourth one now in the tab view we don't really need a second spacer like this one we only need these two so let's select this second spacer now go to its Advanced Tab and then scroll down then go inside of this responsive drop down here just hide it on on the tablet portrait so let's just hide it from here and there you go now it's hidden so if we just close this panel and look at our preview see there's nothing there now let's bring out our panel again so we're all done with the tablet settings as well now let's go to the mobile portrait then choose this counters container now here from its layout set all the gaps to 20 pixels then go to its Advanced tab unlink its padding let me scroll down a bit so you can see more clearly so now let's set the top padding to 55 right to 20 bottom to 55 and left to 20 now go and choose this first counter then go to its style tab here go inside of number drop down then go and click on this pencil icon of typography Now set the size to 60 pixels then go to its Advanced Tab and set the custom weight to 100% Also let's do some settings with its title as well so go back to style Tab and here go inside of title then from typography set its size to 20 pixels okay now just like before copy these settings from this one and then paste it on these ones so let's copy it from here right click over it click on copy then paste it on this counter I mean paste style then let's do the the same for third one and then the fourth one there you go now select this spacer and then from its Advanced tab change its custom width to 100% now scroll down and go to its border then I'll link the Border values and only set the bottom border width to 1 pixel now let's copy it from here and then paste it settings to these spacers so let's right click over this SPAC and then click on paste style then do the same for this last one and there you go so now our mobile portrait of the counters container is all done as well so let's close the responsive mode now here I'm just going to put some other dummy texts and numbers in these fields so that they look different so now I'm back after putting some dummy text now let's save our work now since we're all done with our counters container let's proceed with our next container which is going to be our services container or our services section so let's close this one and here let's click on this plus icon then choose this one flexbox layout and this rad directed structure now let's rename this as our services container then from its layout go to its additional options drop down then set the Overflow to Hidden now go to its Advanced tab here unlink the the padding values and set the top padding to 100 pixels right to 10 bottom to 100 and left to 10 as well now inside of it we're going to take an image widget so click on this plus icon then drag this image widget over here now choose an image from here now go down and let's choose this image hero shape five so click on select now go to its Advanced tab then make its position to Absolute Now set the horizontal offset value to 100 pixels and vertical orientation offset value to 150 pixels now take another image widget inside of it so go to widgets then drag this image over here now choose an image from here and then select this image H1 service background image one so let's take this now go to its Advanced tab set the position to Absolute then horizontal orientation to right and offset value to 10% then vertical orientation offset value to 35 pixels now take another image widget under it so let's grab this image widget and let's drop it here now choose an image from here and choose the same image this one click on select go to its Advanced tab then set the position to absolute horizontal orientation offset value to 80 pixels make the vertical orientation direction to bottom and it's offset value to 140 pixels now inside of this let's take another container you can just right click over this service container and click on add new container there it is and let's rename it as our inner Services container now from its layout change its content we to boxed then go to it Advance Tab and set it Z index value to one now inside of this container let's add a jacket heading so search for heading here then drag this jacket heading over here or you could actually do another thing to save your time let's delete this jacket heading now scroll up then copy this about us heading from here right click over this pencil icon click on copy and now go down then right click over this container this inner Services container and then click on paste so you already have a heading here now simply let's just change the focus title of this jacket heading so I'm writing our services now let's add a heading under this jacket heading and let's follow the same shortcut so just scroll up and then copy this heading right click over here click on copy go down and then paste it right under here let's also put a dummy Hing here okay now let's actually align these writings to the middle so you guys already know what to do first of all let's go to style and let's set the alignment to Center and do the same for this one okay now it's looking pretty nice now under these headings let's put a text editor so go to widgets then drag this text editor under here let's also put a dummy text over here then go to its style tab as well and set its alignment to center now go to the advanced tab unlink the margin values and only set the bottom margin to 40 pixels then unlink the padding and make the pixel scale to percentage scale now only put the right padding to 15% and left padding to 15% now after that let's add another container so right click over this inner service container and then click on add new container it went outside let's drag it under this text editor here there you go and let's rename this as our single service container now go to its layout and set the Contin to box direction to row and all the gaps to 30 pixels then go to its Advanced tab unlink the padding values and only set the bottom padding to 40 pixels now inside of the single Services container let's add another container and let's rename this as our single service one container in short so I've written SS one container in short which is single service one container because we're going to put multiple Services inside of the single Services container Also let's drag this ss1 container inside of here so let's drag it here there you go now the ss1 container is inside of our single Services container now go to its Advanced tab here unlink all the padding values then inside of this ss1 container let's click on this plus icon and here let's take an icon widget so scroll down and then drag this icon widget over here then select an icon from here search for desktop solid choose this one then go to its style tab now under normal tab change its primary color to Global white color then give it a size of 40 pixels now go to its Advanced Tab and L the padding values set the top padding to 25 pixels and bottom padding to 25 pixels as well then give it a z index value of two now scroll down and guys don't be worried you might be thinking that where did the icon go well just trust the process because when we do all the settings the icon will be visible again so let's go to this background dropdown here set the background type to Classic then choose the global color of primary and there there it is see you just have to be patient with these things because in the end everything works out now let's scroll down and here click on this mask drop down then turn on the mask now from shape choose custom then let's select an image for our mask so let's select this one service icon shape click on select there you go isn't it looking amazing now let's go to widgets then drag another container under here now go to its style tab then set the background type to Classic and give it a custom color code of f8 F7 FF now go to this border drop down here under normal change the Border type to solid then border with two one pixels all of them and Border color to f8 F7 FF again now go back and set its border radius so here write 10 pixels for all of them now go to hover ch change the Border type to solid border width to one pixel all of them then for Border color let's choose Global accent color now click on this box Shadow pencil icon here set the horizontal value to 30 vertical value to 15 blur to 30 and we're done so now when you hover over it it will have this effect okay but here as you can see that the Border color is looking too darkish so let's make it a bit more transparent let's choose this color and here let's drag this color wheel to so make it almost transparent and drag it till you get this 05 number now go out now if we hover over it let's choose something else and now if we hover over it see this is how it's looking now let's click back on this container here which we were working with now go to its Advanced tab here unlink all the margin values then only give it a top margin of Min -71 pixels then for padding write 20 here now unlink the padding values then only change the top padding to 60 pixels okay so now we're done with this container as well now inside of this container let's just take a few more widgets so click on this plus icon now from here drag this Hing widget over here then change the HTML tag to H4 and also put a dummy heading here then go to the style Tab and align it to the center now under this heading let's take another text editor widget so go to widgets then drag this text editor under here then also put a dumy text over here and from its style tab align it to Center so now we're all done here but it's still not looking good enough so to make it more interesting we're going to add some custom CSS codes here now simply just go back to jyfa digital.com then you'll find find the service icon box CSS so let's copy this whole CSS Al together although there are two CSS is here so now right click over it click on copy then go back to home and inside of this HTML let's scroll down click here make some space by clicking enter now right click over it and click on paste now to activate this effect let's go back to gyfa digital.com and here first of all let's copy this service box CSS class name so let's copy this one right click over it click on copy then go back now go and choose this ss1 container which was our single service one container here currently you can see that there are no effects here right but let's put the class name that we just copied and paste it here click on paste now go back to gyfa digital.com and from here copy this service icon class name right click over it click on copy then go back to home and click on this icon now here in it CSS classes field paste the class name so right click over it and click on paste now if we hover over it you see this is the effect that we worked for now to finally make it a last Simple Touch let's select this container then go to its hover color and from here let's choose our Global white color so now if we finally hover over it this is how it looks cool right now this is only one service container of our services section right and we got to make other services as well for that no need to worry just simply minimize this single service one container now right click over it and click on duplicate then do the same again click on duplicate and just like this you can add multiple other services to your service section so now I'll be back after doing these other two services I mean I'm going to put some other dummy icons and text so that all of them would look different and cool all right so I'm back after putting some dummy icons and texts now let's do the responsive setting of our services section so first let's go to this responsive mode then go to the tab view now here let's go up and let's first of all minimize everything now choose the services container then from its Advan tab unlink the padding values and set the top and bottom padding to 80 then right and left padding to 10 now go inside of the services container here select this first image this one go to its style Tab and set its width to 150 pixels now go to its Advanced tab then set its horizontal orientation offset value to 20 pixels and vertical offset value to 100 pixels now choose the second image this one then go to it sty tab again and set its weight to 200 pixels now go to the advanced tab then set the horizontal offset value to 20 pixels so we're pretty much done here now let's see okay now let's go to the single Services container here from its layout set the justify content settings to Center then turn on wrap so that they will show one after another now now choose this ss1 container then go to its layout and set its width to 47% now let's copy these settings to the other ones oh and by the way I forgot to rename these ones so let's rename our second and third containers as our SS2 and ss3 container okay now just from ss1 container right click over it then click on copy and now let's just paste the settings or style that we did on this one to these ones so right click over the SS2 container then click on paste style now do the same for this third container there you go so we're pretty much done with our tab view now let's go to the mobile portrait here again go to the start and select the services container then go to its Advanced Tab and from here unlink its padding values then set the top and bottom padding to 50 pixels and right and left padding to 10 pixels now let's select our first image this one then go to its style Tab and set its width to 80 pixels then go to its Advance Tab and set the horizontal offset to minus 20 pixels then vertical offset to 143 pixels now select the second image then go to its style Tab and change change its width to 150 pixels then go to its Advanced Tab and set its horizontal orientation offset to minus 50 pixels then vertical offset to zero okay now select this third image so you see we can't really see this image at all here so first let's go to a style tab then set its weight to 150 pixels now go to the advaned tab then set the the horizontal offset to 0 pixels and vertical orientation to 100 pixels so now we're done with it now scroll up and select this heading this one then go to its advaned Tab and unlink the margin values and make them all zero then choose this text editor and from its padding make all the values Zero by unlinking the values okay so now finally our mobile view is looking perfect so now let's close this responsive mode and let's update our work by the way if you guys are wondering how our website is looking in the front end you can always just go to the front end and here you can see what we have done until now so this is our beautiful herob banner section then if we scroll down we've done our about section then the counter section and lastly our services section but now we're missing something right how but we add some reviews and testimonials so let's go back to home here let's scroll down then minimize the services container and between the services container and the HTML container let's add another container or you could just go to widgets and then drag a container from here there you go now let's rename this container as our reviews container then go to its additional options and set the Overflow to Hidden now go to its style tab then under normal set the background type to Classic then give it a custom color code so click here then here write f8 F7 FF now click here and let's choose an image from here here let's select this image this BG 41 or background 41 image click on select then set the position to Center Center repeat to no repeat and display size to cover now go to its Advanced tab then unlink the padding values and set the top padding to 100 and bottom padding to 200 then both right and left padding to 10 now inside of this container let's take an image widget so drag this image widget over here and choose an image from here let's select this image H1 service background so click on select now go to its Advanced tab then set the position to Absolute horizontal orientation to right and offset value to 60 pixels and then vertical orientation offset value to 50 pixels now from here take another image widget so from here let's drag it down here and let's choose another image here let's choose this image H1 testimonial background so click on select now go to its Advanced tab then set the position to Absolute and horizontal orientation offset to 50 pixels then vertical orientation direction to bottom and it's offset value to 50 pixels as well now here let's take another container so go to widgets and then drag this container under this one there you go and let's rename this as our heading and text container all right now from its layout set it direction to roll then insert inside of it take another container so drag this container over here then let's rename this as our heading container now we don't have to do any settings for this one now inside here we're just going to add some headings so for that you can simply just go to this about us container then from here just copy this about us heading this one so right click over it and click on copy now go down here then right click over here and click on paste now in this Focus title field let's just write testimonials then just go to its Advanced tab unlink its margin then only set its bottom margin to minus 28 pixels now under here let's add another heading under this testimonials heading so again just go to about us container then from here simply just copy this heading here so right click over here click on copy go down by clicking on this heading container and then under this one right click over here and click on paste there you go now let's put some dummy titles in here okay so now we're done with the heading but let's add some descriptions as well for that let's just minimize the setting container and let's add another container so right click over it and click on add new container as for this container let's rename it as our description container now from its layout change the content width to boxed then inside of this container click on this plus icon and drag a text editor widget right here here I'm also going to put some dummy text and you can put whatever else you would like to put in your testimonial section now go to its style Tab and set its alignment to left then go to the advanced tab unlink the padding values and only set the top padding to 65 pixels okay so now we're all done with this heading and text container let's minimize this one now let's add another container under this one so let's right click over it and click on add new container now let's rename this container as our testimonial container then from its layout change the continent withd to boxed and set the direction to row now go to widgets and search search for testimonial then drag this testimonial widget right here okay so now we have our testimonial widget and we're going to put our testimonials here so first of all let's choose its style so from here choose this image style 5 now go to the testimonial dropdown then first let's actually just close these testimonials so click here and here so first we're going to create a single test testimonial and then we're going to copy it and just like we have done before for our services we're going to just create one section and then duplicate that one okay so now let's go back to testimonials and here in this one let's click over it now here let's put a client name then set the client's designation here and in this field write a dummy testimonial review all right now scroll down and here set a client aor so click on this choose image and from here let's set this one so click on select there you go so now we're all done here now let's click here to minimize it then go inside of settings here set the number of slides to show to three now turn this Auto playay off set the show dots to yes and let's just keep the rest as is now let's go back to testimonial in this dropdown and here let's just duplicate this one that we have created right here so just click on this icon that you see here to duplicate it then do it again and another time now I'll be back after putting some other dummy text images and client names and their designations okay so I'm back after putting some other dummy testimonials now let's go to the style tab here set the column Gap to five pixels then for padding write 301 then unlink the values and only set the top padding to 50 pixels and for Border radius set all the Border radius to 30 pixels then click on this box Shadow select a color and from here let's make it totally transparent okay so now our testimonial boxes won't have any Shadows now go back then go to this description drop- down here unlink the margin Valu and set the top margin to 15 and bottom margin to 30 pixels then go to this quote icon drop down and here set the icon size to 32 and then scroll down and go to this client drop-down here set this client name color to Global accent color then go inside of typography and set the size to 22 pixels now go outside then set the margin bottom to three now scroll down and from under client image change the Border type to solid then border WID to one pixel all of them and Border color to Global secondary color this one now scroll down and go inside of this dot drop down here set the dot top space to minus 70 width to 40 border radius to 15 pixels all of them then scroll down and here set the back background type to Classic then give it a custom color code which is 5f 39 FF 80 now scroll down and here under active set the background type to gradient then set this color as Global secondary color this one and then for the second color let's choose Global accent color which is this one now scroll down and here set the angle to 90° then wait to 48 and again scroll down and set the scale to one okay so now we're all done with our review section as well so let's update our work and let's see if we need to do any responsive settings so click on this responsive mode then click on this tab portrait okay so we need to do some settings here so first of all let's minimize this and choose this reviews container then go to its Advanced Tab and unlink its padding values set the top padding to 80 right to 10 bottom to 150 then left to 10 now go inside of this review container and select this first image then go to its style Tab and set its width to 200 pixels then go to its Advanced Tab and set the horizontal orientation offset value to 20 pixels now now choose this heading and text container then from its layout set the direction to column then go inside of it and choose this heading container now go to its Advanced Tab and make all the padding values to Zero by unlinking them then go inside of this heading container and select this heading now go to its Advanced Tab and set all the margin values to Zero by unlinking them now go and select this description container go to its advaned Tab and set all the padding to Zero by unlinking them then choose this text editor and again from its Advanced tab let's unlink the values and make all the padding to zero we're doing this because tablet usually has less screen space than PC so we are decreasing the padding to zero so that everything is more suitable to the tab view okay so our tab view looks perfect now let's go to the mobile portrait and here select this reviews container again then go to its advaned Tab and unlink the padding values then set the top padding to 50 right to 10 bottom to 120 and left to 10 then choose this first image go to it style Tab and set its width to 150 pixels now go to its Advanced tab then set the horizontal offset value to minus 50 and vertical offset value to 0 pixels then choose this second image go to it style Tab and set its width to 150 pixels then go to the advanced Tab and set the horizontal offset to 0 pixels and vertical offset to 100 pixels now select this text editor inside of description container and from its Advanced tab unlink the margin values then only set the bottom margin to Min - 10 now select this testimonial widget go to its style tab set the column Gap to 0er pixels let's scroll down to see what's happening here unlink the padding values set the top padding to 30 right to 20 bottom to 30 and left to 20 then set all the Border radius to 20 pixels now go to the dot drop- down and here say the dot top space to minus 60 okay so now our mobile view is looking perfect as well let's swipe these ones see everything's looking perfect so now let's exit our responsive mode and let's save our work up until now now let's just create our blog post section so under here let's take another container then click on this plus icon choose this flexbox layout then choose this rad directed structure now let's rename this container as our block section container then from its layout go to its additional options and set the Overflow to Hidden now go to its Advanced tab then unlink the padding values set the top padding to 100 right to 10 bottom to 70 and left to 10 pixels now inside of our block section container let's take another container so from here drag this container here and let's name this container as our inner blog container now inside of this container let's add a heading and you guys already know how we can do that really fast so just let's first minimize this and now go to the services container then from here just right click over this widget here or this pencil icon let me move the Navigator a bit so this one now right click over it click on copy then go back to Inner blog container and right over here right click over it and then click on paste now let's just put a text here in the focus title okay now go back to the services container and here right click over this one click on copy now go back to inter block container and under jit Hing right click over here and then click on paste now let's again put a title here then go back to the services container and copy this text editor right click over it click on copy go back to Inner blog container and underneath our heading let's right click here then paste there you go so now the outlet for our blog posts or our blog archive is ready but I'm going to be putting the blog posts after I make them so let's just leave this section as is and let's create our other sections or other pages to be specific then after creating the blog posts we'll come here and then just add those blog posts in our homepage so that people can also access our blog post through our homepage so now let's just update our work and let's keep the homepage here and then go to the front end our website now if we scroll down okay let's refresh it first then if we scroll down you can see that it has all the sections that we have have created now from here on let's hover over this site name and click on dashboard so this will take you back to the WordPress dashboard from here on let's create our other Pages which we will have in our website so now go inside of pages now let's create our other pages so click on add new page then here let's create our about us page so give it a title of about us or about whichever you like then then click on publish and click on publish again then from here let's create our other pages so click on add new page let's name this our team page click on publish then publish again now for the next one we got to have a portfolio page right so let's name it portfolio then publish this one as well then let's create our services page now publish it then create our blog page publish this one as well now for the last one let's create our contact page now click on publish now let's go back to Wordpress and you see here we have all the pages that we just created now we got to have a menu for our website right so for that hover over appearance then click on menus now let's select all the pages that we just created and add them to our menu so let's select all of them from here and click on add to menu also we don't really need this one which was here by default so click over this drop down and let's remove it okay now for our pages I want them to be in a specific order so for that first of all after home let's put our about us page under here then inside of our about us page I want to put our team and portfolio so let's make it a sub page or sub item of about us and let's do the same for portfolio as well now let's just take this Services page after about us here okay so now everything is looking perfect and this is the order in which it will be shown in our menu then click on Save menu now here it's saying that after enabling this you need to use elements kit header footer module with elements skit nav menu widget to show the mega menu so basically we will need to create a header and footer now to show our menu right so now if we go to the front end of our website so hover over this jimpad digital.com then right click over visit site and click on open link in new tab here if we go to the front end currently we don't have any header or footer which is custom made right see there's nothing now to add our head header and footer let's go back to menus and from here let's hover over elements kit here click on header and footer and as you can see that there are currently no header or footer so now let's click on add new so let's just title our header as header and keep the type to header as well then in conditions let's keep it in tire side because we want our header to be shown in the entire set because header and footer are Global so in a website wherever in which page you go you will always see the header and footer so now let's activate it then click on edit content now here you guys may remember that when you went to gyfa digital.com You'll Always Find this download the resources I've used in the tutorial under important links so from here do you guys remember that if you download it you'll find an images folder and a template folder so in that template folder you will find a custommade header and footer template so now let's go back here in our header now here click on this folder icon this one to add a template now click on this icon which is the import template icon then click on select file now here inside of this digitize folder you'll find this templates folder from here select this header. Json file this one so double click over it and as you can see that our header has been uploaded successfully now let's click on insert it's asking us if we want to apply the settings of this page to just click on apply so now you see this is how the header of our website will look and currently it's not prominently visible because it also has a white background but since our hero section has a black background so over that one everything will be visible so you just have to be a little patient everything is here as you can see now let's just simply click on update then let's go back so now let's add our footer so click on add new then let's title it our footer select the type as footer keep the conditions to entire site as usual then activate it and click on edit content now again follow the same process so just click on this add new template then click here to import a template then click on select file and from the same folder select this footer. Json file now click on insert click on apply and this is how our footer will look so now let's update it and for now let's keep the footer here I'll tell you in a second why I'm keeping this tab still here now simply just go to the front end of our website now from here go to dashboard then go to pages and here go inside of about us page so click on edit then click on edit with elementer now as you guys can see that our header is colliding with our page name so to stop that from happening just go and click on this settings here make the page layout to Elementor full width so now we won't have the page name and we only have the header and footer now let's create our about us page Banner so first as usual just take a new container choose the flexbox layout then this column directed structure now let's name this as our hero Banner container or Banner container in short now go to its style tab then make the background type classic let's give it an image so choose an image from here now scroll down and select this image which is the breadcrumb background scaled one image so click on select and there it is so now since we have a dark background you can see our header properly now let's make the images position to Center Center repeat to no repeat and display size to cover then go to its Advanced tab unlink the padding values then give the top padding of 20 right to 10 bottom to 100 and left to 10 as well now inside of this Banner let's take an image widget so go to here then drag this image widget over here now let's choose an image so go here then let's choose this image breadcrumb shape 8 so click on select now go to it style tab then set it width to 10 pixels and opacity to 0.2 now go to its Advanced tab set its position to Absolute then give it a horizontal offset value of 50 pixels and vertical offset of 50 pixel as well now go to widgets then drag another image widget under here now let's choose an image choose this one shape 35 now go to its style tab then set its opacity to 0.2 now go to its Advanced tab set the position to Absolute then set its horizontal offset to 50 pixels and vertical offset to 50 pixels as well now we're going to put a CSS code for this one but you know it's going to be too much of a hassle and it's going to waste so much time if you do the HTML code snippet copying and pasting again and again right and this is why I left this footer tab open because you see you can actually do a another thing remember how we made our footer and header Global so that it will be available in every page so this is also an element of our website right and our footer is also created inside of a container so now here what you can do is you can do a big brain shortcut so for that you'll have to go to the homepage and here remember that we created our HTML container this one from here just simply right click over this six dots which is edit container and now copy it then let's go back to the footer and here under the footer right here let's right click over here then click on paste so now you see all the HTML coding and stuff that we did in our homepage everything is now in this footer and since every page will get our footer so every page will get these codes I mean the codes that we put in this HTML widget every page will also get these codes isn't this amazing and that is why Elementor is one of the best Drag and Drop page Builders because you can just simply drag and drop and copy and paste things to make your life so much easier so let's update our work now let's see the magic so first of all let's go back to our about us page and this is the image where we want to put some animation effects right so now let's say that we want to put uh wobble animation for this image so let's just simply go back to gyat digital.com then here if we scroll down and let's just copy this wobble CSS class because we already have this CSS code snippet in our footer which footer will also be in our about page right so we don't have to copy this now just simply copy this CSS class name right click over it click on copy then go back to about us and now if we just simply paste this class name over here here then you see it's already getting that effect because this about page has our header and footer right and we have our HTML in this footer that is why we don't have to separately create another HTML widget to hold our codings so now let's proceed with the rest of our page now let's take another image widget from here so drag this image under here then choose an image let's choose this image red crumb shape eight so click on select then from its tile tab set its width to 100 pixels and set the opacity to 0.15 now go to its Advanced tab make the position absolute horizontal offset value to 40% set the vertical orientation to bottom and it's offset value to 60 pixels now go under here and go to this responsive then let's just hide it on the mobile portrait now go to widgets then take another image widget under here so it went over the last one that we took now let's just drag it here now for this fourth image let's choose another image let's select this shape 35 this one now click on select now go to its style Tab and set its opacity to 0.2 now go to its Advanced Tab and set the position to Absolute then horizontal offset value to 40% so change it to percentage then write 40 set the vertical orientation to bottom and its offset value to 50 now let's also put a wobble animation for this one so we already have copied the code snippet let's just scroll down and paste the class name Here Also let's hide it on the mobile portrait from responsive so let's hide it here now choose another image widget so let's just drag a image widget and drop it anywhere here then you can always just drag it down here now you don't necessarily need to drag these images but I'm doing this just because it's more easy to work while maintaining a sequence right also sometimes if you put one image over another one and you don't give it a z index value then that image might not be visible over the other image so that is why we are maintaining this order because we want every picture to be shown perfectly now let's choose another image so let's choose this image hero shape 3 click on select then go to it style Tab and set the opacity to 0.3 now go to the advanced Tab and set its position to Absolute then horizontal orientation offset value to 100 pixels and vertical upset value to 28% oops these images are colliding so let's make its horizontal orientation to right okay now if we move the Navigator there it is so everything's looking pretty good now let's also give this one an animation so let's just right click over it and click on paste and there you go now let's take our last image so go to widgets then drag this image widget under here okay now let's choose an image let's scroll down and choose this image breadcrumb shape eight then click on select go to it style Tab and set the opacity to 0.3 now go to its Advanced tab set its position to Absolute then horizontal orientation direction to right and offset value to 100 pixels then vertical offset to 28% all right now let's also hide this from responsive let's only hide it on mobile you'll also see why I'm doing this because in Mobile section these images might crowd our Banner section or our Banner area too much that is why we're hiding these images on the mobile portrait now go to widgets then drag this heading widget under here so there it is now let's give it a title let's just write about us then set the HTML tag to H1 now go to its style Tab and set the text color to Global white color color cool now let's go to widgets and search for icon list then drag this one under here set the layout to in line this one then let's close this one and here let's click on the first one now here let's just write home then remove this icon so click on this bin icon here now for the second one in the text field right about us then choose a an icon so in the search bar search for angle right select this one there you go now go to it style tab then go to its icon drop down and from under normal tab change its color to Global white color now go to its hover Tab and we don't actually need to do anything here so let's go to this text drop down here go inside the typography and set the family to ubun 2 then set it size to 16 pixels and weight to 500 then line height to 1.6 em now go back and under normal change its color to Global white color okay so now our Banner still isn't looking as great as it's supposed to so what did we do wrong here H first of all as you can see that during putting the heading and icon list this image got down here but it was supposed to be under this image so let's drag it over here okay and now as you guys can see that our page name and header is still colliding so I think we need to increase the padding more so let's go to this Banner container and from its Advanced tab yeah let's set its top padding to 200 we missed a zero here so let's give it a zero and there you go now it's looking perfect so now this was our about page Banner let's also check if the responsive settings are still cool so so let's go to tab view yeah this is looking pretty amazing and in the mobile view see this is why we hid some images because it can be too overcrowded with images so we hit this image and this image to make it look more beautiful so now let's close the responsive mode and save our work now after the banner section let's create a team member section so let's minimize this Banner container and let's just add another container so click on this plus icon choose Flex box then choose this the road directed structure now from its additional options set the Overflow to Hidden then go to its style Tab and set it background type to Classic then give it an image so let's choose this image this background 41 image click on select and there it is now set its position to Center Center repeat to no repeat and display size to cover then go to its advaned tab unlink the padding values and set the top padding to 100 right to 10 bottom to 100 and left to 10 Also let's remember to rename our container as our team member container now inside of this container let's take a image widget then choose an image let's choose this image hero shape 5 click on select now go to it style tab say it width to 150 pixels then go to its Advanced Tab and set the position to Absolute then horizontal offset to 100 pixels and vertical orientation offset to 150 pixels now inside here let's take another container so go to widgets and drag this container widget over here and let's rename it as our inner container then go to its Advanced Tab and give it a zindex value of one now here we need to put headings and text editors and all that stuff but I don't want to waste any more time so let's go back to our homepage and here go inside of services container then inside it you'll find this inner Services container which is this one so from here let's copy this jacket heading right click over it click on copy then go back to our about us page and paste it here then let's give it a Focus title which says how we work now go to its Advanced Tab and only set the bottom margin to 28 pixels I mean minus 28 pixels so we're all done with the jacket heading now let's go back to home again and let's copy this one this heading so right click over it click on copy then go back here and click on paste right underneath this widget now let's also put a d Hing here now go back to homepage and then let's copy this text editor so right click over it click on copy go back here and paste it here then just go to its Advanced tab unlink its margin and only set its bottom margin to 30 pixels so now we're all done with this now after it let's take another container so go to widgets and drag this container over here and in this container we are going to showcase our m members so let's rename it as our members showcasing container and here I just wrote members SC for short now inside of this let's take another container and let's rename it as our member one container now under layout change its content width to full width then justify content to Center and align items to Center as well then go to the style tab here select the classic background type then select an image so let's select this one click on select now make the position to Center Center and a repeat to no repeat then display size to cover now scroll down and go inside this border drop down here set all the Border radius to 10 pixels then go to the advanced tab unlink the padding values set the top padding to 50 pixels right to 10 bottom to 50 and left to 10 now we're going to put some CSS effects here so for that let's just go back to gyfa digital.com here you'll see this team member hover effect CSS so copy this whole code snippet from here till here right click over it click on copy then go to the footer and here inside this HTML widget let's scroll down right click over here make some space then paste the Cod snippet that you just copied okay now let's update it because always remember that Elementor is a online page builder so you always need to save every work in order for other pages to get the elements or settings of your other pages so now our footer has been updated let's go to gy.com then let's copy this image wrapper class name right click click on copy now go to about us and here in this CSS class field right click over it click on paste now if you hover over it you still can't see anything right that is because if you go back to gyfa digital.com you'll see that this is a whole hover effect so in order to activate it you'll need to add these two class names but we're going to add this one to another container inside of our current container so let's create that container go to about us and here inside of this one let's take another container so drag this container here then set his content width to full width width to 200 pixels then minimum height to 230 pixels now justify content to Center align items to Center then go to it style Tab and set the background type to gradient this one now give it a custom color code of 20 D9 A1 A1 then go back and let's set the second custom color which is 5 F39 FF A1 now go back then set the angle to 90° now go in inside of border and make the Border radius to all 50% then go to the advanced tab set all the padding to 15 pixels Z index value to one and in this field let's add the CSS class that we were talking about so now go back to gyfa digital.com let's copy this one this CSS class right click over it click on copy go back to here and in this field write I mean paste the Cs name and there's the effect you see now inside of this container let's add a heading actually it went outside our container let's drag it inside here there it is now in the title field let's just write a name then set the HTML tag to H5 now you guys probably can see the settings that I'm doing here so for now let's go back to this container and let's let's delete this CSS class name so that the effect won't be activated for now okay so now you guys watch and see whatever I'm doing and after we're done with all of this we'll put this CSS class name again here so now let's go back to The Heading then go to it style tab set the text color to Global white go to its advaned tab unlink the margin values and only set the bottom margin to minus 20 pixels now go to widgets then drag another heading under this one again let's drag it under here now here let's just write stock developer then set the HTML tag to H5 go to its style Tab and inside of typography set the family to Ubuntu size to 14 pixels weight to 500 and line height to 1.6 em now go to widgets then search for social icons now drag this social icons widget under here drag it inside of the container there you go now let's go inside of Facebook and in the library go to all icons then search for Facebook F then choose this one now let's choose the second one and for this one go to icons and here go to all icons then search for X Twitter then select this one and just like this I'm going to put some other s soci icons here and then I'll be back so I'm back after putting two other social icons now let's go to the style tab here set this color to custom color so let's just simply drag this wheel to the most left and make the color transparent now go back and for the secondary color let's set it to Global primary color then set the size to 15 pixels padding to Z em spacing to 20 pixels now go to Icon hover here set the secondary color to Global accent color so go to This Global icon and select This Global accent color now go to the Advan tab then set all the padding values to 15 pixels set the width to custom then give it a custom width of 170 pixels I mean 75 pixels so let's change this to pixel scale then write 175 now scroll down and select this background then set the background type to Classic and from here set it to Global white color now scroll down and go to border then set the Border radius all to 30 pixels so now that we're all done here let's go back to this container and remember that we need to put the class name that we deleted from here so let's right click over it and click on paste there it is now if you hover over it you'll get this beautiful hover animation but you guys might be wondering that why can't you see the full picture of Our member right and this is why you have to trust the process because I did all the settings keeping in mind that there's going to be multiple members in our team so now let's just simply minimize this member one container then right click over it and click on duplicate so now as you can see that the new containers are coming one after another in a row but we want it in a column so for that let's go back to this member SC container which is the parent container of Our member containers then from here just set the direction to row there you go now let's create two other member containers so let's right click over this one then click on duplicate and then let's do this again there you go now everything finally makes sense right now this was our member one container but for this one we can rename it as our member two container and then inside of each container if we choose this parent container and then go to it stle here you'll see an image so from here you can click here and choose the images of other members so let's select this one then click on select see how easy that was so I'll be back after renaming these containers and putting the member pictures in these other member containers so now I'm back after putting the member images and renaming these containers and now this is how our about section or our about page looks but I think it's still pretty empty and we do need something else to fill up the space of our aboutus page now hey do you guys remember that we created an About Us section in our homepage which was this one we can actually just simply right click over here click on copy and then take take this one I mean this about us container and then go to our about us page and let's just paste it over here so right click over here then click on paste now let's actually minimize this team members container and let's drag our about us container over this one here so now if we scroll up this is looking perfect so first of all we have our about us Banner then our about us section which gives you a little insight about us and then if we scroll down you'll get to know in details about our team members now our aboutus page is finally looking perfect so let's update it and since we already saw that our about us Banner responsive settings was already perfect and since we copied this one from our home where we already did the responsive setting of this section so we don't need to do any responsive setting for this one but but let's just do a little responsive settings for this team members container so let's go to responsive mode now let's do our responsive setting so let's go to the tab mode here first choose this Banner container now go to its Advanced tab then un link the padding values put the top padding to 180 pixels right to 20 bottom to 80 and left to 20 then go inside of this Banner container and select the first image from style tab make its width to 90 pixels then choose the second image and from style tab make its width to 180 pixels then choose the third image go to style tab make this one's width 90 pixel as well and also go to its Advanced tab then set its horizontal offset value to 52% then vertical offset value to 30 pixels now choose the fourth image go to style tab set the weight to 200 pixels go to Advanced tab set the horizontal offset to 47% and vertical offset to 30 pixels now select the fifth picture go to style Tab and set the width to 220 pixels now go to its Advanced tab set the horizontal offset to 0er pixels then select the sixth image go to it style Tab and set the width to 100 pixels now go to the mobile portrait then here choose this Banner container unlink its padding and set the top padding to 150 pixels right to 20 bottom to 60 and left to 20 now go and select this fifth picture then from its Advanced tab scroll down go to responsive and hide it on the mobile portrait there you go so we're all done with the responsive of our Banner so let's update it close this responsive mode and actually here we don't need to do any responsive settings for this About Us section because we already did the responsive setting for this one in our homepage and we just copied this section from there right so we don't need to do anything here let's just simply minimize this and open the responsive mode mod again then go to the tab view here select this team members container which is this one now just go to its Advanced tab then unlink the padding values set the top padding to 80 right to 10 bottom to 80 and left to 10 then go inside it choose this image go to its Advanced Tab and set its horizontal offset to 20 pixels then vertical offset to 100 pixels now select this members SC container and turn wrap on now go and select this member one container go to its layout then change the width scale to percentage and in this field write 48% now let's do the same for these other containers so go to the second member container then from layout change the width to 48% let's do the same for this one and we're done so now the tab responsive is all done let's go to our mobile responsive here first select this team members container then go to the Advance Tab and unlink the padding now put the top padding to 50 right to 10 bottom to 50 and left to 10 then select this image and from its style tab set its width to 80 pixels then go to Advan Tab and set the horizontal offset to minus 20 pixels then vertical offset to 143 now select this member showcase container then make all the padding to Zero by unlinking the values so if we scroll down there are no paddings here then select the member one container so now everything else looks great now close the responsive mode and click on update now since we're done with our about us page so let's create our other pages so first of all let's go back click on this WordPress icon now from Pages let's go to services so click on edit then edit with Elementor now just like before from settings let's change the page layout to Elementor full width okay now for our Banner we don't have the time to create another Banner so let's just go to the aboutus page well this is the front end of our aboutus page if we refresh it this is what was created now we need to go to the back end of this aboutus page so from here click on dashboard then go to pages and all pages now go inside of aboutus and click on addit with Elementor then from here simply just copy this Banner container this one so you can copy it from here let's right click over it click on copy then go to our services page and here right click over it and click on paste now all we need to do is just simply click on this about a setting then change it to services and let's also do it for this one so from here let's change the text to services and just like that within a minute it our Banner is all complete wasn't that fun now for this Services page we're actually going to do this copy and paste process for the whole page we're not going to make any portions of it step by step now just go to the homepage then from here see this Services section simply just right click over the services container click on copy now go back to the services page and here in this field right click and then paste then from here let's just delete the exess things which are headings that we don't need so let's right click over this one then delete it then this one then this one and since this is a page which is totally dedicated for services let's add some other services so for that don't worry you won't need to create anything else just simply go inside of the services container here select this inner Services container now right click over it and click on duplicate then choose this Services container which is the parent container of these two inner Services container so let's click on it now from here set it direction to column there you go now you can change the names and icons of these Services as well and you'll have a complete Services section for your services page so I'll be back after putting some other dummy icons and texts so I'm back after putting some dummy icons and texts now in our services section we also want to put some testimonials so that we can show that people are really happy with our services and again for that just go to the homepage then scroll down and from here let's just copy this whole rev container click on copy then go to Services page and in this field right click and click on paste there you go and just like that our whole Services page creation is compl complete that literally only took just 2 minutes right now let's say that inside of your services section you want people to take your services and for that you would want your services section to redirect people to the specific Services page right for that you don't need to do much first of all let's just open dashboard so click on this preview changes then from this page just go to gyfa digital.com dashboard then from this page over here and then go to dashboard now go to pages and create another page so click on add new page and let's say we're going to name it web design then click on publish and publish again now let's edit this page with edit with Elementor then make this page layout to Elementor full width now from here just click on this add template then insert template from here click on select file and from the templates folder that you got from gfad digital.com select this service single. Json file click on open and then service single just click on insert press apply now from here since we uploaded a completely new page our page layout went to its default form so again go to settings and change the page layout to element full width then just like before you can choose any heading and then change its title so let's say we're going to write here web design and let's do the same for this one so click here and in this field let's write web design now click on update so this was our single service page okay now if we go to the services page and let's say you want people to get redirected to this web design page which is a single service by clicking on this web design writing you'll just have to click over this one then in this link write web design and you see Elementor will automatically give you a choice of this web design page which you created so select this page then click on update now let's witness the magic so if you go to preview changes and go to its front end website which is currently looking like this and now if you click on this web design writing here it will automatically take you to this web design single service page cool and just like this you can add other services to these other headings and they will all take you or redirect you to the page of which you give a link in this field so now we're all done with our services page so let's close this tab then go back to our dashboard and here if you go to Pages then if you open this web design single service page that we created so inside here you can also customize these things that are here so you can change the images you can change these writings you can change the writing of this text editor and add a video link to here and you can also customize everything else so now we're all done here let's close this and then let's create our team page so let's click on edit now click on edit with Elementor here just like before from settings let's just change the page layout to El full width now let's go to our about us page and from here let's just copy this Banner container now go back to the team page then in this field paste the banner container there you go and also just like before let's just change these headings to team since this is our team page so click on this one now from the title change it to team then click on this one and from here change the text to team now just go to the about us page again and from here scroll down and remember the team section that we created so from here just copy this whole container so right click over here then click on copy now go back to team page and in this field click on paste there you go now we don't want any kind of introduction we just want our team members portraits here so let's just delete these ones I mean these headings so right click over it click on delete then this one and then this one now I don't want this background image so I'm going to delete this as well right click over it click on delete and I want the background to be white so just click on this team members container and from it style tab let's just delete this image and make the background color white color there you go also if you have more team members you can just copy this inner container which is this one so let's just duplicate it now after duplicating this inner container just go to its parent container which is the team members container this one and here set the direction to column now there's too much space here which I don't want here so from gaps make all the values to zero there you go now we're all done with our team member section and our team members page and since we just copied this section from our about us page where we already did the responsive settings you can check if the responsive setting is doing great so let's see the tab portrait see everything is just perfect here and now if we go to the mobile portrait everything is looking perfect here as well so now let's close our responsive mode and then here I'll just be back after putting some other member images so I'm back after changing the images but if you are just wondering how you could do that and you weren't able to do that by yourself I'm going to demonstrate that as well for you so simply just click on any of the containers that hold these images so let's click on this container which holds the image of this container now from it style tab you see this image here you can just choose an image from here so let's choose this one click on select and that's how I did it you can also change the names and other things which we already created in our about section and you already know how to do that right so I'm just going to skip this part and let's update our work so now we're all done with our team page and this is how it's looking which is perfect so now let's bring out our control panel and from here let's go back to Wordpress click on this WordPress icon and now let's create our portfolio page so let's click on edit then click on edit with Elementor now from the settings icon on make the page layout to element full width then just like usual go to the about us page and from here let's just copy this Banner container now go back to portfolio page and in this field paste the container here then let's just change this about us writings to portfolios here let's write portfolio and then this one so go inside here and in this text field write portfolio Okay so now we're done with the banner now let's create our portfolio section from scratch so first of all let's take a container here choose the flexbox layout then this direction now from its additional options turn the Overflow to Hidden then go to its Advanced tab unlink the padding values now make the top padding to 100 right to 10 bottom to 100 and left to 10 now inside of this one let's take another container also we don't want to mismatch these containers so let's rename this container to avoid any kind of confusion and here I just wrote portfolio container then for the container that we just took go to its advaned Tab and give it as index value of one now inside of this container we're going to put a widget so here in the widget search bar search for filterable gallery now drag this widget here now inside settings set the items to show number to n then enable this image clickable option so click here let's scroll down so that you can see better now go inside of filterable controls here set the enable filter to know then go to gallery items then click on this Gallery item name then scroll down and here in the item content let's just write paid media solution now just like this one you can add your item content name to whatever you like for the other ones but I just changed this one so that you could see how you can do it now again let's scroll down then in this image field set an image so let's choose this one now if we scroll down let's just close these ones and then go to the top and let's minimize this one by clicking here and let's just duplicate it from here so I've just created nine items so that it could fill up the number that reset in the settings this one items to show for nine and for each one you can just change the image or your item content name and everything else here because all of these are customizable so I'll be back after putting some dummy text and images here so I'm back after putting some dummy images now let's scroll down and we don't have to do any more settings here let's go to the style tab then here inside of General we don't have to do anything so let's just close it now go inside of item here set all the margin values to 15 pixels and Border radius to 20 then go inside of mouse over effect and set this background color to let's give it a custom color so write 5 F3 9 FF D1 then click outside now here in padding first write 20 pixels then unlink the padding values and only set the top padding to 190 pixels then from under title typography let's change the typography to Global text then under content typography go inside of typography change the family to Ubuntu size to 22 pixels weight to 700 and line height to 1.3 em now go back and we're all done here now let's just do a little bit of settings in the responsive mode so go to the tab view first here select this portfolio container then go to its advaned Tab and unlink the padding values then set the top padding to 80 right to 10 bottom to 80 and left to 10 so we're all done here now let's go to the mobile view then unlink the padding from Advanced tab set the top padding to 50 right to 10 bottom to 50 and left to 10 as well now go and choose this filterable Gallery widget here go to style Tab and go inside of items here unlink the margin values then set the top margin to 15 and bottom margin to 15 now let's save our work and this is how everything is looking so if we close this responsive mode everything is perfect now let's say that this is your whole portfolio page right and you want each of these images or these gallery items to send your website visitors or redirect them to a single portfolio page so for that you'll have to do a similar thing that we did back when we created our services page and single Services page now in this case you'll just have to go to the filterable galleries content then from under full image action currently it's given light box right so if you click on an image only the image will show but now if you click back and then if you change change the full image action to link then if you click on any of these images or gallery items then it will take you to that single portfolio page which you're going to link here so currently if you click over it see no images popping up and to put the link you will have to go to the gallery items then let's say that currently this one is named as paid media solution so if you go inside of this one here this is the name right and if you scroll down you'll find this field and here if you write the name of any of your page for instance let's say we created a service page right so if you write s e r c every page that you create will be shown here so let's first go and create our single portfolio page and then come back here to add our single portfolio page Link in these fields so that they will redirect our website visitors to a single portfolio page so now just go back to dashboard and inside here inside of pages let's create a new page and let's rename this as our our paid media solution page now click on publish then publish again now click on edit with Elementor now from settings let's make it Elementor full width now for the single portfolio page you will also find a template so click on this add template then click here and select file now remember this templates folder that you will find in our digitize folder if you download the resources I have used in this video so from here just select this single portfolio. Json file then click click on insert click on apply and there you go you have a readymade single portfolio so from here let's again from settings make the page layout to element full width then change this portfolio single heading to paid Media Solutions then also change it here go inside here and from here let's change the text so we're done here and if you upload this you can also see that everything inside of this page is also customizable so you can change these images you can change these headings and writings and everything else you can change the queries from here or if you scroll down you can also change this fq section so even if you don't like anything in here you can change it to your liking now let's update our work here then let's go back to Pages here let's duplicate this page so click on this EA duplicator which is actually a plug-in that we installed in the beginning of this video so click here now just go inside of this copy click on this edit and let's change this title to search engine optimization now let's publish this page publish it again and if you view this page you see you can also change the names from here but now I'm not going to do that so let's close this now back inside of our portfolio page if you again go to that link field that I showed you just a couple of minutes ago here so here let's write paid Media Solutions see you already have that page that we just created so for this one we're going to add the link to that page which was named as paid Media Solutions so select this one now let's update our work now if you go to the front end of this website by clicking on this preview changes and then click on this one this paid Media Solutions see how this takes you to that single portfolio page that we just created and this is how you can access any single portfolio page from portfolio Page by simply just adding a link here so now we're all done with our portfolio and single portfolio page as well so let's close this now go back to Wordpress now up next we'll be creating our blog page but let us create some blog posts first so for that go to posts here now this is where you can create your blog posts and to cre create a new blog post you need to click on this add a new post so of course you can put a title of your blog post here I'm just going to write my first blog post now after putting the title of your blog post from here if you go to featured images here and click on it then you can set uh image for your blog post so let's just click here now let me just select this picture click on set featured image and you can choose any image that you want or you could replace it from here and now this blog post that we created will have this image I mean this featured image as its thumbnail then from category you can set your blog post to any category you like you can always just create new categories by clicking on this add new category for now let me just select some categories from here let's select blog analytics and support and your blog post will be within this category and of course from this category section you can add all kinds of categories to your blog post now let's close this one and then from tags you can set any tag to your blog post and then if we scroll down and open discussion here if you allow comments and allow pingbacks and trackbacks that would mean you are opening up your blog post for discussions so your website visitors will also be able to interact with your blog posts now I'm pretty much done with the settings of my blog post so from up here let's just publish it click on publish again so now our first blog post is already published now if we click on edit with Elementor now from here let us just simply add a template tempate so click on add new template then click here click on select file and here inside the templates folder this one you'll find this single block post. Json file so let's select it then from here click on insert then apply there you go now from settings again make the page layout to Elementor full width now from here you can always just change the heading or name of your blog blog post and from here as well and the template that we just uploaded is this one so from here you can also customize all these things you can always just set the featured image to another one from outside and then from here you can add some more categories you can change the writing from here give a video link to this icon and you can also see how beautifully our discussion section is also customized so let's just update it now let's go back then go back again now I'm just going to create some other blog posts and I'll be back so now I'm back after creating some other blog posts but now I'm going to create the blog page where we will show our blog post okay so go back to Pages now then go inside of this blog page click on edit now click on edit with Elementor now here first of all let's make the page layout Elementor full width then just like before go to about us page and from here let's copy this Banner container go back to the blog page and then paste it here let's change these headings to blog so here write blog now from here again let's write blog so now let's minimize this and let's take a new container choose this Flex boox layout and select this direction then from additional options set the Overflow to Hidden then go to the advanced tab unlink the padding values set the top padding to 100 right to 10 bottom to 30 and left to 10 Also let's rename this container as our blog post archive container now go to widgets then search for post block now drag this jit post block widget over here then select this style too now inside of Elementor let's just drag this meta over here then from image resolution make it full there you go now set the number of columns to three then set the title HTML tag to H2 turn off the enable category because we don't want the category to be shown here we want the category to be shown inside of our single block posts then scroll down here set the excerpt length to 18 then set the enable comment icon to no now scroll down and under here you'll find this Metadate icon so go to Icon library then search for calendar alt now let's choose this one click on insert there you go there's the icon that we just set now go inside of settings here set the number of posts to six now scroll down and we don't have to do anything else here so now let's go to style tab here go inside of post item then set the column Gap to 30 unlink the margin values then only set the bottom margin to 50 now go inside of thumbnail here unlink the margin values and only set the bottom margin to 15 then go to thumbnail container here set the image height to 250 Now set all the Border radius to 20 pixels then go to content container okay we don't have to do anything else here let's go to Title Here unlink the margin values then set the top margin to five and bottom margin to 20 pixels now under normal go inside of normal typography then set its font to ubun 2 then it size to 22 pixels weight to 700 and line height to 1.3 em now go outside then go inside of excerpt here set the typography to Global text then go inside of read more here set the typography to Global accent now unlink the padding values then set the top padding to 13 right to 35 bottom to 13 and left to 35 then scroll down and from under normal set the background type to Classic now give it a custom color code actually let's make it completely transparent now go back then set the normal color to Global accent color this one and normal border radius to 30 pixels all of them then set the Border Type To None now go to post meta then set is typography change the font family to Ubuntu size to 14 pixels line height to 1.6 em then go back and change this color to Global text color now go inside of author name typography here again set the font family to Ubuntu then size to 14 pixels weight to 500 and line height to 1.6 em then go back and set the author name color to Global accent color now unlink the margin values then set the top margin to five and bottom margin to 10 pixels then set the author icon space to 8 and date icon space to eight as well now our read more button is not looking as good so let's make it I mean let's give it a hover animation so let's go back to read more here go inside of hover tab then say set this background type to gradient Now set the first color to Global secondary color and let's set the second color to Global accent color then change the angle to 90° now scroll down and set the hover color to Global white color so now if you hover over it there you go also let's remove this Arrow so scroll up and go back to content then SC scroll down and let's delete this icon from here all right now let's set our last CSS code so go back to gyat digital.com then copy this blog post CSS here so copy this whole code snippet right click over it click on copy then go to footer and inside of HTML if we scroll down left click here then make some space by pressing enter now right click here and click on paste so now the code SN it is here let's just again go back to gyfa digital.com then let's copy this class name so let's copy it now go back to blog page then scroll up and from the advanced tab of this jit post block enter the CSS class name here so now this will get all the CSS that we have put in our footer also as you can see that after after the buy word there is no space between buy and the author's name so for that let's go to content and if we scroll down you'll find this meta author by text so after this buy just give it a space by pressing on the space bar on your keyboard there you go now it's finally complete now let's just go to responsive mode so let's go to the tab view then let's select this blog post archive container and from it Advanced tab unlink its padding values then set the top padding to 80 right to 30 bottom to 40 and left to 30 now choose this post block widget then make the number of columns to show 2 two all right so we're done with the tablet responsive now let's go to the mobile view here again choose this blog post container then I'll name the padding values and set the top padding to 5050 right to 20 bottom to 10 then left to 20 and now for this one let's go to JK post block and here make the number of columns to one okay so now everything is looking perfect let's just close this responsive View and click on update to save our work all right so now our blog page is all complete but remember that we also created a Blog section for our homepage so now if you go back to our homepage and then scroll down you see this is going to be our blog section so here we're just simply going to copy that blog post archive and paste it here so let's go back to blog page then from here just right click over this post block widget then click on copy now go back to homepage and here under this text editor just simply right click and then click on paste there you go now we don't want too much of space to be covered by this blog archive so from content let's scroll down then go inside of settings and here just change the number of posts to three there you go also if we scroll up you can't see the menu I mean navigation menu in our header and also you can't see our footer so for that we need to go to settings and then make the page layout to Elementor full width see there's our beautiful header with navigation menu and then if we scroll down there's our footer now since our footer already has the HTML in it I mean the HTML codes that we put here in here so now we don't need to keep the HTML container of our homepage this one so let's just click on this x so now even though we deleted this HTML if you scroll down you'll see that we still have all the effects that we put through CSS codes and class names so now let's update our homepage and we're all done here now let's close our homepage then go back to our dashboard go to Wordpress now let's finally create our contact page so just go inside of contact click on edit now click on edit with Elementor now let's upload the contact page template that you will be given so click on here add template then click on this icon and click on select file now select this contact page. Json file this one so let's click insert and click on apply there you go our already made template for contact page now here again our page name is colliding with our header so let's go to settings and then change the page layout to elementer full width there you go now if you scroll down you'll see these two containers in inside of this container if you click here this will be the Met form widget so from here you can customize your own contact form and besides that everything else here is also customizable you can change these headings these numbers these emails and everything else so now let's go to this metform widget and click on edit form so we're going to create a new form so let's click on edit now here inside of the metform widget first of all take a container choose the flexbox layout then this direction the column Direction now from here we don't have to change anything so let's go to widgets now drag this text widget inside here then in the label field let's write your name then go to the style Tab and set the color to Global text color this one then go inside of typography change the font family to Ubuntu size to 16 pixels weight to 400 line height to 1.6 em now go back here unlink the margin values and only set the bottom margin to 10 now go inside of input then unlink the padding and set the top padding to 13 right to 20 bottom to 13 and left to 20 now under the normal tab change the input color to Global primary color this one then background type to Classic Now set the color to Global white color then scroll scroll down and set the Border type to solid then make all the Border width to one pixels now go inside of Border color and give it a custom color code of E4 E1 FF now go back then go under the hover tab here let's make the Border type to solid then all the Border width to one pixels and Border color to Global accent color which is this one now go to the focus tab here again set the Border type to solid and and Border width to one pixel all of them then here set the typography to Global text and Border radius to 8 pixels now go inside of the placeholder dropdown here set the typography to Global text then give it a custom color code of 3 a 3 a3a 9e now go back so now we're all done with the name field let's drag another widget which is going to be for email so let's drag this one under here then in the label let's just write email address then just simply copy the settings that we have done in this field and then paste it to this field so let's right click over it or here then click on copy then right click over here and click on paste style there you go no need to create every section manually now let's scroll down and let's drag this text area widget under here then in the label field let's write how can we help you then again just copy and paste the style from here to this one so first let's click here then let's go to it style tab then inside of input let's just give it a bigger height so in the height field let's write 195 all right now go to widgets again then let's just drag this submit button under here now in the label let's write submit now then then set the button alignment to Justified then go to the style Tab and here unlink the padding then set the top padding to 14 and bottom padding to 14 Now set the typography to Global accent this one then here let's set the background type to gradient Now set the color to Global secondary color then scroll down and set the second color to Global accent color now let's make the angle to 90° then from under hover tab again set the background type to gradient then the first color to Global accent color and second color to Global secondary color then angle to 90° so now if you hover over it the color will change like this how cool now go to the Border drop down here set all the Border radius to 8 pixels then go inside of Shadow and let's click on this pencil icon then make the shadow color from here to totally transparent okay now go to the Advan tab then I'll link the margin and only set the top margin to 10 and we're all done with our customized contact form so now anyone can contact you through this contact form so let's update our work then click here and update and close there it is see how beautiful it's looking now let's update our whole page from here so now that we're done with our contact form let's go to the front end of of our website so from here let's preview changes now here you can see that the contract form is perfectly interactive so for example now if any person or any website visitors come to your page and they want any kind of service from you then in this name field they can just write their name let's just say their name is XYZ and their email is XYZ theof gmail.com and let's say they want to hold a meeting with you now if they submit this whole form by by clicking on submit now as you can see that the form was submitted successfully so now if we go back to our dashboard then go inside this m form then go inside of entries so you see this is the form that we just submitted so if you click on view see every entry about the form is right here so now if anyone wants to contact you through your homepage and they submit a form then just like this you can come to mform and under metform inside of entries you'll find the entries that were entered by your website visitors and just like that people will be able to contact you through your contact page and especially the contact form so now since we're all done with our contact page as well now I want to show you something really interesting so now if we go to any page of our website like the back end of our website we have a site logo in our header right and this header was uploaded through the free template kit that you will find find in gfad digital.com but let's say you want to create a customized logo for your header of your website then you can do that as well so now I'm going to show you how you can make a custom logo for your website from scratch and I will also be using a completely free tool and the easiest way to do it and after creating the logo I will also be showing you how you can create a five icon for your website so let's go and create our logo and then after that I will also be showing you how you can input a Fab icon of your website now if you don't know what a Fab icon is well Fab icon is the image which is shown with your site title on the browser tab like this one so currently our website has no Fab icon as you can see that this default Globe icon that it is getting it's not a custom Fab icon but now let's say if we go to gyfa digital.com you can see that gyfa digital.com also has a FB icon of their own and just like this usually every professional website has a five icon of their own so now for our website to look more professional and official we also want a Fab icon for our website right so before the Fab icon let's just go and create our logo first so to make a logo of your own for free come to this logomaker.com and then from their homepage you can just click on start my design then choose this blank canvas let's create a new design then go and click on this text widget and now here you can just type whatever you want as your site logo so I'm just going to type digitize since that's the name of our website then from here you can choose any kind of font family you can choose this one or any other one that you like then from here you can pick any color you want you can play with all these colors and make a logo of your liking so just like this from here you can use all these features and options and widgets to make your own logo from logomaker.com completely for free then from here you can just click on this save then here it says download low resolution PNG file and since it's a free logo maker website so we're just going to download the low resolution PNG file from here so let's click here then you can just put your email here and you will receive the logo in a PNG file format so I'm going to put my email here then after accepting the terms if you click on send file to email then as you can see that your created logo was sent to your email and just like this you can create any kind of logo for your website super easily and also for free now if we check our email you can see that our free logo has been sent to us so from here you can just click on this download free file and there you go your logo is all yours to use now you might be wondering how you can put your logo in your header right for that simply just go to the dashboard of your website so let's go here then go back to dashboard then click on this WordPress icon now hover on elements kit and then click on header footer then let's go inside of header so click on on edit with Elementor so you see currently we have this logo here this one but from this choose option you can put any other logo that you want which you have created it can't get any easier than that right so this was our logo now as for our Fab icon let's just go back to the dashboard again click on exit then from under appearance go to customize and here if you go and click on site identity you see this select site icon option if you click on this from here you can choose any image as your Fab icon so now since I have already created a Fab icon so I'm just going to use that one but if you want to customize and create your own Fab icon then you can do the same as we did for our logo so go to logo maker and then create your own Fab icon but for now I'm just going to choose this one that I have already created so click on select and it's already perfectly cropped so click on crop image and there you go as you can see that up until now we had a default Fab icon for our website but currently we have a custom made tab icon now since we didn't refresh our other Pages yet as you can see that our other Pages still have the default Fab icon but this one has our custom Fab icon so now let's publish it then if we go to any page of our website so now let's refresh it you see there's our Fab icon isn't it amazing so now we're finally done with everything of our website so let's close these tabs that we don't need anymore Also let's close this one then close this one as well and here hover over gyfa digital then click on visit site which will take you to the front end of our website so from here you can see that we have our beautiful header with navigation menus and a contact button we have our homepage then about us page and inside of about us we have our team page and portfolio page then we have our services page contact page and blog page now inside of our homepage we have this beautiful banner section then our About Us section we have this interactive button then our Dynamic counters our services section and if we scroll down we have our testimonials and reviews now if we scroll down further below we also have our blog posts in our homepage and in the end of course we have our footer which also has the HTML code Snippets in it but it's not visible in the front end as I said earlier so now let's scroll up and let's go to our about us page so this is our beautiful about us page and our team members section in our about us page then inside of our about us page we also have our solo sub page name team page here we have our team members then we have this beautiful hover effects and also inside of about us we also have our portfolio and then if we click on this portfolio it will take us to a single portfolio page how cool also now if we go to our services page we have the services section and if we click on any of these it will take us to our single service page then we have our contact page and here of course we have our beautiful contact form through which people can contact us and submit their requests and and if we go up finally we have our Blog Page and inside of our Blog Page we have these blogs and if we click on any of these posts it will take us to a single blog post how cool and we have also turned on discussions so from this section people can also post comments on our blog posts isn't it amazing how we have created this whole website from scratch all by ourselves so now let's go back to our homepage all right so we've completed our amazing digital marketing agency website design now go ahead and create your own professional digital marketing agency website I wish you all the best 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'll see you in the next video for now goodbye

Channel: Jim Fahad Digital

Views: 10,386

Keywords: How To Make A FREE Digital Marketing Agency Website, agency website using elementor, agency website design, how to start a digital marketing agency, digital marketing agency website wordpress, create a digital marketing agency website, digital marketing agency, wordpress tutorial for beginners, wordpress 2024, Elementor 2024, Elementor tutorial 2024, how to make a website, how to make a free website, Jim Fahad Digital, wordpress tutorial, wordpress, Elementor, Agency Website 2024

Id: 7jTCBdizdyA

Length: 247min 9sec (14829 seconds)

Published: Tue Jun 11 2024