Responsive Landing Page Design in 2023 Using Elementor Flexbox (WordPress & Elementor For Beginners)

after watching this Elementary flexbox Master Class you will be a real ninja of Elementor page builder you can literally design anything in Elementor whatever you will imagine you can replicate any design from scratch you can make any advanced website from your clients provided designs you will learn how to think and design like a professional web designer this tutorial is 100 beginner friendly you don't need to have any coding skill not any design experience so if you're very new to Wordpress and Elementor this one tutorial will make you a professional web designer also I have made everything in elementor's latest flexbox model so you can also become an Elementor flexbox expert by watching this tutorial in this master class we will not use any primit template no additional plugin and no paid theme is required we will create everything from scratch step by step now let me introduce you to myself first my name is Jim Fahad I'm a professional web developer I have done more than 1200 plus website projects for my clients even I have done more than 100 jobs on a freelancing marketplace with five star ratings and in this tutorial I will show you the exact way how I have been creating my client's websites so you are basically learning from a real professional web developer I'm really excited if you're excited like me please give this video a big thumbs up this is the only thing I want from you other than that this video is completely free for you let's now have a look at what we're going to make in this tutorial first of all I will show you how to create these type of amazing hero Banner area how to work with these headings also how to install the headings very creatively like this I will also show you how to create this type of inner forms and all other creative areas also if you have a look you see there are some floating images or icons here around I will show you how to create this type of creating floating or moving animations next I will show you how to create this type of curves or hover effects that will give your website really a premium feel then let's scroll down I will show you how to design this type of layouts by using Elementor Flex container and then I will show you how to create this type of creative areas or creative layouts also I will show you how to make this type of hover effects and then I will show you how to create this type of animated counters how to embed videos within the website also if you click over this video icon you see the video is appearing within this beautiful pop-up or light box alright let's close it then I will show you how to create these type of Custom Image Carousel and you see instead of the boring left and right arrows I have created a custom bottom arrows like this then let's scroll down here I will show you how to create this type of creative call to action areas and how to make these creative buttons with hover effects and then I will show you how to create this type of creative pricing tables here you can also see the beautiful hover effects like this and then I will also show you how to create this type of creative toggle bar so you can switch in between monthly and yearly pricing next I will show you how to create this type of testimonial Carousel like this and then I will show you how to create this clean small cards by using Elementor flexbox and finally I will of course show you how to create this type of complex footer layout by using Elementor page builder then at the right bottom corner you see there is a top Arrow icon so if you just click on this icon that will take you to the top of the website and the interesting thing is initially you cannot see the go to top button here in this place but if you scroll down a few portion of the website you see the go to top button is appearing here so I will of course show you how to make this type of function I'll go to top button then I will show you how to create a transparent header like this so you can post your logo your spatial button and navigation menus so initially it's a transparent header but if you scroll down your page a little bit you see the header got sticky and its background color is now completely white then if you go to the top again you see the header is becoming transparent finally I will show you how to make any website 100 responsive for mobile and tablet devices all the hidden techniques in elementary Flex container everything in detail is step by step so without further Ado let's get started all right so we're now inside WordPress admin panel or WordPress dashboard this is a completely fresh WordPress install I have just done two things here so first of all if I go to appearance to themes you see I have just installed and activated the hello Elementor theme and then from plugins if I go to install plugins you see I have installed here just Elementor and Elementor Pro plugins by the way Elementor Pro is not mandatory in this tutorial because I have just done five to ten percent of this landing page or this website by using limiter Pro but I highly recommend you to have Elementor Pro if you don't have Elementor Pro I will put Elemental Pro purchase Link in the description but let's say if you don't want to purchase a limiter pro at all still you can watch this tutorial because you will get a lot of value inside of this tutorial for your design carrier alright now first of all I just wanna do an elementary setting so for that from left hover overall Elementor from there let's go to settings because in this tutorial my main goal is to show you how to work with Elementor Flex container that's completely new technology so to enable the Elementor Flex container from under experiments go under experiments from here let's scroll down it says Flex container you see right now it's under beta that's why actually we need to manually activate it so from here I'm making it active let's scroll down and click on Save changes all right now I wanna create a new page so from left hover over on pages from there click on add new now here I just wanna give this Pages name to awesome landing page let's from right up Corner click on publish click on publish one more time and now I wanna edit this page by using Elemental page builder so from Top click on edit with Elementor all right so we are now inside Elementor Page Builder and here everything is self-explanatory actually so on the left everything we can see all these are Elementor elements or Eliminator widgets and on the right side this is our canvas so the main thing is we will be dragging these elements or widgets from left side to the right side then we will Design the things like we will be changing the colors we'll be increasing or decreasing the font sizes like that but before doing any other thing first of all I want to do a basic settings so let's go to the very bottom left corner and click on this gear icon because first of all I just wanna set the page layout to Elementor canvas so now we can no longer see the header and footer that was basically coming from the theme and I actually don't want you to distract by those header and footer I want to do the complete thing just by using Elementor page builder all right now here's the fun part begin now let me show you first here at the left side we can see this is the heading element or heading widget so if I want to use this heading widget on our website or on this right canvas what we can do we can just drag this hidden widget from left side to the right side here like this and you know if you want to change the text you can change the text from this place but before that I wanna add some more elements or widgets here within the canvas so from Top click on this Rubik's Cube icon and here underneath this heading I wanna add a text editor okay so let's just drag this text editor to the canvas here and underneath that actually I want to add some more elements so click on the Rubik's Cube icon from here I'm dragging the button widget here on the right side then underneath let's add another widget so click on the Rubik's Cube icon and from here you know you actually search the widget from here so here I'm searching for icon box so here it is let's drag this icon box to the right side here in this place by the way don't get confused because I'm not creating the real website at this moment I have dragged all these elements from left to the right side only to give you some example you already have got the basic idea if you wanna drag an element from left to right side all you need to do you just need to click on this Rubik's Cube icon then you can drag your essential element from left side to the right side within the canvas and then let's say if you want to change the color of this heading just click over this heading you can go under its style tab then from here you can change this text color to any other color by using this Color Picker and same thing goes with all other elements let's say if you wanna change the design of this paragraph just click over that then go under its style tab from here you can change the text color if you wanna change the size or typography of this paragraph Just from here click on this pencil icon and from here you can change the font family you can change the font size font weight all other things from this place but now before doing any other thing I wanna introduce you with the global settings first let me may tell you why global settings is so important to know at the very first let's say in your page or your whole website you have tens or 100s of headings and you have made all the headings color red then let's say one or two weeks later you decided you need to change all the red color headings to blue color then what you will do you can change all the colors one by one from red to blue color but if you set that red color as the global color then you don't need to change all the headings color I mean hundreds of headings color one by one from Blue to red or red to blue you can change the red color from one place then hundreds of your headings get the blue color from the same place so that's the power of global settings and you can not only set the global color if you want you can also set the global font Global typography everything I'm showing you everything step by step but when you want to work with the global settings the very first thing you need to do okay the first thing here I'm just clicking on this green update button because I don't want to lose any of this at this moment let's just keep it like this and I want to go back to our WordPress dashboard and to do it from here click on this hamburger icon and from here click on exit and yep the setting it says if I want to go back to this post yep no problem so click here on apply click on leave and by the way I cannot see the left bar from left side if I want to enable the left sidebar so from top right corner click on this vertical three dots from here I'm just disabling the full screen mode from this place now I can see all the left menus here okay so the settings I wanted to do from the Elementor let's go to settings like I said I wanna do all the global settings from inside Elementor so for that reason from here I'm disabling these Global colors and fonts I mean I just wanna disable this default colors and fonts so let's check it also check it and click on Save changes all right now we can go back inside Eliminator and you know we can just go to Pages 12 pages here is our awesome landing page and when you hover over here it says edit with Elementor let's click there and this time I just want to open it from a new tab so anytime if I need to go back to Wordpress dashboard I can do that from this place and here on the new tab Elementor has opened okay so now to set the global settings from left top Corner click on this hamburger icon and from here click on site settings now the first settings I want to do I wanna set the global typography so click on this typography and from here from inside this body typography I wanna change the global font so from here let's click on this pencil icon and here from here I'm opening the font family you can see here tons of font families all these are Google fonts from here for example if I select this font globally you see all the fonts has been changed here instantly so you can understand all the fonts are basically coming from this place so here instead of this font family I just wanna set the Roboto family so here I'm searching for Roboto here we go let's select a Roboto then actually I don't wanna do any other thing with the global typography just the fun family I'm okay with that now let's click outside and go back now I wanna set Global colors so to set the global colors first of all let's click here on global Colors by default we can see some colors here but actually I won't be using any of these so instead of primary I wanna change its name so just click here and I wanna name it black main so here I'm typing black main it would be our main black color and the color code would be hash 0 e 1 1 3 3. then here um I'm just renaming this color instead of secondary I'm naming it black light so it would be also black but lighter than the main black color and the color code would be hash five zero five zero five six then the third color actually here I wanna use a gray color so here I'm naming it gray and the color code would be hash E7 e a e f and then here I wanna use our brand colors instead of accent I just wanna make it really easy to remember so here I'm just naming it brand color and the color code would be hash e e f 1 F6 and not only these four colors I wanna add one more color so to do it from here just click on add color and I wanna name it as white background and in short we can name it white BG and the color code would be hash actually I want to make this white busy color to hash eef1f6 and the brand color instead of this gray or whitish color I want to change it to Hash ff3 e66 so you can call it kinda reddish pink color all right now to save these colors from bottom click on this update button and then from Top let's go back and this time I just wanna set the colors globally within the typography so this time go inside typography now here you see if you want you can select the global body color from here by using this Color Picker like this but instead of that as we have already set the global colors from the color palette for that reason I'm just clicking here on this custom Global icon and for the global body text color I'm selecting black light color you see all these paragraph texts are getting the light black color from this Global body color then here is the option for Global links color so for the Global Link color I'm I'm just setting the color to the black light color you see the button text color has been changed to the light black color also I want to change the links hover color so let's go under hover State from here on Hover I'm just changing its color to our brand color so let's select the brand color now have a look on this button text if I just hover over on it it's getting the global brand color so it's simple like that now let's scroll down I don't wanna set H1 because I won't be using H1 inside of our website but here H2 and 3 of course I wanna change its Global color so on H2 um setting is the global color to Black main also for the H3 I'm set getting the global color to H I mean for H3 I'm setting the global color to main black color and then for the H4 I'm just setting the color to the brand color you will get the reason why I'm doing it so for now just follow whatever I'm doing here you will understand everything properly later while we will be creating the main website all right now to save all the settings again click here on this update button and then from lift up click on this back icon now I wanna do some more global settings so from here let's now go inside layout because in flexbox Eliminator by default as 10 pixel of padding with all containers and that's really super annoying for me so I'm disabling that default padding from here so I'm setting the default padding to 0 pixel Also let's save it by clicking on this update 8 now let's go back and from the global settings I just wanna do one last thing I wanna set up the design for the buttons for the all buttons so to set up the global button settings from here let's click on buttons so here with the button very first thing I just want to go inside the typography and from here I'm making its font size to 15 pixel and also I'm making the font weight to 500 you can see the change immediately here within this button then from here I just wanna set the main text color from here so the text color would be the black main color from the global colors and this color this is basically the background color of this button so I wanna set it as white so I'm dragging this Color Picker color to the white like this then from here let's set the Border type to solid and I wanna add oops not none I want to set the Border type to solid and here I'm adding border width to one pixel or we can make it two then from here I wanna set this border color so from the global color let's see select the gray color then from here I wanna set the Border radius border radius actually the corners so if I wanna make the corners more rounded I wanna increase the actually I need to increase the Border radius value inside of this field so from here I'm making the Border radius value to 30 pixel you see the corners are more rounded here on this button then here is the padding option so padding is basically the Inner Space of this button so here if I set the padding value to 30 you see 30 pixel space has been added all around within this button but here I wanna do make some change so first of all let's click here to unlink them so I'm clicking here now let's click the right and left value to 30 but the top and bottom value instead of 30 I'm making them 15 also 15 on the bottom like this so the button is looking great at this moment but we need to do a little bit of work on Hover so if I want to change something on Hover from here let's click on the hover state so on the hover I'm making the text color to white color from the Color Picker then the background color I'm changing it to the brand color also the Border color so from here border type I'm again selecting it to solid then with to 2 pixel then the color I'm also changing it to brand color so at this moment if I hover over on this button you see the background and Border color has become the brand color and the text color is now white color so if now we need to create 10 or 20 buttons within our website we don't need to do that manually all these settings will be applied on all the buttons we will have in our website how cool is that all right now if you want to change the setting you know you just need to click here on this update button so now I just wanna go back to the main panel so from here click on X but before you start creating the real website I just wanna show you some handy stuff so from the left top Corner let's click on this hamburger icon if I click on user preferences so from under the preferences here you see it's ey theme so by default it's white but I'm setting it to dark because I personally love Dark theme games and then this is the panel width the panel is this left bar so if you want to increase the size you can increase it like this by dragging this to the right side but I just wanna keep it to the default 300 pixel like this then from here I just wanna turn on the editing handles because at this moment you see if you wanna change anything with any elements or widgets you just need to click on this blue pencil icon or you need to right click here to find all their available options but from the left sidebar let's click on the hamburger icon again from here go to user preferences if I enable the editing handles from this place just have a look now if I now just hover over on this blueprints icon I can see some handy options here like duplicating or deleting the elements here so actually that's super handy and it will make our workflow super faster all right then the next thing here it's the responsive preview and by default the hidden element option is shown but sometimes it annoys me so here I'm just hiding it but if you want you can keep it show and here exit to yep I just wanna check this option actually it doesn't matter but I'm just keeping it this post now I just wanna delete all of this dummy contents so let's click on this x also click on this X and these eggs let's delete this x I mean let's delete it by clicking on this X as well so this is a completely empty canvas for now click on this green update button to save our empty canvas so here now I want to create our hero Banner first so click here on this Rubik's Cube icon so we can see all the available elements here on the left side but now instead of just dragging this element from left side to right side first of all actually I just wanna make a skeleton within our canvas so to create the skeleton or this structure first of all we need to click on this red plus icon and here you will find a lot of available extractors so first of all I'm selecting this structure the first one let's select it and don't get confused with all these available options I will explain everything step by step so for the moment let's just scroll down and from here open the additional options and for this section or for this container I'm making the Overflow option to Hidden just stay with me follow whatever I'm doing I will explain it later why I have given the over water flow value to Hidden let's now open the container from here so for this container all these default value is fine now let's just go under the style tab or before moving to the Styles let's go back to the layout because here temporarily I Just Wanna Give a minimum height so from here instead of pixel I'm setting it viewport height it's VH so let's select it and let's drag it to the maximum value so it will cover 100 viewport height now we will be doing everything within this 100 VH height or instead of 100 if I make it to 70 which you will understand it properly of what's Happening inside here again this is just a temporal height I'll remove it later now before going to style tab let's go under Advanced tab because I want to make you understand that is spacing first so here let's say if you wanna add some breathing space within this container you can add that from here by using the padding so from here if I set the padding value to 100 you see 100 pixel of padding has been added to that top bottom left and right but I want to apply different value to the different sides so you already know we just need to unlink it first by clicking here and at the bottom I wanna add 200 pixel of padding like this then at the left and right instead of 100 I am just adding 15 pixel of padding alright let's now go under the style tab from here if you wanna add any solid color background you can do that from here from the background type let's click on this pencil icon from here let's see if you wanna change it to any other color for example red or you can drag this color wheel from here so if you want to make it blue or black or white you can do that but I don't wanna use any solid color so to revert it just click here on this clear button instead I wanna use the global color that we already have set so from here click on this globe icon and for this area I wanna use this Global BG or Global background color from here you see it's kinda of white color then along with the background color I also wanna use a background image so to use the background image from here let's click on this choose image button or this plus icon Now by clicking on the select files button you can upload images from your computer so from here I'm clicking on select files let's go inside images folder and for the background image let's select this hero image now click on open it's already uploaded by the way if you want to use all the images that I'm using in this tutorial you can just go to gymfathdigital.com I will put this Pages Link in the description from that page if you scroll down a bit here under important links it says download the images I have used in this tutorial just click there and you will get all the images that I'm using in this particular tutorial all right let's now go inside Elementor page builder now from here let's just make sure you have selected the Right image now from here click on insert media so here we can see the background image but I just wanna adjust its position so from here you can play with the position so if you want you can set it to sender sender or if you want you can set it to top Center there are lots of options available you can play around all of them but for this one I'm selecting bottom right then if you notice you see this image is repeating here at the top right or at the left bottom side so I don't want that for the reason from here I'm making the repeat to no repeat then here's the size option let's open it if you want you can make it cover or you can make it contain also there are lots more option actually I wanna set it as a custom size so instead of 100 I just wanna placing at this point so 58 is looking perfect for me all right now within this container I want to add some content or elements so you know from here let's click on this Rubik's Cube icon first of all I just wanna drag a heading widget so let's drag this heading widget from left side to the right side here now if you want to change the text you can change that from here just by triple clicking here and you can change the text from this place or from the left side just remove the text and here I want it to say foreign Day free now let's see if you wanna make the alignment to Center you can do that from here or right aligned like this but I just want to keep it default so I'm removing right so by default it's going to the left side now if you want to do any styling with it go under the style tab from here the first thing I want to do I wanna change its color but you may remember I have set the global color for the H4 to our branded color so for this heading let's now go under content Tab and and instead of H2 I wanna make it H4 so from here I'm making it H4 you see it's getting the Branded color instantly now I just wanna change its size so go under the style tab from here let's open the typography just by clicking on this pencil icon from here I'm making its font size to 16 pixel then the width I'm making it to 500 like this now underneath that I wanna add another heading widget so click on the Rubik's Cube icon from here I'm dragging The Heading widget underneath the existing heading here now here instead of this text I'm just pasting some text or heading text here now I wanna show you some other thing let's say I wanna add a line break within this launch and your this word here all I can do in in between the launch and your text here I need to add a histamine tag that's very easy within the tag I just need to write BR that will be automatically adding the spacing between this launch and your word I wanna do the same here right after the one and in between application I wanna add another line break so here right after one here within the tag I'm just writing BR it's simple like that now if you wanna change the color or if you wanna play with its size you know you just need to go under its style tab from here first of all I'm just changing the text color to our Global black main color then let's go to the typography from here I'm making the font size to 64 pixel it's really big then I want to reduce the font weight to 400 like this but here I just wanna make this application word to Bolder so to do it let's now go under content Tab and here you see this is the application word so before the application I wanna insert a tag that says b So within the tag symbol here I'm just writing B and here I need to end the B tag just by writing like this within the tag I'm writing a forward slash and B So within the starting and closing B tag the application word is becoming bold but let's say if you're not happy with this bold weight if you wanna make it more Bolder then you can do another thing here so within the first tag I mean within the first B tag just follow my cursor here I'm making an space I'm making a Space here and I'm typing is tile equal then within the quotation I'm just writing font Dash wet then a colon and I'm making it to 900 you see it's becoming more Bolder so here you can change this value to 900 to any other thing if you just make it to 100 you see it's becoming thinner but I just wanna make it more Bolder so instead of 100 I'm making it 900 like this then underneath this heading I wanna add a paragraph So let's click on the Rubik's Cube icon from left side this time I'm dragging this text editor widget underneath this heading here in this place now instead of this dummy text I'm pasting some real text here now you know to do the styling let's just go under the style tab from here the text color let's select the global color so from here I'm selecting the black light color then let's open the typography from here I just wanna increase the font size to 18 pixel all right by the way if you notice here on this heading seems like they are very busy there is no space in between so to adjust it let's click over this heading go under its style tab let's open the typography I just want to adjust its line height so first of all I'm selecting it in em and I'm making it 1.2 actually it's too much let's make it just 1.1 right now it looks perfect all right now underneath this paragraph I wanna add a container that would be basically a inner container okay so to do it from here let's drag this container underneath this paragraph here and not actually one container underneath this container I wanna take another container so let's just duplicate this container one more time like this so here we have got one container and underneath here is another inner container and why am I saying this inner container okay so to make you understand it properly I'm going to take the help of the Navigator so whenever you want to open the Navigator just right click anywhere of the Elementor canvas right click here and click on Navigator so you can understand they are structured properly now first have a look so if I scroll up a page I mean if I scroll up this page a little bit here at the top you can see this is our main parent container so if I click here you see on the Navigator this parent container has been selected and within this container here we have got a container here and underneath that here we have got another container that we have just taken and I know sometimes it makes confusion for that reason I always rename the container's name so this is the parent container so just double click over here and I'm naming it hero Banner then here the first inner container I'm renaming it to form wrapper because within that I will be adding some form then the second inner container I'm renaming it to feedback wrapper because I will be inserting some feedback stuff within this inner container all right so let's now start with the form wrapper this container you see whenever I'm selecting the wrapper from the Navigator this inner container is highlighted here within the canvas okay so with the first tile container the first thing I want to do I'm making the content with instead of boxed that's the default value I'm making it to full width so if now if I move the navigator to the top here you see the width is 100 and you can control its width from this place you see it says width and by default it's set in percentage if I move this bar to the left you see the width is now decreasing like this and I wanna keep it as 34 percent of width then I wanna give this inner container a background color so go under the style tab from here let's select the background type to Classic and from the Color Picker I'm making its background color to pure white color then I wanna add some border with it so from under style tablets scroll down here you see it says border just open it first of all I'm making the Border type to solid then have a look here if I set the Border width to 3 pixel like here I'm putting three and if I minimize the butter for the moment you see 3 pixel width has been added all around with the container actually we cannot see it because there is no content inside just open it for the moment here you see three pixel border has been added all around with this inner container but I don't wanna apply the border with this whole container I just want to apply it on the left side for that reason I'm just unlinking it and to the top I'm making it zero right and bottom also I'm making it zero so here only at the left side the Border has been applied then the lift border color I'm selecting it from the global color and that would be the brand color also I wanna make the corners rounded so from here I'm setting the Border radius to 40 pixel next with this inner container I also want to apply some box Shadow so from here let's open the box Shadow by clicking on the this pencil icon and from here first of all you can select the Box Shadow color from this Color Picker let's open the Color Picker by default it's set to 0.5 but I want to reduce it more so I'm dragging it to the left side so it's now 0.2 you can see it here then from this place I'm making the vertical value to 15 the blur value I'm making it to 60 and here is split value I'm I'm just making it to negative so if you want to make any value to negative you can just click here on this down shape run Icon like this but instead of negative 1 I'm making it negative 10. all right now I also wanna work with its positioning actually not positioning I wanna work with its spacing so let's scroll up go under its Advanced tab now first of all let's unlink the margin from here because I wanna only add some margin at the bottom so here at the bottom I'm adding 30 pixel of margin or let's just make it 20 pixel and padding here um setting 20 pixel let's just unlink it because I just wanna keep the 20 pixel of padding to the left side and on the right I'm making it just zero and at the top and bottom I'm making 8 to 10 pixel all right now within this inner container I wanna add a form so click on this plus icon now here I'm searching for form so here's the form widget let's drag this from widget within this inner container here so by default the form you can see here this is the default Elementor form but instead of that form I wanna use actually I wanna create an inline form so to do it first of all here you see there are three Fields name email and messages if you want to add more you can add them by clicking on ADD items but instead of adding items I just wanna use the email field here for that reason I am removing the name just click on the is X Also let's remove the message from here so click on the X now let's open the email field and I don't want this label label is basically this text you can see here at the top so I'm just removing it so the label is empty the type is email because this would be working as an email field now this is the placeholder so this placeholder text you can see within the input field so instead of email here I'm just writing info at example.com so people would understand they need to put their email address within this field alright now here is the trick so first of all I'm making the column width to 80 percent and then this is basically button you cannot see it yet and my goal is I wanna set this button to the right side here so to do it let's just scroll down and open this button tab first I'm making its column width to 20 percent like this so you already understand that total width is 100 and we have set the input with 280 percent and this button width to 20 that's why they are aligned within the same line and here we cannot see the button text but by default it says send but instead of this send I just wanna use a right arrow icon here so this syntax is basically coming from here so I'm removing this send from here and like I said instead I wanna just use a right arrow icon so from here icon click on this icon library and from here you will find all the necessary icons and here I'm searching for Arrow and in between them I wanna use this right arrow icon let's select it and click on insert still we cannot see it but we can fix that from under style tab but at least we can understand it you see here is the right array on all right now to install it properly let's just go under the style tab from here let's just scroll down and I'm opening the field tab you see by default the border with his one pixel that's why you can see this one pixel of a border here but I don't want that that's why here I'm setting the Border width to zero pixel now we can no longer see the Border here around so we have designed the input field now I wanna design this button so scroll down and open this buttons tab so here the buttons text color by default I wanna set it as our brand color so we can say it here and the default background color I'm making it transparent and to make it transparent we can just drag this Bottom bar to the very left side like this and then I wanna do the same thing with its hover term so go under hover here um making the background color to transparent color so drag this bar to the very left and then the text color here I'm making it to the Branded color this one so if I now hover over here we can see the background is transparent and this yellow color is the Branded color and don't worry about these borders because it's basically coming from the global settings that we have set for the all buttons of this page I will removing it particularly for this button by using some custom CSS so for the moment let's just keep it like this so other than that if I want to see the real preview just minimize the bar from left side it's looking great all right let's open up the left bar from here now underneath this container we have taken another container and we have renamed it to feedback wrapper so this time I'm selecting the feedback wrapper and similar like the form wrapper I'm making its content width to full width and here I'm making it with to 20 or let's just make it 25 percent and here I just wanna do some settings with the items for the moment just follow everything whatever I'm doing I will explain them later why I'm doing this so here I'm just making the direction to row then the Align items to centered and here gap between elements I'm just making it to 10 pixel now within this feedback wrapper I wanna take some inner container so to do it click on this plus icon from here let's drag a container here inside so you see on the Navigator within the feedback wrapper we have got one container here and I just wanna rename it so here I'm typing lift container and then I want to duplicate this container so let's just right click here and click on duplicate and I'm renaming it to write container so instead of left here I'm just writing write container so here have a look on this Navigator within the feedback wrapper we have got two inner containers one is lift container and another is Right container and you may remember on this feedback wrapper under the items we have set the direction to row as we have set its direction to row that's why this left and right container is now one after another horizontally but let's say if I now set the direction to column you see the inner containers the lift containers and right containers are now vertically one after another as my goal is to set them one after another horizontally that's why I have set the direction to row and here you have seen I have set the gap between elements is to 10 pixel this 10 pixel is the Gap in between these two containers so instead of 10 if I just make it to 30 you see the Inner Space has been increased to 30 pixel but I just want to go back to 10 pixel very easy now within this left container let's just click on this plus icon here I wanna insert an image widget so from here let's drag this image widget within this left container here now let's choose the image from here click on upload files now click on select files actually I just wanna upload all of these images because we will be needing these images throughout the landing page so let's select all of them together then click on open so all of the images are uploading together here all right so all the images has been uploaded now from these images I'm selecting this image click on insert media here we can see the image now I just wanna align the image to the left side so from here I'm making the alignment to left now let's select this right container so I'm selecting it by clicking here over this container and you see by default the gap between elements is 20 but for this right container I'm making its Gap to 0 and here first of all I wanna add a heading widget so click on this plus icon now let's drag this heading widget within this right container here and I just wanted to say 30k now go under the style tab I'm making its text color to our Global black main color then from the typography let's make its font size to 26 pixel and also I'm making the font weight to 900. now underneath this 30k heading let's go to the Rubik's Cube icon here I just wanna drag another heading underneath this 30k heading here and I just wanted to say fade back now go under the style tab because I wanna change this text color to the global black light color now from the typography I'm making its font size to 13 pixel and here font weight to 500. now let me explain the settings I have done with the right container so let's select the right container here you see this time I have not set the direction to row because by default the direction is always set to vertical or the column because you see if I select column nothing is changing here because this is the default value so let's deselect it it will automatically getting the column by default but let's say if I set the direction to row you see this 30k heading and the feedback heading they are now one after another horizontally in this case I don't want that that's why I'm just setting the default value that's basically this column or vertical value all right so far whatever we have done if you don't want to lose any of this work don't forget to click on this green update button to save your work and now if you want to preview the work on real browser I mean outside of the Elementor page builder then from here you need to click on this eyeball icon so let's click here now we can see it on the real browser and it's looking really really nice but like I said here we need to fix This Global button settings because I wanna apply the settings on other buttons but this button is exceptional that's why I just wanna remove the global button settings from this place and also there is another thing if you notice closely like if I put my cursor here and start typing my email address for example gmf digital gmail.com actually whenever I started writing anything inside of this field we can see a tiny border around this field here but I don't want that in this place actually it's called the focus outline so if I wanna remove this Focus outline from this place then we need to add some custom CSS snippet here and it's actually super easy so let's just go inside Elementor page builder again now from here I'm selecting its wrapper container this container it says form wrapper container now make sure you have selected the form wrapper container from under its Advanced tablets scroll down and open the custom CSS field now within this custom CSS field we need to write some custom CSS code but no worries because I already have written that code for you to get that code you can just go to gym for the digital.com so like I said you will find this Pages Link in the description so from this page if you scroll down a little bit here it says remove input outline so let's just copy this CSS snippet from here go inside Elementor and paste the CSS code here now if I update the page let's preview it on the real browser now have a look if I start typing here like this you see now we can not see any outline border around this input field so our first problem has been solved now I wanna remove the global settings from this button so to do it now go inside Elementor page builder again and here we need to add a few more lines of CSS code to get that go to gym file digital.com from here and then beneath this snippet and if you scroll here it says remove button global settings you just copy this CSS snippet from here go inside Elementor now right underneath this CSS code I'm just heading into a couple more time to make some space and paste the code here so with this specific button I have just removed the padding value to 0 also I have disabled the Border it's very simple like this now to save our work click on this green update button then next I want to add few other things to make this hero Banner area look more unique so to do it let's just select this first heading or heading four I wanna add a painted highlighter here around this text so to do it again I will be applying some custom CSS code make sure you have selected this heading go under its Advanced tab from here open the custom CSS field and you know to get the code just go to gym digital.com let's scroll down here it says heading highlighter CSS just copy the CSS snippet code from this place now go inside Elementor and paste the CSS snippet here but still we cannot see any changes here because if you have a close look on the CSS snippet actually you don't need to understand any of this just focus here it says background image and within this bracket here it says image URL actually here you need to put a image URL link so to get the image URL link you can just go back to your WordPress dashboard from your WordPress dashboard as we have already uploaded all the images so you can find the image from the media to let's go to library now from inside Library actually I'm looking for this image so let's select the image and all the images you have uploaded to the Elementor they all have their unique URL so to get these images URL if you have a look to the right bottom corner you see here is the images URL so you can just copy the images URL from this place or you can simply click on copy URL to clipboard button it says copied now go inside Elementor Page Builder and here just remove this image URL text from here and paste the URL in this place so here we can see this beautiful shape around the text by the way I have positioned it depending on my text that is 14 day free but let's say if you wanna play with its position you can do that from this place it says left and top so from left by default I have set it to 40 pixel for example if you want to change it to any other value for example instead of 40 if I write here 80 you see it's moving more from the left side but instead of 80 here I just wanna keep it to the previous value that's for the pixel then from Top I have set the value to 40 percent but if you want you can play with that so instead of top 40 percent you can put here 50 percent so it's now more down from top but instead of 50 percent I just want to keep it to the default 40 percent so it looks perfect at this moment and again don't get overwhelmed all these CSS codes because all these CSS cores are optional you see I have used this shape to make this area look more unique but if you don't want that then you don't need to add this CSS snippet as well all these are just additional work to make our page more unique you got it right all right now from the Navigator let's just minimize the form wrapper Also let's minimize the feedback wrapper and actually at this moment this hero Banner is looking great if you want you can just keep it like this but here I just wanna show you how to make it more cool just by adding a few moving elements okay so to do it I just wanna add some images right underneath this feedback wrapper container so to do it let's click on the Rubik's Cube icon and from here I just wanna drag this image widget underneath this feedback wrapper in our container not within this container just outside of this feedback wrapper container here so let's drag this image widget underneath this container here but you see sometimes it's difficult to put it in the perfect place for that reason instead of putting the image here I'm just putting here at the top of the paragraph here I know within Elementor is sometimes frustrating but now I just wanna drag this image widget from the Navigator I'm just dragging it underneath the feedback wrapper here okay so it's now under the feedback wrapper container here underneath we have got our image all right let's select the image so for the first image here I'm selecting this leaf image now click on insert media and you know what here I actually wanna add four Images so I just want to duplicate this image and to duplicate it just hover over on this blue pencil icon from here let's duplicate it let's duplicate it one more time and let's duplicate it one last time so here we have got four Images let's change the second image from here select it from here let's change this image and I want to place this image with this triangle let's now click on insert media then the third image let's replace it let's replace it with this colorful dots select it and click on insert media and the fourth image let's replace it with these line shapes with this one let's click on insert media all right so for the moment I'm just closing the Navigator so you can watch it properly alright so first let's select the first leaf image now go under its Advanced tab actually I wanna set its position to Absolute so from here position I'm making it to Absolute then from left I'm setting its value to 130 pixel and from Top I'm setting its value to 230 pixel so its position has been changed just have a look it's now sitting here because from left we have set its position to 130 that's why from left side it's now 130 pixel left side and from Top we have set the value to 230 so from top it's now under 230 pixel here in this place and I will of course show you how to animate this image automatically but before that I wanna make you understand another concept that's the Z index concept at this moment if you have a look on this image you see this image is at the top of this text but I don't want that I want the text at the top and this image should go underneath this text so to do it we need to use the Z index property basically the element will have the higher syntax value that will sit at the top and the element will have the large index value that will go underneath so at this moment if we set its Z index value from here if I set it to to 0 and then let's select this heading widget go under its Advanced tab from here if I set its Z index to 0 you see nothing is changing because if the index is 0 and it's I mean this heading Z index is also zero but instead of 0 if I now make it Z index value to 1 you see now the heading is at the top and the image is now underneath and as this image also all these images will be moving within this hero Banner that's why first of all I'm making all this element Z index value to 1 so all the element should always be at the top and this floating images will be underneath so here with this heading just go on the advanced tab here I'm making the Z index value to 1 also with this paragraph go on the advanced tab here I'm making the index value to 1 also with this container go under Advanced tab make this index value to 1 also with this container go under Advanced Tab and make the Z index value to 1. all right now before animating this image now I also wanna make the other images position to Absolute so let's just select this triangle image go under Advanced tab from here set the position to Absolute from left I'm making its value 2 for the pixel and this time the vertical orientation value I'm setting it to 290 but instead of top I'm setting it from bottom so here if we scroll down we can see it here and you know for sure the Z index value would be 0 for this image as well now let's select the third image by the way I just wanna make you shoot the Hat you can use any other images instead of these images that I'm providing and also you can play with their width for example if I select this image this triangle image if you go under its style tab you can increase its width from here in percentage or if you want you can set it in pixel and for example here I'm making its width 250 pixel so like this you can make any custom width for any specific image all right let's now select this third image go under its Advanced tab from here let's set the position to Absolute for this image I'm setting the horizontal value from right side and here I'm making it to 240 and the vertical orientation from Top I'm setting its value to 480 pixel so you see it's now sitting here and here is our fourth image let's select it go under Advanced tab from here I'm making the position to Absolute and then the horizontal orientation I'm also setting it from right side let's skip the value to 0 and here the vertical orientation from Top I'm making its value to 210 pixel so it's now at this place here and for sure I'm making the Z index value 2 0. and now I will be adding the animation so all these images will be moving automatically but before that let's just save the work all we have done so first so click on the green update button and to make that auto moving object animation we need to add some custom CSS snippet and you know to get the CSS snippet you can go to gym digital.com now underneath this snippet here it says Auto shapes floating animations and it's actually a pretty long CSS snippet so just from Top start copying it from here let's copy it actually it's a pretty long lines of CSS okay not this all just copy these make sure you have also selected this Kali bracket from here so let's just copy it now go inside Elementor and here I wanna apply the CSS code globally so to add the CSS snippet globally all you can do from the top left corner click on the hamburger icon from here click on site settings then let's scroll down and it says custom CSS click there and within this field let's just paste the CSS snippet we have just copied so basically I have created Five animations and the animations names are auto moving one two three four and five so these five animations I'm showing you very shortly how to apply this animation with each of these images so for the moment to save this custom CSS snippet to save this Global custom CSS snippet just click on this update button now from Top click on this X okay so first of all let's apply the first animation with this first image but you see now we cannot select this image because it's now underneath this heading widget so we need to take the help of the Navigator just right click here open the Navigator now open the hero banner and you see underneath the feedback wrapper we have got here four Images one two three and four so let's select the first image first from under its Advanced tab let's scroll down here actually within the CSS classes field we need to add a class name here and you cannot add any random class name because I already have given it a particular name so to get that nymphs if you go back to gym for digital.com here you see the animations names are auto moving One auto moving to auto moving three like this so from here make sure you are not selecting this dot so without this Dot just select auto moving one now let's copy it go inside Elementor so with the first image if I now paste the class name within the CSS class field let's paste it here it says auto moving one you see it starts moving automatically like this it's looking super cool at this moment okay now I wanna show you another thing so this time let's select the second image so that's basically this triangle image now go under its Advanced Tab and here if I set the same CSS class name that would be auto moving one you see they are now moving in the same manner but I wanna apply the different moving animation with the single images so one animation will go with the first image and then the second animation will go with the other image like that so to do it here instead of auto moving one here I'm adding auto moving 4 so it's now moving differently than the first one still we cannot see it because it's coming right now at this moment so if they move differently from another it looks more unique okay so let's select the third image now go under its Advanced tab from inside the CSS classes let's paste the CSS code here and here instead of auto moving one I'm just changing it to auto moving 5 so we can see the animation here you see the image is also moving in a different motion and let's just select the fourth image go under Advanced Tab and from here within the CSS classes let's paste the class name here and I wanna change it to auto moving 3. so here if we just wait you can see the fourth image is coming here from the right side by the way if you just wanna write here six seven eight it won't work because I only have created Five animations so you can only write auto moving one or auto moving two auto moving three auto moving 4 or auto moving five only these five class name will work for this moving object animation so if you wanna see how it's actually looking on the real browser so let's just click on this green update button then click on this eyeball icon and have a look now you see this leave is moving nicely from this portion here we can see also this brush kind of lines are moving here you can see another image here you can see the triangle all are moving from different perspective actually that's the reason I have created different animation for the different images all together they are looking really really cool all right so far our hero Banner is looking really really nice but now I want to check how our hero area is looking on the tablet devices and mobile devices yes now we need to check the responsiveness of this section so to check its responsiveness let's just go to the very bottom and click here on this responsive mode icon here now at the top we can see the tablet icon and mobile icon so first of all I want to check how it's looking on the mobile devices so from Top let's click on this tablet icon okay for the moment I'm just moving this Navigator here so we can see the hero Banner area properly how it's looking on the tablet device so far it's actually looking great on the tablet device but we can add just a few things here like the font sizes of this heading because in tablet it looks a bit bigger so let's just select this heading now go under its style Tab and open the typography from this place so you may remember on the desktop we have set these headings font size to 64 pixel but for the tablet device I want to reduce it a bit so from here I'm making it to 38 pixel so on the tablet device it would be 38 pixel but remember it will only be applicable for the tablet devices if we go back to the desktop device you see it's still the same like we have put for the desktop before but if we go back to the tablet you see it's applied only on the tablet View and here on the tablet I just want to add just a few things like with this form wrapper container let's select it go under its Advanced tab from here I just wanna adjust its padding so first of all let's unlink it here top and bottom I'm adding 10 pixel of padding and left and right I'm adding 20 pixel of padding so at the tablet device it's now looking perfect actually I'm happy with its tablet view we can now move to the mobile view so from Top let's click on mobile now on the mobile device I think we need to fix a few things like here I want to make this background image a bit bigger so to do it first of all let's just select the main hero Banner this container now from under its style tab let's just set the width only for the mobile device I wanna set it with a bit more so instead of 58 percent let's first select it in percentage and here I'm making it 85 percent only for the mobile devices so right now this image is looking perfectly fine but you may see they are looking kind of busy but it will be fixed very soon because I will be adjusting its width so first of all let's select this form wrapper container now from here let's drag this navigator at the top now let's go inside this form wrapper container now select the main form let's now go under content tab from here go inside item one that's basically the email field and here you see the column width it's getting by default but we need to set it again so from here for the input field for the email input field um setting the column width to 80 percent and then let's scroll down open the buttons from here I'm again making the column width for the button to 20 percent so right now it's looking great and just click on this green update button to save your work by the way you may remember on the desktop we have given a temporarily minimum height to this main Banner so we can now remove that so let's just go back to the desktop view from here make sure you have selected the main hero Banner this container go under its layout and from here we actually no longer need this minimum height so I'm just removing this minimum height from this place so for the moment let's just close the responsive bar from Top Also let's close the navigator and if we minimize the bar just have a look at this beautiful banner area how cool it is I hope only from these top Banner area you already have learned a lot so there is lot more to cover we will make this full landing page step by step and I believe you will learn a lot of thing and you can put together all the knowledge and you can recreate any other page the way you imagine alright let's now create our next section so let's scroll down but now before moving forward I just wanna tell you something you see creating a creative website in this way is really time consuming of course it's worth it but let's say if you want to create your website really really fast then I want to introduce you to a new Elementary kit Marketplace that's kidpappa.com here you will find all the ready Elementor template kits and basically you will find here all categories websites like portfolio websites business websites photography websites agency websites food and restaurant websites corporate websites you can name it so just by using these template Keys you can make your own website or your clients website within few minutes just let me show you a few examples of their template kits for example here we can see it says proton business and agency limited template kit so if you want to preview the website you can just click here on the see details then in this page you can see all the details about this template kit so here it says about all its features the templates you will get like home about portfolio get a service all the pages and the most interesting thing is if you click on this documentation button the that will take you to the installation guide so if you don't know how to install it from scratch you can just play this installation guide from here you see it's just a one and a half minute installation guide so by following this installation guide you can make your website within few clicks and also let's scroll up here is a button you see it says live demo if I click here you can see the whole preview of the website within this iframe so you don't need to go elsewhere to see the preview and you see they are all the demos are looking really really great and everything is looking super polished and professional you can see all other pages from inside this single iframe so you can check all the pages and another interesting thing is you can also check the responsiveness of the website for example if I go to the home page and if I go to the tablet view from here you can check how this website is looking talking inside of a tablet device also you can check the mobile view from here so on the mobile device everything is looking also great you can check the menu from this place so before purchasing the template kit you can pre-decide by watching the full website from inside of this iframe let's just have a look few other template kits from them like here we can see another actually I have purchased this one it says growbiz so just go and click on see details so similar like the previous one if you wanna see the installation guide just click on documentation you can see the full guide if you want to preview the site just click on live demo and you can pre-decide if it's perfect for your business or not and you know the purchase process is very simple so from here you can see their price actually their price is really worth it it's only 14 or 15 so you can just click here on add to card then go to checkout and you know from here you just need to login or register and purchase this kit so basically after purchasing the kit you will get a zip file like this now I'm showing you very shortly how you can make a complete Business website within few clicks by using kit Papa template kits now let me be very transparent with you personally I do develop websites for my clients and I usually charge two to three thousand dollars for a multi-page business website and now let me show you how easily you can do it too for yourself or for your clients okay so here I have just installed a fresh WordPress here and you can use any theme you want but kit Papa always recommend to install hello Elementor theme for that reason from appearance if I show you I have installed and activated hello Elementor theme and from plugins if if I now go to install the plugins you see here I have installed only Elementor and Elementor Pro plugin okay so now from Elementor I just wanna do a simple settings before importing the kit so from Elementor let's now go to settings now go under Advanced Tab and from this place here it says enable unfiltered file uploads I'm just enabling it from here now click on Save changes then from the Elementor from under Elementor let's now click on tools now let's go under import or export kit now from here it says import a template kit click on start import and here we need to upload the zip file that we have purchased from kidpappa.com so that's basically the zip file so here I'm just dragging this file within here like this then from the bottom right corner click on next now from here click on import so it says setting up your kit this usually takes a few moments so don't just refresh the page wait a few seconds or a few minutes actually I see it takes only 22-30 seconds but actually it also depends on your internet speed so just wait until it loads and don't refresh the page and yup it says your kit is now live on your site all right now let's click on this close button so now from top right corner if I hover over on my site name and let's click on this visit site I'm opening it from a new tab and let's have a look here our website is created within few clicks let's just browse everything yep everything is showing perfectly so all the areas yep we can also see the blog posts here so everything is showing perfectly let's just go to other page I'm going to about page so here about page is also looking really really nice and all these FAQs everything is showing perfectly so let's go to other page for example let's go to the contact page so here the contact page is also looking great now let's go to the blog page yep the block page is also looking great so within a few clicks we have made our whole website and for sure you can change all the contents all the headings all the images by yourself so if you want to create your own website or your client's website really really fast just go to kidpappa.com browse all the template keys and find out the best template kits for you and this is just the beginning of this Marketplace they are adding new template Keys every week alright let's now go inside where we were so let's now create our next section and that would be our features section okay and you know to create a new section you need to click on this plus icon and I'm taking this column based structure so let's click here and first of all I just wanna take some space so go under Advanced tab from here let's unlink the padding here at the top and bottom I'm adding 100 pixel of padding and at the left and right let's add 15 pixel of padding now within this parent container I wanna take some child container or inner container so let's click on the Rubik's Cube icon from here I'm dragging this container here within this place and also I wanna duplicate this container couple more times so let's duplicate it and let's duplicate it one more time so within the parent container now we have got three inner containers and to make it easily understandable let's just right click here open the Navigator now we can name this parent container as it would be our feature section so I'm just renaming it to features and then this one would be the first child so we can just name it in our one then this one let's rename it to Inner two and then let's rename it to Inner three so we can easily understand what's going on and which one is inside which container so let's first start with the inner one container this one that means the first one now the first thing I wanna do I wanna make its direction to row based so let's select it to row and within that I wanna take two inner containers so click on this plus icon and from here I'm dragging this container here and let's now duplicate this container from the Navigator so right click here and let's duplicate it so within the inner one this is our lift container and this is our right container so we can again just rename it to left container and let's uranium the second one to write container all right now I'm starting with the left container so first of all I'm making is content width to full width and from here with let's make it to 50 percent also with the right container I wanna do the same make the content width to full width and I'm making it with 250 percent alright now let's start with this lift container this one click on this plus icon because first of all I want to insert a heading widget from here I'm dragging The Heading widget here inside and here I'm just replacing this text with this text it says how does it work now let's do some styling go on this style Tab and you know we have set the global color for heading so we don't need to set any color from this Color Picker now from the typography I just want to increase the font size so that would be for the four pixel now if I want to wet I wanna make it really bold so let's make it 900 and then I wanna increase the line height a bit so from here first I'm selecting 18 em and here I'm making it 1.2 all right now underneath this heading I wanna take a paragraph So let's click on the Rubik's Cube icon from here I'm dragging the text editor widget here underneath also I'm replacing this text with another text and now I wanna show you another interesting thing that is if we scroll up a little bit here you see we have placed here another text editor so if we just want to duplicate the style of this paragraph all you need to do just right click here then click on copy now let's scroll down and with this paragraph or with this text editor just right click here and click on paste style so it's automatically pasted the styles from this paragraph so actually this is super handy in Elementor page builder now with this pair the graph let's select it go under its Advanced tab I just wanna adjust its spacing a bit so from here let's first unlock the margin at the top I'm adding negative 10 pixel and at the bottom here I'm adding negative 15 pixel of margin all right let's now move the navigator to the left side so you can see it properly what I will be doing within this right container so here within the right container let's click on this plus icon first of all I want to place a button widget here so from here let's drag this button to the I mean within the right container here and you see it's already getting the styles from the global button settings but now instead of this text I wanna change it to other text so from here instead of click here I just want it to say view all features and right after that I wanna add a right arrow icon so to do it from here icons let's go to I icon library and here I'm searching for Arrow and let's select this one click on insert by default it's placed at the left side but I want to place it to the right side so from here I'm making the icon position 2 after now I want to show you another interesting thing because I wanna place this button at the right side and also at the bottom of this container so to do it let's first select this right container from here now just to make this button horizontally at the bottom I'm making the justify content to end and like I said I also want to place it to the right side of this container so to do it from here I'm making the Align items to end so now this button is placed at the right bottom corner of its parent container here very easy concept all right so we are done with the inner one container so for the moment let's minimize it and let's now select the inner two container this one and here first thing I want to do I'm just making the direction to row then here I'm making the justify content two space between and also I'm making the wrap value to wrap I will explain it later why I'm making it to wrap now let's move the Navigator so you can see it properly what I'm doing here now let's just go under its Advanced tab from here unlink the merge in at the top I'm adding for the pixel of margin and at the top I'm adding 60 pixel of margin now within this inner two container I wanna create some curves so to create the curse we also need to add containers so click on this plus icon from here I'm dragging this container here and the container we have just added if I go inside this inner 2 you see this is the container so I'm just renaming it to card or we can just name it to single cards so you can understand it properly later now from here let's select this single card from here I'm making the single curves content width to full width and let's make its width to 32 percent then I want to add some border with this card so go under style tab from here let's open the border from here let's make the Border type to solid and I'm giving one pixel of a border width and Border color you know I'm selecting the gray color for that and Border radius let's add 10 pixel of Border radius then I wanna also add some box Shadow with it so let's open the box Shadow and first of all I'm selecting the color to black color but I'm just reducing its opacity to 0.2 like this then here I'm making the vertical value to 15 then the blood value to 60 and here this spread value to negative 10. and here I also wanna create a nice effect on Hover so to do it let's just go under hover State here on Hover I wanna appear a border only at the top so first of all to do it from here make the Border type to solid and this time I just want to add the Border only at the top so first of all of so first of all unlink it and at the top I'm adding three pixel of Border width and this time the Border color would be hash 2 f a c f c it's kind of light blue color so initially we cannot see it but when you hover over on it we can see that at the top actually we can see all the effects properly when we will add some elements within this card but at this moment I wanna also adjust the spacing of this card so go under Advanced tab first of all let's add 50 pixel padding with this card and at the margin let's unlink it I just wanna add some margin at the bottom so here I'm adding 20 pixel of margin at the bottom all right now within this card I wanna put an icon box just click on this plus icon and from here I'm searching for icon box so here it is just drag it inside here within the card now you know if you wanna change this icon you can do that from here so first of all I'm searching for a bolt icon so let's select it click on insert then I'm replacing this title also this description and here instead of this is static icon I'm making it from view let's make it to Stacked and from here the shape circle is fine all right let's now do some styling with it so go under style tab now from here I'm making the primary color to the same color that we have added at that top here on Hover so that would be hash 2fa CFC and then let's adjust the icon size from here so first of all I'm making the spacing to 25 that's basically the space in between these two place and also if you notice when I hover over here the bolt icon color is changing I don't want that so from here I'm making the secondary color to white so it won't be changed on Hover now alright now from here I also want to decrease the size of this icon so from here I'm making it only 16 pixel and let's increase the padding to 18 pixel so we are pretty much done with this icon let's style this title and description so from left let's open this content tab first of all I just wanna make all of them align to the left so from here I'm making the alignment to left then from here title spacing let's make it to 10. now I wanna change the size of this title so from typography I'm just making its font size to 20 pixel and also let's increase the weight to 700 like this then with this description text let's do it from here you see it says description so if you wanna keep the default body color you can do that but from here I'm just changing it to main black color like this but I I think the default body color was perfect so from here let's just select it and to undo the color from here click on clear so it's now getting the default body color but I just want to adjust its font size so from here from the typography I'm making the font size to 16 pixel all right now underneath this icon box I wanna place a button widget here underneath so from here let's click on this Rubik's Cube icon now from here I'm dragging the button underneath this icon box here and you see this button is also getting the default styling I mean the global styling but for this button I don't want that so here first of all I just want to change the default click here to read more also I wanna add a right arrow icon so from here I'm searching for Arrow let's select this icon click on insert and you know I want to place it to the right side so from here I'm making the icon position 2 after now let's go under the style tab from here first open the typography because I wanna just make its font size to 14 pixel then font weight to 500 then I wanna remove all the global styling from this specific button so to do it first of all from here I'm making the padding to zero also I don't want that border around this button so from here the Border type I'm making it to none but still if we have a look you see it's getting the hover effect from Global button settings so to disable that let's go under hover so here on the hover I'm making the background color to transparent color just drag this bar to the very left and also the text color I'm making it to Black main color so now if I hover over on this button you see it's not getting the global button settings so if we now minimize the bar from left you can see the hover effect properly so initially it's looking like it and when I hover over on it you see at the top three pixel of Border has been added so it's now looking really really nice but also I wanna add another animation with it to make it look more cool so to do it just open the bar from lift but like I said this is completely optional if you want you can add that if you don't want that you don't need to add that animation as I like to add decent animation on curves for that reason um selecting this card but make sure you have selected the card not its parent container so it's always safe to select the containers from the Navigator so from here make sure you have selected the single card this one now from under its Advanced tab let's scroll down and open the custom CSS field and here I will be adding that hover animation CSS snippet to get that just go to gym for digital.com from here let's scroll down a little bit it says hover lift animation just copy this CSS snippet from this place now go inside Elementor and paste the Cs snippet here so what difference will it make just minimize it for the moment and have a look so initially it's looking like it and now when we hover over on it you see it lives at the top a little bit so all together it's now looking really really nice all right let's open the bar from left now I just wanna duplicate this single card couple more time so right click here duplicate it actually I wanna create six single cards so right click here duplicate right click here duplicate it and let's duplicate it couple more times so from here let's duplicate it one last time so you see we have got six cards here now I will explain why I have used wrap to their parent container so basically this single cursed parent container is this inner two container this one and if we go under its layout you see I have added the wrap value to wrap here that reason is if I just disable the wrap value from here just have a look now so when you disable the wrap value of the parent container all their child containers try to adjust within the parent in a single line but I don't want that that's why I have enabled this wrap so let's enable it again to wrap now let's see how you can change all these icons and these colors for example let's select this icon box from here so if I wanna change this icon to any other icon so from here you know I just wanna add here home icon so I'm searching for home let's select it and insert it and to change its color just go on the style tab from here just change the primary color this time um changing this color to hash ea4d89 and let's copy this color because I wanna apply the same color at the top of this card so from here I mean from the Navigator let's select this single card go to under its style tab from here open the Border go under its hover and from this place I'm just changing this color to our new color so if we now minimize the bar from left side so have a look on this first card if I now hover over here we can see it's lifting a little bit to the top and we can see this bluish border at the top and with the second card you see the Border color has been changed so similar like that I wanna change all these icons all these colors and all these top border colors so I'm doing it really quickly and I'm coming back to you all right so I have changed all these icons all these icons color and also all these top border color and now from the Navigator let's just minimize this inner two container so we can now start working with the inner three container so let's select in our three container that's basically this one so with this container first of all I'm making the direction to row and I wanna set a background color with it now go under the style tab from here background type let's select the background color from our Global colors so that would be white BG and I want to also add some spacing so go under the advanced tab from here unlink the padding here with Okay so let's first link it because I'm adding 60 pixel with it and I just want to ignore the bottom space so these time let's unlink it at the bottom I'm just making it to zero then similar like before within this inner three container let's click on this plus icon and here I'm dragging another container then let's duplicate this container one more time and you know I always give name to The Container so this container name let's just name it to left container and this container of course it should be you know right container okay so let's select the left container here I'm making the justify content to the end and now within this container let's just click on this plus icon and here I'm dragging an image widget here let's now select the image now from here for this area I'm selecting this image click on insert media all right but this image is looking kind of big so I want to reduce its width just go under its style tab from here I'm making its width to 85 percent alright let's now go inside of this right container just move this navigator to the left side so you can see it properly now within this right container click on this plus icon first of all I wanna drag a heading widget here so let's drag this heading widget in this place and this time I'm making the HTML tag to H4 so it's getting the color automatically from global settings but now I wanna change this text to marketing now I'm going to style tab from here first of all I'm making the font size to 14 pixel and if I want to wait to 500 also I wanna add some negative margin at the bottom of of this heading so just to go under Advanced Tab and Link the merging at the bottom I'm just adding negative 5 pixel of margin all right now underneath this H4 I wanna add a heading 2 and you know we can just copy and paste that so from Top from this place let's just right click here and click on copy now let's scroll down make sure you have put your cursor right underneath this H4 then right click here and click on paste so it's been pasted here instantly with all these tiles how cool is that now let's just replace this text so I'm replacing this text with other text and underneath that I wanna use a paragraph and you know you can just copy this from here so let's copy it and underneath here I'm just pasting it in this place and of course I wanna change the text so from here I'm changing the text but in this time I just wanna reduce its font size a little bit so from under the style tab let's open the typography instead of 18 I just wanna make it to 14 pixel actually 14 pixel is too much less or too smaller so I'm making it to 16 pixel also you see the space in between is too much so to reduce it let's just go under Advanced tab let's unlink the margin it's already unlinked because we have just pasted it from top so here instead of 10 I'm just making it to negative 5 like this and the bottom negative 15 is fine all right now underneath here I wanna put some icon box one after another horizontally so to do it first of all I wanna take a container here so click on this Rubik's Cube icon and let's drag this container underneath this paragraph here as it's a single container here we won't get confused so we can just keep its name to container or if you want you can just rename it to maybe icon box wrapper like this and here with this icon box wrapper container I'm making the direction to row and the gap between elements I'm making it to 30 pixel then I wanna also add some space in between this paragraph and this container so go under Advanced tab from here unlink the margin at the top I'm adding 15 pixel of margin alright now we can insert here an icon box from scratch just by dragging from the left side but instead of that as we have created some icon box here so let's just copy this icon box from this place and let's insert it here so right click here and click on paste but now I wanna adjust its styling so first of all I wanna change this icon so from here I'm just searching for check icon this one let's select it then let's change this title Also let's change the description and now for this icon box let's scroll up I just wanna set its icon position from left all right now let's customize its styling so from Top let's go under the style tab here I'm changing this primary color to a kind of greenish color so that would be hash 3 2 c 3 6A and then you know I just wanna make it really small here so first of all I'm just making the spacing to 15 or let's keep it 16 then size let's reduce it to 12 then the padding I wanna really reduce it a lot so let's just keep it 6 and now I think we just need to fix this because if you have a look this green icon and this heading is not aligned at the top so to fix it let's just select it from here let's open the content Tab and here is the title so go to its typography and from here I'm making its line height to zero and then we can increase the line height of this paragraph So from here let's open the typography of the description and let's set its line height in EM first so I'm making it just 1 or 1.2 maybe a bit more 1.4 alright so far it looks good but we'll understand it properly if I duplicate it so for now let's duplicate this icon box from this place let's duplicate it now I think we just need to increase the spacing in between this heading and paragraph so let's just select it from under content tab here instead of 10 we can make it to 15 or 16 Also let's do the same with this one just go under the style tab from here open the content now from form this place from the title I'm just making it to 16. then to make it really really stick I'm changing this text so go under content tab here the title let's change it to other text all right so far our inner three container is also looking great so let's just minimize the inner three container from this place and if I just turn off the navigator for the moment and have a look so here this inner three container is looking great here is our inner two container it's looking great and here at the top this is our inner one container it's also looking great now the very last thing we just need to check how it's looking from mobile and tablet device so to check its responsiveness let's just click here on this responsive mode first let's check it on tablet so click on the tablet icon so here we need to do a little bit of work so first of all let's just right click here and open the Navigator okay let's just keep it to the right side so we can see everything properly here so here on the tablet view I have not found anything problem with this first inner container so let's select the second inner container here I think we need to increase the width of this single curves only on tablet device so open the inner container and here is our single card let's select it go under its layout tab and here I wanna increase its width so make sure you have set it in percentage now I'm making its width to 48 percent only for tablet device so I'm doing it really quickly for all other single cards let's select the card go under layout and from here I'm making it to 48 percent I'm doing it really quickly and coming back to you all right so I have made all these single cards with 248 percent for the tablet device so right now it's looking great let's now scroll down and I just wanna go to the inner three container here so with inner three container we need to adjust a few things first of all I just wanna reduce its padding okay so on the tablet device I just wanna make its padding to 50 pixel all around so here I'm setting the padding to 50 pixel then you know within this in our three container if I open up the Navigator just open the inner three you see we have got here lift container and right container and within the lift container we have got only this image but I don't wanna show this image on the tablet or mobile view so I just want to hide it and not only the image I want to hide this total lift container so let's select the left container go under its Advanced tab let's scroll down and open the responsive tab from here I wanna hide it for tablet and mobile so let's hide it and also let's hide it for mobile device so at this moment everything is looking great on tablet view now I want to check how it's looking on mobile device so from here let's click on mobile icon now on the mobile device the very first thing I want to do you see the space at the top is huge for mobile device so I wanna reduce that first of all let's select the main container that's basically our features container just go under its Advanced tab from here first of all let's unlink it on the left and right let's just keep the default 15 pixel that we have used for the tablet and desktop but for the top and bottom I want to use only 60 pixel of padding instead of 100 and then I wanna reduce the font size of this heading so let's just select this heading go to its typography and you see it's getting 44 pixel from desktop but not only for mobile device actually I want to reduce the font size for tablet as well so first of all let's go back to the tablet if I set its font size to 38 pixel instead of 44 you see it's now looking much better and if we now go back to mobile device you see it's getting the font size from tablet so 38 pixel is looking much decent all right now I wanna align this button to the left side for mobile device so from here let's select its parent container that's basically this right container and here the Align items instead of end only for the mobile device I'm selecting its align items to start so it's now aligned to the left side so now this first inner is looking great on mobile device so I'm minimizing the first trainer so now let's open the second inner here on the mobile first of all with this inner 2 or in a two container I want to adjust its positioning so go under Advanced Tab and Link the margin at the top it was 40 so I want to keep it 40 because 4 is fine but at the bottom I wanna reduce it to 30 pixel so for this inner 2 container is looking great on mobile device and let's have a look on this inner 3. you see the padding seems huge on mobile device so let's just select this inner 3 from here and with the padding let's first add for the pixel all around now let's unlink it because at the left and right I'm just adding 15 pixel of padding like this and also if you have a look we have copied this heading from top that's why it is still looking bigger but now I wanna just copy and paste the style from this heading so right click here click on copy let's now scroll down because you see it's looking much bigger for a Mobile screen so now right click here and click on paste style it's now looking much decent alright so everything is looking great on mobile device as well now let's go back and create our next section for the moment I'm just closing the responsive view from here and then scroll down to the very bottom of our Builder so we have completed our hero banner and feature section let's now create our new section so click on this plus icon and this time again I'm taking this row based structure this one first of all I want to add a background color with it so go under style tab from here from the background type let's add the global black color so from here I'm selecting the black main color now go under Advanced tab from here padding first I'm adding 100 pixel of padding then let's unlink it at the left and right I'm adding 15 pixel of padding now here I wanna put a heading and paragraph and you know we have here our heading and paragraph so let's just copy this heading from here and within this place just right click here and paste it but you see we cannot see it because it's color and background color is same so just go under the style Tab and here I'm making the text color to white also from under content tab I'm making its alignment to centered then underneath that I wanna put a paragraph so again let's go to top let's just right click here copy this paragraph text from here now let's scroll down and underneath this heading right click here and paste it here then similar like before just go under a style tab here I'm making the alignment tool synthet also that text color to white color now for sure I want to change the content so let's change the content from here then let's change this heading font not font hitting text as well so within the title field I'm just pasting some text here and right after need this word I want to add a line break so you know I'm just adding the line break tag here all right now underneath this paragraph I wanna add an inner container so from here let's drag this inner container underneath here in this place here now before doing another thing I I just wanna rename these containers because it will make you confused so here this is the main container I'm just renaming it to facts as this is our facts section and then Within These facts we have taken another container so I just wanna rename it to Inner container all right now this inner container I'm making its direction to row now let's go under its Advanced Tab and from here I'm making the padding to 60 pixel but let's just unlink it because at the bottom I'm making it to 0 pixel of padding now within this inner container I wanna take two more containers one is left and right so just click on this plus icon let's drag this container here so this is the inner container and right click here duplicate it again so the first one it would be our left container and the next one it would be our right container now let's start with the lift one so similar like before you are already familiar with this so I will move a bit faster than before so let's make the left container with two I mean the content width to full width and here I'm making ears with two fifty percent also with the right container let's make it continue with two full width and here with in percentage I'm making it 50 all right now let's start from the left container first of all here I'm making the justify content to Centered for the lift container and here within the left container I wanna put some icon box and we already have created some icon box at the top so let's just copy it from here later we can customize it so copy it and within the left container right click here and let's paste it before changing any other content the first thing I want to do here I'm making the icon position from left now from Top I wanna change this Bell icon with circle or dot let's search for DOT actually we need to search for Circle here so here is a plain Circle let's select it and insert it then I want to change that title and description so first I'm replacing the title text then here is the description text all right now let's go under the style tab from here first of all I wanna change this primary color to our brand color so from here our brand color is here then the secondary color I also wanna set it as our brand color but now here the primary color I just wanna reduce its opacity so from here let's reduce its opacity just by dragging this bar to the left side like this so you see all together is making a nice effect here and now of course I wanna reduce its size so from here let's make the spacing to 16 size to 18 and the padding let's set it to 6 pixel all right let's now open the content tab now first of all I'm making its spacing instead of 10 I'm making it to 12 and you see here we cannot see the title because we need to change its color from here so from this place let's make its color to white color and also I want to increase the font size so from here let's make it to 24 pixel instead of 20 and also I wanna reduce its line height so first of all let's select it in em and here I'm making it 0.5 all right let's also change the color of the description so I'm also making its color to white maybe a little bit off white so from here I'm just reducing its opacity like this and then from typography I'm reducing its font size from 16 pixel to 14 pixel and then if you notice you see there is no breathing space with this icon box so let's go under Advanced tab here I wanna add 30 pixel of padding but here at the bottom it can reduce a bit so unlink it at the bottom I'm adding 25 pixel of padding and then also I want to reduce it with a little bit so from here let's set the width to custom and let's make it just 80 percent or a bit more we can make it 82 percent like this and also I wanna set its background color from under Advanced tabs so from here let's open the background I wanna set the same background color so from here let's open the classic and you know that would be the same black main color our Global black color then I wanna add some border around here so let's open the Border first of all I want to add some border radius maybe a little like six and then border type let's set it to solid and with one pixel then the Border color let's set it as okay here I wanna use a custom color so the color code would be hash two zero two two three four but on however I wanna change this color to our brand color with this dots color so just go under hover and on Hover border type let's set it to solid also it would be one pixel of width but this time the Border color would be our brand color like this so if I now minimize the bar from left side you see it's initially looking like it and when you hover over on it it's background I mean its border color is appearing in this way it's looking really nice now alright now I just wanna duplicate this icon box couple more times so from here let's duplicate it and let's duplicate it one more time then you know with this one I just want to change this heading from here also let's change this heading from this field in this place then for the second and third I wanna change this Dot and borders colors so from here let's select it go under its style tab for this one the secondary color it would be hash 2 e a c f c now let's just copy this color now go under its Advanced Tab and here is the Border option go to it's hover and here I just want to replace its color to the new color we have just created also I have forgot to do one thing just go under the style tab you see we also need to change the color here so here I'm just pasting the color and let's change its opacity similar like before at this point like this now let's do the same thing with this third icon box just to go under this style tab from here the secondary color it would be a different color that's a hash three three c nine five six let's just copy this color code then here on the primary color I'm pasting the color code and reducing its opacity like this also let's go under its Advanced tab from here open the Border go under its hover and here I'm also changing this color to the new greenish color if I now minimize the bar now just have a look if I now hover over on each of this icon box it's looking really great all right let's open it and now within this right container click on this plus icon here I don't want to do anything crazy because on the left side we have some balanced color work so here I will be putting only an image so just click on this plus icon here I'm dragging an image widget in this place now let's select the image and for that area I'm selecting this image click on insert media if I now move this navigator to the left side or here you see the whole area is looking really really nice and then similar like our Banner area let's just go to the banner area you see we have added some floating images or floating animations so here with this fact section I wanna do the same but here I just wanna add three images and you know first of all this is our facts section so from here let's minimize this inner container because we need to put the images at the same level like heading text editor in a container we shouldn't be putting the images within the inner container we need to put that images at the same level like this I'm just giving you the clear idea so click on the Rubik's Cube icon first of all I'm dragging the image widget anywhere for example I'm just putting it here now you can fix it from the Navigator so just make sure you are just dragging the image right underneath the inner container here not within the inner container okay so for now let's select this image and I'm uploading the image and you know it would be the leaf image just select it and insert it then you actually know how to do these animations because I have already done it on this main Banner area so I don't wanna make a board by doing the same thing again and again so I'm just completing this animation and I'm coming back to you alright so I have added the moving animations so you see they are all moving nicely and it's looking really really great also you see it's moving really nicely all right so that this top I mean in the desktop it's looking great now let's do its responsiveness so first from here click on the responsive mode icon go to tablet View on the tablet view this heading and paragraph is looking great but I think we need to work with this inner container so let's select the inner container and on the tablet device go under its layout you see by default we have set its direction to row but in tablet I wanna set its direction to column that means vertically then I wanna adjust its spacing so go under Advanced tab from here instead of 60 let's just make it to 50 pixel of padding now let's go inside the inner container let's open it first let's select the left container so here for the mobile device I wanna set its width to 100 so make sure you have set it in percentage and I'm making it to 100 like this also if you have a close look you see they are not aligned properly horizontally so to do it from here I'm making the Align items to centered only for the tablet device so they are now centered horizontally and then if you have a close look there is no breathing space in between this image and this area so let's just select this image go under its Advanced Tab and Link the margin at the top let's add 30 or maybe 40 pixel of margin and also I want to align it to the center so to do it first let's select the right container that means this image is parent container I'm also making its width to 100 percent like this alright so on tablet it's looking great let's now go to the mobile view so on mobile first I want to adjust the spacing of the main container so let's select the main container you can select it by clicking on these six dots or you can select it from Navigator by selecting the facts container so from under its Advanced tab here I'm making their padding to 60 pixel now unlink it at the left and right I'm making it to 15 pixel then from here let's select this inner container that wraps the left and right container so from that inner container actually I want to reduce all the padding so from here I'm making the padding 0 but you see we can add some padding at the top so unlink it only at the top I'm adding 40 pixel of padding then the very last thing you may remember we have made there width to 80 or 82 percent so in mobile device I don't want that so let's just select this icon box go under its address Tab and from here I'm making its width to full width only for mobile device so let's just do the same for all from here I'm making a switch to full 100 also with this one let's make it with two full width that's 100 and you see still they are like climbing at the top of other so only for this one just select it go under its style tab let's open the content and for the titles typography I just wanna increase its line height only for the mobile device so from here I'm just making it 1 or 1.1 so right now it's looking really nice on mobile device also on the tablet device and for sure it's looking great on the desktop device alright let's close the responsive bar for the moment now we can move to the next section so first of all let's minimize all this from Navigator just by clicking here so also let's click here again so we can see only the main containers here is the hero Banner the features and here's the facts so let's create our next container click on this plus icon and again I'm clicking I mean I'm taking this column directed container from here and first of all you know I just wanna rename it from default container to Let's name it how it works container now go to under its Advanced tab let's add the padding to 100 pixel now unlink it at the left and right I'm adding 15 pixel of padding similar like before then here within this container similar like some sections we have done earlier now here I wanna take three inner containers okay so just click on the plus icon and drag this container here then let's duplicate this container and duplicate it one more time and from this place I'm renaming it to maybe first inner then this one let's rename it to Second inner and the third one let's rename it to third inner so here within the first inner I just wanna put a text and paragraph and we already have some text and paragraph here so just right click here copy it from this place and let's paste it here within the first inner here also I want the paragraph so just right click here copy the text from here and underneath the heading within the first inner so make sure you put your cursor within the container then right click here and click on paste all right so this is it with the first inner so minimize it let's start working with the second dinner here first of all I wanna make its direction to row then here justify content I'm setting it as space evenly and then again here I'm making the wrap value to wrap I already explained what rap does so you know about it also with this second dinner I wanna add some padding so go under Advanced tab here I'm adding 60 pixel of padding but I don't want that at the left and right so left and right I'm just keeping it to zero alright now within this second dinner I wanna take some curves so click on the plus icon here I'm dragging this container and you know we have done it before just from here I'm making the content width to full width and this time I'm just making its width to 20 percent now let's go under the style tab now from the border I'm making the Border radius to 6 pixel and this time I don't want to add any border I mean any solid border but I will be adding some box Shadow from this place so from here first I'm making the Box Shadow color to 0.5 I mean 0.2 is opacity and from here I'm making the vertical value to 20 the blur value to 40 and the split value to negative 10 but I think we can reduce its opacity a bit more so from this color palette let's drag it a bit more left like 1.5 alright now let's adjust its spacing go under Advanced tab from here unlink the margin because I just want to add some margin at the bottom so here I'm adding 20 pixel of margin and let's add for the pixel of padding all around and here before inserting any elements instead of this default container I just wanna rename it to maybe progress cards now first of all I want to insert an image Within These progress cards so click on this plus icon let's drag this image within here now let's choose the image and this time I cannot find any image here so just click on upload files I want to upload some image from my desktop click on select files actually I want to select this is VG images but you see I cannot select the SVG images from my desktop because we need to enable is which upload on our WordPress so before uploading this is Vijay images let's do that setting so I'm canceling it for the moment now to enable the SVG upload option let's just go back to okay for the moment let's just close this pop-up let's also save our work whatever we have done because we don't want to lose all of this hard work so make sure just click on this green update button and then if we go back to our WordPress dashboard now from here let's go to Elementor to Elementor settings then go under Advanced tab from here you see it says enable unfiltered file uploads just make it to enable now scroll down and click on Save changes all right now we can go back to Elementor and make sure you have saved all your work now we just need to refresh the page so let's refresh the page all right the page has been refreshed now let's go back to our how it works area so here let's now select the image we are now trying to upload the image I mean the SVG image so click on upload files this time click on select files button and you see we can now select the SVG images so I just wanna select this one two three and four Images together now click on open so for the first one I'm selecting this is VJ image or icon now click on insert media and with this image I just wanna add some negative margin at the bottom so go under Advanced Tab and Link the margin at the bottom let's add negative 10 pixel of margin all right now underneath this is VG image I wanna add counter I mean animated counter widget so from here click on the Rubik's Cube icon and here I'm searching for counter let's drag this counter widget right underneath this image here see it's animating really nicely so this is the starting value 0 to 100 whatever value you will put within the starting number that will be animating from that number to the ending number so here I'm setting the ending number to 45 but I wanted to say 45k so for that here number suffix so that will be adding right after the 45 number right so here I'm just writing K plus and here within the title you can say it anything so for example I'm just writing here Active installation like this notice they are now in two lines but I will be reducing their font size so let's now do its styling just to go under the style tab now first of all here is the options for this number and here is the option for this title so first I'm making the text color to our default black main color then from the typography let's set its font size to 40 pixel and here I'm making the font weight to 700 and also the line height let's set it in em and I'm making it 0.9 then here is the option for the title so here I'm making the titles text color to the black light color and then from the typography let's set its font size to 14 pixel and I'm making its font width to 700 like this now I just wanna duplicate this progress cards container couple more times so I'm minimizing it for the moment now right click here let's duplicate it again right click here duplicate it and let's duplicate it one last time like this and you know let's just drag it to the bottom you can change all these images that we want so from here I'm changing this image with this one I'm changing the third image with this third is VG icon and with the fourth one I'm selecting the fourth is VG icon like this and of course you can change these numbers from here so here I don't want that K you can just put any simple number like this and here also I don't want this K here we can just simply write for example 397 like this also let's change the last one maybe just 5K plus all right so we have done this second inner containers work so from here we can minimize the second inner container now let's select the third inner container so that's basically this one and here again I'm making the direction to row and here I'm making the gap between elements 2 for the pixel and here similar like before I wanna take two inner containers one is left and another is right so click on the plus icon here I'm dragging the container here and also let's just duplicate this container from the Navigator right click here and click on duplicate and here the first one I'm naming it left container and the second one I'm just renaming it to write container so here first the lift container I'm making its with I mean content width to full width and here I'm making its width to 65 percent and the right container also make its content with two full width and here I'm making its width to 35 percent so let's now start with the lift one I'm selecting lift container from here click on this plus icon first of all I want to insert a video here so from this place just drag this video element here within and you know you can not only insert YouTube videos you can insert a Vimeo Dailymotion or self-hosted videos and let's say if you just want to use YouTube video just select YouTube from here and you need to post your YouTube url link within this field and then I don't wanna enable any of these options also I don't want to have this player control so I'm also disabling it from here and instead of this default YouTube thumbnail I wanna use a custom image here so to do it from here open the image overlay now here I'm enabling image overlay let's just select it and then choose an image so for the video thumbnail I'm selecting this image now click on insert media so basically if anyone now clicks over this play icon that video will be playing within this area but I don't want that I want to play this video on a pop-up so to enable that pop-up or lightbox we can do that from here I'm just turning on on I'm just turning on the light box from this place so if anyone clicks on this video a pop-up will appear here like this all right let's close the pop-up or light box now underneath here I just wanna add some elements like heading paragraph and button so you know we can just copy this heading from here and let's paste it inside here right click and paste it but you see this heading is not pasted within the lift container so if you do the same thing because this is very common so you can fix it very easily just open this right container from the Navigator and drag this heading within the right container here oops not within the right container of course within the left container right after the video so here I'm dragging this heading right underneath the video here in this place all right now underneath this heading I wanna add some paragraphs so right click here copy this paragraph text from here then right click within this place and click on paste and then underneath I also wanna insert some button not some button only one button so here we have got one button let's just copy this button widget from this place and here underneath this paragraph just right click here and click on paste but now here I I wanna adjust them for sure so first let's change this heading text so I'm just replacing it with other text also I want to reduce its font size a little bit so go under the style tab from here from the typography I'm just making its font size to 30 pixel and then with the paragraph I'm also changing it text from here and I also want to reduce the font size so go on the style tab from the typography I'm just making its font size to 16 pixel and then with this button I just wanted to say for example get started and I don't want this Arrow here so we can just disable the icon from here in this place and you know what I just wanna add some padding at the left side of this heading paragraph and button so to do it let's select the heading from here now go under its Advanced tab now first of all let's unlink the padding and here I'm select taking it in percentage so only at the left side I'm adding 10 percent of padding let's do the same with the paragraph go on the advanced Tab and Link the padding set it in percentage only at the left side I'm adding 10 percent with the button I want to do the same so from here unlink it make it in percentage on the left I'm adding 10 percent of padding so we are done with the lift container elements let's now work with the right container let's click here on this plus icon here I just wanna insert an image Carousel so from here I'm searching for image Carousel so here is the image Carousel widget let's now drag this within the right container here and as it's an image Carousel so of course we need to add some images here so from left just click on this plus icon so from the media library you can select multiple images I'm selecting this one also let's select this one then click here on create a new Gallery by the way if you want you can order or reorder them like this so for example I have just taken two but if you want you can take as many as images you want then click here on insert Gallery so here on the right side we can see the images but now here image size I wanna make it to full and slides to show here I Only Wanna show one image at a time so here I'm making slice to show to one image and then as the slider control here we can see the tiny little dots here at the bottom also you can see the arrows so it's actually up to you if you like the arrows you can keep the arrows if you like the dots you can keep the dots or you can actually there are different options like here you see it's navigation so if you want you can keep the arrows and dots or you can only keep the dots like this so here we can see only the dots there is no arrows but here I wanna keep the arrows like this and then let's open the additional options so if you want to add more effects or infinite Loop you can do that from this place but I'm happy with this basic look let's now minimize the additional options and of course it's looking great and if you want to keep it like this of course you can but I I want to make it a little bit unique so I will be adding a bit of custom CSS to do that and first of all before adding the CSS snippet just go under style tab from here I'm making its position from inside to outside then here I'm making its size to 20 and here color I'm making it's our Global black main color then like I said I wanna make these arrows really unique so to do it let's just go under its Advanced tab now scroll down and open the custom CSS field and you know I already have written the code for you just go to gym for digital.com now from here if you scroll down a little bit you see it says image slider custom arrows so you just need to copy this CS snippet from this place so let's just copy it from here now I'm copying it now go inside Elementor Page Builder and I'm pasting the CSS snippet here now instead of looking like the default Elementor arrows it's looking kinda unique and it matches with our brand color by the way if you want to change this brand color with any other color you can do that from here and you don't need to be an CSS expert to change these colors actually if you want to change these blend color from left side just scroll down a little bit you see it says here background color so instead of this color for example if I just write here for example blue and have a look here if I now hover over here you see it's becoming blue color so it's easy like that but I'm going back to our branded color like this so it's looking much unique and better at this moment so I'm really happy with our how it works area so here these headings are looking great this area is looking great also this is a video and image slide is looking great now we just need to check how it's looking on tablet and mobile device so from here go to the responsive mode and here first I'm going to tablet here everything is looking great on tablet but similar like before let's now go inside the second inner and I'm selecting the progress cards and you already guessed it right it's looking kind of busy so from here let's select the single progress card and for the tablet device I'm making it with a bit bigger so I'm just making it to 48 percent also same for the other progress cards from here I'm making them 48 percent also with this one let's do the same 48 and with the last one here I'm again making it to 48 percent so it's now looking much decent on the tablet View and here from the Navigator I'm selecting the Third at this time and you see it's also looking kind of busy so to fix it on the tablet view instead of this row I'm making its direction to column then you know it's very easy just select the left container and here I'm making its width to 100 so it's now looking nice also with this image Carousel so it's within the right container select the right container from here I'm making it width to 100 percent and don't worry about these images because it's just a glitch because if I select this image just by clicking on this image Carousel you see just go under content tab uh here on slides to show it's showing one so if you just refresh the page it will be fixed automatically okay so for now let's just move to the mobile device so on mobile we can start with this main container so select the how it works main container go under its Advanced Tab and here um first making the padding to 60 pixel now unlink it at the left and right I'm making it to 15 pixel like this so our first inner is looking great on a mobile device but with the second inner let's select the second dinner go under its Advanced tab from here I just wanna reduce its padding so first of all unlink it at the top I'm adding 40 and at the bottom I'm adding 30 pixel of padding so all these progress cards are looking great on mobile device and this area is also looking great also the image Carousel is looking much better but I think we can reduce its font size a little bit on mobile only so select it go under its style tab from here from the typography I'm making it to 32 pixel so so he's down looking much better alright let's now close the responsive bar from top and don't forget to click on this green update button so you won't lose any of your work let's now create our next container and that would be the download section so let's first click on this plus icon and here I'm again taking this column based structure this one and let's start some spacing so go under Advanced tab from here uh first here I'm adding padding to 150 pixel let's now unlink it because on the left and right I just wanna keep 15 pixel of padding and then with this container I want to add a background image so go under the style tab from here here is the background type so select the classic and let's select the image from this place so for that area I'm selecting this image click on insert media and also let's set its position from this place now here I'm making the position to Center Center also here repeat to no repeat and size let's make it to cover then I wanna also add another image so to set that let's scroll down and open the background overlay so from here let's just upload another image and that would be this image let's select it and click on insert media okay so basically it's a background overlay but I wanna use it uh as a solid image so from here first of all I'm making the opacity to 1 so you can see the image properly now here's the position so I wanna set its position to top right then here repeat to no repeat and this time I'm making the size to contain and also let's go under layout tab from here if I open the additional options from here I'm making the Overflow to Hidden because in this area I will be also adding the floating object animations like the main Banner so whenever you will use any floating animations or auto moving animation with any container on that case you should make the Overflow value to Hidden all right right now within this container first click on this plus icon here I just want to drag and heading element and I'm making its HTML tag to H4 or you know what we already have H4 element here above so we can just right click here let's just copy it and then in this place now right click here and click on paste style and I just wanna change this text to download our app now underneath that I wanna add a heading so you know we can just copy this heading element from here and right underneath here just right click and paste it in this place and of course I wanna replace this text with other and I have added a br tag right after available to make this line break then underneath I wanna use a paragraph or text editor so from here just right click here then copy it and scroll down just right click here and click on paste also here I'm replacing this text with real text then underneath here I wanna add two buttons one is for downloading the app from app store and another day is downloading the app for Androids that's from Play store okay so to create that first of all I just wanna take one wrapper for those two buttons so click on the Rubik's Cube icon from here I'm dragging this container here so again before doing any other thing just first I'm just renaming this container name to download so you can easily understand this is the container for this download area and this one this is basically the inner container okay and here with this inner container first of all I'm making the direction to row and also I'm setting the Gap to 10. now within this container I wanna add a button widget so from here let's just drag this button widget here and in this place instead of click here I wanna take a text that is splitted into two lines so to do that we need to apply a little trick so to get that text format just go to gymfized digital.com again and from there if you scroll down you see it says multi-line button text format so here if you just have a look it says download for and here is a bear tag so the download for this text would be at the first line and underneath this iOS text would be in the next line and also I have applied this D button class here so here is nothing complicated just copy this text from here now go inside Elementor now just replace the default click here from this place and paste the text format here so here basically I have added this D button class because I will be adding some custom snippet depending on this class name that's why I have used it all right now from here I want to use an icon with it so from here I'm just searching for Apple icon so let's select this one insert it and I'm making the icon spacing to 15 pixel all right now let's just go under the style tab from here first of all I'm making the iPhone size to 15 pixel the font width to 700 to make it a bit Bolder then from here I just wanna set this buttons color to our default black main color and the text color let's set it to white color like this now from border type I'm making it to solid border with two two pixel and the color I'm making it to our branded black main color then here I'm making the Border radius to 16 pixel and here padding I'm making it to 20 or we can reduce that top and bottom a bit so unlink it from here on the top and bottom I'm adding 15 pixel of padding alright now let's go under hover State on Hover I just wanna make the color to white so from here let's set it to White and of course on the hover state I'm making the text color to our black main Global color so right now it's looking like it and for sure I need to adjust its size actually that's the reason if you have a look I have taken this class name that's basically this D dash button this class name to make this iOS font size bigger because you cannot separately make any fonts bigger within this text editor that's why I have taken the D button class name okay now to add the CSS snippet just select this parent container this one that's basically this inner container now go under its Advanced tab open the custom CSS field now go to gym for the digital.com from here you see it says download button CSS just copy the CSS snippet from this place when side Elementor and paste it here so basically you see we cannot set these icons font size specifically from Elementor settings also we cannot set this IO is text size separately bigger from elementor's default settings that's why I have created this custom CSS snippet so you see let's say if you wanna make this i o is font size a bit bigger or smaller you can do that from this place so instead of 26 if you make it just 16 you see the iOS text has been decreased its size but I wanna keep it to 26 pixel and then this font size is responsible for this icons font so instead of 4A if you just keep it 10 you see it's now becoming very smaller but I just want to keep it as 40 pixel all right now I just wanna duplicate this button so let's duplicate the button and for sure here in this place I just wanted to say download for instead of iOS I'm writing here Android and I'm changing this Apple icon to the Play Store icon so here I'm searching for Play Store this is the Google Play Store icon and click on insert but in this case I just wanna reverse the hover effect so just go under the style tab from here with this button by default I wanna make its background color to white and the text color I'm making it to the black main color and on Hover I just want to reverse that so go to hover on Hover make that text color to not Global just white color and the background color I'm making it to Global back main color I mean black main color so if we now hover over here it's looking like it also with the first one it's is looking like this so if I now just to minimize the bar from left you see it's looking pretty much descent now just to make this area more unique just like our main Banner area so like this I wanna add these floating elements also with the download area and you already know how to do that so I don't want to make you bore I'm doing that very fast and I'm coming back to you alright so I have added the moving animated images here and here so now I just wanna do the final thing with this section that is checking it for mobile and tablet devices okay so from here just go to responsive mode first let's go to the tablet device so here actually on the desktop this overlay image was looking great but on tablet device it's looking kind of busy because they are overlapping with each other so for that reason I just wanna apply here a trick first of all I just wanna remove this overlay image from tablet so to do it just go under style tab first of all just make sure you have selected this main container that's basically this download container now from under its style tab let's just click here nope not here it's background so just go to its background overlay and now you cannot delete this from this place because if you delete this image from this place it will be also deleted on the desktop view so I don't wanna delete it but instead I just want to replace this image with other image so just click here on choose image and the trick is I wanna apply the same same image that we have used as the main background image of this area so that's basically this image now click on insert media you see it's now looking much cleaner on the tablet view okay so here I just wanna do its positioning a little bit differently so here I'm making its position to bottom center here it is and I'm making its size to cover so it's now looking great on tablet now we can move to the mobile device so on mobile device it's already looking great but I think we can just reduce the spaces at the I mean we can just reduce the space from top and bottom so make sure you have selected the main download container this one just go under its Advanced tab from here let's give its padding to 60 pixel now unlink it because at the left and right I just wanna keep its to 15 pixel of padding alright so we are also done with this download section now click on the screen update button to save our work and let's now go back to the desktop mode now underneath this download area I wanna add our pricing area so let's click on this plus icon and again I'm taking this column based container and here first of all just go under Advanced tab here I'm adding padding to 100 pixel now unlink it because you know on the left and right I just wanna add 15 pixel of padding and now within this main container okay first of all I'm just making this main containers name to pricing now within this main pricing container I wanna take three inner containers so from here let's drag this container here in this place now let's just duplicate it and duplicate it one more time so we have these three inner containers and I wanna rename these three in this way like the first container I mean the first inner container I'm naming it as pricing table because I will be using it only to create the pricing tables and and then the second inner container I'm just naming it to testimonials because I will be using it to create out testimonials and the third inner container it would be for flat forms all right now let's first start working with the pricing table this inner container so here I just wanna copy and paste The Heading element from top so maybe from this place just right click here click on copy and then within the first inner container right click here and click on paste also with the paragraph so just copy from this place let's now scroll down and right underneath this heading here let's just paste it now you know I just wanna change this heading so I'm changing it from this place also I'm making its alignment to centered align also with the paragraph let's make its alignment to Center so go under the style tab from here I'm making the alignment to centered and also I wanna make its font size a bit smaller so from here I'm making it to 16 pixel now right under this paragraph or text editor I wanna create another container or another inner container So within that we can create our pricing tables and we don't need to do that from scratch because previously we have created that is structure at the top so if we go above here at this place actually we can use the same structure from this place so make sure you have selected this main container also you can check it from this place yes I want to select this inner two container now just right click here let's copy it from this place to take this structure now let's scroll down and here just after this paragraph or maybe anywhere within this container just right click here and click on paste so you see here on the Navigator just after that text editor this inner 2 has been pasted here but this time I just wanna rename it instead of inner two I want it to rename it to monthly pricing and now let's just adjust it because I just don't want to do the same thing again and again so I have just taken this structure from the top areas now I will repurpose it so first of all I just need this three curves so I will be deleting these three cards from bottom so from this place let's delete it also let's delete it from this place also let's delete this one because I just wanna use these three curves now let's start with this middle one and I also don't want this so let's just delete this icon box also let's delete this button from this place because I just want it to take this structure now here within this single card I will be taking some elements so click on this plus icon first here I'm dragging The Heading element or widget here and I just want it to say sweet because that would be this pricing plans name so I'm naming it as sweet now quantity style Tab and from typography I'm making its size to 20 pixel and font weight to 500. now underneath this heading I wanna take another inner container because I wanna adjust some headings within the similar container to make them visible horizontally one after another just have a look you will understand it properly so right underneath this heading just click on the Rubik's Cube icon and from here I'm dragging this container underneath this heading here now just select this in our container from here I'm making the direction to row and here gap between elements I'm setting it to 3 pixel now within this inner container click on this plus icon and I'm dragging this heading element here and I just wanted to say dollar sign nothing else is just a dollar sign and let's do a little bit starting with it so go under the style tab first of all I'm making a size to 24 pixel font weight to 500 and then I just want to adjust its spacing so from under Advanced tab unlink the margin only at the top I'm adding 5 pixel of margin now let's just duplicate this heading from this place so here I'm duplicating this heading so you see it's now just after the main first dollar sign here but instead of this dollar I want to say the price here and that would be for example 16 now let's go under the style tab from here making its font size to 44 pixel and I also want to increase its fonts weight to 900 but with this one I don't want any spacing so just under its Advanced Tab and from here I'm just removing the margin so let's make it the default all right now let's just duplicate this 16 again and here I just want it to say forward slash then monthly or just month okay and this time go under style tab I'm making its font size to 14 pixel and also let's just make its text color to the default black light color and I also wanna reduce its font weight to 400 now let's go on Advanced Tab and Link the margin because here at the top I wanna add only 20 pixel of merging top or a little bit like 22 pixel all right now I wanna add a text editor or paragraph right underneath this here I mean in this place so click on the Rubik's Cube icon and from here I'm just dragging this text editor here underneath in this place actually if I want to place it is see it's making problem because Elementary is also confused what I want to put this text Trader So to avoid this confusion I always put it in a random place just like right underneath this Swiss sweet heading here now let's just replace this text with real text and now you know we can just move it underneath here by using Navigator so let's just minimize this container and I'm now dragging this text editor underneath this container here in this place but of course I don't like this spacing so just to go under its Advanced Tab and from here unlink the margin at the top here I'm adding negative 5 pixel and here underneath I mean at the bottom I'm adding negative 15 pixel of margin and also I just want to make its font size a bit smaller so from here from the typography I'm making its size to 14 pixel all right now underneath this pair paragraph I wanna add a divider so from Rubik's Cube icon here is the divider so I'm dragging this divider underneath this paragraph here now with the divider one list style tab I just wanna change its color to our gray color other than that from here we can just reduce the Gap like this or we can just make it two all right now underneath this divider I wanna put some features that will people get with this package okay so to do it let's click on the Rubik's Cube icon and here I'm searching for the Widget icon box but I think we can also wrap that within a container first so here I'm dragging this container underneath this divider here and with this container I'm making the Gap to 10 pixel okay now within this container click on the plus icon and here I'm searching for the icon box let's drag this icon box within this inner container here so for obvious here I wanna just insert the check icon I mean this one insert it then for this icon I'm making the view to Stacked and the default circle is fine and I don't want to use this paragraph or the description so I'm removing it from this place and here I'm just replacing this title with other text like 90 day chat history this is a feature okay then they are restructure I mean I can position I'm setting it to left alright so we are done with its structure now go under the style tab from here first I'm making the secondary color from the Color Picker that's hash 2b6e F5 now let's just copy this color code because I want to use the same color on the primary color so open the Color Picker paste the color code but this time I just want to reduce its opacity so drag it to the very left like this so you are now familiar with these tricks because I have also applied it on the above sections okay now let's just adjust its size by using these options so from here I'm making the spacing to only five and then size let's just make it 20 pixel now 20 let's just make it 12 pixel all right let's now open the content tab from here first I'm making the titles spacing to zero then the hidden color let's make it to our black main Global color then open that typography because I just wanna set its font size to 15 pixel then font width to 500 and then line height first set it in em and I'm making it to just 0.5 em all right I think it's looking much cleaner now we can just duplicate this icon box so let's duplicate it and let's duplicate it one more time and I wanna change this text with other text like this and with the third one maybe that would be 24 by 7 support you know all right so now right underneath this container I wanna add a button so go to Rubik's Cube icon and from here I'm dragging this button widget underneath this container here in this place let's put it here but if you see it goes within this container but I don't want that so let's take the help of this Navigator first of all I'm just moving this button outside of this container here and now let's minimize the container and now I'm moving this container at the top of the button I mean here I know sometimes it looks frustrating but this is the way you will have to work in this way so you need to get familiar with all these Navigators options alright now with this button you see here is getting all these tiles from global settings but in this case let's just select it and here instead of click here I just want it to say choose plan because you know it's the pricing table and then I always use the brand color here so just to go under the style Tab and from here the color I just wanna set it as the brand color and also with the Border color just go under border type let's select it as solid and here with one also color I'm setting it as brand color then the text color let's set it as white color so and the normal and Hoover state I'm keeping it Same by the way as we have copied the settings from top so here you see at the top we have got a different color with this card top border color so I also want to change that just select this card or container now go under its style tab open the Border go to its hover and from here from this place I'm just making this color I'm just changing this color to the brand color like this so it's now looking much matched alright so we are done with this card and you know we don't need to create other cards from scratch we can just simply duplicate this card but before that to reduce all the confusion instead of single card for this card I'm just renaming it to single pricing card so here I'm just renaming it to single pricing card and now let's minimize this card then right click on the single pricing card let's just duplicate it and let's duplicate it one more time like this and we no longer need this single card that we have copied from top so just right click over this single card let's delete it also with this single card right click over oops let's just minimize it just right click over this single card here and delete it from this place so we have got our three pricing cards here within this inner container and then you know if you want to change all of these features for the different pricing you can do that also if you wanna change the color of this icon so you can do that for example with this card let's select it go under its style tab from here I'm just changing the secondary color to a greenish color like this let's just duplicate it with this here I mean with the primary color let's just paste it and you know we will be just reducing the opacity like this so just right click over this icon box copy it and then here again right click here and click on paste Style again right click here and click on pastry style then if you wanna change this pricing from this place so instead of 16 for example here I'm just giving it 0 4 I mean four dollar and with the last one here I'm giving the price to 27 also if you wanna change the name so here I'm changing its name to phrase and the last package here I'm changing its name to for example juicy alright now here with this middle pricing card I wanna do it a little separately that is I just wanted to make as most popular or you know I just want to add that kind of badge here with the top right corner you see that every day on other websites pricing tables right but before that so just guess it for the moment this card we will be using at the most popular pricing plan so I also wanna design it a bit differently nothing crazy just select this inner container or this pricing card go under its style Tab and from here up in the Border initially I also wanna activate its border top color so here unlink it only at the top I'm making it three and other sides I'm just making them 0 like this then I'm setting the Border color to our Global brand color like this so if we minimize it you can see the difference properly initially it's already looking different than the other cards but also I wanna add here a badge that says most popular or any other word you know so to do it just open the bar from left now just go under its Advanced tab scroll down and open the custom CSS field and you already know we have added this CSS snippet before because we already have copied that from top but we don't need to remove this CSS snippet from this place just hit enter couple more time to make some space and here we will be adding a different CSS snippet and I already have written that for you just go to gym for the digital.com and from there let's scroll down it says card badge CSS okay just copy this snippet from this place go inside Elementor and right underneath the existing CSS code let's paste the CSS snippet here so let's say if you want to change this most popular text with any other text you can do that from this place you see it is most popular so if you want you can replace this text with your own text also here is the background color here is the text color so you see here is the text color is white if you want you can change that from this place and here is the background color so in instead of this blue color if you wanna use any red color so you just need to remove this color from this place and you can simply write here red so you see it's instantly changed but I like the previous colors so I'm keeping it like this all right let's minimize other cards from here so this middle card is the most popular card but with other two cards I just wanna disable the shadow on the normal State I want to enable them on Hoover only so to do it let's select the first pricing card go under its style tab from here open the border so on the normal state I'm disabling the Box Shadow just by clicking on back to default but on Hover let's just open the box Shadow and here the color I'm setting it as 0.2 then here I'm adding the vertical value to 15 here is the blur value to 60 and here is the spread value to negative 10 so just have a look let's minimize 8 at this point initially it's looking like it and when you hover over here the shadow has been added so I also do the same with this card so open it from the Navigator just right click over the first card and click on copy then right click over the third card and click here paste style now if I minimize it you can see the difference properly so here the most popular card is now highlighted more and other cards when we are hovering over there we can see the Shadow with them like this all right now I just wanna check its responsiveness so go to the responsive mode first to go to the tablet device so on the tablet device everything is looking great but I think we can just adjust their positioning or the justify content so to do it first from here let's select this inner container that's basically the monthly pricing container now only for the tablet device I'm making their align items to centered oops not align items we need to select its justify content to centered as its direction is set to row so you see they are now aligned properly on the tablet device as well then if you want you can also decrease the width of this single curve so I'm just selecting this single card go under its layout and here instead of 48 I'm just reducing a little bit like 45 with the second one as well go on the layout here I'm making it 245 also with the third one I'm making it to 45 percent of width all right let's now go under mobile device eyes so here on mobile device everything is looking great but I think we need to adjust these icon boxes so let's just select this icon box because on mobile by default if I go under content tab you see by default it's set its icon position from top but I don't want that so I'm just resetting it to from left so let's do the same thing with other icon boxes right click here click on copy then right click here just click on paste style actually this time paste this style won't work because it's not under the style tab so you have to do it one by one just go here and set it as left aligned actually in this case if you just click on paste style it won't work in the same way because it's under its style tab so you need to do that manual each time so just select this icon box from here just to make its icon position from left also with this one let's make it from left so I'm doing it with other icon boxes and I'm coming back to you really quickly all right I have added all the mobile icon positions for this icon boxes to left so everything is now looking great on the mobile device also on the tablet device and for sure on the desktop device now here if you wanna keep the pricing table like this you can do that but now I also wanna show you if you have a different plan for monthly users if you have a different plan for real users how you can create that monthly or yearly pricing table like the toggle button so if you click on monthly that will display the monthly prices if you click on yearly that will show the visitors the yearly prices like that but if you don't want that you can keep it like this but I will show you how you can achieve that as well so to do it first of all from here let's scroll up because I just want to find this monthly pricing this whole wrapper container so if I minimize the monthly pricing from here basically this is the wrapper this monthly pricing container it wraps this three pricing table with this monthly pricing container I wanna add a fitting effect first so just go under advanced tab from here let's open the motion effects and here inference animation I'm just adding fade in animation so later whenever we will be switching to monthly to yearly each time they will appear with this fading effect so here we have got our monthly plan now I just wanna duplicate this whole container and I wanna make that I mean I wanna make the duplicated one for yearly pricing okay so we can do that from the Navigator so just right click over the monthly pricing and from there click on duplicate so here you see it's been duplicated on the underneath here and also I just wanna rename it to yearly pricing instead of monthly so you can recall it properly later so it's yearly pricing and as we will be using for yearly pricing so here instead of per month I just wanted to say per year or per yearly so let's do the same with other text so here I'm just writing here per yearly also with the third one here instead of per month I'm just writing here part yearly also the yearly pricing should be bigger right so here instead of four I'm just writing here 32 then the sweet package I'm just pricing it 116 and the yearly I'm just pricing it to 227. all right so here this container okay I'm also showing you that from Navigator so from here from this place here is our monthly pricing and minimize the yearly pricing so this is our monthly pricing card or monthly pricing container and this is our yearly pricing container now the very first thing I will do here I will save them as template so first of all make sure from the Navigator this is our monthly pricing container just run right click over monthly pricing container then I'm just clicking here save as template so I'm giving this template name as monthly pricing now let's just save it now let's close the pop-up and from here this is the yearly pricing so just right click over this yearly pricing then click on save as template so I'm just naming it yearly pricing then save it and close the pop-up all right as we have saved them as template now we no longer need them within this page okay now don't panic because I just wanna delete this monthly pricing and yearly pricing from inside of this page so right click over monthly pricing then click on delete and here is the yearly pricing just click here then right click and click on delete to delete the container Also let's just close the responsive bar and click on this green update button to save our work now just let me show you where are those two templates are going I mean where are they now so if I now just go back to our WordPress dashboard now from there let's go to Elementor templates here from there go to saved templates you see under safe templates we have got here yearly pricing and monthly pricing templates and also have a look here with these safe templates with the yearly pricing at the right side we can see a shortcode here also with the monthly pricing at the right side here is a different shortcut for that I'm just saying about this shortcut because we will be using these a little bit later for now let's just go inside Elementor so now here first of all let's select this text editor because I wanna adjust its positioning just to go under Advanced tab now here at the top I'm just making it to negative 5 and at the bottom I just want to increase the space so here I'm adding 30 pixel all right now right underneath this paragraph or text editor I will be adding the tabs widget so click on the Rubik's Cube icon and here I'm searching for tabs so this is the tabs widget now let's drag this tabs widget right underneath this paragraph here make sure they are within this container I mean within the pricing table container so here you can see first we have got heading then text editor and here is the tabs so let's now select the tabs now here on the left we can see two items so the first item I just wanted to say monthly and the second one I just wanted to say yearly okay and also I just wanna set their alignment to centered like this all right now let's first open the monthly tab from here I'm just removing this text from here because you may remember if I just go to our WordPress dashboard here under templates to save templates this is the month pricing and we have got the shortcode here on the right side so this shortcut is for monthly pricing just copy this shortcode from this place and go inside Elementor now within this field I'm pasting the shortcode here so this is for the monthly let's now minimize the monthly and open the yearly again just remove the default text from here go inside our WordPress dashboard from here you see this is the ELA pricing so just copy this shortcut from this place let's copy it go inside Elementor and paste the shortcode here now within the tab you can only see the shortcuts but on the real browser you can see the pricing tables I'm showing you that very shortly but for the moment I just wanna design these I mean these tabs so to do it just go under the style tab from here first of all I'm making the border with because I don't want these borders here around so I'm just making that border width to zero then from this title color so I'm making the title color to our Global black light color and active color I'm just making the active color to white color I know you cannot see it at this moment but I will be adding some custom CSS so no worries about that but for the moment I'm just showing you if I set it to any other color for example the red color like this so if you want you can use this active red color and then from the typography I just wanna set their font size to 14 pixel and font weight to 600 okay now before adding the custom CSA snip it because if you don't want to add the custom CSS snippet let me show you how it's looking at this moment okay so for now let's just click on this green update button and then click on this eyeball icon to preview it from the real browser so here let's scroll down scroll down scroll down and here right underneath in this place yep we can see the pricing table so initially we can see monthly because we can see the active color and then if we click on yearly we can see the yearly pricing tables here so if you wanna keep it like this you can do that but I wanna make it look much more better so to do it I want to apply some custom CSS with these tabs so go back inside Elementor now make sure you have selected the tabs now go under the tabs advanced settings open the custom CSS field now go to gym for digital.com and scroll down here it says tab title CSS okay just copy this CSS snippet from here go inside Elementor and paste that CSS snippet within this place so it's now looking like it and for sure we need to you change the active color so go under the style tab from here the active color I just wanna change it to our Global blacklight color or we can make it to white color so it's now looking much better so again just save it by clicking on this update button then click on this eyeball icon to preview the page so if you scroll down this time you see it's now looking much better we can switch to yearly like this we can switch it back to monthly like this all right let's now go back inside Elementor now let's scroll down so here actually you see we can see the gap for the pricing table but within Elementor page builder we cannot see the pricing tables because it's coming by using short course but we can see it on the real website that you already have seen okay so within the main pricing container we have done with the pricing table with designer container now underneath this pricing table in our container we will be creating our testimonial container so let's select this testimonial I mean the second inner container this one so with this testimonial container first I wanna add some spacing so go under Advanced Tab and here I'm adding 100 pixel of padding now unlink it because at the top I wanna add 80 and bottom I'm going to add 60 pixel of padding all right let's now drag this navigator to the bottom so you can watch it properly okay now with this container I wanna add a background image now go under the style tab from here from the background let's select the background image so for that testimonial area I'm selecting this image now click on insert media and here I'm setting its position to Center Cinder repeat to no repeat and size let's set it to cover now within this I will be inserting testimonial Carousel so click on this plus icon and here I'm searching for testimonial Carousel so here it is testimonial calcium let's just drag this within here and first of all I just wanna delete item 1 2 and 3 so let's create the first slide here as the testimonial image first select the image so I'm selecting this image insert it and also I'm just changing this text from here and you know you can change the name and title from here for example instead of just CU I just wanted to say CEO of with cursor and then you know you can just duplicate it by clicking here but I'm doing it later but before that from here I'm just making the layout to image above and then from inside additional options I'm just turning off the arrows because I just wanna use the dots alright now go to slides we can just simply duplicate this by clicking Here Also let's duplicate it one more time so we have now three slides here and we can see that Dots here underneath okay so let's now do some styling here now go under the style tab first of all here is the space between okay just keep all this default now I just wanna go under content tab so from here first of all the Gap the Gap in between I just wanna make it to 20 so it's now looking much decent then from here text color I'm setting it as white color and then from here typography let's set its font size to 20 pixel and also you see by default their type is kinda italic so from style I'm just making it to normal like this now from left let's do some styling with the name that means this John Doe so I'm also changing its color to white color and then from the typography I'm just making its style to normal as well then font size to 20 pixel then font white I'm making it to 700. now underneath here is the second title that means this text so here I'm again making its color to white color and then from the typography here I'm making its font size to 14 pixel and here front to it I'm making it to 500 and also this time I'm making it this style to normal all right now from here let's open the image so I'm just making the image size to 120 we can make it a bit bigger so 140 okay it looks much decent now I just want to style this dots so let's open the navigator from here first I'm making the active color to white color so you see the active dot is white and then the other dots so I'm selecting their color from this place I'm also making it white but I just wanna reduce its transparency a bit like this so it's now looking great all right so from the Navigator we are also done with this testimonial container now let's do the platform container so I'm selecting platform container that means this empty container let's select the container and here with this container I also want to add some spacing at the top so go under Advanced tab from here unlike the padding because this time I just want to add some padding at the top that is 80 pixel and I also wanna add a background image with it so go under the style tab from here let's add a background image and that would be this one let's select it it says sponsorship.png now click on insert media then let's set its position from here so I'm setting it as bottom center also I'm making the repeat to no repeat and we can keep the size to default now within this container I wanna add a heading and paragraph and you know we can just simply duplicate I mean just copy and paste from top so just copy it and within this place right click here and paste it also same with the paragraph right click here copy it now scroll down and paste it underneath this heading here so just right click here and click on paste and of course I wanna change this heading so from here I'm just pasting other text and right after width I want to add a line break you know this is the line break tag and here I also wanna change this paragraph text from here so I'm just changing it really quickly and let's just check its spacing from under Advanced tab so here bottom instead of 30 I'm just adding a bit more that's 40. all right now underneath this paragraph I wanna add another inner container so click on this Rubik's Cube icon from here I'm dragging the inner container right underneath this paragraph here just make sure they are within this container so you see it's just went outside of the container here actually that also happened with this paragraph as well so uh okay just drag this Navigator over here so I'm dragging this paragraph within this container in this place so it's now within this pln container and let's also drag this inner container within this place here underneath in this place so if we now check them from Navigator you see if I now minimize this platform so yep they all are within the platform PRN container okay so here is our heading underneath here is our text editor and here we have another inner container so we can just rename it in our container actually that's why I always rename the names so it remove all the confusion from us all right now within the inner container I want to take some curves but before that let's select the inner container I'm making its direction to row then the justify content I'm making it to centered also align items let's set it to centered so all the Inner Elements will be vertically and horizontally centered and this time I also wanna set the wrap value to wrap you know the reason behind that and now let's go under Advanced tab here I wanna add huge padding so I'm adding just 200 pixel of padding but I want it to be applied only at the left and right side so unlink it from top and right I'm making it 0 like from top and bottom I'm making the padding value to 0. okay now within this inner container like I said I wanna insert some inner container so click on this plus icon and here I'm dragging the container and from the Navigator I want to rename this container name to single card now I wanna make this single cards with two full width I'm making it within pixel so I'm making it with 100 pixel then minimum height I'm making it 100 pixel also from under items I'm making the justify content and align items value to centered then go under this curves style tab because I just wanna make its background color to white color so let's make it white then I also wanna add some border radius and Shadow so from under border let's add some border radius that would be just 6 pixel and you know we can add the Box Shadow from this place so first of all I'm making the Box Shadow a bit more transparent so I'm making it 0.2 then here I'm making the offset value to 20 the Blurred value to 60 and the split value to negative 10. also I wanna add some space underneath so just go under Advanced tab unlink the merging only at the bottom I'm adding 20 pixel of margin now within this single card click on this plus icon I just wanna insert image here so insert the image within this card now select the image so from here let's first select this image you see it says sponsor dash one dot PNG now click on insert media so in this way just have a look on this Navigator I'm just minimizing the single card here let's minimize it and I want to duplicate the single card couple more time you can duplicate it just by right clicking here and click on duplicate also from here as we have enabled the editing handles so we can duplicate the card from here so let's duplicate it couple more times so we can add as many as images we want let's duplicate it couple more time and let's duplicate it and duplicate it one last time then you know I just wanna change all these images so I'm changing the images really quickly and I'm coming back to you alright I have changed all these sponsor images so just have a look it's now looking great I'll set the top this slider is looking great also here at the top we have created our pricing table so finally just check everything is looking great on mobile and tablet device so you know to check the responsiveness just go to the responsive mode now go to the tablet device so here we already have checked our pricing tables and they are coming from the templates so we already know they are pretty much looking good on mobile and tablet device so let's just check the other containers like this one so with this testimonial container let's just select this container and from Navigator make sure we have selected the right container yup this is the testimonials container now everything is looking great I just wanna reduce its spacing so go under Advanced Tab and here I'm first making the padding to 60 pixel now unlink it from the left and right I'm just making it to 30. all right so this testimonial area is looking great on tablet let's now select the platform this inner container and now with this one we just need to decrease the padding so go under Advanced tab from here let's first make the padding to 80 pixel now I'll unlink it because at the top and bottom I'm making the padding value to zero oops actually not with this one let's just keep it default that we have done with the desktop because we need to do that spacing settings with the inner container okay so this platforms I mean with this platforms let's just keep it same but with the inner container that wraps this single curves so select the inner container go under its Advanced tab let's now make it to 80 pixel and unlink it now remove the padding from top and bottom to zero so it's now looking great on tablet device on we just need to check it from the mobile device so let's go to mobile device on the mobile device pricing is looking great we can see this empty space because here we will see the pricing cards on real browser you already know we cannot see it from inside Elementor page builder so let's just go underneath but here with the main piano container that means these platforms with these platforms this platforms is also the inner container so we need to go first their main parent that's basically this pricing container okay so with this pricing container we can adjust the spacing so here let's add 60 pixel of padding on mobile device now unlink it at the left and right I'm just making it to 0 also at the left side let's making it to zero and then this area is looking great like I said now we can select the testimonial section or the testimonial inner container now from under its Advanced tab I also wanna remove the padding from left and right so first I'm setting it to 60 and then unlink it from the left and right I'm making it to 0 pixel of padding and then don't worry about these single testimonials because if we select the testimonial and go under its content because on real browser it won't be showing like this because slides per view is by default will only show one slides per review so you can see it perfect on real browser but only to make you double sure if I set it to 1 you see it's now showing perfectly alright so testimonials are looking great on mobile device let's now move to the platforms so I'm selecting platforms container from the Navigator so here I just wanna remove the spacing from the inner containers first of all let's select the platforms and you see at the top 80 pixel is huge space so we can just unlink it so instead of 80 we can make here 40 pixel of space at the top and then let's go inside of the platform and I'm selecting the inner container that means this container and with this container I don't need any additional spacing on mobile device so here I'm making their padding to zero pixel or instead of zero we can just add the 15 pixel then here with all these single curves you see these width is looking kind of weird so only for the mobile device let's select this single card now go under its layout for mobile device I wanna reduce their height and width so for the mobile device I'm making there width to 80 pixel and they are high to 80 pixel so I wanna do the same for for all of the single curves so just right click over here click on copy and with other cards right click here and click on paste style so I'm doing the same with others just right click there and click on paste style so I'm doing it really quickly and I'm coming back to you all right so everything is now looking great on mobile device also if we go to tablet device you see everything is looking great there as well so we can now close the responsive bar from top and for sure click on the green update button to save our work now we are pretty much done with the page or website now we just need to create our beautiful header and footer so first of all let's minimize all the items from Navigator just by clicking here actually it opens up all the inner content I'm clicking here again so we can only see the main containers here we have created hero Banner features facts how it works download and pricing containers now underneath everything I just wanna create our main footer alright let's now create our footer so click on this plus icon and here again I'm taking this column based structure now here I wanna give it a background color so go under a style tab from here um giving it a background color that's our Global white busy background color so let's give it and let's go under Advanced tab from here unlink the padding here at the left and right I'm adding 15 pixel of padding then at the top here I'm adding 60 pixel and at the bottom I'm adding 80 pixel of padding Also let's just rename the container to footer and then within this footer main container I want to take two inner containers so let's click on this plus icon here I'm dragging the container and let's just duplicate the container one more time so here we have got two inner containers the first container I just wanna rename it to footer top and the second one I'm renaming it to footer Bottom now let's start with the footer top that means this first inner container okay I'm just dragging this navigator to the left I'm in left bottom so you can see it proper early okay so with the food at top I'm first making its direction to row and then within the footer top container I wanna take some inner containers as well okay so to do it let's just click on this plus icon now drag this container here and from here make sure you have selected the inner container so from Navigator just open up the footer top yup within the footer top we have taken here another container so I just wanna rename this container to in our container so with this inner container I wanna make its content with two full width and here I'm making its width to 40 percent then I'm making its align items from start so here within this left inner container click on this plus icon first I'm dragging here an image and I will be adding our logo here so from the media library here is logo let's insert it and underneath logo I want to add some space so go under Advanced tab here unlink the merging at the bottom I'm adding 15 pixel of margin then underneath I wanna take a paragraph So from here let's drag the text editor underneath this image here let's just paste some text in this place then underneath that I wanna insert a button so we can take the button from Top actually I wanna use this button so just right click here then copy it now scroll down and right underneath this paragraph so right click here and click on paste so here I've got our button but I don't want that white color at the background so just select the button go under the style tab from here at the background color I'm just making it to transparent so drag this bar to the very left so right now it's looking much better but I think the spacing between is huge so I just wanna add some negative margin with the button go under its Advanced Tab and Link the margin here at the top I'm adding negative 25 pixel of margin and at the bottom I'm adding 20 pixel of margin now underneath this button here I want to add some social icons so click on the Rubik's Cube icon again and here I'm searching for social let's drag this social icon underneath this button here in this place and you know if you want you can put your Facebook URL here so within this link field here I'm just temporarily putting hash but you can put here your Facebook page URL within the Twitter handle you can post your Twitter handle link like that and let's see if you want to add more elements or more social handles you will just need to click here on ADD items and click on this icon so from here for example if you wanna add your GitHub just select GitHub and click on insert and you know within the link you can put your real GitHub account handle link alright other than that everything is looking great let's now go under this style tab because I wanna do here I mean by default they are getting their official color but I want to use here custom colors so from here instead of official color I'm making it to custom color now here the primary color I wanna use the white color as the primary color and the secondary color I wanna use here our Global black main color then the size we can make it 15 or we can make it a bit bigger so 17 is looking fine then from here padding let's just increase it so we can just keep it like 0.6 and here is this spacing I just want to increase it a bit so 8 is looking fine okay let's just make it eight so it's looking perfect but I think we can add some hover effect with it so go under hover actually there is no hover option here but you will find that underneath so so open the icon hover now here the secondary color on the hover I'm setting white color and the primary color I'm setting the global brand color so here initially it's looking like it and when you hover over here it's looking like this all right now I just wanna duplicate this inner container so let's duplicate it and here with this inner container let's select it I wanna reduce it width to 15 percent like this and I don't want any of these Inner Elements so let's just delete all of them because I will be using other elements here also I don't need this button so within this second inner container click on this plus icon first here I'm inserting a heading element and I just wanted to say for example company now go under its style tab from here I'm making its font size to 20 pixel and let's set its font away to 700 now now underneath this heading I wanna insert icon list widget so click on the Rubik's Cube icon and here I'm searching for icon list here you go just drag it underneath this heading here in this place and first of all let's just delete the two and three these items okay and open the first item because I don't wanna use this check or any other icon so let's just delete it just by clicking on this delete icon and here instead of this list item hash one I just wanted to say for example about us if you have other Pages you can link them here and then within the links you can put that Pages URL like this okay let's minimize it and we can just duplicate it couple more times to give it a real footer fill let's also change this text for example here I'm writing services with the third one here we can say for example case studies then maybe with this one let's write blog and with the last one here let's write contact okay and also here I'm setting the apply link on settings to inline so only the text will work as the links okay now I wanna do a little bit of styling with it so go under the style tab from here space between let's drag it to the right we can make it five or six is fine and we don't need to do anything with icon because we have deleted the icons now open the text here the text color we can just set it as our Global black light color and on Hover we can set it as our brand color then from the typography we can make the font size to 15 pixel and also font weight let's increase it a bit 500 so this is looking great we can just duplicate it one more time and here instead of this company we can replace this text with other thing for example like support and then you know you can also change this text with your real Pages URLs so I'm changing them really quickly all right I have changed all this and now I just wanna duplicate it one last time so in this time I just want to increase its width so select this inner container from here instead of 15 we can increase it to for example 30 percent so here it's 30 percent now instead of support just let's edit the text so here I want it to say get in touch and now here with these items actually I wanna use icons with them so first of all let's delete all of them and let's open the first one so instead of community I just want it to place here my email address so that's gymf digital gmail.com and here I wanna use an icon so let's upload the icon let's search for any envelope icon so I'm selecting this one click on insert then from left let's minimize it and duplicate it couple more time so with the second one here I'm putting my phone number actually that's my real WhatsApp number okay and I wanna also change this font with a phone icon not font this icon with phone icon so I'm selecting this icon click on insert and with the third one here we can just put any address like this and also I wanna change this with a map or map pin so let's select okay not pin I'm searching for map so let's select this icon and click on insert now I wanna change their style a little bit so just go under the style tab because here we have got icons so I'm just changing this icon color so from here from the Color Picker let's change it to hash 2b70fa and then if you want you can keep the size okay I'm okay with the size let's open the text because I just want it to list Bolder so from the typography I just make the font weight to 400 alright so we are done with the footer top container so from the Navigator here is the footer top let's now minimize it we are done with this footer top let's now start working with the footer bottom container this one now first of all I'm making its direction to row and I also wanna add a border top with this container so just go under the style tab from here open the border now border type to solid and I Only Wanna add the border at the top so here unlink it at the top I'm adding two pixels of Border width and here I'm setting the Border color to our gray color then also let's adjust a spacing so just go under Advanced tab from here unlink the margin because only at the top I want to add 60 pixel of margin and then let's unlink the padding we can add only 40 pixel of padding at the top so it's now looking like it by the way most probably we have used here dashed border but I wanted to use the solid so just go on a style tab from here open the Border yep we have used here solid but let's say if you wanna use any other type of Border you can do that from this place for example dotted or Groove so if I now minimize it you can see it's looking like Grove but I don't want that so I'm changing it to the solid all right now within this footer bottom container I wanna take two inner containers one is left and another is right so click on this plus icon from here I'm dragging this container and from here let's just duplicate this container I'm duplicating it from the Navigator so the first one I'm just renaming it to the left container and the next one I'm just renaming it to the right container so let's first select the lift container and here I'm making its direction to row and I don't want to do anything crazy within the lift container I just wanna put here two buttons so click on this plus icon here I'm dragging the button element here you see it's getting the default settings I mean default button global settings but I just want to tweak it a little bit so first I just wanted to say download from from IOS then of course here I wanna use the Apple icon so this one insert it and here icon is spacing I'm using eight now let's go under the style tab here the text color I wanna set it as our Global black main color then the background color I wanna use the default white color and this time I also wanna change the Border color so from here set the Border type to solid oops solid oops solid and this time I'm setting the Border color white as well so I'm selecting it to White and then I wanna reduce the default border radius so I'm setting the Border radius from here to 8 pixel and also I wanna reduce the default padding so from here let's make it to 20 let's now unlink it because at the top and bottom I wanna add 10 pixel of padding so is now looking great on normal state but on Hover I just want to change a few things so just to go under hover State actually on Hover instead I just wanna change the background color to a transparent color so from here let's just make it to transparent so it's looking like it and the Border color from here let's just change it to our Global gray color so it's now looking like this on Hover alright so you know we can just simply duplicate this button let's duplicate the button and here instead of download from IOS I wanted to say download from Android and of course here instead of Apple here I just wanna Place Play Store icon so select it and click on insert and here I just wanna reverse the hover effect and normal State comparing to this button so let's select the button go under its style tab on the normal State I just wanna uh make its background color to transparent color like this and the Border color I'm making it to gray color and then on the hover State I just wanna make the Border color to white color and also the background color to white color first of all let's make it I mean make its opacity to full and let's make its color to white so on Hover it's looking like it alright so we are done with the lift container now let's start working with the right content actually I don't wanna do anything crazy within the right container I just wanna put here the copyright test you know so click on this plus icon and you know actually we can just copy and paste so from here let's just copy this paragraph or text editor text copy it then within this right container right click here and click on paste but here I just wanna make that text align to right and let's go to typography I'm just making its font size 215 pixel and for sure I just wanna change this text with some copyright text so I'm changing this text with the copyright text like this and with this text the very last thing I want to do because if you have a look you see they are not properly aligned so let's just select this text go under its Advanced tab from here unlink the margin at the top I just wanna add 10 pixel of margin so they are now aligned properly alright we are also done with our footer now I just wanna check how it's looking on mobile and tablet device so to check its responsiveness from here click on the responsive mode icon now go to tablet let's scroll down on the tablet device everything is looking great now let's go to mobile device so here on mobile device everything is looking great I mean everything in footer is looking automatically great but here I think the space is huge so let's just select the footer bottom this one go under its Advanced Tab and here instead of 60 just unlink it instead of 60 we can post here 30 pixel of margin top and also let's select the footer copyright text only for the mobile device I'm making its alignment to left so it's now looking great on mobile device so we can just close the responsive bar from Top also don't forget to click on this green update button to save your work so we are almost done with everything we just need to create our header but before creating our header I wanna show you another thing which is how to create go to top or scroll to top button okay so to create the go to top button first of all I will be taking an icon and actually you can place that icon anywhere of this page because that doesn't matter because later I will make that position to fixed so first of all let's click on this Rubik's Cube icon and from here um searching for Icon here it is so let's just place this icon anywhere of this page so I'm just putting this icon here for the moment and then instead of this icon let's change this icon with the top Arrow icon so here I'm searching for Arrow so here it is Arrow up let's now click on insert then from here the view I'm making it to Stacked then the shape I'm making it to square now do some styling with it so go under the style tab from here first of all I'm making the primary color to our brand color that is here and then the secondary color it's basically white but I'm also selecting it from here white so on Hover it will not change changed now from here I'm making the size to 20 pixel and then padding I'm making it to 12. Also let's add a bit of board radius that's 8 pixel all right now I just wanna position it to the bottom right corner so go under Advanced tab now from here let's set the position to fixed then now from right I wanna set the offset value to 40 also from bottom I'm setting the offset value to 40. so it's now placed to the right bottom corner and you see it's fixed and then I wanna link this button to the top of our website so to do it first of all let's select our main Banner so I'm selecting this Banner from here now go under its Advanced Tab and here I will be adding a CSS ID so here I'm adding the ID that is Banner now I'm just copying this CSS ID name from here now let's select this icon now go under its content tab from here you see we can link it with anything so here first we just need to put hash and then paste the CSS ID name that's Banner so no matter where we are on this page if I just click on this icon that will take us to the top of this page but now I want to make it more functional like you see we are now at the top Banner section and we can still see this top Arrow icon so we don't need this icon at that top of the page so my goal is initially we cannot see this icon but while we will be at the half of the page or at the bottom of the page on that time we can see this Arrow icon so to do it let's just select this icon again go under its Advanced tab now from here let's open the motion effects and from there let's turn on the scrolling effects and here from transparency let's click on this pencil icon I just want to keep the direction to fade in and level to 10 and then from bottom I'm just making it to zero but from Top let's set it to for example for the or okay forty percent now have a look initially we cannot see the top Arrow icon here but if we scroll down to the 40 of the page like this you see it's appearing here and also if you scroll down more you see it's becoming more clear or it's getting more opacity so let's say if you want it to be appeared after more scrolling then you can just increase this top value for example here I'm setting it to 87 so you see we need to scroll down more to make this button up here but I like to have it to 40 percent because it makes much sense so initially we cannot see it but when we scroll down to the 40 of the page we can see that go to top Arrow icon and if you click on this icon that will take you to the top of the page cool all right now the very last thing we need to create our header okay now we want to create the header at the top of this Banner so let's just click on this plus icon here now let's click on this plus and here I will be also taking this row based container so select it then for the justify content I am selecting space between and align items to centered let's now add some spacing with it so go under Advanced tab from here I'm adding padding to 20 pixel now let's unlink it because at the left and right I wanna add 15 pixel of padding all right let's now click on this plus icon because first of all I wanna add our logo so let's drag this image widget here and let's choose the image and here I want to place our logos to select the logo and insert it then right after the logo I wanna push here the nav menu so let's search the nav menu from here I'm searching for nav menu here it is let's drag the nav menu right after the image here in this place so I have placed that menu here but at the left it says there are no menus in your site go to the menu screen to create one okay to clear the menu you can just click here but instead I wanna show you how you can create a menu from your WordPress dashboard okay so let's just go to Wordpress dashboard now from your WordPress dashboard let's hover over on appearance from their go to menus and here you can give any name so here I'm just naming it Landing menu now click on create menu and then within the menu I will be adding the items now and you see I will be using custom links so click on custom links because I want it to be behave like for example let's go inside Elementor if I click on pricing that will jump to the pricing section of this page if I click on reviews from the menus that will take us to the review section of this page so to do it let's just create the menu so first of all I wanna create our first item as home so the URL would be hash banner and you already have seen on the go to top button how to create the CSS ID so for now I'm just keeping the URL to Hash banner and the link text that would be home now click on add to menu the second item that would be features and I Wanna Give the URL to Hash features so so these features would be basically that containers ID name for example from here I'm just copying this URL without the hash now go inside Elementor and this is our feature section okay so let's select this feature section by clicking on the six dots and from Navigator just make sure yup we have selected the features section or container now go under its Advanced Tab and within the CSS ID just paste the ID name without the hash all right now let's go back to our menu Builder here now click on add to menu then the next one will be hash download and here I'm linking download I mean the link text then click on app to menu then the next URL will be hash pricing and here is the text pricing click on add to menu and then let's add another one that's hash reviews and the link text would be re feels then click on add to menu then to save this menu click on Save menu so I'm clicking here on Save menu now let's go inside Elementor and here I want to put that CSS IDs so we have already put the features then the next one that would be download so here let's select the download but here with the download go under Advanced Tab and here the CSS ID would be download without the hash of course and then the next item would be pricing but I won't be linking the whole pricing because within this main pricing container we have also our testimonial so for that reason from Navigator let's open it I just wanna link this first pricing table container so select the pricing table container go under its Advanced Tab and here I'm adding the CSS ID that's pricing and with the testimonial container go under its Advanced tab I'm adding the CSS ID that is Reveals All right for now to save everything just click on this green update button and if we now scroll up to the header of the website we can not still see the menu because if we just click on the menu still we cannot see anything because we have created the menu on the WordPress but Elementor doesn't know about that so to make Elementor know about that we have created from WordPress we need to refresh the page okay so before refreshing the page make sure you have clicked on this update button to save everything let's just refresh the page I mean just refresh the elementary Builder so here we can see the menu items and just have a look if we now click on the features you see that it Scrolls us to the feature section if we click on download that is closest to the download section if we click on the pricing that is closest to the pricing table and if we scroll I mean if we click on the reviews that takes us to the reviews area and you see each time we have to scroll up to get these menu items for that reason I will be make this header sticky but I will do that a few moments later before that let's now do the styling of this header okay now before styling these menu items here right after this menu I wanna add another button so let's just click on the Rubik's Cube icon and from here I'm just dragging this button right after this menu here oops actually I want this button to the right side so actually you can adjust that from the Navigator so button will be after the nav menu here like this and this button I just want it to say get started so I'm writing here get started and also not only on the Hoover state in normal State I wanna use the global color I mean the brand color so go under the style tab from here the background color I'm making it to the brand color and the text color I'm making it to the white color also the Border color so from here the Border type let's set it to solid and here I'm using the Border color to our brand color so it will always look like this and I want it to be it like this all right let's now style our nav menu so let's select the nav menu now the first thing I want to do with the nav menu actually I wanna place it more left I mean in this place so to do it we need to add some negative margin with it so go under Advanced tab from here unlink the margin and only with the left side let's add negative 300 pixel so it's now placed here all right now from here content just have a look if we hover over on this item so you can see an underline here but I don't want that so from here first of all I'm just turning off this pointer to none so we can no longer see the underline on Hover then let's go under the style tab from here first of all let's go inside typography I'm making the font size to 15 pixel and the font weight to 500 and then the text color selecting our Global black main color and on Hover and active so go to hover so on Hover I'm making the text color to our branded color also on active um changing the text color to our brand color so if we now hover over on this you see the color is now Bend added color then from here I'm making the horizontal padding to 10 and the vertical padding to four all right now actually I wanna place our header within this hero Banner okay but before that let's just rename this container that's basically our header so here I'm just renaming it to Hidden so you can understand it easily this is our header and this is our hero Banner so let's select the header first of all I will be using some negative margin because I want to place this header within this Banner okay so let's select the header go under its Advanced tab from here on link the margin and here margin bottom I will be adding some negative value so let's first try for example 80 pixel but still you can see some white space at the top so let's try for 90 pixel or maybe 89 pixel let's minimize the bar so you can understand it properly yep it looks perfect with negative 89 pixel but you see we cannot see the button on the right also we cannot see the logo at the left so we just need to increase these headers index value so from under here let's set the Z index to a higher number that's five now we can see the low one button here also I wanna increase the padding of this Banner because you see it's looking like they are stacking with each other so this time let's select the hero Banner go under its Advanced tab now instead of 100 pixel as this header is taking 89 pixels so I want to add that 89 pixel to the top of this Banner so instead of 100 here I'm adding now 189 pixel of top padding now it's looking decent and the next thing I want to do like I said I wanna make this header sticky because if you scroll down to this area we can no longer see the heading here at the top so to make the header sticky first of all let's select the header now from under its Advanced tab let's scroll down open the motion effects and from here I'm turning on this sticky to top so just have a look if we now scroll down to the bottom you see the header is still sticked at the top but I just wanna do a bit of styling because you see the header's background is kind of transparent so it's not looking good but before that here I wanna also set the effects offset to 80 pixel so set it to 80 pixel I will explain it later why I'm setting it to 80 pixel and also we can add some intense animation so I'm just adding fading effect so now what I basically want initially this header would be like this and its background color should be transparent like this but when we scroll down then this header's background color will become white and also we can add some Shadow underneath this header so to make it happen we need to add some custom CSS with this header and you know let's just select the header from under its Advanced tab let's open the custom CSS field and to get the CSS just go to gym for the digital.com from there let's scroll down and it says isticky header effect just copy this CSS snippet from here now go inside Elementor and paste the CSS snippet here so if I now minimize the bar from left side you see initially it's looking like it and if we scroll down it a bit you see now the background color of this header is white also if you notice closely there is a shadow underneath this header so these header's white color is basically coming from this custom CSS snippet because you see I have set the background color to white color but instead of this white color if you wanna use any other color for example here I'm writing red so you can see it's narrate color but if we go to the very top you cannot see that color here now let me explain about the offset okay if I just now go inside motion effects here you see I have added the effects offset to 80. so if I now scroll down to 80 pixel you see the background color is now becoming red but instead of 80 if I just put here for example 300 now have a look if I go to top it's now looking transparent and if I scroll down to the 300 pixel it's now getting the color but instead of 300 here I wanna keep the 80 pixel of effects offset and also of course I don't want this red color so just go inside custom CSS and instead of this red here you can just write white or you can use the hash I mean the hex code that's hash ffff alright so this header is looking great on the desktop now I just need to check how it's look working on mobile and tablet device so let's just go to responsive mode first let's go to the tablet icon and here on tablet I don't want this button so let's select this button go under its Advanced tab let's scroll down and open the responsiveness first I wanna hide it for tablet also I want to hide that button for mobile device okay now have a look with this drop down icon or drop down hamburger if we now click on this hamburger we can see the menu items are appearing here vertically but I don't want it to be appeared in this way so we need to customize that for now let's close it and make sure you have selected this nav menu first of all go under its content tab so here the first thing I want to do I want to turn on the full width options so turn it on now have a look if I click on this hamburger all the elements are appearing in full width but also instead of a side I just wanted to set from here from align I'm setting it to Center and then let's just go under Advanced tab from here I wanna set the margin to zero because you may remember we have added some negative margin to the left so from here I'm setting the margin value to zero now have a look if I click on this hamburger now it's appearing here nicely alright let's now close it and I just wanna sync this buttons or drop downs design with our whole website so to do it go under the style tab so first of all let's open the toggle button from here and here I wanna set the background color to our brand color and the text color I mean this icons color to white color so from here I'm selecting white all right and then just have a look if I click over this hamburger you see here where all these menu items are appearing and their background color is kinda light black but instead if you want to use the brand color you can do that as well so to do it from here open the drop down just go under Hoover and here you can set the background color to brand color so now have a look if we hover over on this item so you can see the background color is becoming our brand color alright let's now close it so our header is looking great on tablet also just go to top yup here it's also looking great now let's go to mobile device here so on mobile device it's also looking great like if I open it you see everything is looking great let's close it but I think on the main Banner on the hero Banner we can add some more padding at the bottom so let's select the hero Banner now from here first let's unlink it at the top we can keep the same 189 pixel then left and right let's keep the same that's 15 pixel but at the bottom I just want to increase it to 300 pixel oops not 3000 it's 300 pixel so now have a look at the top it's looking great the spacing is descent and if you scroll down at the bottom it's also looking great so now just have an Overlook of the mobile view from here so let's just minimize the bar from left side and have a look so here at the top this drop down is working perfectly and let's scroll down each of the areas are looking perfect and also if you notice here the gold to top started increasing its opacity and everything is looking decent all the areas all the spacings are looking premium all these areas all these image Carousel all the floating animations everything is looking Perfect by the way like I said you cannot see it within Elementor but when you will see it from a real mobile device you can see the pricing tables because we have created those using shortcodes and here other areas are looking perfect everything is looking good here's the footer and if we click on this go to top button that will take us to the top of the website alright let's open the bar from left side and finally don't forget to click on this green update button to save your work so let's close the responsive bar from Top Also let's close the navigator from here now I just wanna have a final look on real browser how our website is finally looking so from here click on this preview icon or eyeball icon so here at the top the banner section is looking great all the floating objects are looking really nice and here we can see our beautiful header and let's scroll down a little bit here we can see the background color is now white also you can see some Shadow let's scroll down you can see all the card and all their hover effects are looking nice also here we can see the button with hover effects let's now scroll down everything is looking elegant and premium and let's just hover over here we can see the Border colors we can see the floating images here and scroll down we can see the beautiful counters here we can see the video icon just click over there we can see the video is appearing on pop-up just close it and here you can see the image slider let's now scroll down here everything is looking great let's now scroll down and finally yep we can see the pricing table here let's click on yearly it switched to the yearly pricing let's now scroll down here we can see that testimonial Carousel you can also swipe them like this also you can use these dots to swipe them let's scroll down here you can see all these icons are looking perfectly and here we can see our footer everything is looking great here and if we click on this go to top button that will take us to the top of the website now you know how to create and design any premium design in Elementor if you like the whole tutorial please comment down below your opinion about the whole tutorial about your experience about all the explanation I have made throughout the video and also feel free to share this video on social media so your other friends would be benefited from this descriptive tutorial I hope you have learned something new today if you like it please give this video a big thumbs up and don't forget to subscribe to this YouTube channel also please on that notification Bell icon to get notified before anyone whenever I will upload a new video on this YouTube channel also if you want me to help you on your WordPress project or Elementary project then you can contact me through my website that's gymfaddigital.com I will try my best to help you personally 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: 163,668

Keywords: Responsive Landing Page Design in 2023, Elementor Landing Page Design, WordPress Landing Page Design, How To Make A WordPress Website 2023, How To Make an Elementor Website 2023, Elementor 2023, WordPress 2023, WordPress Elementor Tutorial, WordPress Tutorial 2023, Elementor Tutorial 2023, elementor tutorial, elementor pro, elementor, Jim Fahad Digital, elementor flexbox tutorial, elementor flexbox container, wordpress for beginners 2023, Elementor for beginners 2023, WordPress

Id: zcWnk5I0gBQ

Length: 252min 34sec (15154 seconds)

Published: Fri Dec 16 2022