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

dating websites would be the easiest thing ever if you just follow this one step-by-step master class I will show you how to get your own domain name with a super secure SSL certificate we will be using Wordpress to create our website it's used by the best companies and artists to create their own website years used by 43 of olive sites on the internet and it's free we will use a free theme a free page builder called Elementor and all free resources to create our amazing website you don't need any kind of design skill nor any coding experience this tutorial is for complete beginners and by using Elementor page builder we will create everything just by drag and drop you can change any font size any color you can play with all this spacing you will learn how to create a logo by using a free online tool how to make this awesome homepage with modern and trendy animations I will show you everything from scratch unlike other YouTube tutorials I won't be using any ready templates I will show you how to create an amazing about page like this how to create this Professional Services page and single Services pages then how to create a fully functional contact form inside of your contact page also I will show you how to write perfect blog posts with categories featured images and blog details within Gutenberg people can also comment on your blog post I will show you how to copy and paste from one piece to another page to save your valuable time and most importantly we will learn how to make any website 100 responsive for tablet and mobile devices after completing this tutorial you can create all these amazing websites by yourself you can do it for your own or for your clients now let me introduce you to myself my name is Jim Fahad I'm a full-time professional web developer even in the past I have completed so many freelance WordPress projects for my clients so basically you are learning all the best methods and techniques from a real professional web developer already so many people started their web design career after watching my tutorials so please grab some coffee grab some water you can be the next I'm really excited if you're excited like me please give this video a big thumbs up this video is completely free for you alright we will be treating our beautiful website in Easy four steps first I will show you how to get your own domain name and web hosting I will also provide you with a 60 discount link then how to install WordPress then how to install a free theme and a free page builder called Elementor finally we will start creating our amazing website step by step also I will be adding a timestamp in the description so you can always jump into the necessary part you need let's now start with step number one which is to get your domain name and web hosting so first of all what is a domain name domain name is basically your website address like Facebook has facebook.com Amazon has amazon.com I have Jim fahaddigital.com similarly for your website you need an address that will be your website name.com and what is web hosting web hosting is the storage space for your website all the images text you will have in your website all will be stored on your own web hosting as you're owning your own web hosting so there wouldn't be any limitation you can run ads you can upload any images or text you can upload any themes or plugins you want you were the in charge of your website so let's now first get our domain name and web hosting so first just click on the very first link in the description below this video or you can go to gym fahadthedigital.com forward slash hosting and this will take you to a special discounted Bluehost page so why Bluehost in my opinion Bluehost is the best web hosting provider I'm a web developer I tried so many other web hosting companies I don't want to mention their name but I personally ended up using Bluehost hundreds of my clients using Bluehost and they never complain about using it if you see my Bluehost account I have hosted tons of websites here and I never get a down time their customer support is really Cooperative in case you need any help and their price is really affordable that's why I always recommend Bluehost so now click on get started here you can see their different plans the main difference between them with the basic plan you can host only one domain you can take their Plus or choice plus plan if you want to host unlimited domains also you can take their Pro Plan if you have millions of visitors on your website already I recommend starting with the basic plan then in future you can upgrade that anytime now let's select the basic plan now we will select our domain name if you already have a domain name that you want to use you can just go ahead here on the right but for now I'm gonna get a new one now here let's try for something like apple.com and click next it says the domainapple.com cannot be used on Bluehost please try a different domain name it should be because we cannot take that because we all know that's Apple's official website so we will be typing our own domain name here and also if you click on the right side you can see dot side.net dot info websites I always recommend to take.com websites because it looks more professional and legit so I'm gonna type here let's say our elementor.com as we are going to make our website through Elementor Page Builder and now click on next it says our elementor.com is available that's awesome and here we need to put our account information I'm putting mine here really fast only to not make you bored okay here you can see the business name field if you don't have a business just keep it blank or put your full name but here is the most important thing that's your email address make sure you put your correct email address because after completing purchase a receipt will be sent to that email address so make sure you put your best email address here all right now scroll down here's the package information and it's automatically set to 36 months and this is gonna be your cheapest plan so yes you're paying for 36 months upfront but it comes out to only around 3.95 cents a month so this is 50 off that's gonna be your biggest discount now what I recommend is to just do 12 months if you don't want to commit to the 36 months or 24 months it's still 33 saving and it's only around 5.95 cents a month and you also have your domain name for 12 months so no more additional cost for your domain for this 12 months and here you got package extras first here is the option for domain privacy having domain privacy is good and I always recommend having domain privacy so no one gets to know who is the owner of the website but for the sake of this tutorial I'm deselecting this one let's click on turn it off because I don't want to hide myself at this moment I want to be transparent so if anyone knows I own this website I have no problem you can keep this one checked if you want not a big deal I'm also deselecting all other options they are offering we actually don't need that they are just upselling their stuff all right now you can see the price is now only seven to one dollar forty cents for the full year including the domain that's awesome and I'm legally obligated to tell you that this is my affiliate link so I do get a little bit of commission off of this but it does save you a ton of money and it helps fund these free YouTube tutorials what I'm doing so everybody wins I really appreciate it and here is the payment information I'm putting my credit card number here expiration date and CVV code then select this one here so that your agreed to their terms and policy now click on submit it says your purchase was a success also you can see here is your receipt they will also send it to your email I'm also waiting to get that email meantime we can create our Bluehost account so let's click on this create account button here 's the domain name that's automatically selected now let's create our password create a really strong password combining capital letters numbers special characters you know how to make a strong password and then retype the password in the second field now check this once again that you have agreed with their terms and policy now click on create account I already have received an email to confirm my purchase so I'm opening my email you will also get an email like this then click here verify your email it's very important so it's not verified awesome now let's login into our Bluehost account with the domain name and password we have just created if you are logging in for the first time you may see a pop-up like this like it says let's create a website Bluehost actually want to help you to make the website just click at the very bottom there I'm not creating a website because I will be showing you everything step by step and Skip all of these pop-ups because we don't need any of that cool we have successfully registered our domain name and web hosting [Music] congratulations so far if you have any questions please let me know in the comment section I will try my best to help you personally so now we can move on to step number two which is to install WordPress and for some reason if you logged out then login again now from left menu bar click on my sites then you can click here create site or here create a WordPress site I'm clicking here sometimes after clicking on my sites you may see these my sites from there just click here on ADD site then you can see here two options one is Limitless customization and another one is fast easy site building as we will be creating our website using an amazing page builder the Elementor page builder that's why we will be selecting this option the Limitless customization so just click here on get started so let's now add a site name and site tagline we can change that anytime so I'm putting a site name gym font production and the site tagline it deserve to be seen now let's click on advanced here you need to put your email address your username and password for your WordPress so I'm putting my email address here WordPress admin username I want to name it Jim Fahad and here let's put a password do you want to see my password I'm clicking here on show so it's abc123 I will of course show you how you can change it later so for now click on next close this browser pop-up now it says where we want to install our WordPress so make sure you keep this directory blank and here is your domain name selected and Bluehost here is suggesting some free plugins but we don't need that let's deselect this all now click next awesome it says WordPress installed successfully now you can copy this informations right here and save that somewhere on your computer where you can access it again later and click here to show your password actually I intentionally gave this an easy password that's abc123 never ever use this kind of easy password I'm showing you shortly how you can change that password we can now sign into WordPress by clicking here but this is not the usual way because because all the time you cannot log in this way I mean from this page this button right so you should get used to signing into WordPress all the time is by going up to a new window and typing in your domain name forward slash WP Dash admin so I'm typing here my domain name our elementor.com forward slash WP Dash admin and click enter so we can see our piss login page here that means what place has installed successfully [Music] sometimes it takes 30 minutes to 24 hours to process this installation and this process is called propagation it basically has to let everyone know that hey this new domain name now exists and registered but we can see our website instantly we actually say it might take 30 minutes to 24 hours but I've been using Bluehost for more than 10 years I always get domain live immediately actually that's another reason why I love Bluehost so now you know that your domain name is working so go ahead and um just gonna type in my name which was the user that I created and I'm gonna type that easy password abc123 you can click this eye icon to show it now let's click on login so right now we are inside WordPress admin panel or WordPress dashboard I will make you familiar with all these options like posts media Pages appearance plugins all these These are super easy super simple but before doing any other thing first of all I want to clean up my WordPress dashboard because personally I love to work in a clean environment so here let's first close all of these notifications I'm closing this one let's also close this close this one as well also you can minimize them like this or you can just open up these screen options and from here one by one you can just deselect all of them like this and again I'm clicking on screen options so right now it looks much cleaner but I wanna make our WordPress dashboard more cleaner so to do it let's now go to plugins to install plugins plugins are basically extra add-on or extra app like thing that extends the functionality of your website but for this website we don't need these plugins because all of these plugins came with by default with the WordPress installation so here we can see all these plugins actually they came with default WordPress installation and plugins are basically the extra app or extra add-on like thing that extends the functionality of your website but for this particular website we don't need any of them so I just wanna delete them to delete it you can select one by one like this or if you want you can select all of them by selecting here and from bulk action first of all we need to deactivate them so here I'm selecting deactivate then click on apply and now I wanna delete all of them so again I'm selecting all of them by checking here now from bulk action click on delete and click on apply the browser pop-up says I'm sure or not yes I'm sure so click on ok now all the unnecessary plugin has been deleted cool similar like this plugins we also have got some pages with default WordPress installation so from Pages if we now go to all pages here we can see some dummy pages but we don't need them again I'm selecting all of them by checking here from bulk action click on move to trash and click on apply so the unnecessary Pages has been deleted as well and now before moving forward I just wanna make you familiar with two terms one is the dashboard and another is front end so right now we are inside the WordPress dashboard because we are the admin of this website so everything we can see inside here this is the WordPress dashboard and if you wanna see the front part of your website then from the top left if I hover over on site name then let's click on visit site I'm opening it from a new tab so basically this is the front part or a front end of our website the whole world can see this portion of our website I know right now it's looking super blind super ugly but we will make our beautiful website out of it and here at the top we can also see a black bar we can see it because we are the admin of the website okay so this is the front end of our website and this is the back end or dashboard or for wordpressive site and now I wanna change that is the password you may remember we have given the password abc123 that's super easy and you shouldn't use that kind of easy password so to change the password from left side hover over on users from there let's go to profile and from here if you want you can change the admin color schemes like you can select the light or you can select the modern or blue actually it depends on you because only you can see this color scheme so I'm just keeping the default one now let's just scroll down from here you can change your first name or last name I'm just writing my first name as Jim and my last name as Fahad and then from this place you can change your display name publicly as so I'm setting just gym for because this name will be shown anywhere publicly on your website for example if you write any blog post on that blog post as the author your this name will be shown and you see this name is basically coming from this place next from under contact info if you wanna change your email address you can change that from this place you can add your other website URL here also you can write something about yourself here then if you want you can change your profile picture I mean WordPress profile picture from this place and then in from under the account management you can save your new password so from here I'm just clicking on set new password now from here if you want you can keep this password but I wanna write a password that's easily rememberable for me so first of all I'm just clicking on hide so you cannot see it and here I'm typing my strong password alright so it says medium but I'm okay with it let's now scroll down and click on update profile all right now I want to walk you through some of the basic settings so from here hover over on settings from there I'm just going to General and from this place if you want you can change your site title also the site tagline from this place and instead of these kind of text like you deserve to be seen you should write here something about your business like if you do web design for your clients then you can just write here the best web design company in Canada like that so that will help you to rank your website on Google search engine alright then you know all these are self-explanatory so if you want you can change your Administration email address from this place and then from here if you wanna use any other language from I mean if you want to change your dashboard language to any other language you can do that from this place but I just wanna keep it to English then if you want you can change the time zone or date format but I just wanna keep the default so let's scroll down and click on Save changes next I wanna do another important settings so from under settings this time I'm going to permalinks and here sometimes you may see the permalink has been set to these plane options but you should always select the permalink structure to this option it says post name because if you keep your permalink structured to plane then your website URL would look something like this you see so your all the blog post or your other Pages link would be something like this so your websitename.com forward slash some kind of business numbers but if you select it as post name then your website Pages or blog post URL would be human readable like this that's why we have selected the post name now scroll down and click on Save changes then the next thing I want to do I wanna install a WordPress theme so to do it from appearance let's now go to themes and here we can see some default WordPress themes but I don't wanna use any of these themes so to install another theme you can just click here on this add new or from here you can just click on this big add new theme button I'm clicking here and from this place you will find tons more options I mean tons more themes themes are basically the look and feel of your website for example if you install and activate this Navi theme your website will look like this if you select this theme your website will look like this but personally I like another theme that says Cadence so if you can't find the theme from this place you can just search it from the search bar so from here I'm just searching for Cadence theme here you go here is the Cadence theme so just click on install and then click on activate then the next thing I want to install and activate our Elementor page builder so to do it you can just go to Gmail digital.com I will put this Pages Link in the description so from the page from under important links here you can see it says get Elementor free version let's just click over there that will take you to the Elementary's official website and here they takes us to their Pro Plan page but we don't need Elementor Pro in this particular website we will be using Elementor free version so now we will just create a free Elementary account so to do it from here click on login and I'm assuming you don't have an Elementor account so just click here on create an account then you know it's super easy you can just use your Google account or you can put your email and password then click on this create my account to create your free Elementor account just go ahead and do that because I already have an elementary free account we will be needing that very soon so for the moment let's just go back to our WordPress dashboard now I just wanna install Elementor page builder plugin so to install that from left if I hover over on plugins from there um clicking on add new and then from here from the search bar here I'm searching for Elementor so here is the Elementor website builder this plugin just click on install now and then click on activate and for the moment you can just skip this survey so from the top right corner I'm clicking on this X all right so Elementor page builder has been installed and activated successfully also from our dashboard we can minimize them also we can close this notification from this place and next I want to install and activate some other plugins so from plugins let's now click on add new actually I just want to install and activate two other plugins number one here I'm searching for elements kit so basically it's this one it says elements heat Eliminator add-ons and templates Library click on install now then click on activate and next I want to install another plugin so click on add new and this time here I'm searching for metform so here you go it says midform Eliminator contact form Builder just click on install now and then click on activate all right so to create our whole website we just need these three plugins one is Elementor of course this is the main page builder then here is elements kit Lite and here is made from plugin next I wanna create some pages so from here Pages let's go to all pages you see right now we don't have any page so to create a new page you can just click here on this add new button okay first let's just close this notification so I'm clicking on this x okay so you can click on this add new also if you want you can click on this adno so I'm clicking here actually all these will be just empty pages for the moment all right you can just get rid of this pop-up because I will guide you how to do that let's just close it and here we can see the full screen mode but I don't want that I don't know why by default it looks like it so I just wanna disable the full screen mode so from the top right corner click on this vertical Three Dots and here I'm just turning off the full screen mode from this place and obviously first of all I want to create our home page and like I said it would be just empty pages for the moment so here I'm creating our home page then from the top right corner click on publish then click on publish one more time right after the home page I wanna create another page so from left side click on add new and this time I wanna create our about page so here within this title field I'm just writing here about now from the top right corner click on publish click on publish one more time next I want to create another page so click on add new and it would be our service page so click on publish publish one more time next click on add new I mean add new and here this time I'm creating blog page click on publish publish one more time and lastly click on add new because you know for sure you want a contact page so here I'm naming this Page's contact and from here click on publish click on publish one more time and later we will also create some single Services pages so for now just have a look the pages I have created so to check all the pages together from under Pages click on all pages here we can see all the pages we have just created the about blog contact Home and Services page and of course I will start from the home page but before starting with the home page I wanna show you here another thing like if I just go to the front end of the website this moment so from the top left corner if I click on visit site from a new tab just have a look on this tab we can see this page here and also we can see a dummy blog post it says hello world why is that because by default WordPress shows blog posts on the home page but I don't want that I want to create a custom home page for that reason we need to do one settings let's just go back to our WordPress dashboard now from here from the left side hover over on settings from there let's go to reading and here you see it says your home page displays um selecting a static page and as a home page I wanna select the empty home page that we have just created and for the Post page I'm selecting the blog let's now scroll down and click on Save changes so if we just go back to the front end of our website and if we just refresh the page you see we can no longer see the blog post and right now the home page we have created a few seconds ago that becomes our default home page cool and I know at this moment this page is looking super Bland super boring but no worries because we will be creating our amazing website by using Elementor page builder so let's go back to our WordPress dashboard and like I said I want to start with our home page so from left side from Pages let's go to all pages and here is our home page so and if you notice you see it says front page here and with the blog page it says post page because we have just set up this a few seconds ago okay so let's start with the home page I'm clicking here on edit and you know I want to create our home page by using Elemental page builder so from Top let's just click on this button it says edit with Elementor I'm clicking here so right now we're inside Elementor page builder here's the fun part begins okay first of all I just want to close the navigator let's close this and this Elementor page builder is super fun to learn and I would say it's self-explanatory so first of all at the left side within this left panel everything you can see all these are Elementary elements or Elemental widgets like here you can see heading elements or heading widgets here you can see the image element or image widget here you can see that text editor widget or text editor element like this also if you scroll down here you can find some Pro plugins so if you want to use all these Widgets or elements you need to purchase Elementor Pro but no worries because in this tutorial we won't be using Eliminator pro version so for the moment I'm just minimizing these Pro widgets from this place other than that you can use all these Widgets or elements from left side then on the right side this is the main canvas we will be creating our whole website within this canvas just by dragging these elements from left side to the right side here and at the top of this canvas here we can see this is basically the header of our website and at the bottom this is the footer of our website this header and footer is basically coming from the theme and you may remember we are using Cadence theme notice I will also talk about this hidden footer later but for the moment let's just focus within this canvas now just have a look how fun it is to create anything within Elementor page builder so let's say you wanna add or insert any heading within your website all you need to do from this lift bar here you can see the heading element or heading widget you just need to drag this heading element from left side to the right canvas here then if you wanna edit this text or heading you can do that from this place from the left side so here I'm just writing Jim Fahad digital now let's say if you wanna adjust its alignment you can do that from this place so you can make the alignment to centered or right aligned like this so I'm just keeping it to centered then if you want to do any styling with this heading you can just go under its style tab from here you see this is a color palette so just click over there you can change its color to any other color like black or you can just drag this color wheel so for example I'm just moving it to the red side and from this place I'm selecting red color so right now our headings color is red then from here from the typography just click on this pencil icon from here if you want you can change the font family and if I click on this family you will find tons of font family from this place for example if you just select this font you see it's instantly changed how cool is that also from here you can search for your favorite font so here my favorite font is Poppins font so I'm searching for Poppins here we go let's let's just select Poppins you see it's instantly changed now from here if you wanna increase or decrease the font size of this heading you can do that from here you just need to drag this to the right side you see the font size is increasing and you can drag it to the left side to decrease the font size very easy and then from here from the front to it let's just open it if you wanna make this heading light or thinner then you can select any lower number like 300 you see it's now much thinner and if you want to make it bold you need to select in a higher number for example I'm selecting 800 it's now looking more Bolder in the same way you can play with the transform style decoration like from transform if you want you can make all it uppercase by selecting here you see all the letters are now in uppercase all right now I wanna show you some other thing like if you just go to under Advanced tab here from this place you you can play with this spacing okay so for example if you wanna add some space at the top of this heading you can do that from this place by using this padding so first of all I'm just unliking by clicking here now let's say I want to add some spacing at the top of this heading so here at the top I'm adding 50 pixel of oops not 500 just 50 pixel of padding top you see here 50 pixel of spacing has been added at the top now let's say if you wanna also add some space at the bottom so for example I wanna add 100 pixel of bottom space so here at the bottom field I'm typing 100 you see 100 pixel of padding has been added at the bottom but for the moment I'm just keeping it to 20 pixel all right now underneath this heading widget I want to add a paragraph So to go back to all the elements or widgets from this left but you just need to click on this Rubik's Cube look like icon so I'm clicking in here and here is the text editor widget I'm just dragging this text editor widget underneath this heading here in this place and again if you wanna change any of this text you can do that from this place then if you want to do any styling with this text you just need to go under the style tab from here you can change the text color for example from this Color Picker this time I'm selecting the pure black color so you see it's instantly becoming black and then if you want you can change the alignment to centered also you can play with its typography similar like the heading so from here you can also increase its size or decrease its size like this you can play with its width like I just want to make it really thin so I'm selecting 200 like this so you see it's super fun and then for example like underneath this paragraph you just want to add a button widget okay so just click on this Rubik's Cube icon and here is the button widget but let's say if you can't find the button widget here you can also search the widget name from here so I'm just typing here button and here we can see the button widget let's just drag this button widget underneath this paragraph here in this place now if you wanna change the text of this button so here I'm just writing contact now then within this link field you can link this button with anything for example if you want to link it with other website you can do that from this place so here I'm just writing my main websites links that's Jim fahaddigital.com oops.com so now if anyone clicks on this contact Now button that will take them to the gym for the digital.com then if you want you can set the alignment from this place I'm just making it to centered and similar like other widgets like the heading or text editor widgets you can also work with its styling all you need to do just go under its style tab from this place you can play with it color so you see its background color is by default green but if you want to change it you can do that from this place so here it says color just open the Color Picker so instead of this green I wanna use red color so I'm just going to the red palette here and I'm selecting the pure red see how easily we can create our website components so here I'm just recapping the common scenario with any of these elements or widgets for example here we have selected this button widget you are getting here three tabs one is content so you can change the text or the link from under this tab if you want to do any styling like its typography or its color or background color you can do that from under the style Tab and then if you want to work with its spacing you just need to go under its Advanced Tab and from here by using the margin and padding you can control the spacing so it's common for any of the widgets so here if I select this text editor widget here you can see you are also getting content style and advanced tab with the heading widget you are also getting content style and advanced tab super easy super simple so this was just the basics or the fundamentals I want to make you familiar with some other cool options so first of all let's just click on this x because I wanna delete this whole thing so I'm clicking here and now before moving forward I just wanna enable few settings from our WordPress dashboard so if you now want to go back to Wordpress dashboard all you need to do from this left bar just click on this hamburger icon and from here click on exit and from this pop-up it's asking where we want to go when we will be clicking all the time on this exit so by default it says this post I have no problem with that so I'm just clicking on apply actually it's not a big deal so I'm just clicking on leave alright so like I said I just wanted to do one simple settings so to do it from here hover over on Elementor from there let's go to settings and then let's just go under this features tab let's now scroll down and here you will find the flexbox container option actually this Flex container model is the future of Elementor page builder there are lots of potential lots of layout possibilities you can possibly imagine to create any kind of website so why should I miss that that's why I just want to turn on this Flex container option now from here you see it says Flex box container I'm just selecting on active let's now scroll down and click on Save changes also here I wanna do another thing from under the elementary settings from this place I just go under this Advanced tab from here you see it says enable unfiltered file uploads I also wanna enable that otherwise it sometimes don't allow us to upload in is VG or Json formatted files so I'm just keeping it enabled let's scroll down and click on Save changes all right let's close this pop-up or the notification from here okay now I just want to go back to our home page so from the pages let's go to all pages and here we were it says home and you see here is a new button added it says edit with Elementor so we can directly go inside Elementor by clicking here so I'm clicking on edit with Elementor and have a look on the left side as from WordPress dashboard we have enabled Flex container option that's why we can see a new widget or element that says container actually this is the game changer option you can do a lot of Thing by using this container element now first let me make you familiar with the container model actually how it works so first of all let's click on this plus icon and from all of these structures you can select any of them but now I'm just focusing on these two this one the first one is basically the column directed container and this one it's row detected container so first of all I'm selecting this column directed container this one and let's say if you wanna increase the height of this container you can do that from this place so here is the minimum height first of all I'm just selecting it in VH VH stands for viewport height so I'm just making it to 60 are let's just make it to 70 or maybe 80 pH and then with this container I just want to add some spacing all around of this container so go under Advanced tab from here from the padding I'm just giving 20 pixel of padding all around this container okay now within this parent container I wanna insert some child container within that okay so to do it click on this plus icon and here on the left side we can see the container widget now let's just drag this container widget within its parent container here and this time we have selected the child container this one first of all I'm making its content width to full width and also for example I'm just reducing its width to 30 percent also I'm making its height to 120 pixel and then I just wanna add a background color with this inner container or the child container so just go under its style tab from here you see it says background type I'm clicking on this classic icon and from the Color Picker let's just select a green color and I'm selecting this light green color like this now I just wanna duplicate this inner container couple more time so to duplicate it just right click over it and click on duplicate and I want to duplicate it one more time so right click here and click on duplicate so here be very attentive because if you just understand this parent child relation you can create any kind of layout by using Elementor page builder so it's very important to understand this fundamental now I'm selecting their parent container this one to select it you just need to select I mean you just need to click on the six dots I'm clicking here let's go under its layout tab and scroll down I'm opening the actually I don't need to open anything here from under the items so here you may remember we have taken this parent container direction as column directed actually this column direction is the default Direction because if I deselect it you see it keeps like this so again to make you clarify I'm just selecting this column directed container Direction then from this align items if I select the Align items to centered this one you see all the inner containers becoming horizontally centered together if I select the Align items to the end or the right they are now all together right aligned horizontally also if I select the Align items to start or the left you see they are becoming left aligned all together horizontally okay so for the moment I'm just keeping the Align items to centered and then I want to make you familiar with this justify content option you see when we were playing with the Align items they will become coming centered left aligned or right aligned horizontally and now if I select the justify content to centered let's just click on centered this time all these inner container is becoming centered vertically if I make the justify content to end you see they are going at the bottom or the end aligned vertically then if we click on the justify content to start you see they are at the top vertically okay I'm just keeping it centered and here is more options like space between so if I select the justify content to space between you see now the first child is going to the top the last child is going to the bottom and the middle child is now at the middle point so if you want you can keep the justify content like this also at the same time you can play with the Align items so if you wanna make this adjustment to the left aligned horizontally then from align items you can select the start like this or and to make it right aligned or centered to keep it centered aligned and then with the justify content instead of this space between I'm again selecting the center option and next I wanna show you another thing so here all these are inner containers so they are basically the children of their parent container now let's say within this child container or inner container if you wanna take any other elements you can do that as well so for example within this inner container click on this plus icon for example here I'm just dragging this button widget within this middle inner container here so now have a look this button widget is within this middle inner container so this time if I select the middle container this one now from under its item E5 set its direction as column actually by default it's column so if I select its direction to column there will be nothing changed see B because this is the default one now have a look if I set the Align items to centered this button is now becoming centered within this container and also if I set that justify content to centered it's now becoming centered vertically as well so each of the element follows its parent rules like these buttons parent I mean immediate parent is this container so it follows its Rule and all these three inner containers parent is this container so all these three follow the rules of their parent container I mean this one's rule also I wanna make you familiar with the row Direction so we already have seen because by default the containers the direction was column directed so when parent direction is set to column their children's appears one after another vertically like this but let's say if we select this parent direction to row so I'm selecting row this time you see now the inner containers are one after another horizontally like this now also the justify content and align items rules also get reversed so now as the direction is set to row based this time if I select the justify content alignment to start you see they are now getting left aligned horizontally and this time if I set the Align items to start they are now at the top vertically so similarly here if I select end they are going at the bottom so it's just the reverse of the column direction also let's set the justify content to centered so basically it's simple like that but for some reason if you can get it just watch the last four to five minutes once again you will understand it properly and you know what I personally don't like these type of theoretical explanation because it would be more fun when we will do all of this in Practical with real images with real text then you will get the real fun out of it so for the moment I'm just deleting this concept area I'm in this explanation area so just click on this x to delete it now we will start creating our website step by step everything from scratch but before starting the process from scratch I want to show you another way because you may see it's a three to four hour long step-by-step tutorial and of course if you want to learn anything in really good way you should of course watch this full three to four hour tutorial but let's say if you don't wanna watch the full tutorial I mean if you don't want to spend three to four hour long time to make your whole website there is another way to create the whole website really really faster for that you can use the kit and to get the kit you can just go to kidpappa.com and the website we will be creating in this tutorial step by step you can get the full website as a kit within kitpappa.com so that's basically this kit it says success creative agency Elementor template kit and not only this kit you see you can get different type of kids from different different niches like business agency restaurant architecture medical beauty salon you can get all kind of Radio website kits from kidpappa.com and also it's a browsing experience is super handy for example I'm showing you another example here is a food or restaurant kit so if you want to see the details of the kit you just need to click here on see details then if you scroll down you can see all the details about that kit here then if you scroll down you will get the installation guide here and here at the Top If You click on this live demo button you can preview the whole website within this beautiful iframe and not only the desktop view you can also check out the responsiveness from here for example you can see the tablet view by clicking here so everything is looking great you can also check out the mobile responsiveness so when you are happy with all the looks all the feels you can take your purchase decision from here so not only with this ifoot kits you will get all these features I mean the live demo showing feature or the installation guide with each of the kits okay I'm just going back to kick Papa's home page because in this tutorial we will be creating this kit from scratch so instead of watching this three to four hour tutorial if you wanna make it really faster then you can just go inside this success kit just click on see details and from here you see you can also see the live demo from here within this iframe you can check its responsiveness from here and just click outside you know the purchase process you can just click on this add to cart and just have a look its price is really really affordable okay so basically after purchasing the kit you will get a zip file like this and I'm showing you really quickly by using the zip file how you can create your whole website within two to three minutes so here I have installed another WordPress here this is just a fresh WordPress installed I have just installed Elementary page builder plugin here nothing else so it's a complete fresh WordPress install with Elementor page builder plugin now here first of all I'm going inside Elementor settings just click on settings so first of all from under settings you just need to go under Advanced Tab and from here you need to enable the unfiltered file options so here I'm just enabling it scroll down click on Save changes and as this success kit is flex container based kit so go inside here and you can just go under this features tab from here you scroll down and here is the flex container option just make sure you are activating it and for this specific kit you also need to enable this nested elements option so from here I'm just activating it as well let's scroll down and click on Save changes now you just need to do one thing from under Elementor this time you need to click on tools then go under import or export kit and here you says import a template kit click on starting Port so here basically you just need to upload the zip file you have purchased from kidpappa.com so basically it's this ZIP file so from here I'm just dragging the zip file within this place here and now make sure everything is checked from this place now from the bottom right corner click on next and then again make sure everything is checked here then click on import so it started importing here the plugins are installed and activated by itself you just need to wait a few seconds or a few minutes actually it doesn't take more than 30 seconds so I'm just waiting for it and it says your kit is now live on your site that's great now just click on this close button now to preview our website from the left top Corner hover over on our site name and I'm opening this visit site from a new tab now just have a look our whole lives site is instantly live so everything is on the right place and you know you can just change all of this content that way you want and to change any of them you just need to click here on edit with Eliminator but before that I wanna show you a whole other pages are placed correctly so if I now go to about page you see it's also live instantly if I go to the services page so everything is on point instantly alright let's now go to the home page so here let's say if you wanna change anything you just need to click here on this edit with Elementor icon or button from Top I'm clicking here now from inside the Elementor page builder okay I'm just closing the Navigator let's see if you wanna change this hidden text to any other text just click over that you can change the text from here for example here I'm just writing our oops our agency is here to help you you see it's instantly changed in the same way you can just click over any of the content for example I'm selecting this paragraph you can change the content from left side I mean from within this field if you want to work with this button just select this button from here you can change the text you can put your own URL like that also if you wanna change any of these elements I mean if you want to change this icon or if you want to change these headings you can do that also if you scroll down from here you can replace these icons with your own clients icon also in this area if you want to change this image just click over this image and from left side instead of this image you can select any other image you can actually upload an image from your computer so it's basically easy like that so not only this website you can just go to kitpopper.com and you can select any of the kit which is suitable for your business or for your clients and you can create the whole website and adjust it according to your need within few minutes so this is basically the fastest way to create a website but like I said in this tutorial my goal is to show you how to create a website from scratch step by step so for the moment I'm closing all these tabs let's close Also let's close the kit Papa tab so here we were is our website is our elementor.com so we were inside the Elementor page builder now let's start our website from scratch step by step okay so we will start by creating our beautiful banner area or hero section but before doing that I just just wanna do some global settings probably initially you can't get while I'm doing these global settings but trust me during the creation of the whole website this global settings will save our tons of time so first place to do the global settings really fast and to do it from left side click on this hamburger icon now let's first go inside this site settings and here first of all I wanna set some Global colors so go inside Global colors and these systems colors are by default I mean these are default colors I also wanna change this text color so from here click on this Color Picker I'm just making here the hex code that's hash 88888 so it's kinda gray color all right now click outside and without these four System colors if you wanna add more custom colors you can add them from here under custom colors I'm just clicking on add color so first I want to use a bluish color so here first of all I'm just naming it to Blue and the color code would be hash three four eight two f f and then I wanna use an orange color I'm clicking on add color first of all I'm naming it to Orange then the color code would be from here hash f8 9a52 alright let's click outside and then I wanna add another color click on add color and this would be our main black color so I'm naming it main black and the color code would be hash 0 B 0 B 0b all right now to save them just click on this update button here and then let's go back by clicking on this left Arrow icon from top left here now I wanna select some Global fonts so click on global fonts and here all these primary secondary text and accent I wanna set the same font family so from here click on this pencil icon here I am setting the font family to the Poppins font so here I'm selecting pop-ins let's now click outside for the secondary one here I'm also selecting Poppins font let's select it click outside with the text I'm also selecting here pop-ins let's select pop-ins and also with the accent here I'm selecting the pop-ins font let's select pop-ins all right now to save it just click on this update button again and now let's go back because I wanna select some typography from here as well so click on typography here again to to just keep everything safe I also wanna use the body's typography as Poppins font so from here from the bodies typography here I'm clicking on this pencil icon and from the font family here I'm selecting Poppins from here you see instantly all these navigation items the footer text everything is getting these pop-ins fonts from here all right now click outside I think we are good to go but I'm just showing you some other options let's say if you want to set some global settings for your H1 that means heading 1 or hitting two heading 3 you can set them from here for example let's say if you wanna set your heading to color always the Branded black color you can do that from here so this time instead of clicking on this Color Picker you can just click on this globe icon so I'm selecting I mean I'm clicking on this group icon and here you will find all the global colors that we have set a few moments ago by the way here you can see some other colors these are basically coming from theme but we don't need them just scroll down a bit more so here is our main black color select it for H2 that means heading 2 so that's it for now um okay with all other settings just click on this update button to save our work then let's go back again now here under layouts I wanna do some settings so go inside layouts so here you see the container padding option because whenever we take any container within the main canvas they get some default padding like 10 pixel or 20 pixel by default but I don't want them because if I want to add any padding with any container I can do that with the particular container so I don't need that Global padding with each container for that reason I'm making the container padding globally 0 pixel also here I wanna do another settings so let's scroll down from here you see default page layout so instead of theme I just want to make it to Elementor full with this one all right let's click on this green update button to save all these settings let's now go back from top left then click on this x by the way I wanna also show you some other options like user preferences so from the top left I'm again clicking on this hamburger icon let's now go inside this user preferences from here and you know you can select your UI theme from here because personally I love to work in dark mode so from here instead of Auto detect I'm selecting the dark mode and panel width is basically this lift burst width so by default it's 300 but let's say if you want to increase it you can just drag it to the right side so you see this left panels width is now increasing but I just want to keep it to default 300 because it helps me to show the main canvas profile on the right side and underneath I also want to turn on this editing handles option so let's just turn it on later it will help you to quickly duplicate or delete any container or any widgets really really fast so make sure you have turned on this editing handles option alright now click on this green update button to save all these settings so our all boring part is over now we will be creating the real website so let's first start by creating our beautiful banner or hero Banner area Okay so first of all let's click on this plus icon and I'm taking these two containers structure this one and I wanna take its high to 100 VH so from here minimum height I'm setting it as VH VH stands for viewport height so I'm just making it to 100 VH so if you have a look it just covers 100 height of our viewport and you are already familiar with these justify content and align items so for the moment I'm just making the Align items to centered so this left inner container and right inner container is now vertically centered within their parent container within here all right now with this main container make sure you have selected this one just go under its style tab because here I wanna add a background image so from under background let's just select the background type to Classic and from here you know you can just select any solid color for example like this red or black or any other color for example this purple color is that purple okay just select any of the color you want but actually you know what I don't want to use in a solid color so I'm just clicking on this clear so it went back to white instead I wanna use a background image so click on this plus icon now just go under upload files and you can upload any image from your desktop just by clicking on this select files by the way if you wanna follow the whole tutorial with me you can use the same images what I will use in this tutorial so to get all the images you can just go to gym for digital.com from there under important links if you just click on this download the images I use in this tutorial you will get all the images so basically after downloading it you will get all these images together here all right now go back inside our WordPress dashboard so this time I'm just clicking here on select files so from here basically I'm looking for a shape background and it's this one it's a slider shape so I'm selecting this one and click on open and then click on insert media I'm not sure if you can see the background image properly or not because it's just this stroke like this here and now I just wanna adjust its position from here so from here from the position I'm just making its position to center right like this all right now with this main container go under its Advanced type because I wanna add some space so first of all um just unlinking the padding because I just wanna add the space at the left and right side so here on the left and right I'm adding 20 pixel of padding alright let's now start working with this lift inner container I mean within this one so here within this lift container first of all I wanna insert a heating widget so click on this plus icon from left side I'm dragging this heading element here and I just wanna replace this text with my own text then let's do some styling with hit quantity style Tab and you know we can now use the global color that we have set so instead of using this Color Picker this time we can just select this globe icon and from here we can use this main black color now from the typography click on this pencil icon and you see each time now we don't need to select the font family from here because we have set the global font family as Poppins font and it's getting from there now the font size I'm just making it to 60 or 65 and let's make the font weight a bit bold so instead of 600 I'm making it to 700 then from here oops let's just open the typography from here I just wanna increase the line height a little bit since the pixel I'm setting it in em and let's just make it one point 3 I think it's too much let's just make it 1.2 yep it now looks much better now underneath this heading I wanna add a paragraph So let's click on this Rubik's Cube icon from here and I'm dragging the text editor widget underneath this heading here and you know to do some styling with it just go under the style tab from here you can make the alignment but by default it's left aligned and it's good for me also the text color this time I don't want to use any Global color just open the Color Picker and the color code would be hash 99da9 so it's kind of a gray color you know now from typography I'm making its font size to 18 pixel and the font weight to 500. all right now just underneath this paragraph or text editor I wanna insert some button but first of all I want a wrapper to wrap my buttons within that container okay so first of all I wanna take a container here so I'm just clicking here on this Rubik's Cube icon and I'm dragging this container underneath this paragraph here so just to make sure this container is within the lift container to make you properly understand it I just want to take the help of the Navigator so you can just right click anywhere of the page I mean anywhere within the Elementor page builder so I'm right clicking here and let's just click on navigator from here now have a look first of all I'm minimizing everything from this place so first of all we can see the main container this one is the pattern container this one now if I open the main parent container let's open it we can see within the main container here is two inner container so first one this one is the lift inner container and the right one is the right inner container now within the left inner container let's open the left inner connection in it from here first we can see here is a heading widget then here is the text editor widget and right after that here is the container widget now within this container if I open it right now it's empty so within this inner container I want to insert some button okay so for now I'm just closing the Navigator I open the Navigator only to show you the inner structures of these containers okay now within this container let's click on this plus icon from the Rubik's Cube icon here I'm just dragging this button widget here within this place and you know you can change this click here with any other text so instead of the click here I'm just writing here get started then within the Link Field you know you can put any link of your own website or any other website okay let's now do some styling with this button just go under style tab from here the very first thing I want to do I wanna play with its typography so click on on this pencil icon I'm making its font size to 16 pixel and here the font weight I'm making it to 600 and then if you have a look you see its background color is kinda green and it's coming from this place so instead of this green I wanna make it our Global blue color so from this globe icon I'm making it to Blue but on Hover I want to make its color as our orange color so just go under hover tab here and here you see the color is basically the background color so from this globe icon this time I'm selecting this orange color now have a look initially it's the bluish color you find a hover over on this button it's becoming the orange color so it's now looking really great also I wanna make their Corner more rounded so from here let's scroll down let's just make the Border radius I'm making it to 20 pixel so they are now more rounded and also I wanna increase their Inner Space so to do that we can play with the padding from here so I'm just making it to 28 pixel but actually on the left and right I want to add more padding so first of all I'm just unlinking it from here so at the left and right side I'm adding 55 pixel of padding right now it looks much better alright now after this button here I wanna add another button or we can set a trigger button so whenever anyone clicks on this button a video pop-up will appear okay so to do it first of all again I'm clicking on this Rubik's Cube icon and this time here I'm searching for the video widget here I'm typing video so here we can see this one is a video widget also this one is a video widget make sure you have selected the video widget that's coming from ekit that means it's coming from the elements kit plugin so I'm selecting this one let's drag it underneath the button widget here now have a look this button is now underneath this button vertically here but I don't want that I want to be up here these buttons one after another here horizontally so you may remember the containers rules okay so I'm selecting their parent container this one let's select it first of all I'm making the direction to row so there one after another horizontally and also if you have a close look you see they are not vertically syntheted right so from here align items I'm making it to centered so it's now vertically centered as well and I wanna increase the space in between these two buttons to do it from here you see it says gap between elements so by default it's 20 pixel but instead of 20 in this case I just want to make it to 40 right now it looks descent all right now the layout looks perfect now I wanna start working with this video your pop-up widget let's just click on this pencil icon from here so here the button is still the button icon I just wanna keep it the way it is and you know what if I now click on this icon just click here you see the video is appearing here within this beautiful pop-up but instead of this video I wanna place here another video of mine so let's just close it and I'm just going to YouTube so I just wanna insert this video so I'm copying this video URL from the browser let's now go back inside Elementor Page Builder and again let's select this button From Here and Now within this field it says URL to embed first of all I'm just removing the existing video URL and I'm pasting the URL of my video now this time if I click on this icon you see my video is appearing here on the beautiful pop-up all right let's close it and this time I just want to do some styling with it so click on the pencil icon again now go under its style Tab and from here open the button style and here if you notice with this icon there is some glow effect and the glow color is kinda blue but instead of that blue I wanna use here our Global orange color so from here this glow color I'm just going to custom I mean this globe icon and from here I'm selecting this orange color so right now the glow color is our orange color I also wanna change this reddish color with our orange color so that's basically coming from this background type so click on this classic icon and from this Global color let's scroll down I'm selecting this orange color so right now this icons color is orange color also the background glow effect color is also our orange color how cool is that all right so we are done with this left container elements let's now focus on the right container so here I'm clicking on this plus icon I just want to insert an image here so from left side here is the image widget let's just drag it within the right inner container here and to select the image just from left side click over here now go to upload files click on select files and I'm selecting this Banner image click on open now click on insert media and here we go okay if you want you can also play with its width so just go on a style tab from here if you want you can play with this width by dragging this bar so the lace the width the image is smaller if you increase the width the image is getting bigger so from here I just wanna keep its width to 90 percent also if I go under content again if you want you can set the alignment from here so if you make it to left aligned you see is now left aligned but instead of left aligned I just want to make it to right aligned like this so we are almost done with our beautiful banner video and I know at the intro you may see within this beautiful banner area there were some floating icons like here and there I will also show you that very shortly and of course I'll also show you how to make it responsive for mobile and tablet devices later and by the way here I want to show you another thing as there is this lift panel here at the left side so we cannot see the real view of our website here if you want to see the real view within the Elementor page builder you can just minimize the bar from left side by clicking here on this icon like this so it's basically the real view of this area or of this Banner so when you create or design anything you should frequently check how it's looking on real device just by minimizing it and opening it like this all right so for whatever we have done to save our work don't forget to click on this green update button here let's now create our next section and that would be our services section all right let's scroll down now from here just click on this plus icon and this time I wanna take the column basic structure so for that reason I'm selecting this container structure and first of all I just want to add some spacing so let's go under its Advanced tab first I'm giving here 20 pixel of padding but at the top and bottom I want to add more so let's unlink it from here so at the top and bottom I'm just adding 60 pixel of padding then within this container first of all I wanna add a heading widget so click on this plus icon and remember this time I won't be use this heading widget this is the elementor's default heading widget instead here I'm searching for heading and here you will find another heading widget and here at the top you see it says e kit that means it's coming from elements kit plugin okay so just make sure you are using this heading widget I'm just dragging this heading widget inside here now first of all I just wanna change these heading content so from here under hitting title I'm just removing this title and here I'm pasting some content so here it says we make designs that lead and inspired and now here with this designs word I just wanna make it focused so to do it we just need to do here one thing before the designs word here I'm just using here curly bracket two times also right after the designs is here I'm using again the curly bracket ending like this right now we can see this designs word become Bolder but we can do any other thing I mean you can just make it any other color or you can do other stuff with this word and also I just wanna make it divided into two lines for that reason just after this designs words here I wanna use a br tag so the writing style would be here I'm just starting the tag and ending the tag and within the tag here I'm just writing BR you see it's basically splitted them into two different lines and then underneath this heading I don't want this border so from here you see it says show border by default it's on but I'm turning it off by clicking here my bad actually it's not this border I'm just making it the way it was so I'm just making it no let's just open this separator option so I'm opening it and you see by default it's turned on so I'm just turning it off from here now I also wanna use a subtitle with it so from here let's open the subtitle and here first I'm just turning it on and I wanted to say other thing like what we do and right now you can see the sub heading is now underneath of the main heading but I don't want that I want this sub heading at the top of the main heading so for the reason I'm making this subtitle position instead of after title I'm just making it to before title so it's now at the top of the main title here then I also wanna add some description with this title so for that here it says title description let's just open it and we need to turn it on so I'm turning it on and now within this field you can write anything so I'm just pasting some dummy text here you see it's very simple all right now I'm just minimizing it let's now do some styling with it first of all I just wanna make all of them centered together so for that reason let's just go under its style tab from here I'm making the alignment to centered and then let's do some installing with the main title so I'm opening the title so the very first thing I want to do you see the merging in between this paragraph and the main heading is too much so I just wanna reduce it from here so first of all I'm just unlinking the margin from here and at the bottom only I'm adding thin pixel of merging then I wanna make this title a little bit bigger for the prison from here typography let's just click on this pencil icon so from here first of all I just want to increase the font size let's just make it 52 pixel then I want to increase the font weight to 700 so it's now looking kind of Bolder also if you have a look there is space between the two lines is huge so I wanna reduce that by using the line height so from here first of all I'm making the line High the variant to em and I'm making it to 1.2 em right now it looks decent and you may remember we have made this designs word focused so to style I mean to do is Style with this designed word from left side let's open the focus title and I just wanna make its color to our Global blue color so from here color let's click on this globe icon and from here I'm just selecting our Global blue color also if you have a look if I know hover over on this title it's becoming black but I don't want that so again from here from the hover color first of all I'm selecting the blue color again but now on Hover let's click on this Color Picker I just wanna make it a little bit lighter so I'm dragging it a little bit left like this so have a look initially it's looking like it and if I hover over on it it's now becoming a bit lighter and then I want to work with this subtitle so for that reason from here I'm opening the subtitle and I want to make its color to our Global orange color so from here let's open this globe icon and from here I'm selecting this orange color also I wanna do some work with its typography so from here let's open the typography from here I'm making its size to 20 pixel and font wet let's make it to 600 or a little less so I'm just making it to 500. cool let's now work with this paragraph So from here I'm just opening that title description and I just want to change its color a bit dim I mean a bit lighter so for that reason from the title description color I'm just making it to our Global text color this one perfect now right underneath this I wanna take another inner container so let's just click on the Rubik's Cube icon from here I'm just dragging this container underneath here and first of all with this inner container I want to make its direction to row then justify content two space between and align items to centered you are already familiar with the justify content and align items but still I will explain it later and in this case I'm just making the wrap value to wrap so I'm selecting this option I'm explaining this wrap a little bit later so now I just wanna give it a background color so now scroll up and let's go under a style tab from here from the background type let's open the Color Picker and I'm giving here hash if three F 7 F A so it's kind of cream color or off-white color and then I wanna make their Corners rounded for that reason from here let's open the border and I wanna add 35 pixel of a body radius all around this inner container also I wanna add some padding all around this inner container so let's go under Advanced tab from here I'm adding padding so let's add here 80 pixel or a bit more I'm adding here 100 pixel of padding so it's looking like it now within this inner container I wanna take a few more inner containers within this place so let's just click on this plus icon and within that I'm just dragging this container here so first of all with this inner container I wanna make the content width to full width and then you can control its width from this place so if you drag it to the left you see its width is now decreasing if you want you can increase that just by dragging it to the right but for now I just wanna keep its width to 30 or 31 percent and then I wanna add a background color with it so let's just go under the style tab from here from the background type let's add its background color as white or we can do another thing let's just clear it so I'm clicking here so initially it would be looking like it I mean it would be transparent but on the hover instead just go under hover so on the hover state I'm clicking on this classic icon and from the Color Picker I'm making its color to white so initially you see it's just a transparent container or transparent card and if I hover over on this card it's become white like this all right now I also wanna make its Corner rounded so for that reason you already guessed it right so just from under border um adding the Border radius to 20 pixel and then I also want to add some Inner Space with this card I'm calling it card because we are using it as card but technically it's actually container but for now I'm just calling it as card so let's just go under as advanced Tab and from here I'm just adding 40 pixel of padding all around of this card now within this card I wanna use the image box widget so click on this plus icon and from here I'm just searching for image box so here you go we will be using the elementor's default image box widget let's just drag this widget inside here within this card and now you know you can change this image from left side here you can change this title from here you can change the description from this field like I said Elementary is super fun it's all self-explanatory so first of all I just wanna change this image so let's just click on this choose image icon I mean image place then go under upload files from here click on select files and from here I'm just selecting this image or this PNG icon so I'm selecting it and click on open now click on insert media and here you go now within this title field I just wanted to say UI ux design and then within this description field I'm just putting here some dummy content then if you want you can play with this image positioning like if you want you can make it to the left align like this you can make it to the right aligned but for now I just want it to the top aligned like this by the way here I wanna mention another thing like here you see I have used some icon or image here if you wonder where to get these kind of Premium looking icons or images for that you can just go to flat icon.com so from here you will find different type of icons so if you're looking for any colorful icon once you will find that if you are just looking for a flat icons like this you will find that or you can search for the icons name from this place for example if you just want to get a globe icon you can just search here by writing globe and hit enter and here just have a look it says 43 000 plus globe icons so from here you can just find the best icons which is perfect with your website design and here with each of these icons you can see here download icon so just click there and download the icon and use it on your website alright let's now go back so here with this image box I just want to do some styling so go under the style tab first of all I just wanna reduce the space in between this image and this heading so from here I'm reducing the spacing to let's just keep it to 5 and then from here you can increase the image width like this or decrease the image width so I'm just keeping it to 27 percent other than that I'm happy with all these settings let's just scroll down and from here I'm just opening this content tab so first of all I want to make its alignment to left so from here I'm setting it to left aligned now from here you can adjust the spacing of the title from here like this it's basically the space between this paragraph and the heading so I'm just keeping it to 10 then you can set the color of this heading from here so I just wanna make it to our Global main black color also you can adjust the typography from here so I'm just making it to 227 pixel and wait let's make it to 700. all right so far it looks good but now underneath this image box I just wanna add a button so from here let's click on the Rubik's Cube icon and here I'm just dragging this button widget underneath the image box here so first I just wanna remove this click here and I want it to say learn more and you know you can add any link with this button let's say if you're a freelancer and if you work on upwork or Fiverr you can just link this button with your Fiverr or upper gigs or if you have another service website you can just link them with that you know there are lots of users and now with this button I wanna use an icon so for adding the icon from this place you can just click here on this icon library and I'm here searching for Arrow icon so here I'm typing Arrow so you can see there are lots of Arrow icons but I just wanna use this right arrow icon so I'm selecting it and click on insert so by default the icon placed on the left side of the text but I don't want that so from here I'm setting the icon position 2 after cool let's now go under its style Tab and actually I just want to make this button as a transparent button so I don't want any background color here so so for that reason the background color I'm just making a transparent I'm just dragging this Bottom bar to the left side so it will become transparent okay so let's just drag it to the very left like this and we cannot see that text here because we need to set the text color from this place and it would be our Global black color that's main black and as it's a transparent button so I don't want this space so from here I'm just making the padding to 0 pixel all right so I'm happy with this card so far now I just wanna duplicate it couple more times so to duplicate it you know you can just right click here and duplicate it and there is another way because we have enabled the editing handles so if I just hover over here on this icon you can click here to duplicate it so let's just duplicate it and I want to duplicate it one more time so click here on the duplicate icon so now just have a look initially it's looking like it and when I hover over on any card the background color becomes white to understand it properly let's just minimize the bar from left side so initially it's looking like it and when I hover over on it it's looking like it very cool and now you know you can just easily change all of these images and text so I'm just selecting this one let's now click on this choose image go to upload files let's select the file and for the second one I'm selecting this one open it insert media and here within this title I'm just writing here web design and with the third one I just want it to say for example branding and let's change the image you already got it right just go under upload files click on select files now from here for The Branding I'm selecting this icon click on open then click on insert media so it's easy like that now here I wanna show you another thing because you may remember with their parent container I mean with this container let's select it go under its layout tab and here I have given the wrap value to wrap this one now if I just disable this wrap from here so I'm clicking here again to disable it now have a look if I just duplicate this one more time let's duplicate it you see all these curves are trying to adjust within the same row but again let's select its parent container this one from under its layout tab if I just turn on the wrap from this place you see right now just after these three curves the fourth one is not trying to adjust within the same row it just is splitted in to the next line so that's basically the reason in their parent container I have enabled the wrap and you know in the same way if you want to add more services you can just duplicate it and you can change the icon change the name change the details you know but for now I just want to keep this three so I'm deleting this this one let's just delete it from here all right so for this Services area looks great now underneath this cream color section I just wanna add some logos of the clients so first of all before the logo I want to add a heading so click on the Rubik's Cube icon from here I'm just dragging the hidden widget underneath here in this place and actually we can do another thing because you see whenever each time I drag The Heading element it's getting the default bluish color so we can change this color globally so each time we don't need to change the heating color so first of all I'm just clicking on this green update button to save our work now to change the global color again let's click on this hamburger icon from the top left go inside the site settings now let's go inside Global colors and here the primary color I just wanna set it as hash 0 B 0 b0b you see it's instantly getting our default black color alright just click outside and click on this update button to save the settings now just click on this x to get rid of the global settings all right it jumps us to the top of the page let's just scroll down and select this one I just wanna change the heading text and you know you can change the text from this place also if you want you can just double click over this heading actually not double click you just need to Triple click over here and you can type here your own heading so here I'm just pasting some dummy text it says we are already build solution for okay so I just wanna make its alignment to centered and you know um making the alignment centered from this place now let's do some installing so go under style tab from here from the typography I'm making a size to 24 pixel and then I'm just making its font width to 500. also I want to add some space at the top of this heading you know you can just go under each Advanced Tab and you can add some margin top also you can do another thing because its previous content I mean its previous child is this container this one so let's just select it go under its Advanced tab so have a look here we can just add some bottom margin with this container so unlink it here at the bottom I'm adding 100 pixel of margin so the space has been created also with this container I want to add some top margin here so at the top I'm adding 20 pixel of margin so right now it's also looking descent all right so we were here we were with this heading so now underneath this heading I wanna add some images actually I want to use the image Carousel so click on this Rubik's Cube icon and here I'm just searching for image Carousel this one is the elementor's default image Carousel so I'm dry in this image Carousel underneath this heading here in this place and here within this image Carousel you can add as many as images you want and here I just wanna show my clients images so I want to use my clients business logos so from here just click on this plus icon and go to upload files click on select files and you know you can select multiple images at the same time so from here I'm selecting this one this one this one this one this one and this one now I want to upload all of them together so I'm clicking on open so all these images are selected let's now first click on create a new gallery now from this place you can just order or reorder the icons or logos for example if I wanna put the Amazon first I just can drag this Amazon to the very first here in this place so when you are happy with the ordering then click on insert gallery and here we go and like I said as it's a carousel so we can see here these dots or The Navigators but actually I don't need them so if you want to disable these dots you can do that from here from this navigation so let's open it you see from here if you just select none so it will be disappeared like this and also we can only see three logos here but you remember we have uploaded more so you can control how many images you want to display in this place you can do that from here it says slides to show so from here I just wanna make it to five so here we can see five logos but I think we can add one more so from here starts to show I'm just making it to six so here at the same time we can see six logos here within the image Carousel and then I just wanna do a little bit spacing with this because at the top I think we need to add some space so go under age Advanced tab first and Link its margin here at the top I'm adding 30 pixel of margin and also at the bottom I'm adding 100 pixel of margin all right now underneath this image Carousel I wanna add another container and within that container we can talk about our self or our business or our agency you know so here's a sneak peek about our agency or our business so first of all let's click on this Rubik's Cube icon and I'm dragging this container underneath this image Carousel in this place so here with this container make sure you have selected this container first of all I wanna set its direction to row because within this container I will be adding two more containers that will be inner container of this main container okay and here I'm also setting its align items to centered you are already familiar with the Align items and justify content concept right so now within this container let's click on this plus icon and here I'm just dragging another container here in this place maybe you cannot see it yet because they have placed at the same place but if I just right click here and let's open the Navigator just have a look this is the parent container this one within that here we have got another container so I just wanna duplicate the inner container so right click over here and click on duplicate now you can see this is the lift container and this one is the right container now first within the lift container I just want to insert an image so click on the plus icon then here I'm dragging the image wizard inside the left container here now to choose the image you already know just click on choose image go to upload files click on select files and I'm selecting this one click on Open click on insert media so it's now looking like it now within the right container okay we cannot see it properly so first of all I'm just closing the Navigator okay now within the right container I wanna add some heading and subheading but if you remember we have already created a heading and sub heading design because if we scroll up a little bit here you see we already have created this heading and sub heading design so whenever you create any design and you want to create a similar thing on the same page or same website you don't need to do the same thing twice okay you can just copy and paste the thing like here if you wanna use the same thing above just right click over this widget like I'm here right clicking and click on copy then let's just scroll down like I said within this right container I want to paste it so right click here and I'm clicking on paste you see it's instantly pasted here how cool is now the very first thing I wanna do instead of Center the line I just want to make it to left aligned so from under its style tab I'm just making the alignment to left now here I just wanna change the main heading so go under content tab from here first of all I'm just removing it and here I'm just writing based online agency since 2023 and also I want to change the subheading so from here open the subtitle field and I just wanted to say our agency also I wanna change this description text so from here open the title description first I'm just removing this one and here I'm pasting some dummy content cool now right after this I wanna add a button and here guess it right we already have created a button earlier so let's just scroll up from here we can just copy this button so I'm right clicking here then click on copy let's now scroll down and right underneath this place so I'm just putting my cursor here in this place then right click here and click on paste you see it's instantly pasted with all these Styles here now just instead of get started here I want it to say learn more and as it's a sneak peek about our company or our team so if you want you can just link this learn more button with your about page and you may remember we already have created an empty about page so for now I just wanna link this with our about page so from within this link field let's just remove the hash first and here if I start typing our page name that's about so here is suggesting our about page because it is about and also right side we can understand it's our about page so let's just select it you see it's automatically getting the URL that's https forward slash forward slash then our website name forward slash about that's basically our about Pages link alright now next I wanna create our portfolio section so to check that you already guessed it right so whenever you want to create any new section you just need to click on this plus icon so I'm doing the same I'm just clicking on this plus icon and here I wanna take this column directed container so I'm selecting this structure now let's go under this style tab because I just wanna give it a background color so from the background type I'm selecting the color that's hash if three if seven if a so it's the same cream color and with this background color I also wanna add some PNG background image so from here let's click on this image go to upload files click on select files so from here I'm just selecting this one it says project shape so let's select it click on open and let's insert it actually at this moment we cannot see the background properly but when we will have more contents it will be more visible because we will get more height in this container but for now I also wanna set its position so from here I'm making the position to let's say top right and I don't want this PNG image to be repeated so from here I'm just making the repeat to no repeat then similar like other containers I just want to add some spacing so let's go under Advanced tab from here first I'm adding 20 pixel of padding all around now let's unlink it because at the top I want to add more so here I'm adding 120 pixel at the top and 100 at the bottom okay so similar like before here I wanna reuse the heading widget so from here let's scroll up just right click here then copy it and scroll down within this container right click here and click on paste but here with this I don't want this description so from here open the title description and I'm just removing the description from this field and here instead of our agency so I'm just opening the subtitle here I want it to say our Pro objects and also with the main heading or main title let's open it and here I just wanted to say creative work now here my main goal is to display all our recent portfolios or our recent projects and I want to display all the recent projects in a filterable gallery or a filterable tabs so to do that we just need to enable one option first so whatever we have done to save it just click on the green update button and then let's just go back to our WordPress dashboard and you are already familiar with all these like how to go back to Wordpress dashboard right so just click on the hamburger icon then click on exit now from WordPress dashboard just hover over on this Elementor from their click on settings then go under this features tab here and you may remember you have turned on Flex container from this place so just right after that here we can say nested elements so from here just click there and click on active let's now scroll down and click on Save changes all right now we can go back inside Elementor again so from here let's go to Pages 12 pages and here is the home page now I'm clicking on edit with Elementor all right so here we are let's just scroll down and right under this heading I wanna use tabs this time okay so first from here let's click on the Rubik's Cube icon and here I'm searching for tabs and we will be these steps widget this is the elementor's default tabs let's just drag these tabs underneath this heading here now first have a look on the tab items okay so you can change the tabs name from here just click on that and you can change the tab name for example here I'm writing just UI ux let's now minimize it then if you wanna delete anything you can just click on this x Also let's click on this X and then if if you want to duplicate anything you just need to click on this duplicate icon and also here instead of UI ux here I'm just writing for example web design let's minimize it and I'm just duplicating it one more time and here for example I'm just writing branding so in this way you can add as many as tabs you want now here underneath you will find some settings like Direction justify and align title so here by default the direction is set to this one top but if you want you can make it to bottom or right or left aligned like this so I just wanna use the lift aligned one then for the justify you can use the centered one or the end one but I'm just keeping the default start one also if you want you can control the width of these tabs like from here if you just drag this width you see the tabs are now getting bigger in width so I just wanna keep it width to 22 percent and then align title so right now you see it's centered aligned but I just want to make it to left aligned like this alright let's now do some quick styling with these tabs so go into style tab so here we can see if I hover over on any tab is getting green color and the active one is also getting the green color but if you have a look the green color is not matching with our color combination of the website so for that reason I just wanna remove this green color so here on the normal State layers just keep it like this but on Hover I just wanna make it white so from here from the Color Picker I'm making the background color to white and also for the active state so right now the ey ux is active so go to active State here I'm also making the background color to white then we need to change these titles color so to do it from here let's scroll down and I'm opening the titles so on the normal State and on Hover State okay so I'm just going under hover state so on the hover state I'm just making it to our default text color so if I just hover here it's getting the default text color and and on the active state I'm just making it to our Global black color so I'm selecting the main black color and from the typography I just wanna make them a bit Bolder so from that typography I'm just making the font white to 600. all right now here this tab is really interesting with the nested elements so I'm just giving you a quick example so here first with the first option I mean within the UI ux let's click on this plus icon actually you can insert anything with within this place so first I'm just clicking on this Rubik's Cube icon from here I'm just dragging an image widget within here so let's choose an image for example I'm selecting this image click on insert media and now I'm just clicking over this web design one and within the web design tab area let's now click on the Rubik's Cube icon again and here I'm dragging the image widget in this place here let's select the image and for the second one I'm selecting this image click on insert media now have a look if I click on UI ux we can see this image and if I click on web design we can see this image so not only any single image you can insert anything under any tab you can design multiple widgets you can design multiple layouts actually you can do here Limitless work you can do lots of creativity here okay so first of all I'm just deleting this image from here also let's go under UI ux tab also I'm deleting this image from here so now let's start with the ey ux tab okay here first I wanna take three columns so first of all let's just click on this plus icon and from here I'm taking these two container structure so select it and basically here I want to have three columns so for that reason I'm just duplicating one of the containers from here so it's now divided into three containers so here let's now start with the middle one because if we create anything with the middle container we can just duplicate them to the left and right container so here I'm starting with the middle container let's select this container go under its style tab because I just want to make its background color to white like this and also I want to make its Corner rounded so from here let's open the border and here I'm adding 35 pixel of Border radius now here within this container I wanna use image box widget so click on this plus icon and from here I'm just searching for image box but this time instead of the elementor's default image box widget I will be using the image box it's basically coming from elements kit so let's drag this widget from left side to this middle container here now you know you can just change this heading from here so I'm opening this buddy from here and I'm inserting a title here then within the description field you can write any description about this specific project then if I open this button field you can work with this button like instead of learn more here I just wanted to say live preview and you know you can change this image from the left side so I'm opening the image tab let's select it go to upload files click on select files so I'm selecting this image click on open and let's insert this image all right it looks okay we can do some styling with it before that I just want to add an icon with this button so let's open the button field again and here I just wanna insert an icon so from here I'm just searching for external icon I'm selecting this one let's insert it and you know I just wanna position this after the text so here I can position I'm setting it to after all right let's now do some styling with this image box so it's scroll up go Android style tab so let's first open this buddy option from here buddy means basically this area so here I just wanna add some padding so to add the padding we can do that from this place so I'm adding 20 pixel of padding here but I think we can add more at the top and bottom so let's unlink it at the top and bottom I'm adding 40 pixel of padding then here with the title you see the default margin bottom is 20 pixel but instead of 20 we can add here 15 oops actually we can just keep it like this so here first of all I'm unlinking it and only at the bottom I'm adding 20 pixel of a bottom space then I just wanna increase this heading size so from this typography let's open it I'm just making the font size to 24 pixel all right now with this description so from here I just wanna change its color to our text color so from this color let's open this globe icon I just want to set our Global text color this one and here I also want to sync the design of this button so from left let's open this button tab first of all I just wanna make the font width a bit Bolder so from here from the typography I'm making the font weight to 700 and then I just wanna make its background color to white so from here background color let's just make it to White and then the text color I'm just making it to our Global blue color and you know on Hover I just want it to be reversed so on Hover I'm making the text color to white color and then the background type let's set the color we can actually set the color from our Global color so it would be our blue color also I wanna add a border with this button so so from this place I'm just opening the Border type to solid and let's give it a one pixel of width then the Border color let's also select the global blue color oops we cannot see it because I have done it under hover so under hover we can just remove it so I'm just making it to none so under normal stage so here I'm making the Border type to solid and here I'm giving the Border width to one and you know the color we can just give it to our Global blue color then let's add a little bit of a border radius maybe 20 pixel yep right now it looks great also we can see the beautiful hover effect cool and here the very last thing I also wanna change this hidden color so from here let's open the body again and here is our title and from here we can change this color to our Global black color this main black all right now I just wanna duplicate this inner container so let's duplicate it and here I'm duplicating it one more time and the left one is empty so I'm just deleting the left inner container Also let's delete the right empty inner container and here you know you can change all these images and this title like with this one just click over it and from here I'm changing this image go to upload files click on select files for the second one I'm selecting this image click on open let's insert it and only to make understand here instead of UI ux1 this time open the body and here I'm writing UI ux 2 and with the third one here first open the body here I'm writing eyu x 3 and let's also change the third one image so from here go to upload files click on select files and from here for the third one I'm selecting this image let's open it and insert it as well so here under you UI ux category or ey ux tab we can see these three projects but here I think we can add some space in between this curves so to do it just right click over here and open the Navigator because here without Navigator we cannot find their parent so just have a look on the Navigator here so first of all this one is the first container let's select it so this is the left one I'm minimizing it and then this is the second one or the middle one I'm minimizing it as well and this one is the third one I'm minimizing it as well so these three containers parent is this one so it says tab 1 Let's select it now from this tab one just have a look on this left panel you see the gap between is set to 0 by default but here instead of 0 I'm making it to 20 pixel so here it gets 20 pixel of space in between of this in are containers cool all right let's now just close the navigator and here I wanna show you one tricky thing like we have worked under UI ux tab right now if we go under web design tab you see this is empty so if you wanna create anything like we have done under UI ux you need to do that here from scratch right but I don't wanna do that how we wanna work smartly right for that reason first of all let's just go under content tab of the tabs widget from here first of all I'm just deleting this web design and branding tabs so let's delete it and also let's delete this one now we only have this UI ux tab so this time if I duplicate it it will be duplicated with all these inner containers you got it so let's just duplicate this UI ux and also I'm duplicating it one more time now have a look if I go under this ey ux we can see all of them also under this ey ux I mean within this second tab we can see all these elements but to make you understand more easily instead of this UI ux let's now just rename it to web design and the third one I'm just naming it to branding for instance and here under web design category or web design tabs so if I click here on this web design we can see these three so let's just select the first one here instead of okay just go inside body instead of UI ux here I'm just writing web design one or just we can write web one then with the second one let's go inside your body and here I'm writing web 2 with the third one here go inside the body here I'm writing web 3. now you will understand it properly when I'm clicking on ey ux you see all these are Under UI u x that means all these are ey ux projects now if I click on web design you see all the three elements are changing so all these are web design projects in the same way you can just go under branding Tab and here instead of UI ux we can just write here branding one now select the second element from here go to Buddy and here I'm writing branding 2 with the third one here I'm just writing branding three so not just these dummy names you can change all these images under branding categories you can change all these Live Links so when people go under web design tab they can see your web design work so you can change these images with your web design projects images you can add the live preview Links of your web design projects you got it right actually this nested elements make our life more easier so we're done with the tabs but now I just wanna adjust this heading spacing so let's just select this heading now go under its Advanced tab first of all here I'm giving padding value to 0 and now here I wanna show you another thing okay first of all I'm unlinking it like you see we can give the padding value in pixel or em or percentage or REM but also there is another option it says custom so let's just select the very last option so let's say if you wanna use anywhere pixel formatted padding or anywhere percent padding you can do that in the same field for example here at the top I'm giving here 0 and then here at the bottom I'm giving it to 40 also we can mention pixel or percentage so here I'm giving 40 pixel so here underneath for the pixel space has been added and on the left side I wanna add 2 23 percent of padding so here instead of pixel I'm writing 23 percent so this heading goes 23 percent from the left side cool let's now scroll down now I wanna create our next section and it would be the testimonial section so let's first click on this plus icon and similar like before I'm taking this column is structured let's select it now go under a style tab from here I'm just giving it a solid color and that would be hash 1a1c1e so it's basically a dark color and combining with it I also wanna use a PNG image so from here let's select the image go to upload files click on select files and from here I'm selecting this one it says testimonial shape so I'm selecting it let's open it and then let's insert it actually it's a very sharp curve so you cannot say it yet but when we will have content within this container you can see that properly but of course we can do the positioning from here at this moment so I'm setting the position from here let's set it to top right and also see like before I'm just making the repeat to no repeat then I also wanna add some spacing with it so just go on the advanced tab from here first of all I'm adding 20 pixel of padding then let's unlink it so here at the top and bottom I'm adding 100 pixel of padding now again here I just want to copy and paste The Heading element so from here scroll up we can just copy this one again so from here right click and copy it let's scroll down within this container right click and click on paste but here I don't want this sub heading also I don't want the description so from here I'm just removing the subheading we can just turn it off also the title description let's open it we can turn it off from this place and here as the background color is black or dark so I wanna make its color to white so let's select it go under its style tab from here open the title and I just wanna make its color to white color then instead of this text go under content here I'm pasting another dummy header or heading and here just before this hour I will be adding the brick tag so it will be splitted into two different lines so here before the hour here I'm writing the beard tag so now this our customer is splitted into the next line all right now underneath I wanna take another container I mean inner container so if I just scroll up you may remember we have created this container a few moments ago so if we just select this container you may remember all of this is things like we have set the direction to row we have made the justify content 2 space between we have made align items to centered also we have used wrap I also have explained how this wrapper works and why we use wrap so actually I wanna use the Sim method here so I don't want to explain everything so I'm quickly doing it just stay with me you can understand it properly so here right after this heading let's click on the Rubik's Cube icon and here I'm dragging this container here underneath and like I said I'm making the direction to row also I'm making the justify content value to space between and here I'm making the wrap value to wrap now within this container I wanna take a few inner containers so from here let's click on the Rubik's Cube icon from here I'm just dragging this container within here and similar like before just right click here open the Navigator so we can just make sure we have selected the inner container so right click here and click on duplicate so here let's first select the first inner container this one now from here I'm making its content width to full width and let's set its width to 48 percent then from here I'm setting the Gap to 15 and also let's go under its style tab because from here I'm giving its background color to pure white color then we can add some border radius to make their Corner rounded so from the border here I'm adding 20 pixel of Border radius then let's go under Advanced tab because here I just wanna add some padding I'm giving here 40 pixel of padding actually I just wanna use this padding on the right bottom and left on the top I don't want that so unlink it and here at the top I'm making it to zero and also I wanna add some space at the top here so I'm just unlinking the margin and here at the top I'm adding 60 pixel of margin now here I wanna show you another interesting thing you may see here within its parent container we have taken this container so this is the first child of this parent container and this is the second child of this parent container so we have done some styling with the first container like we have made its content width to full width we have set it with 248 percent also we have given some Gap also from under the style tab we have given the Border radius we have given the background color so now if you want to do the same thing with the second inner container you don't need to do that from scratch there is a simple way so make sure just select the first container here right click click on copy and this time just right click over the second inner container here and click on paste style remember not on paste just click on paste style so is instantly get the same style from the first container okay now we can just close the navigator and here we can do some I mean we can insert some elements within this container so let's click on this plus icon first of all I just wanna insert an image here so let's choose the image go to upload files click on select files and from here I'm just selecting this one actually you can use your real clients images here I'm just using an adverted image so I'm selecting this one click on open then click on insert media now here first of all I just wanna make its alignment to left aligned now go under the style tab I just wanna give it a width but not in percentage I'm giving it in pixel and let's make it 85 pixel now with this image I wanna use a border so from here let's select the Border type to solid and here border with I'm giving it to 10 pixel and then I'm setting the Border color as white color actually if I make it white at this moment you cannot understand why I'm doing this so for the moment let's just keep it to Black now have a look I just wanna increase the Border radius value to 100 so that will make this border fully rounded okay so from here I'm setting the Border radius to 100 now my goal is to push this image to the top in this place for that reason we need to add some negative margin with this image so let's go under Advanced tab from here unlink the merge in and here I'm just adding negative actually if you wanna use any negative value so you see by default it stays on 0 but if you just click on this down arrow here so you can make negative value from here so I just wanna make it negative for 31 pixel so it's now here at the top and now we can go under the style Tab and here we can make the Border color from black to white it looks really cool now underneath this image I wanna use a heading so click on the Rubik's Cube icon from here let's drag this heading widget here and I want it to say James Cooper actually it's a real name of my client and just go on a style tab because I'm making its font size to 22 pixel also the font weight to 700 then you can just simply duplicate this Heading by hovering over here and let's duplicate it and here instead of James Cooper I just wanted to say for example early Mentor expert or maybe product designer and then you can adjust its typography from under here so I'm just making a text color to our Global text color and from typography let's make it a little bit smaller so from here I'm making its font size to 14 pixel and font width let's just make it to medium 500 then right after the roll I just wanna put the real testimonial or review so let's just go to the Rubik's Cube icon here I'm dragging the text editor widget this one right underneath this heading here and you can paste your clients Real reviews here so I'm pasting here some dummy text and you know what I just want to make its color to our pure black color so from under style tab let's just make it to our Pure main black color alright so we have made one you know you can now just simply duplicate this inner container so I'm duplicating it let's duplicate it couple more time and I'm duplicating it one more time and also this one is empty so we can now delete it from here and you know you can now change all these headshots all the name all the occupation all the real reviews from this place for example I'm just selecting this one go to images go to upload files click on select files and from here you know you can upload all the images together so I'm selecting this image and this image let's upload them together so for the second testimonial I'm selecting this image click on insert media and for the third one let's select another image so here for the third one I'm selecting this image click on insert media so in this way like I said you can change all the content by yourself alright so far we have done almost everything with the home page so here is the testimonial area here is the services or actually it's not Services it's the projects or portfolio area and here is the about agency area here we have done the services area and here at the top we have created our beautiful banner area now if you remember on the tutorials intro you have seen some floating animations here and there with the whole website and this is the time I will show you how to do that very very easily so first of all actually we need to go back to our WordPress dashboard so for whatever we have done to save it just click on this green update button to save our work and then we will go back to our WordPress dashboard so from here just click on the hamburger icon now click on exit and now we will go to our theme customizer okay so to go to the Sim customizer from left if I hover over on appearance now from here you can see customize so I'm just opening this customize from a new tab so just right click here and click on open it I mean open the link in the new tab so here is the theme customizer is opening actually I will talk more about the Sim customizer later but right now I just wanna do one thing from the Sim customizer because if I now scroll down I just wanna open this additional CSS field so here actually I will be adding some CSS code but no worries you don't need to know a single line of CSS because I already have written the code you just need to copy that and paste that within this field and now you may wonder why I'm doing this within the theme customizer not inside of the Elementor page builder because if you want to use any custom CSS within the Elementor page builder then you need to have Elementor pro version as we're using the elementary free version in this tutorial that's why we are using the theme customizer okay so here is the custom CSS input field now to get the CSS snippet we can just go to gymfaddigital.com and here from this page from under important links let's scroll down a bit more here you can see it says floating animation CSS actually it a bit chunk of CSS so you just need to copy this whole CSS Snippets don't copy also these Innovation classes this text not that just copy whatever within this area Okay so from here I'm just selecting the CSS snippet let's select it until this place I'm copying it now go inside that theme customizer and I will be pasting the code within this field so put your cursor here and I'm pressing command V so it's not pasted here inside actually this is the first step to enable those floating icons but you need to do this thing first we have just put the custom CSS snippet I already have written that for you so to save it just click on this top publish icon and actually we can now close this customizer by clicking on this top left X let's now go inside the Elementor page builder again so from Pages let's go to all pages here is our home page now I'm clicking on edit with Elementor so now the First floating image I will be adding within the main Banner area so that's basically this first container so first of all I'm selecting this container now here I wanna show you one thing first just right click over this container click on Navigator so if I open the first container I'm in this Banner areas container and here within this one is the lift container and this one is the right container but now I will be adding an image which will be at the top of these two containers I mean in this place so to do it first of all I'm selecting the main container let's now click on the Rubik's Cube icon and here I'm dragging an image element okay first of all I'm just dragging this image element at the top of this place here but you see this image is going under the lift container here I don't want that I want to drag this image at the top of this container so I'm dragging it here in this place so we can now minimize the lift container here so you see the structure here is the parent container here we have got our new image widget and here this one is the left container and this one is the right container okay so let's now select this image and I wanna upload another icon for that so go to upload files click on select files for the First floating image I wanna use this one so I'm selecting it click on open now click on insert media we can now see this image here you see it's little tiny image here and actually now I wanna set its position to Absolute to do that let's now go under Advanced tab from here first of all let's set the position to Absolute now you see it's at the top left corner here because the default absolute's position is from left side it would be 0 and from Top it would be 0 so it's at the very top left corner but now we can control the horizontal orientation and vertical orientation from this place so first of all the horizontal orientation is set to from left okay let's keep it like this but here the offset instead of pixel I'm setting it as percentage and I'm just giving it four percent from left side so if you just increase it you see the higher the percentage is is moving from left the more but I just want to keep it to four percent and then from Top also I'm making it in percentage from Top I'm making it 10 percent so it's pushed 10 percent from Top also here with the Z index value I just wanna use a negative number so here I'm putting negative five or nine or we can explain about this Z index value later so for now I'm just keeping the index value to the default and now here's the final thing we need to add a class name with this image then it will start animating and I also have written the class names for you so if I go again to jimfad digital.com just after the CSS snippet if I scroll down here you see I have written here three class names so first of all I'm just selecting the first class name this one let's copy it go inside Elementor oops not here here so I'm just moving this tab here okay so now within this CSS classes field I'm pasting the class name here you see it starts moving like this and just focus on the moving animation the way it's moving so as I have used this class name so it's moving in this movement but instead of this class name let's just go back to gym for digital again so instead of this class name if I now use the second one so let's just copy the second class name go inside Elementor and first I'm removing the class name we have put first now I'm pasting the second class name here you see now it's moving in a different manner so you can just play with all of these class names which is suitable for you you can use that so here instead of the second one I'm removing it again go to gym for the digital.com I just wanna use the first one so I'm copying it again go inside Elementor and I'm pasting the CSS class name here because I like this animation more okay so I wanted to talk about another thing that's the Z index so if you have a look you see this icon is now moving over this heading why is that because this image is the index value is bigger than this heading but I don't want that I want this image moving just underneath this heading for that reason we need to set the Z index value of this image lower than this heading so from here I'm setting is index value for example I'm just setting it to 5 and now we need to set the Z index value of this heading something higher than 5 okay so now I'm selecting this heading widget just go under its Advanced Tab and here I'm making its index value to 7. now just have a look now the icon is going under the heading not over the heading you got it right all right now I wanna add another floating icon here so to do it let's just select the image which is floating right now so I just wanna duplicate this image first so from the Navigator I'm right clicking here and let's duplicate it and with the second one let's change this one so I just wanna change this icon with another one okay I'm going to upload files click on select files and for the second one I'm just selecting this one let's select it now open it and insert it here and you know what I just wanna change its position so go under Advanced tab from here as we have duplicated the previous icon so it gets all the horizontal or vertical values from the first image but I wanna change them so for the second image I just wanna set the horizontal position from right and from right I wanna set it to 47 percent then vertical orientation for from Top is correct and I just wanna make it to 32 percent and actually here at the horizontal offset we have given it in pixel make sure we have set it in percentage so now we can see it here and you know it's now this icon is now moving over this image so we need to increase the Z index value of this image that should be anything more than five so now I'm selecting this big image now go under its Advanced tab also I'm setting its index value to anything higher than 5 so it could be 6 or 7 or 10 anything so I'm just putting here 7. now you see the icon is now moving under this image so all over the banner area is now looking really great so to get the real feel I'm just closing the navigator also I'm just minimizing the bar from left side so you can have a proper look you see over all these moving elements make our Banner area really really cool all right let's now open the bar from left let's now scroll down because I wanna add some more floating icons over the website so this time I'm selecting this container probably we have selected the lift container so for that reason actually I use all the time the Navigator okay so you can just right click anywhere I'm just right clicking here and open the navigator from here and like I said you see we have actually selected the lift container but I wanted to select the their parent container this one so here just click on this Rubik's Cube icon and similar like before I just wanna insert an image so here I'm dragging this image here at the top of this image in this place and again it inserted within the lift container but I don't want that I just wanna moving it at the top of the lift container here so I'm minimizing the lift container so this is the lift container this is the right container and above this left and right container here we have got our image so this image is also now immediate parent of their parent container all right so let's select this image again so I'm just choosing the image now let's go to actually here we have got the image so I'm selecting this one click on insert media you see here is the little tiny image and we can now change its position so go under Advanced tab from here first I'm making its position to Absolute now I just wanna set it the horizontal orientation from left I'm making it percentage and let's set it to 47 so here it is and we can now go to gym for the digital.com and I just wanna use this third class name so I'm copying this class name from here it says rotate me so you can understand what it will do so go inside Elementor and here within the CSS classes field I'm just pasting the class name so you you see it started rotating here so I I really like it then you know I just wanna use some other floating icons so from here just right click here and duplicate it so here with the second one let's change this one go to upload files click on select files and this time I'm selecting this page icon click on open now click on insert media and you know of course I wanna change its position so go under Advanced tab from here I wanna make it three percent from left and this time from bottom I'm making it in percentage and let's set it to 45 percent so here we can say it and you know what to do so I'm just setting its index value to 5 and this image I'm just setting its value to higher than that that would be seven so now this icon is moving underneath this girl's image and also I don't want it to be rotated like this one so I also wanna change the class name so from here I just wanna use the first class name let's select it go inside Elementor and here with this image so that's basically the second image this one from under its Advanced tab I'm just changing its class name first I'm removing this rooted me and I'm pasting the new class name so it's now moving in a different manner you see it's moving like this and here I wanna also add another image so from here just right click here now click on duplicate let's select the image so from upload file select file for the third one I'm just selecting this image now click on open actually it's not image it's an icon okay just insert it and now go on the advanced tab I also wanna change its position so it would be from right and again I'm making it percentage and it would be 12 percent then from bottom it would be 19 so you can see it here and you know as it's moving over this heading area or this right container you can just increase the Z index value of this right container so I'm just selecting this right container go under its Advanced tab from here I'm selecting is the index value to 7 so it won't go over this right container element again and for this one I wanna use a different class name so I'm selecting this one from the Navigator here now go to gym for the digital.com and for that I just want to use the second one so I'm selecting it now go inside Elementor and from here scroll down instead of this class name so I'm removing it and pasting the second class name here see all of them are animating in a different way this one is a different way this this one is moving in a different way and this one is spinning here like forever okay so let's scroll down I just wanna add one more icon I mean floating icon here so let's select this container so here within this container let's open it here I wanna insert an image so let's click on the Rubik's Cube icon from here I'm just dragging this image widget here at the top so you see it just sit over this heading widget so we don't need to move it anywhere just select the image and we can use this same image now insert it go under its Advanced tab similar like before I'm setting its position to Absolute and I wanna set it as from right I mean for for the horizontal orientation let's set the offset in percentage and I'm setting it as 33 percent and then the vertical orientation let's set it from top and I'm just making it to 15 percent also I wanna set that class name from here so this time I want to use the first one one let's go inside the Elementor and paste the class name within this field and you know the Z index term so here I'm setting the Z index value to 5 and then other elements is index value for example this heading so just go under Advanced tab I'm setting a z index value to 7 also with this container so it cannot go over this any time for that reason to keep save just select it go under its Advanced Tab and I'm adding here the higher's index number again so I'm putting here 7. cool let's now close the navigator and so far whatever we have done with the home page to save it let's now click on this green update button so we are almost done with the home page now we just need to check how our website is looking on the mobile device and tablet devices which means we just need to check the responsiveness of our website and by using Elementor page builder making any website or web page responsive is super easy so first of all if I want to check how our website is looking on tablet device then from here you can see a responsive mode icon I'm just clicking there now here at the top we can see three icons one is desktop which we already have made and then here's the tablet icon and here is the mobile icon so first I'm going to the tablet device so here right now our website is looking like it on tablet devices so let's now start from this Banner area so in the banner area you see everything is looking great but I think we just need to reduce the font size of this heading so first of all I'm selecting this heading widget now let's go under is style Tab and here I'm opening the typography now have a look here on the side we can see a little tiny tablet icon so only for the tablet device I wanna reduce its font size to 40 oops 46 pixel so have a look this 46 pixel of font size only be applied on the tablet device if we go back to that desktop device you see it's now the bigger font size like before and if we again go back to the tablet device you see it's only getting on the tablet devices so on the tablet device the banner area looks great let's now scroll down in the next section we can also reduce the font size of this heading so let's select it only for the tablet device go under the style tab from here the title let's go to its typography so here only for the tablet device I'm making its font size to 42 pixel instead of 52 pixel all right let's now he scroll down you see it looks kind of messy so first of all I'm selecting their parent container this one and let's go under its Advanced tab on the desktop we have given here 100 pixel of padding but on the tablet device I'm reducing it to 20 pixel of padding so right now it looks decent but also I wanna reduce the padding of this inner container so I'm selecting the first one go under its Advanced Tab and here I'm making the padding to 20. let's do the same with others so I'm selecting the second one go under Advanced tab I'm making the padding to 20 pixel also with the third one go on the advanced Tab and I'm making the padding to 20 pixel as well right now this area looks great on tablet device next let's scroll down everything is looking great but we cannot see the client logos so just click over this widget and here on the tablet device instead of 6 I wanna display four logos so I'm selecting four now at the same time we can see four logos only on the tablet devices all right let's now scroll down actually we also want to reduce the size of this heading so again just select it go under its style tab open the title and from the typography I'm making its font size to 42 pixel so right now it's also looking great on tablet device let's now scroll down here everything is looking great but similar like before select it go under the style tab open the title and here I'm making its font size to 42 pixel and here you see this area is looking kind of busy so for that reason first of all I'm selecting it this is basically the tabs I mean Elementor tabs so here on the left side if you have a look it says responsive settings so I'm opening it and here the break point instead of mobile I'm just setting it to tablet so on the tablet device it's now looking like it so if I click on web design the web design work will go under this web design tab if I click on branding The Branding projects go under this blending tab so on the tablet device it's now also looking great now let's scroll down here we have got our testimonial area so similar like before just select it go under its style tab from the title let's open the typography I'm changing its font size to 42 pixel other than that everything is looking great by the way don't worry about this footer and about this header because we will work with this header and folder later now I just wanna check how our website is looking on mobile devices so from Top I'm clicking on mobile so here on the mobile device the banner area looks kind of busy so we need to add some space at the top and bottom so let's just select the main container I mean the parent container now go under its Advanced Tab and only on the mobile device I wanna reduce the padding so here first of all I'm making the padding to 20 pixel but now let's unlink it because at the top I want to add more so here at the top I'm adding 60 pixel of padding top and also I wanna reduce the font size of this heading more on the mobile devices so here I'm selecting it let's go under style tab from here typography and only for the mobile device I'm changing its font size to 36 pixel so right now it looks descent on mobile devices as well let's now scroll down here we can see the image let's now click over this image because I think we need to add some space at the top only on the mobile device so here with the image first of all I'm just unlinking the margin and here at the top I'm just adding 30 pixel of margin top with this image and also if you remember on the desktop we have given this image alignment to the right side but on the mobile device let's now go under content here you see the little mobile tiny icon so whatever alignment I will set here that will be applicable only for mobile devices so on the mobile device I want this to be centered that's why I'm selecting here centered let's now scroll down I also wanna reduce the font size of this heading so let's just select it go under style tab open that title and from the typography only for the mobile devices I'm reducing its font size to 32 pixel let's now scroll down these areas are looking great on mobile device already and here we cannot see the goes again so just click over it and for the mobile device I wanna display here only two or three images or logos so here I'm just selecting two so when people will browse this website from their mobile device they can only see two logos at a time and as it's a carousel so the next images will appear after this okay so let's now scroll down and here everything is looking great also I wanna reduce the font size so select It Go and restyle tab open the title from here typography I'm just reducing it to 32 pixel and then everything is looking great and here we can do one thing because here at the top the space is looking huge so let's just select this container go under its Advanced tab only on the mobile device first of all I'm just making the padding to 20 and then unlink it because at the top I wanna add six day also at the bottom let's add 60 pixel of padding other than that here we can do another thing we can just remove this space from left side so select this one and you know first of all we can just reduce the font size from here so again I'm making it to 32 pixel also I wanna remove this space from left side so go under Advanced Tab and here padding I'm making it to zero so right now it looks descent and let's scroll down everything is looking great on mobile device let's scroll down also I want to reduce the font size of this heading select it from under title let's go to typography and I'm changing it to 32 pixel and all these single testimonials are looking great so we are done with the responsiveness of our home page so we can just move to the desktop and we can just click on this top right X to get rid of this responsive option and to save everything don't forget to click on this green update button next I want to create our about us page and to do that first of all we need to go back to our WordPress dashboard but here I just wanna keep open this home page within the Elementor page builder because we will be needing some elements because we will be copying some elements from home page and paste that on our about us page for that reason I'm not closing this home page I mean I'm not closing this Elementary page builder from a different tab I'm just going to Wordpress dashboard like here we already have opened WordPress dashboard so from here we can just go to pages to all pages and here we can see our about page okay so from here just click on edit and then of course we want to create our about Page by using element of page builder so just click on edit with Elementor so here now we will be creating our about us page so first of all I want to create our about us Pages Banner okay and it would be pretty simple so first of all let's just click on this plus icon and here I'm taking this column structure and from here I'm making the justify content to centered also I wanna give it a height so from here minimum height I'm setting it as VH you know VH stands for viewport height and here I'm setting it as 40 VH now within this I just wanna insert an heading widget and like I said I just want to copy and paste heading widget from our home page that's why we actually opened the home page here we have not closed it for this reason okay so from here I'm just right clicking here and copying this heading element from here let's just copy it now I'm going inside the about us Pages Elementor page builder now here just right click and click on paste so why am I doing this I'm doing this only to save our time because here we can also just drag The Heading element from left side to right side we also had to do the font sizes so we don't need to do the same thing again and again that's why I have just copied the ready heading from our home page and pasted it here now I just wanna change this text so instead of this here I just wanted to say about us and I want to make it centered aligned so from here I'm making the alignment to centered now underneath this I wanna use a button widget actually the button won't be clickable I just wanna use that as a design element okay so from here just click on the Rubik's Cube icon and here I'm dragging the button widget here underneath this heading here by the way I'm just moving a little bit faster now because you are getting familiar with Elementor page builder so right now I won't be describing each and everything because I know you're already getting familiar with Elementor okay so first of all here instead of click here I want it to say the sick rate and gradient now let's make it centered aligned Also let's do some styling from another style tab so from here first go inside typography I'm making its font size to 16 pixel and here let's make the font wait to 500 it's already 500 so let's just close it then here the background color I'm making it to white color then the text color I'm making it our Global text color and actually the background color of this button instead of this white let's just make it hash F4 F3 F9 so it's kinda cream color you know then I wanna add some border radius so from here I'm adding 30 pixel of Border radius and let's add some padding so here I'm adding 15 pixel of padding now let's unlink it because on the left and right I'm just adding 25 pixel of padding and similar like our home pages animation I also want to add some floating elements on the about us Pages Banner this area so here just click on the Rubik's Cube icon and here I'm dragging the image element underneath this button here just drop it and here let's select the image go to upload files click on select files okay I'm selecting this icon and this icon together now let's open because we will be needing that a bit later so first of all I'm selecting this image it says about shape 0 1 so let's insert it and you know we just need to set its position so go on the advanced tab from here I'm making the position to Absolute and here the horizontal orientation from left first I'm making it to percentage and let's make it to 18 percent and vertical orientation from Top let's make it to percent and I'm making it to 36 percent then here I'm adding this index value to 5 and you know we need to add an animation class name so go to gym first dot com and here I'm just selecting the first class name go inside Elementor and here I'm pasting the class name here so it started moving and also right after that I wanna add another icon so here you know we can just duplicate it so here let's duplicate it from okay we can just open the Navigator so right click here let's open the Navigator so here is the image now right click here and duplicate it and then I just wanna replace this image with another image so select it and here I'm selecting this one it says about shape 0 2 so here insert media go under Advanced tab from here I just wanna change its position so let's apply it to the right side horizontally and here I'm setting it percent let's make it to 29 and here the vertical orientation from bottom also set it to percent I'm making it to 40 percent maybe you cannot see it because of the Navigator so it's basically here and also we have already added the class name here with these I wanna add a secondary class name so make sure just after this class name just press enter one time and here I'm typing two so now if I just close the navigator you see their movement speed is a bit different this one is moving is kinda faster and this one's movement is kinda slower than this so together it's looking really great and you know we have given their Z index value to 5 so of course we should apply some highest index value with this heading and Button as well so here I'm selecting this heading go under its Advanced tab here I'm adding zindex value to 7 and it's already applied because we have copied it from home page but now here also we this button go under its Advanced tab here I'm adding a higher syntax value that is 7. so I wanted to keep these about us Pages Banner really simple so right now it's looking like it and I'm really happy with this Banner because honestly we don't need fancy Banner areas with all of our Pages we already have created a beautiful banner on our home page and that's really mattered the most okay let's now create our next section here we will be describing some facts about us so here first of all let's click on this plus icon and here I just want to take these two continuous structure and here I'm making the Align items to centered then with this container I wanna add a background image so go under the style tab from here from the background type let's select the image actually it's a gradient High background image so click on upload file go to select files and here this one it says about BG so I'm selecting this image now click on open then just insert it and also I'm making its position to sender sender then from here repeat to no repeat also I'm making the display size to cover so this background image will be covered this whole container then I wanna add some spacing so go under Advanced tab from here from inside padding I'm adding 20 pixel of padding now unlink it at the top and bottom I will be adding 60 pixel of padding let's now start with this lift container first of all I just want to insert some heading within the lift container and you may remember we already have created some cool heading on our home page so let's now go inside home page and here I'm scrolling down we can just copy this one from here so right click here let's copy it go inside about page and within the lift container right click here and click on paste you see it's instantly pasted here also right under this heading I wanna paste another button so go to home page from here just right click here copy this button from here go inside about page and right under this heading element right after the paragraph make sure you have put your cursor right under here otherwise it will be pasted outside of this left container okay so put your cursor right underneath this paragraph within this blue line right click here and then click on paste so it's pasted within this lift container now here with this button instead of learn more I just wanted to say for example our services and you can link it with our services page so here I started typing services you see it's suggesting the services page so I'm just selecting the services page now also I wanna change this heading and paragraph so here let's select it go to here I mean within the title I'm just replacing this with another Title Here Also I wanna change this description text so within the title description I'm replacing with other text here and you know what I don't want this subtitle here at the top so I'm opening the subtitle and I'm turning off from this place see by leveraging the copy and paste method how quickly we can create a container not actually container we can recreate any widget or any element really really fast now with the left container I just wanna add some space at the right side so here I'm just selecting this lift container now go to its Advanced Tab and here only on the right side I wanna add the padding so first of all instead of pixel I'm setting it in percentage let's now unlink it and only at the right side I'm applying four percent of padding now within the right container first of all I'm selecting this right container and making its direction to row also I'm setting its wrap value to wrap you already know why we use wrap then within the right container I wanna take some inner container I mean their child inner containers so click on this plus icon and here I'm dragging the container here and with this inner container first of all I'm making the content width to full width and here I'm making it with 247 percent then let's make the Gap to 10 instead of the default 20 okay now I wanna add a background color with it just go under the style tab from here from the background type I'm just giving it a white background color then let's make its Corner rounded so from border I'm making 20 pixel of Border radius also I wanna apply a border with this inner container so from here border type I'm setting solid let's set the width to one pixel and the Border color it would be hash if three if three F3 and then I just want to apply a very tiny Shadow so from here I'm opening this box Shadow option you see if I just minimize it oops actually you cannot see see it properly right now because whenever we will have some content within the card you can see it properly then so for now let's just open it I'm just adding the shadow for the moment so let's open the box Shadow first of all here I just wanna reduce the opacity of the Shadows color so open this color palette and here by default the shadow is 0.5 so I'm just reducing this Bottom bar to the left side so make it more lighter we can just make it 0.2 like this you can see the opacity value here and then I'm just making the bladder value to 40 and then the spread value to negative 20. also I wanna apply some padding with this card so let's just scroll up go inside Advanced Tab and here I'm adding 60 pixel of padding oops 60 pixel all right now within this card first of all I wanna insert an image 8 so click on the plus icon from here I'm dragging the image widget inside here let's now select the image now go to upload files click on select files and actually I wanna upload all these images together let's select these four images and click on open so for the first card I'm selecting this one it says inner counter icon one so I'm just inserting it and I wanna position this image at the left bottom corner so to do it just go under Advanced tab from here uh making its position to Absolute and then I'm making the horizontal value from left to zero also from bottom let's make it to zero all right right after that I wanna insert an heading widget so click on this Rubik's Cube icon again and here I'm dragging this heading widget right after the image here in this place actually The Heading went under this image but I want this heading above this image so just right click here oops just right click here and open the Navigator so if you have a look on this Navigator you see the image is at the top but I'm just dragging this heading at the top of this image here oops just drag it above this image here in this place actually here is still showing the same so we can apply another method you already guessed it right that's the Z index method so we can just select the image first because I want to place the image behind this heading so from under Advanced tab I'm setting this image as the index value to for example 3 and I will be applying a higher syntax value to this heading so here I'm just selecting The Heading now go under its Advanced Tab and I'm setting the Z index value to 4 so right now the heading is above this image all right now I just wanna change this text and we can close the navigator for the moment and here instead of this dummy text just go under content tab here I want it to say 210 Plus let's make the alignment 2 centered and I want to make it really really big so go under the style tab from here let's open the typography I'm making its font size to 50 pixel and here I wanna also increase its line height so first I'm making it in em and let's set it to 1.2 or a bit bigger I'm making it 1.4 also we can make it a bit Bolder so from font weight I'm making it 700 then also I wanna change its color so from the Color Picker I'm setting the color to hash f76766 then underneath I wanna add another heading so you know we can just duplicate this heading and here I just wanted to say satisfied customers and of course we need to reduce the font size so go into the style tab from here from the typography I'm making its font size to 18 pixel and font weight to 500 then let's change its color to hash 6b645d and you know what I actually wanna reduce the line height of the first setting so let's just select it go to its typography and we can just set it to default so I'm removing it from here so you see they are now more closer all right now I just wanna duplicate it couple more time let's just duplicate it and duplicate it one last time so here I just wanna quickly change all these heading and subheading and I'm coming back to you so I have changed all the content I mean all the heading text now I also want to apply different color to these different headings so with the second one let's make its color to Hash 265 FDB then with this one let's make its color to Hash five seven C 0 c e and with the fourth one let's set its color to Hash a666f7 all right so far it looks great but actually you know what I wanna make this curse look more creative but like I said if you wanna keep it like this you can do that now I wanna make it more creative so to do it first of all I'm selecting the first item I'm in the first inner container so let's select it I just wanna add some merging at the top of the first inner container okay so unlink the margin and here at the top I'm adding 80 pixel of margin top and here you see the second item is messed with the height of the first area so its height is becoming really huge but I don't want that so with each of these inner containers I will be adding Airline self to start so let's start from this one so here I am setting the Align itself to start also with the second item let's select it from under Advanced tab here I'm setting the Align itself to start also with the third one let's select it from under Advanced tab I'm setting its align itself to start also with the fourth one go under Advanced tab I'm setting its align self to start and you know as we have added some margin here with the first item so here with the last item we need to add some negative margin to match this design so here select the fourth item just go under Advanced Tab and Link the margin as we have added positive 80 pixel number here with the first item so here we need to add negative 80 pixel of margin at the top of the last item so here I'm just adding negative 80 pixel of margin so right now if I minimize the bar just have a look this area looks really really creative now all right let's open the bar from left side next I wanna create our theme section so let's just scroll down from here click on the plus icon and here I'm taking this column based structure and also I want to add some spacing so go under Advanced tab from padding I'm adding 20 pixel of padding now let's unlink it because you know at the top and bottom I want to add 60 pixel and at the bottom instead of 60 let's add more so here I'm adding 100 pixel of padding at the bottom now here within this container I wanna use the heading element again and you know I just want to copy and paste it so let's just right click here click on copy now within this container right click here and click on paste and then I just wanna change this text so from here I'm just writing here meet the squared also instead of left aligned this time I wanna make it centered align so go under style tab from here I'm making the alignment to centered also I wanna change the description text so from here let's open the description I'm in title description oops not from under the style tab just go under content tab from here open the title description I'm here pasting some text all right now right underneath this paragraph I wanna add inner container so click on the plus icon oops just click on this Rubik's Cube icon and from here I'm dragging this container underneath this paragraph here and first of all with this inner container let's select it and I'm making the direction to row also I wanna add some space at the top so just go on the advanced tab here unlink the merge in here I'm adding 20 pixel margin at the top alright so now within this inner container I wanna add another inner container so click on this plus icon here within I'm dragging this container widget here let's now duplicate it couple more time also let's duplicate it once again so here let's start working with this middle inner container now first I wanna insert an image so click on the plus icon from here I'm dragging the image widget here now let's select the image go to upload files click on select files and I want to insert all the team members images here so I'm selecting all the team members together and uploading it so for the first one I'm selecting this now click on insert media then with this image I wanna make their Corner rounded so let's just go on this style tab from here open the I mean from here just add the Border radius to 20 pixel and then I wanna also add a little bit Shadow so from here open the box Shadow and here you are already familiar with the Box Shadow concept right so from here I'm just reducing its opacity so something like this and then from here the blur value I'm making it to 40 and here the spread value to negative 10. all right now underneath this image I wanna take another inner container so there we can add some additional information about this team member right so click on the Rubik's Cube icon from here I'm dragging this container right after this image here and here with this container make sure you have selected this one just make the content width to full width and here I'm making its width to 65 percent and let's set the Gap to 10. then I'm adding a background color so from a style tab let's set the background color to pure white color and now let's just add some spacing so from under Advanced tab let's add 30 pixel of padding with this inner container then I wanna do one interesting thing I wanna also set its position to Absolute so from here let's set its position to Absolute so by default from left its offset is 0 and also from bottom we can set its offset value to zero and also I just wanna make this corner round it so to do it let's go under the style tab from here open the border now let's unlink it and only at the right side I'm adding 20 pixel of Border radius so if you have a look on the right top corner is getting rounded alright now let's add a name for this team member so here click on this plus icon here I'm dragging a heading widget here inside and let's say his name is John Smith also I wanna reduce its size so from the typography let's make it to 20 pixel also here I'm making its weight to 700 then let's just duplicate it because I wanna write here his role so for example he is an early Mentor oops Elementor expert and here I wanna make its color to our default text color and then from typography let's reduce its font size to 14 pixel and font width let's make it to medium 500 then right under his role I wanna provide his social handles so from here click on this Rubik's Cube icon and here I'm searching for social icons here we go this one so here I'm dragging this social icons widgets underneath his role I mean right under his role here so with this social icons if you want to add his Facebook profile URL you just need to open this one then you can add the URL within this place then if you want to add Twitter you can do the same in the same way if you want to add more you just need to click here on add item so for example I wanna add another social handle so from here let's say you wanna add his WhatsApp so here I'm selecting WhatsApp click on insert so it's added here instantly now let's minimize it and from here the shape by default it's rounded but I wanna make it to Circle and I want to make the alignment to left all right let's now go under the style tab from here instead of using this official icon colors I'm just selecting custom and let's make the primary color to hash a6a9c6 then I wanna reduce their size so from here you can increase or decrease the size okay so I just wanna keep their size to 15 and also I just wanna add hover effect I mean hover color with this icon so let's just scroll down from here just go inside icon hover and here we can add the primary color hover effect to our Global blue color this one so if we now hover on this social handle so you can see the blue colors all right now you know it's really simple you just need to duplicate this parent container so I'm duplicating it let's now duplicate it one more time and we can just delete the empty containers from left side also delete the empty container from right side so we have got here three containers you know we can easily change the image for example I'm just changing this image so go under content let's change the image I'm selecting this image click on insert media and here is the third team member just click on choose image and I'm selecting this image click on insert media and maybe this team member's name is Mike Cooper and this team member his name is l Alex costana also let's say this member is the CEO so here I'm writing CEO then here is the company name like this so it's now looking much realistic right and you know what you could do another thing so instead of this plain white color if you want you can add a bit transparency so let's just select this in our container go under its style tab from here we have already given it white color but you can also reduce the opposite a little bit like this so within this container you can also see some portion of His Image so we can apply the same for others so I'm just right clicking here click on copy now with other inner containers right click here click on paste style also with this one right click here and click on paste style all right so in our about page we have created this beautiful banner here is some facts about out ourselves and here is the team members now underneath that we of course show some of our testimonials here right so we don't need to recreate the testimonial here because on the home page we already have made that and we can reuse that here in our about page as well so I'm going back to our home page so from here let's scroll down so here is the testimonial container just right click over here click on copy now go inside about page now here within this new container right click here and click on paste so it's instantly pasted here in this place how cool is that all right so everything is looking great on about us page but now I just wanna check how it's looking on mobile and tablet device so you know to check its responsiveness from here let's go to responsive mode so on the desktop we already have made everything great now let's just go to the tablet device now here this Banner is is looking great and we need to do some work with this cars so I think we can only reduce the padding of each of these cards so just select it and go under Advanced tab here I'm adding just 10 pixel of padding but at the top and bottom so I'm just unlinking it at the top and bottom I'm adding 60 pixel of padding so I'm doing the same with other cards and in this case don't just copy and paste this style with other cards because you may remember we have applied some negative margin and positive margin with first and last card so don't just copy and paste this style with these cards only so you have to do it manually with each of these inner curves so I'm selecting this card go under Advanced tab here I'm adding 10 pixel of padding now unlink it at the top and bottom I'm adding 60 pixel of padding let's do the same with this one from here I'm adding adding to 10 pixel now unlink it at the top pen bottom I'm adding 60 pixel so let's do the same with this one from under Advanced tab let's add first 10 pixel with all around now unlink it from the top and bottom I'm adding 60 pixel of padding so right now also on the tablet device this area looks great let's now scroll down and of course we need to do some work with these team members but just have a look on the testimonials as we have just copied it from the home page so it's already looking great we don't need to do anything here so with the content all the responsive designs has been copied successfully here all right let's now scroll up I think we need to do something with this inner containers so here let's select this in our container first of all go under layout on the tablet device I'm making its width to 100 Hoops it's in pixel so first of all I need to select it as percentage and here I'm making it to 100 percent and then go under Advanced tab here I'm applying the padding to 20 pixel and only on the tablet device I just wanna push it a little bit down so from here from the positioning then here we can see from bottom I'm just setting it as negative 50 pixel so it's looking like it so let's do the same with other inner containers let's just copy it then right click here and paste the style also right click here and paste the style here so right now the team members are looking great on tablet device and other areas are already looking great so we can now just move to the mobile device so I'm selecting mobile icon here on the mobile device this Banner is looking great and this area is also looking great everything is looking perfect but I think as we have applied some negative margin with the last item so let's select the last one actually we cannot select it properly as it has got some negative margin so I'm just right clicking here and open the Navigator so here this one is our fourth container just go under Advanced Tab and here I'm making the margin to zero so here the last item is also looking great on mobile device let's now scroll down and here I think we need to do some work so here again let's select this inner container and go under its layout tab here I'm making its width in percentage again for the mobile device and let's make it again 65 pixel only for mobile devices then again go under Advanced Tab and here I'm making the vertical orientation from bottom to zero so we can just copy and paste right click here copy it and with this one just right click here and paste the style also with this one right click here and paste the style so basically the same style is for mobile and desktop and only for the tablet device we have done a different design alright we can now close the responsive bar and I think we just need to do one last thing here okay I'm just closing the Navigator have a look on this button I'm just selecting it remember we have taken this button as a design element so if we click here it will take us to nowhere so for that reason we just need to disable its clickability for that reason I'm just going under content Tab and here by default we have got an hashtag so I'm just removing it from here so now no one can click over this button is just an design element alright so now to save all of this hard work don't forget to click on this green update button let's now create our next page so I'm going back to Wordpress dashboard now from here let's go to pages to all pages and here we already have created our home page and our about page let's now create our services page so I'm clicking here on edit now from here let's click on edit OS Elementor so here in our services page I just want to use the banner what we have created on our about page so from here I'm just right clicking on this container let's just copy it now within the services page let's now right click here and I'm pasting it in this place and here instead of about us I just wanted to say Sir vs and within this button here I want it to say quality comes first then right after that I wanna showcase our all the services and you may remember we have created the services area on our home page so I just want to use that let's now go back to our home page so here from within the Elementor page builder this is the services section so here let's just right click over this container let's copy it now go inside Services page right click here and let's paste it and here you may remember we have made this parent container settings to wrap that's why we can add as many as inner containers we want so from here I just want to duplicate this service because you may have more services than three so if you have many more services you can add in the same way so here I'm just duplicating the last one let's duplicate and again I just wanna duplicate it and let's duplicate it one more time so for example here we have got six Services now this service I just wanna change its name to for example SEO and then here I wanna name it logo design and the last one for example I'm naming it PPC so here with the PPC I'm also changing this icon go to upload files I'm clicking on select files so from here I'm selecting this logo design icon PPC icon and the AC icon together and let's upload them now for the the PPC I'm selecting this icon let's insert it for the logo design here I'm just selecting this logo design icon now insert it and for the SEO let's just select this AC icon and click on insert media by the way I have got all these icons from flat icon.com so right now the service area looks great and here we have got the client logos and here in the services page I don't want this about area so I just want to delete it now from here right click here first of all I'm opening that Navigator because I just don't wanna delete the lift container I want to delete their parent container so from here their parent container is this one so I'm selecting it together then right click here and I'm clicking on delete all right let's now close the navigator then right after this Services area I wanna add some pricing tables so here first of all let's click on this plus icon and I'm taking this column based structure then let's give it a background color so from background type I'm selecting the background color as hash 292930 and also I wanna add an image with it so I'm selecting image go to upload files I'm clicking on select files so from here I'm just selecting this Services project this one let's open it so I have selected this shape now click on insert media and you know I'm just setting the position to top right also I'm setting the repeat value to no repeat then I wanna add some padding so let's go under Advanced tab from here first I'm adding 20 pixel of padding then let's unlink it because you know at the top and bottom I wanna add 100 pixel of padding then underneath I just wanna copy and paste a heading widget so let's go inside home page so from here we can just use this heading now just right click here let's copy it now within Services page in this place just right click here and I'm clicking on paste then here this subheading I just want it to change with pricing text so this is our subtitle I'm opening the subtitle and here I want it to say pricing then this main heading the main title I'm also here pasting some text and now instead of black because our background color is dark so this time I just want to change its color to white so from under style tab let's open the title I'm making its color so from this Color Picker I'm just making it to plain white all right now underneath this heading I just wanna take an inner widget I mean inner container so let's click on the Rubik's Cube icon from here I'm dragging this inner container here and I'm first making its direction to row then align items to centered also I don't wanna any Gap in between their child containers so from here I'm making the Gap value to 0 and then I just want to add some space at the top so let's go under Advanced tab I'm unlinking the margin at the top I'm adding 20 pixel of merging then within this inner container like I said I wanna add three more containers so let's just click on this Rubik's Cube icon and here I'm dragging this container within this inner container here let's now duplicate this inner container Also let's duplicate it one more time and I want to start working with the middle one so here with this middle container make sure you have selected the middle one let's go and restart that because I wanna give it a background color and it would be our Global orange color and let's open the Border because I want to add here 20 pixel of Border radius Also let's add some padding so go under Advanced tab from here I'm adding 40 pixel of padding but at the top and bottom I'm just adding 80 pixel of padding all right now within here click on the plus icon first of all I'm dragging a heading element and here I want it to say business let's now make its color to white color then here I'm just making its font size to 222 pixel and front width to 700 right after this heading from here I'm just adding a text editor widget here right under the business heading and I'm just pasting some text here now I also wanna make its color to white color and then from the typography let's make its font size to 14 pixel all right right after that I wanna add the price so from here I'm adding another heading widget right under the paragraph so I just wanted to say for example dollar sign then 16 9 and then forward slash then month so here is color gonor install tab I also want to make its color to white color then from this place I'm making its size to 28 pixel and font weight I'm making it to 400 but here I just wanna make the this dollar 69 to bold so for that reason from here I'm selecting dollar 69 now we can see a tooltip from this place I'm just selecting bold so this dollar 69 is now Bolder but this forward slash month is getting the default 400 font weight all right underneath here I wanna add another heading so I'm dragging this heading underneath the price and I just wanted to say everything is tattered also I wanna make its color to white color then we can make its size to 15 pixel and I'm making the font it to 700. also I wanna adjust its spacing so go under Advanced tab from here unlink the margin at the top I'm adding 15 pixel and at the bottom I just want to reduce it so I'm adding negative 5 pixel now right after this I wanna add the features what users will get with this pricing so let's just click on the Rubik's Cube icon and this time here I'm just charging for icon list so here you go I'm dragging this icon list right underneath this heading here and from these items first I just wanna delete the second one and the third one because with each of the art games I just wanna use this check icon and here with the first item I just wanted to say for example this is just a feature so WC product add-on integration this is just an example so right now you know we can just duplicate it I'm duplicating it couple more time and then very quickly I'm just changing all these items name all right so I have changed all the items name from left side and you know if you wanna use any other icon with any of these items you can do that from here so if you open any of the items you see you can set different icons from this place now I just wanna do some styling with this icon so go under the style tab from here first of all I'm opening the icons and I just wanna change its color to Hash 1b9a81 so it's kind of greenish color you see and this text color I Wanna Make Them White so from here let's open the text and I'm making the text color to white color and from here from the typography I'm just making the font size to 14 pixel and font with default 400 is fine all right now click outside here the very last thing if you notice all these items are looking like they are very close with each other so to add some space is in between these items from here open the list and you can increase or decrease the space by using this space between so here I just wanna keep it five all right now underneath this icon list I want to add a button so from here let's drag the button widget underneath here in this place and I want it to say contact now and I wanna link it with our contact page so if anyone agrees with this business plan by clicking on the contact page they can fill up the contact form and communicate with us so for that reason I'm selecting contact page from here but you can link anything with the pricing for example let's say if you're a freelancer if you have got your fiber or upwork account so you can link these buttons with your Fiverr or upper gigs and then alignment I just wanna make it to justify so it will take the whole width of this card now let's go under the style tab from here I just wanna make the text color to our Global orange color and the background color let's just make it to White from here and I wanna make its font a bit Bolder so from the typography let's just make the oops not fun family let's just make the font weight to 700 and then I wanna add some border radius with this button so from here border radius I'm adding 2D pixel and also with the padding I'm adding 18 pixel like this so I think it's already looking great but I wanna do another thing with this pricing card so to do it let's just click on the Rubik's Cube icon like I said this is completely optional but if you want to make it look more cool then you can do that so from here I'm just dragging this container widget underneath this button here and within this container let's click on this plus icon here I'm dragging just an image widget and let's select the image from here go to upload files click on select files and I will be using these three icons on the three pricing cards so I'm selecting them all together click on open so for the middle one I'm selecting this one click on insert media and here I'm making this image to left aligned also I just wanna add some padding with this image so go under its Advanced tab from here let's unlink the padding here at the top I'm just adding 55 pixel of padding and at the left let's add 20 or let's say 25 pixel of padding all right now let's select this inner container I'm selecting this first I'm making the content width to full width now from here the width let's first set it in pixel I'm giving it 180 pixel also the minimum height I'm setting it as 180 pixel then from here I'm just setting the justify content to centered and now I just wanna add a background color with it so go under style tab from here from the background type let's set the black color from here so from the Color Picker I'm selecting black but I wanna make it really very transparent so I'm dragging this bar to the very left like this and now I just wanna place this inner container at the top right corner I mean in this place so to do it let's just go under Advanced tab from here first of all I'm making its position to Absolute then you know from right side I just wanna make it some negative value so from here negative 60 pixel is fine so here from right I have just set the horizontal orientation offset value to negative 60 and vertical orientation from Top let's set it to negative 70 pixel so it's looking like it but now if you have a close look you see these Corners are not properly rounded so I just want to make them rounded to do it you know just go under the style tab from here I'm opening the border and here I'm just giving it 100 pixel of Border radius so it's now looking rounded but also you can see this circle is now going outside of this card I don't want that that's why I'm selecting this card container this one go under its layout tab now scroll down open the additional options from here I'm just setting the Overflow to Hidden now we cannot see the circle outside of this card only we can see this portion within the card so overall it looks really cool all right now I just wanna duplicate it couple more time I mean I just want to duplicate this middle container so I'm duplicating it also let's duplicate it so I have duplicated it two more times now I just wanna open the Navigator so from here you see this one this is the first child I don't want it anymore so right click here and I'm clicking on delete also I don't want the right one so this one you see whenever I'm selecting it from the Navigator it's highlighted so which means we have selected this right empty container so just right click over here and click on delete all right I'm also closing the Navigator or we can again just open the Navigator because we will be needing that all right so let's start from the left one because the lift container I wanna change its background color now go under the style tab from here from the Color Picker I'm just sitting its background color as hash 1d1d25 it's kinda dark color then I'm just copying this color because I wanna use this color as the button text color so let's select this button and here is text color I'm just pasting it here also with this container so let's select it go under its Advanced tab from here at the top and bottom instead of 80 I'm just making it to 60 pixel now let's just right click over here click on copy and with the third one right click over here and click on place the style also you know I wanted to change the button text color so from here go under style Tab and the color would be hash 1d1d25 now you know you can change all these contents like here instead of business I wanted to name this card to professional then you can change this image from here so just go under content tab here I'm changing this image with this diamond so click on insert media and also I'm changing the pricing to 49 per month and with the last one let's change this image so I'm selecting the image I'm selecting this green diamond image click on insert media and here I just wanna name it for example enter price and I'm giving its pricing to 89 oops 89 per month so over all if I just minimize the bar from left side you see it's looking really great now alright so for our services page is looking really great and we just need to check its responsiveness so from here I'm opening the responsive mode now go under tablet device so on the tablet device everything is looking great and all the above areas we already have made them responsive on the home page so we can now just go to the mobile icon let's go to mobile device so here on the mobile device everything is looking great with that Services page and with the pricing tables here I just wanna do one thing because you see this inner container is not looking much great on mobile devices so I just wanna hide it from the mobile device okay so let's just right click here and open the Navigator so I'm just moving the navigator to the right side here you see this image is within this inner container we have taken so make sure you have selected these images parent inner container this one go under its Advanced Tab and from here scroll down and open the responsive so I want to keep it on desktop and tablet but from the mobile I want to hide it so let's hide it from here then also with this one let's select it so from the Navigator I'm selecting its parent container this one go under Advanced tab from the responsive here I'm hiding it from mobile device also with the third one let's select it now from the Navigator I'm selecting its parent container this one go under Advanced tab from here open the responsive and I'm hiding it from Mobile you may wonder why it's looking like it why it's looking like this kind of whitish background actually it means it won't be shown on the real mobile devices because if I now minimize the bar from the left side we can no longer see it on the mobile device sizes see we can no longer see the images at the top right corner but if we move to the desktop like here we can still see the images here but when we go to the mobile device we cannot see that okay let's just scroll down and have a look we cannot see that and here I think we just need to add some space in between the cards so to do it let's open the bar I think we can only add the margin with the second one so I'm selecting this second card from under its Advanced tab let's unlink the mergin here at the top and bottom I'm adding 20 pixel of margin so they have now enough breathing space at the top also at the bottom all right we can now close the responsive mode and our pricing page is looking really nice so to save our work you know just click on the screen update button so we have created our services page and you see we have okay just I'm just closing the Navigator you may have different services like UI ux design or Web Design Services or branding services like this and when anyone clicks on this learn more button where will they go they will go to the single page of the service because you may want to say more about that specific service okay like if you provide web design service you wanna tell them like we do custom coding we do WordPress codes or you may wanna show some projects that's under web design category similarly you may have a different single page for your branding service so on The Branding page you may showcase your branding works you may talk more about The Branding specifically so here I'm just showing you how to create a single service page and of course I won't be creating these six Services pages I mean six single Services Pages if I create one by following the same rule you can create different single Pages for each of the service so only to give you a proper example I'm creating a single Services page for this web design service okay so first of all let's go back to our WordPress dashboard and I wanna create a page for the web design service so from here from the pages let's now click on add new and here I wanna give this Page's name as web design let's now click on publish click on publish one more time and now from here click on edit with Elementor so here within the web design single service page I wanna use the similar Banner we have used on our services page so from here you know I just wanna copy it right click here copy it from within the web design page right click and I'm pasting it here and instead of services I just wanted to say web design and within this button I want it oops within this button I wanted to say Sir this details now underneath I wanna describe more about this web design service so let's now click on this plus icon I'm taking this column based structure and this time I wanna give it a height so from here minimum height let's set it in VH and I'm giving it 100 page so it's the height also with this container I wanna use a gradient background color so let's now go under the style Tab and open the background you see we we always use this classic but this time I want to show you how to use the gradient background color so from here I'm selecting gradient and here you can select two colors this is the first color and this is the second color so here if I select the first color as black now have a look from the top the gradient color starts and it blends with this reddish color so actually you can mix and match two colors in a single container also if you want you can play with the location like by default value is 100 but if you want you can change it like this also here you can change the angle like this but here I just want to keep the default angle which is 180 and here the location the default 100 I'm keeping that okay and also the background color the first color I'm just giving it to Hash E6 F2 f b and then the second color I'm setting it as hash F7 fcff all right and now with this container I wanna use a shape divider so from under a style tab let's go to here it says shape divider and I want to use the shape divided at the top so from here you can add any kind of shape so from the type I'm first selecting for example Cloud so here you can see the cloud shape at the top so similar like the cloud you can use other shapes for example here you can use webs so we can see this webs shape at the top here but actually instead of waves I wanna use this curve shape and right now you see the curved shape is like this so it's down at the middle and the corners are at the top but I Wanna Make It reversed so to do it from here I'm just turning on the invert option this one then from here you can control the height like this so you can increase the height if I scroll up you can see it properly so you can control the height from this place and I wanna make it really high so I'm just making it to 700. also I'm giving its color to pure white color like this and then you know I just want to add some spacing with this container just go under its reference tab here I'm giving the 20 pixel of padding let's now unlink it because just at the bottom I'm giving 100 pixel of padding and at the top for this container I don't want it so I'm making it to zero all right now first of all click on the plus icon here I wanna add an image widget so here's the image let's select the image go to upload files click on select files and for the web design from here let's select this one it says Web Design Services PNG image so I'm selecting it open it and insert it here we go and now here I wanna create an interesting thing so I just want to push it to the top so I will be using some negative margin so let's just go under the advanced Tab and Link the margin here I'm adding negative 200 pixel of margin and you see it's inserting within the banner so to recover that we can select this container and from under its Advanced tab let's unlink it here at the top we will be adding positive 200 pixel of margin so here I'm adding 200 pixel of margin top so right now it's looking great all right now underneath this I just want to add a paragraph so click on the Rubik's Cube icon from here I'm dragging the text editor right under the image here then I'm just pasting some dummy text here and I want to add some space at the left and right so go under Advanced tab from here first of all I'm making the padding in percentage let's now unlink it because I wanna add the padding at the left and right so I'm adding 25 pixel of not pixel 25 percent of padding at the right also at the left and this one I just wanna make its alignment to centered all right now underneath this I wanna take an intersection and within the inner section we can talk some of the features of our web design service for example we do Pixel Perfect work we do fast loading websites we provide support like that you know so here first of all click on the Rubik's Cube icon here I'm dragging this container underneath this paragraph here and first of all I'm making its direction to row then you know justify content to I mean justify content to centered align items to centered also I want to add some space at the top so let's go under Advanced tab from here unlink the margin at the top I'm adding 40 pixel of margin now within this container click on the plus icon and here I'm just searching for icon box so here you go it's icon box let's drag it inside here so here you know first of all let's say I just wanted to say we do trendy design and then you can just write a short description here so I'm just putting a demo paragraph here also you know you can change the icon so for the trendy design here I just wanna use a lighter icon so let's select this one insert it and then let's do some styling with it so I'm going under the style tab first of all let's change the icons color so I'm just giving the color code hash f76766 then actually I don't want this huge space so I'm just making the space to zero now let's open the content from here with this title I'm just giving its size to 24 pixel and front of it let's give it 700 and now with each of these icon boxes I want to add a background color so to do it let's now go under Advanced tab from here let's scroll down and open the background and here background color I just wanna add white colors I'm selecting white also I wanna add some border radius so from here open the border and here I'm giving just 20 pixel of Border radius then also let's say if you want you can add some box Shadow so from here I'm just making it more transparent like 0.2 and here let's set the bladder value to 40 and the spread value to negative 20. and you see there is no breathing space inside so from the advanced tab let's open the layout I'm just adding 30 pixel of padding but on the left and right we can reduce it so on the left and right I'm adding 15 pixel of padding all right now we can just simply duplicate this I icon box so let's duplicate it let's duplicate it one more time and let's duplicate it one last time now here instead of this lighter icon with everywhere also with this trendy design I'm just replacing this title and icon really quickly and I'm coming back to you so I have changed all these icons and this title and also I wanna change each of these icons color so with the second one I'm changing its color to Hash two six five FDB then with this rocket icon let's just go under its style Tab and here I'm giving the color code hash a765 F7 also with the last one with this deal icon go under the style tab I'm giving its color code to Hash 5 7 C 0 c e alright so they are all together looking great if I minimize the bar we can see the real view so it's looking really nice all right now right after that I wanna create another container and within that container we will be adding some projects that's under web design category okay so here let's first click on this plus icon and I'm taking this column based structure now here I wanna add a background color so from here let's select the color that's hash 292930 Also let's add one image with it so I'm just choosing the image so here we can use the same image we have used on our services page so click on insert media also I'm setting the position to top right and also the repeat to no repeat then here similar like other containers go under Advanced tab here I'm adding 20 pixel of padding let's unlink it because at the top and bottom I'm adding 100 pixel of padding now here within I just wanna paste another hidden widget so we can just go inside Services page and here right click here copy this heading widget from here and within the web design page let's just right click and paste it here now here instead of pricing so I'm opening the subtitle we can just say here Web Design Services and instead of this heading so open the title here I just want it to say we create creative designs for every web page now underneath this heading I wanna take another inner container so click on the Rubik's Cube icon here I'm dragging this container underneath here oops let's just drag it here underneath now first of all I'm making its direction to row and within this container I want to add some image box so click on the plus icon and here I'm searching for image box and remember we won't be using elementor's default image box widget we will be this image box widget is coming from elements kit plugin so let's drag this image box widget here within so now first of all I'm just duplicating it and let's just duplicate it one more time so actually we can now see that proper proportion of these three cars okay so here I'm starting with the middle one first of all I just wanna change this image so let's choose the image here you can upload any Project image which is related to web design and actually it depends on your services so here I'm just going to upload files click on select files so from here these three images are my web design services so I'm just uploading them together open it now for the first one I'm selecting this one now click on insert media and here now we can see this image and now open the body and here in the title I just wanted to say our project name so I'm just writing here decency project also you can write something about your project so here I'm just pasting some dummy text also within the button you can insert any links so I'm opening the button and here first of all instead of learn more I'm just writing here live preview so you can just link your Web projects live websites link here with this button okay now before doing any other thing I just want to show you another interesting thing so from here let's select this image box widget open its image tab here at the first and now instead of this simple content area I will be using this floating box so I'm selecting floating box now you can see this cool design so if I hover over here we can see it's looking really nice on Hover but here with the title I don't want this icon so let's open the body and here I'm just disabling this icon option from here also if you have a look when we hover here this title becomes a blue color but I don't want that so let's go and read style tab now from here let's open the buddy now from here here is the styles for title so from here let's set the color so I'm selecting our default main black color if I now hover here we can no longer see the blue color on Hover alright now you know what I just wanna delete the left one so let's delete it also let's delete the right one so I'm deleting it and now as we have designed this whole thing so we can just duplicate it let's just duplicate it and I'm duplicating it one more time then from this one let's just change this image go under content tab from here so I'm selecting this one click on insert media now from inside the body I just wanted to say for example mirror project and with the third one let's change this image with this one insert it and from inside the body I just wanted to say the project name that would be lonely project so now have a look if I minimize the bar from left side so here we can see the first project it says mirror project when you're hovering over here we can see this beautiful hover effect also with this one also with this one so overall it looks really great let's now open the bar from left side so with the single Services page with our Web Design Services page everything is looking great now we just need to check how it's looking on mobile and tablet device so first of all from here click on the responsive mode icon I'm going to the tablet device so here let's scroll down everything is looking great on the tablet also scroll down now have a look here if I just hover here I think on Hover we need to increase the height of this area so let's select this one go under its style tab from here it's not normal I mean on the normal State it's looking great but on Hover so I'm going under hover here we need to increase its height so for example if I set it to 350 on Hover let's now have a look if I hover here yep it looks great now we can just copy and paste the style to the right and left image box so from here just copy it then right click here and I'm now clicking on paste style also with this one right click here and click on paste style so here on the tablet device everything is looking great as well let's now check it from mobile device so let's now click on this mobile icon I think on the mobile device we need to add just this because it's looking kind of weird so first of all I'm just selecting this container this time unlink the margin at the top I'm just adding 100 pixel oops 100 pixel of margin and with this image let's select the image from under its reference Tab and Link the margin here I'm just adding negative 100 pixel of margin top also with this container so I'm selecting the container let's go under its style Tab and from here I'm opening the ship divider because 700 is looking huge so here we can just add 100 or 120 pixel of shape dividers height so it's now looking great and also we can reduce the padding from left and right so let's select it go under its Advanced tab from here first of all let's unlink it and at the left and right I'm adding here four percent of padding then let's scroll down everything is looking great and here this Web Design Services area is also looking great here the hover effect I think on the mobile device we can reduce this height a little bit so let's select it from under style tab let's go under hover so here instead of 350 we can just make it 300 okay so right click over here click on copy then with the second one right click over here click on paste Style with the third one right click and click on paste Style so now have a look with each of them so this one is looking great if I hover over on the second one it's looking great also with the third one it's looking great but I know you may have a question because on the mobile device there is no hover option right so actually on the mobile devices if anyone Taps over this image they can see the description of that particular project all right so everything is looking great on responsive so we can now close the bar from top and to save all of our hard work don't forget to click on this green update button let's now create our very last page which is our contact page okay so let's now go back to our WordPress dashboard now from here let's go to pages to all pages and here we can see the contact page click on edit and then from here click on edit with Elementor now first of all within the contact page you know the first thing I want to do I just want to copy and paste the banner idea so I'm just going inside web design page so from here just right click here let's copy it within the contact page I'm just pasting it here inside and here instead of web design I want it to say contact us and here instead of service details I just wanted to say get in touch now let's create our main contact form area so first of all let's click on this plus icon and here I'm taking this row based structure actually you know what actually in this case we can take these two containers structure this one but also with this one I'm just making the justify content value to space between this option and also I'm just making this wrap value to wrap then I want to add some spacing so go under Advanced tab from here I'm adding 20 pixel of padding let's now unlink it because at the top end but Bottom I want to add 60 pixel of padding okay so here within this main pattern container we have got one inner container here so let's select it it's contained with its full width and the width is 50 also if we select the right one it's with is also full width and 50 now I just wanna duplicate the second one and here underneath we have got another inner container so with this inner container I also want to keep its content width to full width and here the main width I'm just setting it as 100 so this is the layout at this moment now first of all with this top lift container I want to add a heading widget so you know we can just go to Services page and from here like right click here click on copy now within conduct page within this container so I'm right clicking here and click on paste and here with this just go and restart tab I'm making the alignment to left and from under content tab I don't want this subtitles from disabling it also the title description I'm deserving it from here as well now this main heading I also want to change the text so I'm opening the title then here I'm just pasting some text so it says have a cool project get in touch now then with this right container let's select it and here instead of 50 I'm just making its width to 45 percent and also let's give it a minimum height so I'm giving here 600 pixel or let's just make it to 650 pixel so its height is looking like it then here with this one let's just go and restart tab I'm giving it a background color which is white color and then I'm giving it 20 pixel of Border radius and also let's add some border so from here border type I'm giving it solid then border with one pixel and the Border color which is Hash F3 F3 F3 also I wanna add some box Shadow from here so first of all I'm making it really transparent like 0.2 so here you can see it's 0.2 and then from here I'm making the bladder value to 40 and the spread value to negative 20. then also I want to add some space in between this container so just go under Advanced tab from here padding let's add 40 pixel of padding also as I want to keep it at the top of everything so here I'm making it Z index value to 2. all right I think you cannot understand the purpose properly but if I now minimize it you can see this empty curd here and we can see the corners around it also we can understand it has some nice shadow with it all right let's now open it and we will be actually adding the contact form within this area but before that I wanna work with this third container so if I select it you may remember we have set its width to 100 percent so now here within I just wanna insert a Google map so click on the plus icon and from here I'm just searching for map so let's drag it here now in this place we can see the Google Map so from this place you can control the zoom of this map by default is 10 but if you want you can make it to 15 because if you wanna have more close look but here I'm just making it to 14. also you can change your location so you just need to put your location here the pin will be set on the map here but here instead of this 100 width I wanna use a custom width with this map so just go under Advanced Tab and this width I'm just setting it as custom and from here we can just set it as something like 70 or 72 is fine also we can adjust its high right so from under content here we can increase the height just by dragging it like this okay I just wanna keep it as 700 like this now my goal is place this map or this whole container at this place I mean right after this heading and they will be overlapped with the contact form and overall it will look really really cool so first of all here I'm selecting this third container and go under its Advanced tab let's unlink the margin and here at the top I'm just giving it negative 500 pixel of margin so right now it's looking like it actually instead of 500 we can reduce 20 pixel or more so let's set it to 480 so right now it's looking like it but if we minimize the bar we can see the real view so it will look like this on real web page all right so within this right container we will of course put our contact form but before that right underneath this map I just wanna add some social icons actually not social icons I just wanna push our address or our phone number email address like that so from here I'm just clicking on this Rubik's Cube icon and here I'm searching for icon box and you know what the icon box I actually wanna place all the icon box within a inner container so first of all let's here search for the container I'm dragging this container right underneath this map here so here I'm making their direction to row also from here let's set the content width to full width and here I'm making it to 722 percent so I have just matched it with the maps width and you know I'm just also making the justify content and align items to centered now within this click on the plus icon and here I'm searching for icon box here we go just drag it inside here and this time I'm setting its icon position from left then let's just go under the style tab from here I'm setting the primary color to hash f76766 then let's open the content tab here I'm setting the vertical alignment to Middle then here the title is facing I'm making it 5 and also with the title let's go inside its typography I'm just making its font size to 24 pixel also the font weight to 700 then of course we can add some padding with it so let's just go under Advanced Tab and here I'm adding 30 pixel of padding but first here just unlink it because on the left and right I wanna add 15 pixel of padding so here first I just wanna change this heading so from under content tab I just wanted to say address and here I'm putting a fake address also I wanna change this icon with a pin icon so I'm just here searching for map let's select this one insert it and now I just wanna duplicate this icon box also let's duplicate it one more time so with the second one I just want it to say email so here I'm just writing email let's change this icon with email icon so I'm selecting this one let's insert it now here I'm just putting my email address and with the third one I just wanted to say phone and here I'm providing my phone number so here is my phone number you can WhatsApp me on this number also this icon I just wanna change it with a phone icon so here I'm selecting this phone now insert it also I just want to change its color so from here let's change its color to Hash five seven C 0 c e and with this one this emails color let's go under style Tab and here's the color code hash 265 f d b all right we just need to create our contact form within this page so I wanted to create our contact form within this area so click on this plus icon and from here I'm just searching for metform here we go let's just drag this made from here within this area I mean within this right area and here first we need to create the form so from left side just click on edit form and of course we will be selecting new because we don't have any form in our website so I am selecting new and we can give it any name I'm just naming it my form and from here make sure you have selected this blank one the first one and then from here just click on edit form all right now within this panel we will be creating our contact form so first of all I'm just clicking on this plus icon and here I'm taking this column basic structure and here I'm setting its content width to full width and by default it's 100 later we will keep it 100 but for now temporarily I'm just giving its width to 40 or 50 like this now within this container I will be taking few input Fields so here first click on this plus and here let's first drag this text field here I don't wanna show this label the placeholder is okay for me so I'm just hiding that label from this place and remember each of this input field will have a unique name so in this case its name is MF Dash text actually you don't need to change it I'm showing you if needed how you can change this name but always try to keep the default name here and also the placeholder installer text I just wanted to say name so our clients can understand is the name field so they can put their name within the field now right after the name field I want to insert a phone field so from here I'm just searching for telephone let's drag it under name here and also I don't want to show the label and within the placeholder I just want it to say phone next I wanna insert an email address field so from here actually email is at the top so here I'm just dragging this email right underneath here and also I'm disabling the label and within the placeholder I'm just writing here email address now right after that here I wanna use another text field so let's drag it here and let's disable the label and this time I just want it to say email subject or we can just write subject now here is one important thing you may remember we also have taken another text field here at the top so whenever you will take the same field each time you should have an unique name here so if I go to the first one with the name field you see here the input Fields name is MF Dash text so with the subject we need to change this name to any other thing because we shouldn't have the same name within the same form so here instead of MF text here I just wanted to say MF Dash subject and then right after subject here I can just insert the text area so here I'm searching for text reader this one so people can describe more about the project here I'm just dragging this text area underneath subject here actually I'm not sure it's not going under subject okay so for now I'm just placing it here in this place and later you know we can just drag this object at the top of the text area in this place like this and now let's just select this text area also I'm disabling the label from here and instead of text area I just want it to say for example how can we help you then feel free to get in touch something like this you know then right after it of course we should use a submit button so from here I'm searching for actually it's at the top so here just drag this submit button at the bottom I'm not sure sometime it works like that so I'm just placing it anywhere of the area then you know we can just right click here open the Navigator and from the Navigator I'm just dragging the submit button underneath the text area in this place all right so it now looks perfect let's now close it and here instead of submit button I just want it to say and message so here I'm writing send message also let's make the button alignment to left aligned all right let's now do some styling with this input Fields first I'm starting with the name and we can then just paste this style with other elements so let's start with name now first go under style tab here I want to add some padding so first of all I'm giving it 20 pixel of padding now unlink it because at the left and right we can add 30 pixel of padding by the way whatever you can see this is the placeholder whenever we will start writing anything for example here I'm writing Jim Fahad so if you want you can do some styling with it as well but I think it's looking good so I don't wanna do any style change from here instead I just wanna add some border radius so I'm adding border radius to 16 pixel Also let's add a little bit of border so border type let's set it to solid here is one pixel width and the Border color would be hash E3 E3 E3 and then we can change the placeholder color so from here open the placeholder and its color we can set it as our default text color this one actually we cannot see it but if I know oops if I just remove the gym fad text from here we can see it's getting the default body text color also from here it's looking kind of bold so from the typography we can make its size to 15 pixel and font weight let's make it to 500 so right now it's looking descent now you know we can just right click here copy it and we can paste the style so let's paste this style with all of this input Fields just right click here and paste the style also with this one right click and paste this style so we can see how easily it's doable Also let's do the styling with the button let's select the button widget now go under its style Tab and you know I just wanna use the global padding so it's 28 now unlink it because at the right and left I wanna use 55 also from here let's add border radius value to 20. so here with this button okay I'm just opening this button so here on the normal state I'm setting the background color as our default orange color and on Hover I'm setting the background color as our default blue color so it's now looking like it and like I said with this main container let's select it I have given this 50 only to make you understand everything properly because if we set it 100 initially we couldn't see the borders properly so now we can remove this 50 so it will get the default 100 width we are done with the form creation I mean for from designing let's now click on this update and close button from the right top corner and yup within this right field we can see our beautiful contact form so we have done with the design of this contact firm now I just want to show you how it actually works okay so from here I'm just saving it by clicking on this green update button and here I wanna clarify one other thing if you just fill up this form within the Elementor page builder it won't work so we need to preview it from real browser and to see our website from real browser from this place if you just click on this eyeball icon so I'm clicking here it's now opened from the real browser and let's now fill up this form from this place so for example I'm the client and I want to reach out to you from this place okay so my name is here John Smith and my phone number is this of course it's a fake phone number then here I'm providing my email address that's Elementor at Jim fahaddigital.com also here here I'm writing a subject like I need a logo and here I'm writing the description hi there I need a logo then here can we arrange a zoom meeting like this so now your client will click here on send a message so let's click here and it says thank you from submitted successfully all right so whenever any client fill up this form and click on this send message you will get that stored within your WordPress dashboard so if I now just go to our WordPress dashboard so here let's go inside dashboard now from your WordPress dashboard if you just go to the left side and hover over on midform then if you go inside entries you can see all the informations that your client has provided by using this contact form and I know each time you won't be logging in into your WordPress dashboard and check the entries from here from inside the mid form then entries so we should use another convenient way right so to do it let's now go inside LM Mentor page builder so here I wanna create it in a way so when any one fill up this form you will also get that as a notification on your email so to set up that first of all let's select this form now from left click on edit form and this time we have created the form so from here I have selected my form now let's now click on edit form so here we have created the design of the firm now we need to set up some settings so from Top here we can see the from settings let's click there and from this place this time let's go inside notification and first of all I'm turning it on okay so here you can write any email subject it doesn't matter because only you can see the subject so whenever you will receive any email you will understand this email is coming from your website I mean from your contact form so let's say my business name is JF digital so here I'm just writing email from JF DJ tell then within this field it says email to here you need to put your own email address where you wanna receive this email so whenever anyone fill up the form you will get all the information with this email address so here you need to post your own email or your admin email address here so here I'm writing mine and then within this email from and email reply to field you need to put your client's email address so you can easily understand who sent this email so here I'm showing you how to put this field name so first of all whatever we have done these two Fields let's just save it from here so save changes and now to get the email address of the client because whenever anyone fill up this form they will provide their email address within this field so let's select this field and here we need to collect this name so it's MF Dash email so I'm just selecting this MF I mean I'm just copying this name from here let's now again go inside from settings now from under notification here in this place within this email from here first of all I'm just typing a third bracket and ending the third bracket and within this bracket I'm pasting the name which is mf-ma fail so I'm just copying this whole thing from here also we need to paste it here within the email reply to field so whenever you will receive this notification on your email you can understand this email is coming from the contact form and you will receive that email on this email address you of course will write your email address here and here within this email from and email reply to field you will be writing your client email address so you can reply them directly from inside of your email box all right and here admin note if you have another person to deal all these emails you can just write some notes for them but it's optional so I'm just skipping it and let's now click on Save changes and we are done with all the settings so finally click here on the update and close button so we are done with our contact us page as well we just need to check how it's looking on mobile and tablet device so first of all let's go to the responsive mode I'm going to the tablet device so here on tablet device everything is looking great let's scroll down yep I think we just need to make it with to 100 so select the parent container from here on the tablet I'm just making it with two oops first of all I'm setting it as percent and here I'm making it to 100 so right now it's looking great so on the tablet it's looking perfect let's now move to the mobile device so here in the mobile device this Banner is looking great here we can see the title and then we can see the contact form so there is no problem but I think this time we need to push it down so first of all I'm just right clicking here let's just right click here and open the Navigator so basically here this one is our third container this time I just wanna make this margin to zero or maybe we can add some positive margin at the top so first of all I'm unlinking it and at the top I'm adding 30 pixel of padding and let's just select the map from the Navigator let's now go under its Advanced Tab and here let's take this custom um just okay we can keep the custom and we can just make it with to first of all I'm setting it in percent and I'm making it 100 so right now have a look here also with this container let's select it here from under Advanced tab I'm giving they are padding to 20 pixel Also let's unlink the margin here at the top I'm giving 20 pixel of margin so first of all this area is now looking great this contact form area is looking great on mobile device also this map is looking great but I think we can reduce the map size or map height so go under its content tab here instead of 700 we can just make it to 400 now and then let's scroll down all these are looking great and here if you scroll down yep right now everything is looking great on mobile device as well so we can now close the responsive bar from top and don't forget to click on this green update button to save your work also I'm closing the navigator from here all right so we are done with all of the major Pages now I just wanna show you how you can write a blog post how to create your blog page and how to customize all of them so first of all let's now go back to our WordPress dashboard first of all I want to show you how to create a blog post okay so from here let's now hover over on posts from their go to all posts and here we can see just this one okay first of all I'm just closing this notification okay here we can see this Hello World blog post actually it's the dummy blog post came with default WordPress installation so I don't want it now I'm just clicking on trash to delete it and now I just wanna create a new blog post so from here from the top I'm clicking on add new now here you can write in a blog title for example if you write blog post about freelancing so you can write anything here so free lensing tips for 2023 I mean anything you will be writing some attractive and search friendly title here so here I'm writing a real block title so how to choose website color schemes and then okay so this is the title of your blog post and within this field you will be writing the real blog post okay so here you can write anything for example here I'm just writing color this game is very important for a website and then I'm writing here you can just go to canva to learn more something like this and you can write the whole bunch of text here also if you want you can add images I'm showing you that very shortly so here I just wanna show you something for example if you wanna make this color scheme bold so you just need to select this color scheme and from Top you just can click on this bold icon so you see it's instantly become Bolder also this important for a website hold this text I'm just selecting it if you want to make it italic from Top just make it Italy also here for example it says go to canva so I just want to link this canva with canva website so I'm just selecting this canva word now from Top I'm just selecting this link icon and here within I'm just typing canva oops canva website link which is canva.com now hit enter so now when anyone clicks on this canva that will take them to the canvas website so similar like that you can add anything if you want to add any image within your blog post you just okay so for example you have written this paragraph then right after that hit enter and always on the right side you can see this plus icon so this area we are using or the software we are using it's called Gutenberg so this is the default writing tool or the designing tool for WordPress right now so for our pages to create our beautiful Pages we have used Eliminator page builder but for writing our blog post now we are using Gutenberg Builder okay so here we just need to do the simple things like you can write the paragraphs like we already have written and also if you want to add an image from here if you just put your cursor here on the right side you can see the plus icon just click on this plus and you can select any of the Gutenberg widget from this place okay so I just want to use an image so I'm selecting over this image and now you can upload this image you can I mean you can upload this image from your computer also you can upload that from your media library so I'm selecting media library let's select for example this image now click on select effect so instantly your image has been inserted here also if you want you can make the image smaller or bigger just click over this image and from here by dragging it you can make the image smaller like this and then if you want you can adjust the alignment for example I just wanna make it centered so here I'm clicking on align centered you see it's instantly getting centered so in this way you can write anything within this Gutenberg Builder so here I'm removing this also I'm removing this text and I'm just pasting some real content here so here it's looking like it so you see you can add any images within the blog post then also I wanna show you some other example so let's say if you wanna add any list item so right after this paragraph I'm hitting in there and here let's say you want to add some list item so from this click on this plus icon and here you will find the list so here I'm selecting list so similar actually it's similar like Google Docs so here is your 0.1 then you can write 0.2 just hit enter and here you can write the next points so it's super easy super simple all right so I'm just removing all these bullet points okay so you understand how to write the block title how to write the block description how to add images within your blog now I wanna show you some other thing like here if you have a look on the right side we were under block tab now I'm going under this post tab so here let's scroll down now I'm opening this category field and initially you can only see this default uncategorized category so I wanna add our own category so I'm just clicking on add new category and this post I want to take it under business category so here I'm writing business and click on add new category so you see the business category has been created and it's now checked also so you can add multiple categories for a blog post so here I wanna also mention here WordPress as it's a WordPress related blog post so click on add new category you see it's instantly added so you can just check or uncheck it anytime now let's scroll down and from this page from the featured image you can add the featured image for your blog post so let's open it and here I'm setting the image so go to upload files click on select files and for our all blog posts I will be using these images so I'm selecting all of them together now click on open now for the first blog post I'm selecting this image let's now insert it so here we can see the featured image all right so now we can publish this blog post so from Top here we can see publish just click there and publish one more time so our first blog post has been published now if you wanna see the blog post from here you can just click on view post so I'm just opening it from a new tab and here we can see our single blog post page at the top we can see the featured image and here at the top we can see business and WordPress these are basically our blog post categories here you can see the blog title also here you can see the author name which is my name here we can see the publishing date by the way I will show you very shortly if you want to customize any of them for example if you don't want to show the author name or if you want to hide the publishing date you can do that as well so I will show you everything very shortly for now just have a look so here we can see the blog details the images Also let's scroll down at the bottom we can see the comment area so people can make comments on your blog post actually you can see lot more options like you can go to the previous blog post also you can go to the next blog post also you can see the similar blog post at the bottom here but to do it we need to add more blog post because right now if we go to our WordPress dashboard and this time if we go to all posts you see we only have now one blog post that we have just posted now in the same way I just wanna create some more blog post and I don't wanna make a board so I'm creating other blog post really quickly and I'm coming back to you all right so I have just created four other blog posts in the same way now if I want to preview the blog post then if you just hover over on any blog post and if I click on view we can see the blog post on real browser so I'm just opening it from a new tab now here we can see the single block post here you can see the title and like before here we can see the category here is the blog title here's some metadata and here's the blog description and here as you have written some other blog post so if when I scroll down you see we can here go to the previous blog post we can go to the next blog post also here underneath here we can see some other blog post actually these are coming from the same category okay and underneath here people can make comment on our blog post now like I said I wanted to show you how you can customize your single blog post page to do it we will be going to our theme customizer and to go to theme customizer from this Stop Bar you can just click here on this customize also there is another option so if you go to your WordPress admin panel from here just hover over on appearance so you can go to customizer from this area as well so I'm just going to the front end of our website and from this top black bar I'm just clicking on customize okay so here we are now inside the theme customizer on the right side we can see the single blog post and if we now want to customize anything actually personally I like it very much but let's say if you want to customize it then from the left side to edit this single blog post page from left side go inside post or Pages layout and then from within this place let's just go inside single post layout now here have a look so here we can see the blog post title if you don't wanna display this title you can turn it off from this place so I'm just turning it off now we can no longer see the blog title but of course we want to see that so here I'm enabling it again and there are a lot more other options like if I scroll down from left side so here you can enable or disable any of these elements for example if you don't want to appear these categories here at the top you can just click on these eyeball icon so here I'm just clicking on these categories you see here at the top we can no longer see the categories so in this way you can enable or disable any of this data and there are more customization options so by default you see we can only see at the middle we can see the blog post but let's say if you wanna use a sidebar on the right side of the blog post and you want this main block post area at the left side you can then select this layout but personally I like this one so I'm not changing anything from this place and other than that here are more other options like content style if you want you can just play or mess with other options but like I said personally I like the default settings also from here like at the top we can see the featured image if you don't wanna display the featured image here on the single blog post page you can just disable it from this place and now I want to show you another thing so from Top if I just go to our blog page so I'm clicking blog from Top now here in this Blog Page we can see all the blog posts are coming here within these cards so if you also want to customize these settings or layout you can do that as well so to do it from this left side let's just go back by clicking on this left arrow and then instead of the single post layout this time we will be going inside of this archive layout so here at the top of this page we can see the title it says blog but personally I don't want it if you want you can keep it but if you don't want it you can disable it from here so I'm just turning off this show archive title so I'm disabling it now at the top we can no longer see the title also with each of this blog post if you wanna customize them you can do that so from left I'm just scrolling down so here you see there are post items I mean there are post elements so with each of this blog post we can see here category here is the title here is the author name publishing date also here we can see some excerpt of the main blog post also here we can see read more button if you want to enable or disable this from the blog page you can do that from here so for example let's say if you don't wanna show this except here you can just disable it so this is the excerpt so I'm just turning it off so now we cannot see the exact we can only see the title submitter data and read more button so if anyone clicks on this read more button that will take them to the single blog post page but actually I want to enable the exert but you see personally I don't like this kind of a big chunk of text so from here I'm just clicking on this down shift run Icon so you can control the word count so 55 word is huge so here instead of 55 I'm just writing 25 words so now the excerpts are sweet and short all right so we are also done with our block page settings so from Top now I'm just going back to our home page okay so we are done with all the pages now I just wanna show you how to work with this header also if you scroll down how to work with this footer okay so let's now start with this header first so first of all I just wanna show you how you can create a navigation menu like this because you see I haven't created this navigation bar it's actually created by itself from theme so now I wanna create a custom menu so to do it actually we can do it from the customizer as well so from Top let's now go back I'm going back one more time so from the main panel to create a menu from left side let's now click on menu and here to create a new menu I'm just clicking on create new menu and you can give it any name I'm just naming it main menu and then this one is very important so here is the main location so here I just wanna select it for primary and mobile devices primary means if you select it for primary it will always be shown on the header right side here in this place so I'm selecting the primary also I want to display this same navigation on the mobile so here I'm also selecting mobile let's now click on next and here we will be adding our menu items so from here click on ADD items and you see we can see all of our Pages here so I just wanna use these Pages as our menu link so first of all of course I wanna use our home page so I'm including home click on this plus icon and right after home I want to use about and then I'm adding service right after that I'm adding the single service which is web design and then blog and right after that I'm adding contact page and here I wanna show you another thing okay before that here I just want to clarify you like here we have just added our own pages but let's say if you wanna link anything I mean if you want to link any external websites link on the main menu you can do that as well so to do it you just need to open the custom option here at the top it says custom link so I'm opening it this time so URL for example here I'm just writing my website so it's a gym Fahad digital.com and I'm naming it hire me okay and if I now click on add to menu you see it's also added as a link now if anyone clicks on this hire me button that will take them to my other website okay but I don't want that so I'm deleting it from this place I'm just clicking on this X and now I want to show you another thing like here I want this web design as the sub menu of the services so to do it I just need to drag this web design I a bit right side here so I'm just dragging it to a little bit right side in this place right now it becomes the sub menu of the services item so if you want to have a real view I'm just clicking outside so now have a look here we have got home about then here we have got services and web design is becoming the sub menu of the services here you have got a Blog link and here is the contact Pages link so we are done with this navigation menu and now I wanna show you how you can work with more efficiently with the whole header so first I'm going back and going back again and from here let's open the header so now this is the header builder at the bottom we can see there are two columns this is the left column and this is the right column so on the right column we have added primary navigation actually it's coming from theme I have done nothing anything of screen and here at the left side we can see logo option okay before we start working with this logo I just wanna show you something with this navigation let's see if you want to design something with this navigation item how can you do that so from left side we can see the primary navigation option let's just go inside there so here let's say these items are looking much closer with each other so here I just want to increase their spacing so instead of 1.2 M I'm just making the spacing to 2 em so right now they are looking perfect also if you want to do some other settings with these menu items you can just go on the design tab from here you can change their normal color you can change the Hoover color also you can change the active color from this place but right now I'm happy what it is right now so we can just go back and go back one more time okay we went outside of the header let's go inside header again let's now go on the general tab now here in the left side I want to insert my logo so now I also want to show you how you can create your logo by using a free online tool so to create our logo we will be going to an online tool that is logo maker.com it's actually logo maker without the e so right after going inside logo maker.com it says start my design okay I'm clicking here and now this is the main canvas we can create our amazing logo here and let's say if you want to use any icon you can just search for that icon name from this place but you know what actually I just wanna keep my logo really so sweet and simple so I will be using only the text so first of all I'm selecting the text by clicking on this T and I want to create our logo name as JF digital so here I'm writing J F DJ tell then if you want you can change its font family so there are different type of font families and you can see the font categories from here so their designer Peaks fancy and cursive but I just wanna have a font which is simple and modern so I'm selecting it and then you can select the exact font family from this right drop down so I'm just opening it from here you can select anything for example you can select this one but it's looking kind of cartoonish so I don't want that actually I personally like Moon sirat so here I'm searching for monsterat here we go just select it and then if you wanna just make it bold click on this Styles icon from from here I'm enabling Ball by clicking here so it's now looking Bolder at the same time I also want to make it italic so I'm clicking on italic then if you want you can play with the line height or spacing but I'm happy with it and here I just want to show you another thing let's say okay first of all I'm just adjusting its width like this and then you can just make its size bigger by dragging the corners like this also you can make it centered align in this way okay actually first of all I just wanna make it more bigger like this and we can make it centered aligned in this way okay and then the next thing I want to do I just wanna duplicate this heading okay so first right click here and then click on duplicate now I'm dragging the duplicated one underneath here below and let's first start working with the first one here I just wanna change its color with our default blue color and the color code is you know you can use this color wheel to pick the color so here I'm writing the color code which is three four eight two f f and then the second one let's select the second one I just wanna change its color to three two one F 0 f so it's kinda dark colored now here I wanna do an interesting thing so first of all I'm selecting the first one here I just wanna keep this jfd word so double click here and I'm removing this next letters and from the second one I just wanna keep this i g i t a l word I'm just removing this jfd letters from here okay let's now select the first one and I'm adjusting its with something like this also let's adjust its width so here I'm just making it something like this now here I'm just moving it more left side and okay I'm just moving it a bit more and right after that here I'm putting it in this place now you can select both of them together just by hovering over I mean just drag over them together and then you can make them smaller together or you can make them bigger together so I just wanna make them bigger like this it went under this color palette but no worries because it will be saved the way we are seeing it right now and now I just wanna save it so from the top right corner click on the save logo and then it says if you want a very high resolution image I mean if you want a very high resolution logo then you need to pay them but it's completely optional because on web we don't need that much high resolution image so here I'm just clicking on download resolution PNG file let's click there and from Top I'm just clicking on I accept then click on download free low resolution file so here it's downloaded let's now go back inside our theme customizer so now here I just wanna insert our logo so from left side let's now go inside of this logo actually we can upload our logo from this place but I want to show you the best way to upload your logo so for that we will of course come back within this header but let's just come back I mean let's just go back okay go back one more time and here let's now go inside the site identity and here we will be uploading our logo okay so click here on site title and Logo control then from here click on select logo go to upload files click on select files so here is the logo we have just created just select it click on open then click on select and here I don't want to crop it so I'm clicking on skip cropping and here you go by the way we can see the logo and the site title at the same time but I don't want this side title so from here logo layout I'm just selecting the logo and then this logo is looking kind of big so you can control the logo's width from here so I just wanna keep it to 140 pixel also from this place I wanna show you another thing how to add your favorite icon because here at the top we can see and WordPress icon so it's not looking much professional so here if you wanna add that tiny icon on your browser top so let's just scroll down from here open on site icon and from here click on select site icon and make sure this icon should be square shape so it could be 80 pixel by 80 XL or 100 pixel by 100 pixel like that so you can create your fav icon also by using the logo maker tool but I already have created one so I'm just going to upload files click on select files and here this one J F Dash we have icon dot PNG this one is my fab icon so I'm selecting it click on open then click on select and I also don't wanna crop it so here I'm just clicking on skip cropping and here you go at the top of the browser we can see the little tiny icon not only this page this five icon would be shown on all other pages so it's really great for your branding all right now to save this work just click on this publish button now let's go back and now we can again go inside the header so we were basically building our header from here now I wanna show you some other thing let's say if you want a transparent header you can enable that as well so to do it from here you can just go inside enable header and you can enable the transparent header from this place but I don't want that so I'm going back and from here you can also enable the sticky header okay so here I'm just going inside sticky header and I want to use these sticky header so from here enable sticky header I'm just making it yes whole header this option now have a look if I now scroll down the header is becoming sticky at the top so it's a great experience for your user but here I wanna do a little tweak like I don't want this header all the time stick at the top I just want it to be sticky while we are trying to going to the top like this okay so to enable that option I'm turning on this one it says enable reveal stick on scroll up so while we are scrolling down we cannot see that but while we will try to scroll up like this the header will appear that time so to turn it on I'm just turning on the first option this one by the way I don't want it to enable on mobile devices so by default it's off on mobile device so I'm keeping it off all right now have a look if I try to scroll down we cannot see the header at the top in this place but let's say if I try to scroll up like this here we can see that here is appearing here it's really cool and now if you wanna do some styling with it you can do that as well so for example I'm just going under this design so here let's say you wanna add a different background color for the sticky header you can do that as well so from here it says sticky header background okay so let's just select it and let's say you just wanna make its color to Red something like this now have a look if I scroll down we cannot see the header but if I scroll up we can see the red header and if I go to the top the red color is gone because it's now not the sticky header is the general header but you know what I don't want that red color I'm just showing you what's possible so so to redo it I mean to undo it just click here on this undo icon so it's resetting but here I just wanna do one thing because if I scroll up you see we cannot understand what is the divider in between this header and this content so I just wanna add a tiny border while it Scrolls so from here we can enable the sticky bottom border so just click on this x because by default it's off so I'm adding just this solid color border I'm selecting this one and here its pixel would be only one pixel and let's set its color I just want it to make off-white color something like this or if you want you can just make it 2 pixel so it's easily visible and also here we can make it more light something like this so now have a look initially we cannot see any border also if you scroll down we cannot see the header but when we try to scroll up we can see the header also we can see this border so it's not conflicted with the below content we can easily understand this is our header how cool is that all right let's now go back from left side and here I wanna show you the mobile responsiveness of this header so you can just click here on tablet and mobile so here you see it's already looking great if I now click on this hamburger icon we can see the menu will appear like this on tablet also if we click on mobile from here in this place you see on the mobile this menu pop-up will look like this and it looks really cool so let's just click on this x but let's say if you want to change this hamburger icon then from left side you can just go inside this trigger now from here you see the default hamburger icon is very sharp so I want to use a bold icon so I'm selecting this one also if you want you can use this vertical three dots but personally I like this one so if I now click over it we can see the menu items here on the mobile device also same for the tablet device and on the desktop we can see the regular menu so we are done with our header let's now go back go back one more time now I want to show you how to work with our footer so this is our footer by default now I wanna customize it so first of all let's go inside footer and here we can see only the copyright text but I want it in two column so in the left we want this copyright text and on the right side we want the social media icons so to do that first of all I'm just removing this copyright test from this below row so I'm just deleting it now here I wanna use this one so to make it two column first of all we can just select this row or this row okay I'm just selecting this row so I'm clicking on this gear icon and from here I wanna make it two columns instead of three so I'm selecting two so here is the left column and here is the right column so now within the lift column click on this plus icon here I wanna use the copyright widget so I'm selecting copyright and within the right column click on this plus icon here I wanna use the social widget so I'm selecting social so if we scroll down here we can see at the left this is the copyright text and on the right we can see social items okay now if you wanna edit this copyright text you can just click here on this copyright gear icon so from here this copyright within this Kylie bracket means copyright icon this one and here so it says 2023 but it's Dynamic here so if you keep it like this in 2024 it will be automatically Changed by itself and here I don't want this WordPress Theme by Cadence WP so I'm just removing it and instead here I'm just writing actually I also wanna remove this site title from here so I just wanna write here for example All Rights Reserved by Jim Fahad something like this then also if you want you can control the alignment for example if you wanna make it right aligned you can do that but I just want to make it left aligned and vertical align I'm just keeping it middle aligned like this then let's go inside this right column so here I'm just clicking on this gear icon of this social so here by default we can see the Facebook Twitter and Instagram but if you want to add more you can just click here on ADD social and for example if you wanna add your LinkedIn just select LinkedIn you see the LinkedIn icon has been added instantly and then let's scroll down I wanna align them from right so I'm selecting right also the content vertical alignment I'm setting it to Center and if you wanna and of course you want to add the Social Links of the social icons so to do it you just need to click here on set Social Links just click there and we have added Facebook Twitter Instagram and Linkedin so you just need to put link within the Facebook Twitter Instagram and YouTube field so they will get the link automatically alright so let's now go back go back one more time so we're also done with our footer so we have made our complete website we can now minimize the customizer from left side but don't forget to click on this publish button to save all the settings okay let's now minimize the bar from left side by clicking here on height controls and have a final preview of all of the pages so here this is our beautiful home page we can see the beautiful banner everything is looking great here is the services area here is the about us area here is our beautiful tabs so we can go under web design branding like this and here is the testimonial area here is our Global footer everything is looking great let's now go to our about page so here is everything is looking great on about us page as well so we can see the navigations I mean we can see the animated icons here here we have got some fun facts about ourself and then here is the team members with their Social Links also we have used the testimonial here from home page let's now go to our services page here our services page is also looking great and also we have created this beautiful pricing table all together it's looking really great let's now go to the single Services page so here I'm going to web design page so here is our web design page and following the same manner you can create other single Services page so here everything is looking great all the features and here we can see this hover effects all together it's looking really great so let's now go to the blog page here we have created this Blog Page by using the theme customizer and everything is looking great also if we go inside of in a single blog post in the single block post everything is looking great super clean and easy to read for visitors also from underneath we can go to previous and next post we can see the similar blog post from here also people can make comments here on our blog post let's now go to our contact page we have also created this beautiful contact us page from scratch so people can now communicate with us instantly by using this contact form and also we have made everything responsive for all devices so we have successfully made the whole website from scratch now you can create any kind of design by leveraging this scale feel free to let me know your opinion about this tutorial in the comment section please give this video a big thumbs up and feel free to share this video on social media once again thank you so much for watching this full tutorial I will see you in the next video for now bye bye

Channel: Jim Fahad Digital

Views: 489,857

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

Id: JAApJsuviA0

Length: 295min 53sec (17753 seconds)

Published: Tue Mar 14 2023