How To Make A Digital Agency Website From Scratch In 2023 (WordPress And Elementor For Beginners)

in this tutorial I will show you how to make a digital agency website step by step and to create the website you don't need any coding knowledge any design knowledge or any prior experience I know the digital agency term is kind of broad so let me just give you some idea about what type of websites you can create by following this tutorial you can create a web design agency website SEO company website Facebook ads agency website Consulting Business website logo designer or graphic designer website content writing services website Freelancers portfolio site or any kind of Business website and in this tutorial I won't be using any templates so there is no boundary after watching this tutorial you can design any type of website for yourself or for your clients 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 plus jobs on influencing marketplaces with five star ratings and in this tutorial I will show you the exact way how I've been creating my client's websites so you're basically learning from a real professional web developer I'm very 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 I will show you how you can create your logo just by using a free online tool and then how to put that logo on your header like this then on the right side how to push that navigation also I will show you how to create these drop down menus then I will show you how to create this type of beautiful banner area how to work with all these headings paragraphs how to design the buttons and then here you can create some fun facts about your business next I will show you how you can turn your images Within These creative shapes to look it really cool then I will show you how to create this beautiful Services area with this nice silver effects also if you have a close look you see all these icons are basically animated icons then next I will show you how to create this beautiful filterable portfolio area like here under web design category you can put all your web designs work similarly you can put all your easier work under here you can put your other works under different category and then if you hover over on any single portfolio you can post their different title and description also if you click on this plus icon the project images will appear within this beautiful light box also you can navigate them through these arrows like this all right right after that I will also show you how to create this beautiful testimonial area here you can put some of your clients best reviews then next let's go to our about page I will show you how to create a beautiful about page also by clicking on this meet our awesome team here you can put all your team members like you can share all of their pictures their name their job title also you can post their social handy links then I will show you how to create these beautiful counters where you can put some fun facts about your business like how many projects you have done how many clients reviews do you have like this then I will also show you how you can reuse a section that we already have created on the home page that will save us a lot of time and then let's go to our services page similar like the about page here you can also use some of the areas we have already created on the home page and then here underneath I will show you how to create this beautiful pricing table then from Top if we hover over on Services here we can see some Sub menu items basically these are single Services pages so from here if we click on web design basically this is a dedicated page for only Web Design Services so here you can talk more about your web design business specifically I'll also show you how you can post your images within this beautiful blob shape how to Showcase your services core features like best quality support or money back guarantee then I will also show you how to insert videos within your website so people can watch the video without leaving your website then I will also show you how to create this type of beautiful FAQ section where you can basically answer your customer most commonly asked questions alright then next let's go to our blog page here we can see all the blog posts with their featured image here is the block title also you can see block categories the blog author also first few lines from the main blog post then from here if we click any of the featured image or the title let's click here this is our single blog post page so I will also show you how to write a blog post how you can insert images within the blog post and then let's scroll down here have a look people also can make comments on your blog post and if we now scroll up and have a look on the right sidebar I will also show you how to put ads onto your blog post in this way you can also earn some extra cash then how to post this recent posts or categories area on your sidebar and then lastly let's go to our contact page I will show you how to create this beautiful contact page here we can see see our beautiful contact form so by using this conduct form people can contact you immediately also if you want you can post your email address or Whatsapp phone number so there are basically different ways for your clients to communicate you faster then let's say if you are a local business and if you're willing to share your business address then I will show you how to put this Google map address how cool is that not only that I will also show you how to make all your website Pages 100 responsive for mobile devices and tablet devices can you believe we will be doing all of this just by drag and drop and by using only free resources all right we will be creating our beautiful website in easy for steps first I will show you how to get your own domain name and web hosting I will also provide you a 70 discount link then how to install WordPress then how to install a free theme and a free page builder finally we will start creating our amazing website step by step also I will be adding a timestamp in the description so you can always jump into the necessary part you need let's now start with step number one which is to get your domain name and web hosting so first of all what is a domain name domain name is basically your website address like Facebook has facebook.com Amazon has amazon.com I have Jim fathdigital.com similarly for your website you need address that will be your websitename.com and what is web hosting web hosting is the storage space for your website all the images text you will have in your website all will be stored on your own web hosting as you are owning your own web hosting so there wouldn't be any limitation you can run ads you can upload any images or text you can upload any themes or plugins you want you are the in charge of your website alright now how to get your own domain name and web hosting to get your web hosting just click on the very first link in the description below this video or you can just type Jim fahaddigital.com forward slash name hero and hit enter that will take you to a special discounted name hero page now why name hero well I'm a web developer I've been developing websites for my clients for the last 10 years and I have tested almost all existing companies from the base to the worst whenever I talk about web hosting I prioritize these three things number one super fast website is paid then fast support thirdly affordable price and name hero passes all this very strongly I have hosted some of my clients websites that name hero where they have got millions of visitors on their website without any down time that's why I personally use it and I recommend all of my clients to host their websites at name hero to get it click here on get started now we can see there are different plans here actually you can take any of these packages depending on your needs and budget like here if you want to host only one website then you can take this starter Cloud plan with the plus Cloud plan you can host seven websites then here is the turbo and business Cloud plans if you're an agency I highly recommend you to take any of these packages in between this turbo cloud and business Cloud because here you can host unlimited websites also you will get nvme storage that will make your websites lightning fast with the first two packages you are getting unlimited SSD storage which is also super fast personally love name hero for their lightning speed and then no matter which package you are taking you will get free SSL certificate that means your website would be super secure with https protocol now let's take any of these packages you can upgrade or downgrade to any other package anytime so for now I want to take this stutter Cloud plan so from here let's click on order now from here you need to register your domain name that's basically your website name or website URL first you need to check if the domain name is available or not like here I'm typing Facebook here let's keep that.com extension and click on search it says facebook.com is unavailable and it should be so you cannot take any domain name that's already been taken so here instead you can put your name or your brand name or your business name like here I'm typing GMX then from the right side you can select your domain extension like dot com.net.org then let's say if you're a local business so you can select the extension based on your country name like dot us dot NL dot UK like this but personal I like.com website so I'm selecting.com it looks more legit and professional to me now it's gmx.com to check its availability just click on search and yup it says congratulations gmx.com is available cool let's now click on continue from here you can choose the billing cycle like you can take it for three years or two years but I wanna start with one year and then I don't wanna take any of these upsell options because you can do all of this just by using free plugins okay so now from this right side click on continue then from here you can turn on the ID protection option so no one will get to know your email address and you will not receive spam emails every day you can take it if you want but it's not mandatory so for now I'm deselecting it and click on continue so here the checkout you can first see the regular price so the domain price is 14 and the way posting price is 131 dollar but as you are using the discounted link from the description that's why you are getting this huge 98 discount including everything you just need to pay for the seven dollar for the full year I must say it's a great win all these great features under 50 bucks that's incredible let's now scroll down as you are a first time customer so you need to create a new account so here I'm providing my informations and address so here you just need to push your name email address phone number and billing address let's now scroll down here you need to put some additional informations like it says how did you find us so of course you're watching this tutorial on YouTube so I'm selecting YouTube and then this one the support pin option is important so here you need to type four digit PIN like here I'm typing 1919 and of course you should put here a different pin so if you need any name hero support via their phone or live chat they will ask you about this four digit PIN and then here type a password for your name here account then retype the same password here and then scroll down you can select any of these payment methods like you can pay them via Paypal via coinbase oh coinbase yep they accept cryptocurrency and then here's the credit card option and I want to use this option so here I'm putting my credit card informations let's now scroll down you can turn on this receive email option so occasionally they will send you emails if they have any discount or any offer now let's select this option it says I have read and agreed to the terms of service now from the right side let's click on checkout and it says order placed congratulations you have successfully secured your domain name and web hosting now you can just click continue to client area or you can just open up a new window and from there just go to name hero.com actually I'm just showing you the usual way because all time you cannot get access to this page that says order confirmation the buttons is continue to client area so from the name hero.com you just need to click here on account and that will take you inside the name hero dashboard if you need any support then from the left hover over on support you can just open a support ticket from here they will communicate with you really quickly to solve your problem then from this billing you can update here to credit card or you can add alternative payment options all right now I want to install WordPress so to do it let's now click on my cloud then from here click on web hosting from here click on login to cpanel now from the search bar I'm searching for WordPress then let's select this one it says WordPress manager by software coolers so I'm clicking here now from here click on install then from here you need to choose your domain name as you have got only one domain so there is nothing to choose so I'm selecting gmx.com then on the right side this directory field make sure it's empty sometimes you may see here it says WP or any other thing like that just remove that and keep this directory field empty then make sure this first option choose the protocol to http is so your website would be encrypted and secured all right let's now scroll down from under the admin account let's select an admin username and admin password basically you will be using this username and password to login into your wordpressive site so here I'm giving my admin username to Jim Fahad and here I want to put a strong password so first of all I'm making it hide let's type a strong password and then within this admin email field here I'm putting my best email address always try to post your best email address here because if you forget your WordPress password that recovery email will be sent to this email address and then from left we can actually change this site name and site description from inside WordPress so skip it for now and let's just scroll down now I'm skipping all these options because I can control everything from inside WordPress dashboard so let's just scroll down to the bottom of this page and click on install just wait a little it might take two to three minutes not two to three minutes it just took 10 seconds it says congratulations so we have successfully installed a WordPress and here is the administrative URL you can just click here to log in into WordPress but like always I just wanna show you the usual way so whenever you wanna login into your WordPress website you can just open up a new window type your domain name here in our case it's gmx.com then forward slash and type WP Dash admin and hit enter and here you just need to push your WordPress username and password you have just set so here my WordPress username is Jim Fahad I'm writing my password Here now click on login so right now we are inside WordPress admin panel or WordPress dashboard I will make you familiar with all of these options like here we can see posts media Pages appearance plugins tools settings all these options actually these are super easy and I would say these are self-explanatory now first of all I want to make you familiar with two basic terms which is dashboard and front end so right now what you can see everything here we are inside WordPress admin panel or WordPress dashboard only we can see it because we are the admin of this website now if you want to see the front end of the website then from the left top corner here we can see my blog though I will change it to our branded name like Jim if the digital or you can put your business name there okay so if you hover over there we can see visit site I'm just opening it from a new tab so this is the front end offer website right now our website is looking like it and the whole world can see our website like this and here at the top of the front end we can see a top black bear we can also see that on the dashboard top here actually only we can see these black birds because we are the admin of the website but other visitors cannot see this black bar alright now let's go back to our WordPress dashboard now the very first thing I want to do I wanna just delete all other unnecessary things like here you can see some notification pop-up so let's close it by clicking on this X and let's just minimize all of them so I'm minimizing this this one or we can just do one simple thing like from here if I just click on screen options from here I can just deselect all of them like I'm deselecting this this one also this one so right now our WordPress dashboard is looking much cleaner personally I love to work in a clean environment so not only these I want to clean up my WordPress more so to do it first of all from left let's go to plugins from there go to install plugins so here we can see some plugins pre-installed actually this plugin came with default WordPress installation but I don't need them so I can select one by one or we can select all these plugins just by selecting here so first of all from bulk action I just wanna delete them so let's select delete and from here I'm clicking on apply now the browser pop-up says I'm sure or not yes I'm sure so click on OK so all unnecessary plugin has been deleted then from left if I hover over on pages from there let's go to all pages and again we can see some pages that we have not created but this came with default WordPress installation let's now just select all these pages together now from bulk action I'm clicking here move to trash then click on apply so those pages has been deleted as well alright so at this point our WordPress dashboard is looking much cleaner the next thing I want to do I wanna show you how to change your password so to do it from left menus let's hover over on users from there let's go to profile now from here first of all if you want you can change this admin color scheme like if you want you can change it to light or modern or blue see this admin color schemes has been changed actually it doesn't matter because only you can see it so you can make it anything according to your preference so I'm just setting it to default now let's scroll down from here if you want you can change your first name last name or your display name so here I'm making my first name to Jim then my last name to Fahad also I wanna change this one it says display name publicly as so I'm setting it as Jim Fahad basically your this name will appear everywhere on your website let's say whenever you will write any blog your that display name will be shown on your blog post as the author of that blog post and then if you want you can change your email address from here you can put some of your biographical information inside here and then if you want to add any profile picture you can change the profile picture from this place then now from under account management I just wanna set my new password so to do it just click on set new password I'm making it height and here I'm typing a really strong password though it says medium but I'm happy with it so let's scroll down and from here I'm clicking on update profile then I wanna do some basic settings so from here hover over on settings from there let's go to General and from here you can change your site title and tagline so here I'm changing my site title to gym for head digital and here inside tagline I just wanted to say you deserve to be seen actually I have written here some fun words but you should write here some keywords let's say if you're a web design agency then within your tagline you can write the best web design agency in the world like that so you can better use some of the keywords that will represent your business more and then you don't need to change these URLs and if you wanna change your Administration email address you can change that from this place and then from here if you want you can change your site language like here is the default language it's English but if you want to change it to any other language you can do that but I'm keeping it in English then you can change the time format date format from this place but I'm happy with this settings so let's just scroll down and I'm clicking on Save changes then I wanna do another basic settings so from under settings let's now go to permalinks here you see the default permalink settings is set to day and name but I don't want that so I'm making it to post name basically if you set your permalink to plane or the date then any of your blog post page or your websites other Pages URL would something weird like this that's your website urlname.com then forward slash and this Beezer numbers instead if you keep your permalink to post name then your posts or Pages URL would be more human readable like your websitename.com forward slash about dot us and that's also good for search engine optimization all right let's set post name and scroll down click on Save changes then the next thing I want to do I wanna change the theme of our website so to do it from left hover over on appearance from there click on themes here we can see some of the themes actually these are also came with the default WordPress installation but I don't wanna use any of these themes so to add a new theme let's now click here on this big button it says add new theme I'm clicking here and here within the WordPress theme directory we can see a lot of free themes themes are basically the look and feel of your website like here we can see tons of free themes if you select this theme your website would look kinda like this theme if you select this one cadency your website would look something like this but I just don't want to use any random theme because I personally like a theme that says extra so here I'm searching for extra it's actually super lightweight and definitely it would make your website more faster so here is the Astra theme let's now click here on install and then click on activate to activate the extra theme cool we have successfully installed and activated extra theme now let's close this notifications so I'm closing this now I want to install some plugins into our website but before that I want to create a free Elementor account because we will be needed that very shortly so to create a free Elementor account you can just go to gym Fahad digital.com I will put this Pages Link in the description from that page here under important links just click on get Elementor free version now from here let's just click on try the free version because in this tutorial we will be using the free version of Elementor page builder they have a pro version of Elementor and I personally love the pro version but for this specific tutorial we don't need a limited Pro now from here you just need to put your email address here so like this oops and within the password field you just need to see the password then click on create account your Elementor free account will be created within a second so just go ahead and create a free limiter account because we will be needing that very soon all right let's just close this tab for now and we can go back inside WordPress dashboard okay now I just wanna install and activate some free plugins so to do it from left hover over on plugins from there now click on add new as we have already created our Elementor free account we just need to install the Elementor page builder from here so just click here really Mentor I mean search here Elementor and here you go it says Elementor website builder this is our awesome Elementor page builder we will be creating our all pages by using this awesome tool so to install it just click on install now and then click on activate so Elementor has been installed and activated successfully let's now install our next plugin so from here under plugins click on add new and this time from the search bar I'm searching for is in Shield add-ons and here you go it says essential add-ons for Elementor let's click on install now and then click on activate then I just wanna do this basic setup so keep it basic and click on next let's keep it as it is just scroll down and click on next also click on next next and then I don't want to install any of these plugins just click on next and here I'm clicking no thanks and it says congratulations cool so we have installed this plugin as well now I want to install another plugin and we will be using that plugin to create our contact form so now from here hover over on plugins and click on add new this time here I'm searching for metform so here mate form I'm typing I was searching for this one it says midform Elementary contact form Builder so let's click on install now and then let's activate 8. so right now we have these three plugins installed and activated those are Elementor essential add-ons for Elementor and mid form all right now I wanna create some pages actually some empty pages so to do it from left hover over on pages from there just click on add new and here this pop-up it's just actually trying to show us how to do it but I'm here to show you how to do it just close it I'm clicking on this X and here we can see it in full screen but I don't like this fully screen mode because we cannot see the navigation bar on the left so to disable it from right corner click on this vertical Three Dots and here I'm deselecting full screen mode okay so let's now create our first page I'm naming this page here home now from the top right corner click on publish then click on publish one more time remember these are just empty pages we will be creating I mean we will be designing those pages very soon for now I'm just creating the empty pages so the next page from here Pages let's now click on add new so here I'm typing about it would be our about page click on publish click on publish one more time then let's create another page click on add new and this time here I'm naming this page Services click on publish click on publish one more time then the next page click on add new and here I'm typing blog click on publish publish one more time and then the last page here I'm naming this page contact now click on publish click on publish one more time all right now from left under Pages if we click on all pages here we can see all the pages we have just created here is about blog contact Home and Services also I will create some single Services page but for now let's keep these pages and here I wanna start with this home page but before that I just wanna do one simple setting because we have given this name home but technically this is not our home page because if I just hover over on our site name and if I now open our front end I'm clicking on visit site from a new tab just have a look here we can still see blog posts on our main URL that's gmx.com why is that because by default WordPress shows all the blog posts on the home page but I don't want that I want to create a custom home page and to make it happen just go back to our WordPress dashboard from here let's hover over on settings and and I'm clicking on reading and here okay first let's close this notification it says your home page displays um selecting a static page and let's select our home page to the home we have just created and the posts page um selecting blog let's now scroll down and click on Save changes if we go back to the front end of our website and if we just refresh the page yup now at least we can understand this is our home page because it says home here I know at this point our home page is looking super boring super ugly but nowhere is because we will be making our beautiful home page out of it so let's now go back to our WordPress dashboard now from Pages go to all pages and here you see this home it says front page because we have set it as our home page and this one block it says posts page all right so let's now start with the home page from here click on edit and then like I said I want to create our whole page by using Elementor page builder so from the top click on edit with Elementor so right now we are inside Elementor Page Builder Okay from here first close the navigator I will make you familiar with Navigator later but for now just close it and here is the fun part begin we will be creating our website just by drag and drop okay now first let me make you familiar with all these options here everything you can see on the left all these are Elemental elements or Elementor widgets like if you scroll down you can see here tons of Elementor or Elementor widgets and then on the right side this is our website canvas now let's say if you wanna add a heading into your website all you need to do you just need to find here your heading widget here I can see heading widget let's just drag this heading widget or heading element from left to right so I'm just dragging it to the right side within the canvas here then if you want to change this text for example I just wanna change it to gym fad digital so here I'm typing gym for head digital then if you wanna make its alignment to Center you can do it from here from alignment I'm making it centered then if you want to do some styling with this heading then from left you just need to go under the style tab here then to change it color you can just click here to open the Color Picker now from this Color Picker you can change its color to any other color also you can play with this bar so change it to any other color wheel let's say if you want to make it red so drag it to the very right and from here I'm making its color to Red then if you wanna work with its typography just from here click on this pencil icon you can change the font family from here so I just wanna change it to any other fun family you see there are tons of font families all these are Google fonts so they are super fast to load only for example let's say here I'm searching for Poppins so let's select pop-ins you see the font has been changed instantly then if you want to increase or decrease the font size you can do it from here you just need to drag these bar to the right you see the font size is increasing if you drag it to the left the font size is decreasing then you can change the font width for example if you want to make it more Bolder you just need to select a higher number like here I'm selecting 800 you see it's becoming more Bolder then from this transform you can make all them uppercase or if you want you can make them lower case I'm just keeping it default then From Here style you can make it normal or italic also you can change the decoration from here like you can make it underline or over line or line through like this let's keep it default and then if we now go under Advanced tab here you can play with the spacing let's say if you want to add some space at the top of this heading all you need to do just from here you can play with this padding first of all you just need to unlink the padding so I'm clicking here to unlink it and let's say I just want to add some space at the top so from here let's add some space at the top I'm adding 40 pixel of padding you see for the pixel of padding has been added at the top now if I also want to add some padding at the bottom then from here I'm adding 40 pixel of padding at the bottom it's easy like that but instead of 40 I'm just putting here 10 all right now let's say underneath this heading if you wanna put some text then all you need to do just from here click on this Rubik's Cube icon now from this elements I'm searching for text editor this one is text editor just drag this text editor underneath this heading widget here then you can change this text to any other text now you know if you want to do some styling then you need to go under the style tab from here you can change the text color so instead of this gray color I just wanna make it for example blue so the text color is now blue you can change the alignment from here like you can make it centered or right aligned I'm keeping it centered then similar like this heading widget you can play with its typography from this place also you can add the spacing like the padding or margin from under Advanced tab here I wanna show you some more fun stuff like let's click on this Rubik's Cube icon again and from here I'm just dragging this button widget to the right side underneath this paragraph here now you can make its alignment to centered just from here click the alignment to centered and then if you want to link this button to any other place like if you wanna link this button to your other page then you can put this Pages link here also if you wanna link this button to any other external website or your social media accounts you just need to put the URL or wave address here for example I just want to link this button with my main website that's gymfaddigital.com so here I'm putting my website address that's Jim fahaddigital.com so if anyone now clicks on this click here button that will take them to my main website that's gymfathydigital.com similar like other elements if you wanna do some styling with this button you can do that from under the style tab from here if you want you can play with its typography just click on this pencil icon from here you can change the font family font size font weight similar like other stuffs I mean the heading or paragraph that way you have changed their typography you can change the buttons typography following the same way and then if you want you can change the background color of the button from here so instead of this green color let's say I Wanna Make It Black you see the background color is now black then only 2 to give you an example let's say if you want to change the background color of this button on Hover then from left just click on Hover and here I'm changing the background color to Red only just an example so if I now hover over on this button you see the background color is becoming red then if I go under Advanced tab from here you can add the spacing let's say if you want to add some space at the top of this button then you can do that from here I'm just unlinking the margin from here because I just want to add the margin at the top so here I'm adding 50 pixel of margin at the top you see it's added at the top here so the basic fundamental is whenever you drag any Elementor widget from left to right you can change that elements basic content from here from this lift tab like you can change the text you can change the url not only with a button with any other thing like if you also select the heading you see from under content tab you can change the main contents then from under style tab you can change their designing stuff like their color their typography their fonts all those stuff and then from under Advanced tab you can play with their spacing I hope you already understand the basic fundamental of Elementor so for now I'm just closing it so let's click on X and now before we start creating our real page I wanna do two other settings and we need to do those two settings from our WordPress dashboard so if we now want to go back to our WordPress dashboard we just need to click on this hamburger icon from here I'm clicking on exit to dashboard now from this place let's now hover over on Elementor from there go to settings let's first click on here Advanced and and I'm making this one it says enable unfiltered file uploads um making it enable let's now scroll down click on Save changes and then go under experiments tab from here I'm searching for flexbox here we go it says flexbox container let's now make it active now scroll down and click on Save changes now we can go back inside Elementor so from left go to Pages 12 pages and here is our home page now from here we can also just click on edit with Elementor so I'm clicking here and as we have enabled the flexbox container that's why we can see here an element it says container actually this one is the main Game Changer now I want to make you understand the main fundamental of the flexbox container if you understand this you can create any type of layout so the next five to six minutes is the most important part if you understand this basic thing you can literally create any type of layout by yourself now if you wanna create a new container you just need to click on this plus icon and from here you can select any of these structures and here the first one here you can see this down arrow if you select it then your container would be column directed and if you select the second one then your container would be row detected you will understand it properly if I give you real life examples so from here I'm just selecting this column directed container let's select it and only to give you an example I'm giving it a minimum height so from here let's just select the VH and I'm giving it 80 VH also within the container I just want to add some padding so go under Advanced Tab and from here I'm adding 20 pixel of padding now just remember we have taken this container first so this is the main parent container and within this container I I just wanna take some child container okay so to do it just click on this Rubik's Cube icon and from here I'm dragging the container inside the parent container here first of all I'm making this child container content width to full width and I'm making it so with to 30 percent only to give you an example also I'm making its minimum height to 120 and to make you understand the concept better I'm just giving it a background color just go on the style tab from here let's click on this classic icon and I'm opening the Color Picker let's select a light green color like this okay now I just wanna duplicate this inner container couple more times so just right click here click on duplicate and again right click here and click on duplicate now have a look this is our parent container to select it click on the six dots now from under out if I open the items you see its direction is set to none basically the default direction is set to column this one so at this moment this parent containers direction is set to column and that's why all these child containers is aligned one after another vertically now if you wanna make all these child container horizontally centered you can do it from here you just need to select align items to centered you see they are all together centered here now if you wanna make them left aligned you can set the Align items to flex start this one you can also right align them from here but I'm keeping them centered but have a look here within the parent container at this moment they are horizontally centered but vertically they are at the top so if I now wanna make them vertically centered as well then from the justify content I need to make them centered so they are now horizontally and vertically centered within the parent container there are also several options like here it says space between if I select space between you see now the first child is aligned to the top the last child is aligned to the bottom and the middle child is aligned to the middle but instead you can make them top aligned or bottom aligned or centered aligned okay now I wanna show you another thing instead of this column if I now make this main parent container to row detection you see now the child containers are going one after another horizontally and if I now make the Align items to flex start they are now vertical at the top we can also make them vertically at the bottom by clicking on Flex end but I wanna adjust keep them at the center also if we now want to make them horizontally centered together then from justify content I need to select the center I believe you can now understand the column direction also the row direction if you are not clear about it yet just watch the last four to five minutes couple more time you will get the full concept clearly so here let's set it to column okay now I wanna show you another thing like here this is the parent and these are the parents child now if I put any content inside of these containers I mean within the child containers then this container will become the parent of the inner element I'm giving you an easy example so to add any element I'm just clicking on this plus icon and from here only to give you an example I'm dragging this icon element within this middle container I mean middle child container here okay now from here I'm selecting this container let's go to its items and at this moment it's actually column directed because this is the default value but to make you double sure I'm making it column aligned now let's make the Align items to centered actually you cannot see any change because it's already vertically centered so if I select centered you see there is nothing changing but if I just change the justify content to centered you see it's now vertically centered so this element I mean this child element will follow its immediate parent rule that's basically this containers Rule and these three inner container will follow its parent I mean this container the main containers rule from here and I know these type of theoretical explanation is super boring and I don't wanna make you more bored trust me when we will Design our real website it would be more fun so let's now just delete all these theories so to delete it from the top click on this X and now I want to create our website from scratch but before that I wanna tell you another interesting thing because you see is a three to four hour long step-by-step tutorial because I will be showing you everything step by step I will Design all the sections all the effects all the font sizes all the spacing I will show you everything step by step but let's say if you don't have that much time if you want to make your website live instantly immediately then there is another way for you so to make it faster you can just go to gym fed digital.com and from here under important links you can just click here on purchase gmnc templates so click here that will take you to the gambled shop from here basically you can purchase all the pages so you don't need to follow this whole tutorial basically if you purchase these templates you will get all these Json files let me show you a quick example let's now go inside our elementary page builder from here let's click on this folder icon to import the template now from the right side click on this import template icon and click on select files like I said if you purchase the template you will get all these Json files from there only to give you an example if you want to import the home page just select the home and click on open now here you see it says Gmail C home just click on this green insert button and then click on apply and boom here we go your website is instantly ready you can just change all this content with your own contents you can replace these images with your own images like I'm showing you and quick example let's say if you just want to change this text just hover over or click over this text let's say you just wanna say here instead of the Discover or proven you can write here best design agency then in the second line you can say in New York you see it's instantly changed and then next if you wanna change any of these icons just click over there and then from the left click on this icon from here if you want to change to any other I can just select that icon click on insert you see it's instantly changed then let's scroll down for example if you want to change this image with any other image just click over this image from left click on choose image now click on select files let's select any other image click on open then click on insert media you see this image is changed immediately so in this way you can change all other heading all these paragraphs you can literally change all these parts of this website all the images all the reviews for example if you want to change any of these reviews just click over there you can change the headshot from here from inside testimonial content you can change the main testimonial you can change your client name your client's company's name you can change everything from there so similar like the home page you can also import other pages so if you don't want to spend the next two to three hours with me you can just go to the gambled link and you can purchase this template and make a website really really faster but like I said in this tutorial I will show you everything step by step so I don't want to use this template because I want to show you everything step by step so by following this tutorial not only this is side you can create any type of website so now let's delete all these sections I'm just clicking on access let's delete this one this one delete it delete it so I have deleted everything let's now start from scratch now let's first create our Banner area so to take a new container click on this plus icon and I'm taking this column directed container and here I want to give it a height so from here I'm first selecting VH v h stands for viewport height and I'm setting it 80 VH or we can increase a little bit like 85 and then I wanna set a background with this container so go under style tab from here from the background type click on this classic icon and to add a background I'm choosing the background image from here so click here go to upload files click on select files let's now select an image from here by the way if you wanna use all of these images then you can just go to gymfaddigital.com I mean this website I will put this Pages Link in the description and from under important links if you wanna download all the images then you just need to click here on download the images I use in this tutorial okay let's now go back let's click on select files for the banner I'm selecting this image now click on open then click on insert media and here we can see the background image but now we just need to adjust its position so from here you can play with the position by default I mean if you change the default position you can play like Cinder left or you can set it to top Center like this but I wanna set it to sender sender then the attachment you can set it is scroll or fixed I'm making it scroll and here repeat I'm making it no repeat so this background image won't be repeated and then size I'm making it covered so the background image will be covered within the whole area of this container okay now over this background image I want to add an overall effect so to do it from here let's click on background overlay and from here let's click on this classic icon and I'm opening this Color Picker let's add a bluish color or you can use the color code that's 0 1 0 3 2 B it's kinda dark blue color and here you may think why am I using this overlay over the background image because you know our text color would be kind of white so if our background color is white then over that if we put any whitish color text then our text won't pop up that's why to make the background image kinda darker I'm adding this over oil effect and you can make the upper City more like you can just drag it to the right you see it's becoming more darker you can drag it to the left to make it more lighter but I just wanna keep it at the middle it's 0.5 and then you know I just wanna make this bottom area of this container rounded so to do it from under the style tab let's now scroll down and open the shape divider and here let's see if you want to add any shape divided at the top of this container you can do that let's select the top and from the type you can select for example Mountain so here at the top you can see the mountain shape also there are several shapes like tilt so you can control the Tilt from here you can increase the height to adjust the Tilt if you want but at the top I don't want any shape divided so from here type I'm making it a none but at the bottom let's select the button I wanna add the type to curve where you curve here you go so let's select curve and here first of all I wanna invert this curve shape so to do it from here let's select this invert I'm turning it on so it's reversed now from here you can play with its width like this but I wanna set it to 120 then also you can play with the height let's say if you want to make it fully rounded then you can increase the height like this but I don't want that I just wanna keep it 400 okay now within this container I wanna insert my first heading widget so click here on this plus icon or you can just click on this Rubik's Cube icon now from left I'm dragging this heading element or heading wizard to the right side within the main Banner here and then I wanted to see actually I can change the text from here I want it to say discover our are proven for Mula to get success and here I wanna just show you a little trick like here if I wanna add a line break you cannot do that from inside this field like if you hit enter here you see there is no line break is appearing and to make it happen actually you just need to add an HTML tag that's beard tag so here's the tag starting and here is the tag ending within that I'm just writing BR this br will separate this heading into two lines all right now I wanna make this heading into centered align so from alignment let's make it centered and you know I also wanna make this heading vertically centered and to do it we can use its parent container so this one let's select these six dots go under its layout open the I items from here I'm making the justify content to Center so this heading is now vertically centered in between this parent container all right let's select this heading because we were working with this heading now let's do some styling with this heading so go under the style tab first of all I'm making its color to white color then from the typography from the font family I want to select feed Essence font so here I'm typing feeder here I can see feeder code for mono but I want to use via sense then here let's make the font size really big let's keep it 75 pixel then front to it I want to make it a bit Bolder so I'm making it 700 and then the text transform I wanna make it capitalize so each of the first letter of the word is becoming capital and then line height basically line height means the in between a space of these two lines so from here line head first I'm selecting the EM unit and I'm making it 1.4 actually it's too big let's make it 1.1 perfect but lastly to make this heading pop up more I wanna add some text Shadow so from here let's open the text Shadow first of all you can adjust the Shadows transparency from here so let's click on this Color Picker by default it's 0.3 I think it's okay for me but I just wanna increase the horizontal value so here I'm making it to five Also let's make the vertical value to 5. all right now underneath this heading I just want to add a paragraph So let's click on this Rubik's Cube icon and from here I'm dragging this text editor widget underneath this heading here now let's go under its style tab first of all I'm making the alignment tool centered then I'm changing the text color to white color and also I wanna make the font size a bit bigger so from the typography here I'm making the font size to 20 pixel now it seems okay to me but I just wanna change this text so from under Advanced tab here I'm pasting some text it says you deserve to be seen we are here to achieve your goal all right now underneath this paragraph I wanna add a button so let's click on this Rubik's Cube icon and from here I'm dragging this button widget underneath this paragraph here so you know first of all I just wanna make its alignment to centered and I wanna change the text of this button and I want it to say get started it so from here within text field I'm writing get started and I wanted to link it to our contact page so from here from inside this link field I'm just removing this hash and here I'm typing contact and you see it's suggesting the contact page here let's select the contact page so this is our contact page link so if you now click on this button it will take us to our contact page all right now let's do some styling with this button now quantity style tab from here first of all I wanna do some typography so from here let's click on this pencil icon first I'm making the font size to 16 pixel and then I'm making the font Twitter bit Bolder maybe 700 yep it looks perfect and then I wanna change its background color so from here you know we can change the background color from this Color Picker but here the background color is set to a static classic color instead I want to use a gradient color so from here background type I'm selecting this gradient option and here the first color instead of this green I'm putting here a color code that's hash 0 0 4 b b e it's kinda dark blue color and actually throughout our whole website I wanna reuse this color multiple times that's why I wanna set this color as a global color so I can reuse the color later very easily so to do it from here let's click on this plus icon and I'm saving this color as dark blue then click on create so you can reuse it and then with this second color instead of this reddish color here I wanna put another color code that's hash 0 0 a 3 F 8 it's kinda light blue color so I also wanna save it as one of our Global colors so to do it click on this plus icon and I wanna name it blue light click on create all right now to play with this gradient color we can change the angle from here like this but I wanna make the angle to 90 so from here instead of 80 let's set it to 90. so the first color started getting from left and the second color is getting from the right side as we have set the angle to 90. basically it's 90 degree alright let's now scroll down here's the Border radius so here if I make the Border radius to 20 pixel you see the corners are becoming rounded but I wanna make it more rounded so instead of 20 pixel I'm making it 40 pixel and then from here we can adjust the padding padding is basically the Inner Space so I wanna add more spaces at the top bottom left and right so to do it first of all let's add 20 pixel all around this button and then I'm unlinking it because I wanna change some value like here on the right hand left I'm making the padding 2 for the pixel so far it looks great but I think the space between this paragraph and button is huge so I wanna make this button more closer to this paragraph and to do it we can take the help of margin so make sure you have selected this button now scroll up from left and go to Advanced tab then unlink the margin from here you know if we add some positive margin value at the top like I'm adding 20 pixel it's basically adding more space so the Gap in between them is increasing but I want to place them closer to each other that's why instead of the positive margin value I need to add here negative margin to do it first I'm making it 0 and then if you click on this down share electron icon you see the value is becoming negative and I'm making it negative 20 pixel so far our Banner looks great and to save our work don't forget to click on this green update button so I'm clicking here now I want to create our next section so let's scroll down basically it would be our work ethics section so here first of all let's click on this plus icon and here from this containerd structure I'm selecting these two container structure then similar like the banner container for this container let's go to its items and I'm making the justify content to centered so here this is the parent container and within that this one is the child container also this one is another child container now I'm starting with this left child container select it and here instead of 50 I'm making it 20 then the right child container okay for now I just wanna delete it because I will be creating this one first then we can easily duplicate it so for the moment I'm just deleting this right child container so right click here and click on delete so here we have only one child container within this main parent container okay so let's select this child container here make sure it's content width is full width and the width is 20 percent not 20 pixel so it would be 20 percent and then from here minimum height I'm setting it to 200 pixel and also from here items I'm making the justify content to centered then let's go under the style tab you may see its background color is white actually it's not it's background color is right now transparent so to make it really white just go to background type from here and I'm selecting the Color Picker and making its background color to white then from here open the Border because I wanna make their Corner a bit rounded that's why I'm adding 6 pixel of Border radius and then I wanna add a bead of Shadow so from here box Shadow let's click here actually at this point the shadow is super dark if you want to understand it better we can just minimize these bar from left so if I now minimize it you see it's super dark I don't want this much dark shadow so let's open the bar from left so here I'm opening the box Shadow again let's select the color instead of 0.5 I'm dragging the bar to the left like this then from here I just want to increase the blurb value a little maybe 20 and then the split value I'm making it negative 10. all right now within this child container I wanna insert an icon box widget so let's click on this plus icon and here I'm searching for icon box widget let's type icon box here we go let's drag this icon box so we get here and actually I don't wanna use this paragraph I just wanna use the icon and this title so I'm removing this description text from here then within the title I wanted to say for example creative ideas then let's change this icon to any other icon you can select any of them I'm searching for 500 this one 500 pixel let's click on insert then to do some styling with this icon box just go under the style tab you see there are two tabs so if I minimize icon you can understand it properly this one is for Icon and this one is responsible for contents design so first open the icon and from here I wanna change this icon color to the global dark blue color we have just set so you know you can select any color from this Color Picker like black red or any other color but also as you have set some Global color you can just click on this globe icon from here and you remember we have set a global color that says dark blue so I'm selecting that and now let's open the content here you can increase or decrease the spacing in between them but I'm making guys facing to 0 then the text color to black color and from typography I want wanna make the font family to feel sense this one so far it looks okay but I think we can add some spacing with this child container so let's select it go under its Advanced tab let's add some Inner Space and you know to add inner spaces we use padding so here I'm adding 20 pixel of padding then let's unlink the margin only with the right hand left I'm adding 10 pixel of margin and you know we have designed this child container and now we can easily duplicate it to make multiple child container like this so to do it just right click here then click on duplicate but instead of right clicking each time to duplicate anything there is a shortcut so to access to that shortcut just from left click on this hamburger icon then click on user preferences this and here you see it says editing handles just turn it on now have a look if you just hover over here there is a duplicate container icon just click there I want to duplicate it one more time so click here now I can change all these icons and all this text really fast like with this one just click over there and I'm changing this icon here I'm searching for the battle one this one and click on insert and here instead of creative ideas I wanted to say high quality and also I'm changing these icons and text really fast [Laughter] all right now I wanna give them a bit creative look so to do it I just wanna move them a little bit upper I mean in this place to make it happen let's just click on this I mean let's just select the parent container this one click on the six dots go under its Advanced tab let's unlink the margin and you know if we want to push it to the upper side here we need to add some negative margin at the top so here I'm adding negative 80 pixel like this also I wanna add some bottom margin that will make some space with the next element or with the next container so here I'm adding 20 pixel of bottom margin next I want to create our beautiful about a section so again to take a new container click on this plus icon and this time again I'm selecting these two container structure and I wanna add some spacing around this container so go under Advanced Tab and I'm adding 60 pixel of padding all around this container then I wanna add a background image with this parent container so go under its style tab from here from the background type let's select the image go to upload files let's select files I'm selecting this home about background this one click on open let's click on insert media and you know I'm setting the position to sender sender and here I'm making the size to cover then within this lift child container click on this plus icon here I wanna add an image so let's drag this image widget here and I'm making the images alignment to lift aligned let's now select the image go to upload files click on select files I'm selecting this image it says home team so click on open then insert it now let's go under the style tab from here first of all I wanna make the images with to 90 percent then I'm setting its height to 600 pixel you see right now the image is looking kinda stressed so to solve it from here object fit I'm making it to cover now I wanna make this simple looking image more cooler or more artistic so to do it just go under Advanced tab from here let's open the mask and and I'm just turning on the mask from here if you want you can select any shape like by default it's circle shape so the image is now within the circle shape if you want you can change it to flower shape but it's nothing professional I think because this is an agency website so if you mask it within a flower shape that won't look good you know so from here also if you want you can select a blob shape or you can select hexagon shape but here I wanna use a custom shape that I have made for you so from here let's select the custom and here I want to upload an image so click on this image go to upload files click on select files and here I'm selecting this it's called home about mask so I'm selecting it click on open now click on insert media you see our image is now masked within this beautiful shape alright let's now select the right child container let's select it first of all let's go to its items and I'm making the justify content to centered Also let's go under its Advanced step because I wanna make some space on the left side so from here I'm making the padding not padding it's padding so I'm just unlinking it and here only at the left side I'm adding 40 pixel of padding now here within this right container click on this plus icon first of all let's drag and heading widget here and I'm changing this text with this it says weird JF digital solution agency you can push your digital agency's name or any other text if you want now let's do some styling with it so just quantity style tab I'm making its color to black color now open the typography you know I wanna use here figure sense this one let's make the font size 220 pixel and the font weight to 500. all right now we can just simply duplicate this heading so from here just hover over on this blue pencil icon and let's duplicate it and here I'm changing this text with this text it says choose the best digital company in the city but of course I wanna make this heading a bit bigger so go under the style tab from here open the typography and here I wanna make this font size really big so instead of 20 I'm making it 60 pixel and let's make the font wet to 700 but I wanna decrease its line height so from here let's first select em and I'm making it 1.1 then underneath this heading just click on this Rubik's Cube icon from here I'm dragging this text data widget here all right now underneath this paragraph I want to add a button but before that I wanna change the fonts a bit like here I have used feeder sense but it's not clicking the way I wanted it so for that reason let's select it actually I want to use the field still but instead of Vera sense let's use feeder sense condensed same with this one let's go to its typography and I'm making it feeder sense condensed let's do the same with these just open the content from here with their typography I'm making it feeder sense condensed and you know I don't need to do with all of them there is a shortcut like I have done with this now just right click here click on copy then with this one right click here with this icon box don't just click on paste then the content will be pasted I just just wanna paste the style that's why I'm clicking here paste style also with this one right click here click on paste style right click here click on paste style also scroll up with this one selected from the typography I'm making it feeder sense condensed you see it looks much better right now actually phones play a great role into your website so always try to put the best font into your website like you see in between these feeder sense and feeder sense contents there is not a huge difference but this little tiny change has changed the feel of a website really nicely in a positive way all right now underneath this paragraph I wanna put a button here and we already have created a button here in this place so we can just copy and paste this button so just right click here and I'm copying it then scroll down right after this paragraph so I'm putting my cursor here right click and click on paste see how easy it is but instead of this design I just wanna make it a plain looking button so first of all instead of this get started I just want it to say view more about us and I wanna link it with our about page so from here first of all I'm removing this contact Pages link and here I started typing about and it's suggesting now our about page let's select about page now let's go under style tab first of all I just wanna make the padding to zero so first of all I'm linking it it and then let's make it zero okay now from here these buttons background type I wanna make it to Classic and I wanna change it to transparent color so to make any color to transparent color all you need to do just drag this Bottom bar to the very left like this and the text color from here let's choose the text color actually I wanna choose the global dark blue color so from here click on this globe icon from here let's select dark blue then I wanna make it to be aligned on the left so go under the content tab from here I'm making the alignment to left perfect let's now create our next container our next section so scroll down click on this plus icon and this time I just wanna take this column directed container this one let's add some spacing so go under our Advanced tab from here I'm adding 60 pixel of padding now within that I just wanna use this heading and subheading I mean this heading and the subheading so you know we can easily just copy and paste so first of all right click here copy it then within this container right click here and paste it also go to top right click here copy this heading from here and right after this sub heading right click here and click on paste now here instead of this text I just wanna change this text to our featured services so like this and then this main heading I wanna change it to we provide all exclusive services for clients but right after exclusive I want to add a line break so from here after exclusive let's add the BR tag and then here I wanna make them centered so from here let's make it centered so this one let's make it centered then right after this heading I wanna take a container so click on this Rubik's Cube icon from here I'm dragging this container underneath this heading here now from here open the items I'm making its direction to row because inside this container I wanna take some more child container so they will be one after another horizontally also in between this container and this heading I want to add some space so from here go under Advanced Tab and Link the margin at the top I'm adding 30 pixel of margin all right now within this container I wanna take some child container so to do it go to Rubik's Cube icon and from here drag a container within this container here but now you may not notice here exactly at this point there are two containers one inside another so to understand their nesting process properly you can just right click here and you can click on Navigator actually Navigator will help you a lot to understand their layout which is inside which one so from here we have selected this container you see it's nested within this parent container so this one is its immediate parent and this one is the child now I want to duplicate this child couple more times so right click over here click on duplicate now you see this one is the parent and here this two container is their child okay now let's select this first child here this container now I wanna make the content with to full width and here I'm making its width in percentage make sure you have selected the percentage and I'm making it with to 32 percent also with this first child container I wanna add some spacing so go under Advanced tab from here I'm adding some padding so let's add 25 pixel of padding all right now here before doing any other thing I wanna make you understand another concept that is wrap and no wrap you see we have selected this first child container go to its layout we have given its width to 32 percent also to make it better understandable just go under the style tab from here I'm giving it a temporary background color that's kinda blue but very light blue like this and for the moment I'm deleting the other container the second one this one just right click here and let's delete it so here we have only one child container and its width is 32 percent so just go on the layout you see it's 32 percent now if I just duplicate this child container couple more times just right click here click on duplicate then right click here also duplicate it and again if I right click here click on duplicate you see I have set there with 232 percent so the fourth child should go to the next line because if we calculate the first three if each of them are 32 percent then the first three child should take 96 percent of width but it's not happening here even if I duplicate this child one more time you see they are adjusting within the same row why is that because their parent container I mean this container is not wrapped at this moment so now our solution would be let's just select this parent container go under its layout open the items from here you see this one is the wrap its default value is no wrap and if we now select the value to wrap now they are behaving perfectly because each of these child containers width is 32 percent so after covering 96 percent by using these three children they are automatically going to the next row then from here if you want you can also play with their justify content like you can make them Flex end so it goes to the right side a bit actually it's a tiny different so you cannot see it properly but I wanna make it space between okay so this example was only to make you understand the difference between rap and no rap I'm summarizing it you see this is the main parent container if you make your parent container red value to node app then all of its child container will be adjusted within the single row but if you set the parent containers wrap to wrap then their child container will get their original width okay so now I just wanna keep the first child container because this was only to give you the example or make you clear about the wrap concept so from the second one I'm selecting all other child container let's select all of them right click here and click on delete five items so I have just only kept the first child container now let's just select this child container I mean the first child container I wanna remove this background color 100 style tab from here I'm just clicking here to clear it now within that click on this plus icon I wanna insert here image box widgets so here I'm searching for image box here you go just insert it here the first service I Wanna Give is title as UI ux design then I'm changing this dummy text with this text then from here the image position I'm making it to the left all right now the first thing I wanna change this image so from here let's select it go to upload files click on select files and from here within the icons folder as its UI ux design so um selecting this icon now click on open actually it's a animated image so if I now click on insert media you see it's animating I personally like this type of animated images so much but notice I will show you how you can find this type of animated images so if you wanna find this type of animated images for free you can just go to flood icon.com like here you can see this animated icon and here on the flood icon.com instead of icon here I'm selecting animated icon then here you need to put some keyword so here if I type paint and let's search for it you see we can see these animated icons here from here if you want to download any icon just click over that icon and from here you can download it like let's just click on download and as you want to use it as a animated icon so you need to download the G formatted file all right similar like that let's say if you are looking for a business plan animated logo not logo animated icons so you can just search for your plan and hit enter you see there are some animated icons that's related to business planning Also let's say here I'm searching for any Globe icon so here I'm typing globe and hit enter so you can see some globe icons here so in this way I have pre-downloaded some icons I will be using them but I'm just showing how you can find related animated icons from flatiron.com for free alright let's now go inside our Elementor page builder now here I want to do a little bit styling with this image box so just go under the style tab now here I'm okay with the image so minimize the image widget open the content widget so here the title is facing if I set it to 0 or we can just make it 10 and then it's color I want to use the global dark blue color we have set so from here I'm selecting the dark blue then the typography you know I wanna use the feeder Sans condensed this one and I want to make it a bit Bolder so from wet I'm making it 700 and then with this description text from here let's open the typography I just wanna reduce its line height so from here line ahead let's select em and I'm making it 1.4 am like this now underneath this paragraph I wanna add a button so so you know we already have created this button and this colorful button but in this place I mean right after this paragraph I wanna use this type of a build button so just right click here then copy it let's now scroll down right after this image box widget I'm putting my cursor here right click and click on paste so first of all I don't wanna link it with our about page later I will be creating some single Services page like for the UI ux design I will be creating a separated page for our another service I will be creating another separate page and we will link this button with those pages so for the moment I'm just removing the link and putting a hash we can replace this hashtag with those pages link and now instead of this text I wanted to say discover more more and then right after this discover more I wanna add a right arrow icon so we can select the icon from here click on this icon library and here I'm typing arrow and I'm selecting this right arrow click insert but not on the left I want it on the right side so from here I can position I'm making it after now let's go under the style tab from here I just wanna make it a bit lighter not this much bold so from the typography I'm making the font weight to 500 and you see this button is still looking a bit weird because they are not aligned with this paragraph So let's go under Advanced tab from here instead of negative 20 first of all I'm reducing the top negative margin to negative 10 and at the left let's add 80 pixel of margin now it looks much better plus lastly with this container I wanna add a Hoover effect and here be careful with one thing let's say if you select this container you are not sure which container actually you have selected because at the same place there are two containers sitting the parent container and the first child container so it's better to select the containers from this Navigator so you can visually see which is inside which one so I can see this one is the parent container and this one is the child container so I'm selecting the child container from under its style tab let's open the Border I don't want any shadow on the normal state but on the hover State let's open the box Shadow first of all I'm making the color more lighter like this then here I'm making the vertical value to 20 the blur value to 40 and here here making the spread value to negative 10. now to have the feel I mean now to have the hover fail let's just minimize the bar from left and have a look it's looking initially like this but if we hover over on it we can see the shadow personally I like this type of hover effect so much alright let's open the bar from left now I just wanna duplicate this first child container couple more time and like I said I wanna do it from the navigator to keep it safe so just right click here and then click on duplicate again right click here click on duplicate and I want to duplicate it couple more times so let's duplicate it again let's duplicate it and let's duplicate it one last time okay now you know you can change all these icons you can change all this title you can change all this paragraph and you can link these buttons with different pages so for the moment I'm just closing the Navigator and here instead of UI ux design for example I wanted to say SEO and marketing and here instead of this paint icon I want to use a globe icon because that's more related to SEO or marketing you know so from here let's change this image click on upload files go to select files and from here I'm selecting this globe animated icon click on open insert it and here we go so in the same way I'm changing all other icons and headings and I'm coming back to you all right so I have changed all the icons and titles now I wanna create our next section so to create our next container click on this plus icon and this time I'm again taking this column directed container this one let's go to its Advanced tab because I wanna add 60 pixel of padding and I want to give it a dark color background so just go under the style tab from here open the background type open the Color Picker and from here let's take a bluish color I mean a dark bluish color the color code would be zero eight zero a2d and you know first of all I just want to copy and paste The Heading and subheading so from here actually I can take this just right click here let's copy it then scroll down within that let's paste it here also the main heading just right click here let's copy it and scroll down right after that actually I cannot see it properly because this color is black the background color is also dark so right click here and click on paste now the video first thing I want to make is color to white color so from under the style tab I'm making its color to white color also this subheading color I'm going to style tab I'm making its color to white color so here this text I wanna replace this text with our portfolios so I'm writing here our portfolios and then this text I want it to say oops just Corner style tab I want it to say some of our works now underneath this heading I wanna add filterable gallery widget so click on this Rubik's Cube icon from here I'm searching for filter label Gallery so here you go you may remember we have installed a plugin that says essential add-on basically this widget is coming from that plugin so make sure you have not missed any of the previous steps that I have shown in this tutorial okay so here is our filterable Gallery that's basically coming from essential add-on plugin so now let's drag this filterable Gallery underneath this heading here now here we can see our filterable Gallery we can see the images okay first of all let me explain about this filterable Gallery settings very shortly like here you see items to show the number is six that's why we can see here six items or six portfolios and here you can set the animation duration here you can set the columns by default it's set to 3 but in instead if you set it to 4 then in a row you can see four items though I can still see three items here actually it's a glitch but if you go to the live website you can see there are four but instead of the four column I'm making it three and also if you want you can change the grid style like this is the default grid but if you want to have a missionary like if your all images are different in size then you can select the missionary grid style I'm happy with the grid one and all these options if you want you can play with them but I like to keep them default now here the most important thing is the filters so from here let's open this filterable controls first you need to add some filters or categories so let's first open this Gallery item and the first item I wanna name it web design so here I'm typing web design and you need to remember exactly I mean these exact names because we need to use them on the single galleries you can see that very shortly so for now let's just create the filterable controls so our first control name is web design let's now create another one and I wanna name it SEO also remember they are case sensitive so if you make the s in capital remember you need to use that exactly on the gallery items then the third item I wanna make it ux then design so we have now three filterable controls one is web design then SEO and the third one is ux design now let's open the gallery items here we can see six items actually I wanna show you from scratch so for that reason I'm deleting all of them and we cannot delete the last one because we need to start from here so I'm opening the first Gallery item and here you need to put your control name so you remember within this filterable controls we have given three controls one is web design then SEO then evx design now let's open the gallery item and this is our first item let's open it and here control name I Wanna Give it the name web design exactly the name we have given within the filters and then you can give this item name anything you want because it will be only shown when you hover over on this image you see it says Gallery item name let's say your web design this Project's name is Alpha Project so here you can name it Alpha Project so if we now hover over here we see it says Alpha Project then if you wanna talk a little bit about that project so you can change this Laura I mean this dummy text with any other text and you can change the text from this place and then instead of this dummy image just click on this image to choose any other image go to upload files click on select files now from inside the projects actually I wanna upload all these images together because we will be needing all of them very shortly so just open them now for the very first web design image I'm selecting this one click on insert media then have a look if we hover over on any single project there are two links let's say if you don't want to appear these two links you can just enable or disable from here but I like to have these two buttons so basically this plus icon whenever you will click over there that will make your image bigger within the light box let's close it but with this icon let's say if you have done a website for your client and you have a live link for that website so you can just link this project with that website and you need to put that link within this field like here I'm putting my website URL that's Jim Fahad oops Jim Fahad digital.com so now from here if anyone clicks on this icon that will take them to our website in the same way you can post your clients websites link here so people can just visit that website and they can see your work in life alright let's now scroll up and by clicking here you can minimize it and now I just wanna duplicate it so let's duplicate it and open the second one and here only to make you understand it very easily I'm not giving all the names very unique way only to make it simple I'm just giving it project two Also let's keep the control name web design then scroll down here I'm changing this image with this one click on insert media all right and of course you should change this URL with the second project URL and now I'm minimizing the second one and I'm duplicating the project two let's open the third one here I wanna name it to project three and here I'm replacing this image with this one click on insert media and also I wanna change is this filter stem I mean this control name so it would be SEO because you remember within this filterable controls we have here SEO filter all right let's open the gallery items so actually I just wanna do the same process and I wanna make three more gallery items only two not to make your board I'm doing it really quickly all right so I have added these six gallery items or six projects and I have added two projects under web design two projects under SEO and two projects under ux design but if I now click on web design you can see here only the projects those are under web design if I click on SEO you can see the projects those are under SEO if I click on evix design you can see only the ux design categories projects and if I again click on all we can see all the projects here and then if I click on this plus icon I can see the image here within the beautiful light box also you can navigate through this like this all right let's close it now I wanna do a little bit styling with it make sure you have selected it by clicking on this pencil icon actually first of all I just wanna make some space in between this heading and the filterable gallery so go under Advanced tab unlink the margin at the top of adding 30 pixel of margin now go under the style Tab and here background color by default it's white that's why we can see the white color but instead of white we can just make it transparent so the background dark color would be easily visible then from here open the control style and I just wanna go under active from here I mean this active one it says all I wanna change its background color to our Global blue I mean the dark blue color this one then you see if I hover over here this color what should I say I mean what should I name this color it's kind of orange but it's not going with our website Vibe so I also wanna change these buttons colors to do it from here open the icon Styles now here I'm changing this background color from Global color I'm making it dark blue and on Hover let's set the global color the blue light now have a look we can see the changes and if we hover over on buttons it's working perfectly now here the very last thing I think we just need to change these colors so from here go to control style and from here text color instead of this dark color I'm making it white so they are appearing and easily visible into our eyes let's now create the very last section of our home page and it would be the testimonial section and have a look at the top let's now scroll up our testimonial areas layout would be look like this I mean we will be using the same wrapping formula so let's just scroll down first of all you know to take a container click on this plus icon and I'm taking this column directed container let's add some spacing from under Advanced tab here I'm adding 60 pixel of padding and here with this testimonial section or testimonial container I want to add a background image go under the style tab from here open the background type select the image go to upload files click on select files so for the testimonial area this image says home testimonials so select it and open let's now click on insert media and you know how to deal with the positioning so from here I'm making the position to Sender Center attachment to scroll repeat to no repeat and size to cover now you know how I will create the subheading and heading just by copy and pasting as usual so from Top let's just copy this subheading from here let's now scroll down I'm pasting it inside this container here also this is the main heading right click here copied and right after the sub heading here let's just paste it and here the subheading I just wanted to say testimonials and then with this main heading I just wanted to say we have many good clients reviews and just after this good word I'm adding the BR tag and here you know you can manually just capitalize all the words first later or you can just go to style tab go to typography from here the transform you can make it capitalize all right now right after that like I said it would be similar like this area so you know first we need to take this parent container within that we will be taking this child containers and this parent container will be wrapped otherwise this child container won't get their own width we have already covered it so right now the testimonials area I will do it really quickly now right after this heading just click on this Rubik's Cube icon from here I'm dragging this container widget here and first of all go under Advanced tab from here I'm adding 30 pixel of margin at the top now go under layout from here you know I'm just opening the items here I'm making the justify content to centered or we can just make the justify content to space between I'm making the direction to row and the wrap value to wrap you already know the reason behind it now within this parent container click on the Rubik's Cube icon here I'm dragging another container so you know they are placing at the same place that's why we need to take the help of the Navigator so just right click and open the Navigator and from the Navigator we can see this is the child we have just selected and above one is the parent so make sure you have selected the child container from here make the content width to full it and make sure you have made the content width to full width because if you set it boxed it won't work so always make sure the child container is set to full width when the parent is wrapped now here the width I wanna set it as 48 also from under style tab I'm giving its background color to white color also I want to add a bit of Shadow so from here open the Border let's open the box Shadow first of all let's set the color I'm making it a bit transparent like this then here the blur value I'm making it 20 and the spread value let's make it negative 10 then now let's go under Advanced tab here I want to add some Inner Space so here I'm adding 15 pixel of padding and only at the bottom because there will be more testimonials so I wanna add some space at the bottom just unlink the margin and only at the bottom I'm adding 20 pixel of margin all right now within this child container I wanna insert and testimonial widget so let's click on this plus icon and here I'm searching for tasty monial here you can see these these two are paid that's why we can see this lock icon here and these tools are the free one is from element to default and another one is from essential and because you can see a little tiny essential add-on icon at that top right corner and we will be using the essential add-ons one this one not this one okay so make sure you have selected the essential add-ons testimonial widget just drag it inside the child container here so first of all I wanna appear here the Avatar it's not the avatar from Avatar movie it's actually the image of your client so just select the image go to upload files and click on select files now from inside headshots first I'm selecting this clients image open it click on insert media then open the testimonial content and here is the username basically it's your client's name so here I wanna put my real client's name and actually these are the real testimonials I have got from my clients so her name was Daniel Dino and here is the company name so she was the founder of webcaster design then within the description field I'm writing her real testimonial then let's scroll down from here if you want you can show your rating so if you want to disable it you can disable it from here but I of course want to enable it because I always get five extra ratings from my clients so of course I wanna show off on that my website you know so here rating number I'm selecting four now let's go under the style tab because I wanna make it really look nice now here from under testimonial Styles let's select the style I wanna select this one content top then icon title inline this option and also I wanna turn on this option says display user and Company block so let's turn it on all right let's now do some styling with this image so open the testimonial image style first of all I'm making the image width to 80 pixel and then I want to add some space in between this image and these texts so from here let's unlink the margin and I want to add the margin on the right side so here I'm adding 25 pixel of margin right now here I wanna add a border with it but before that I wanna make this image rounded so to do it from here I'm adding border radius to 100 I think probably I don't have to do that let's just remove 100 border radius from here instead here it says rounded up butter so if I turn it on yeah it's now becoming rounded and I wanna add a border with this image so from here border type I'm making it so solid border with I'm making it 3 pixel then border color let's select hash 0 f 6 7 F6 wow it's already looking great but let's have a look how we can make it look more good so just from here open the color and typography spacing so here I think we just need to match this font with our website's font so from typography here I'm making it to Theta sense condensed then I wanna of course make it more bolded so from here let's make the font wet to 700 also I want to make it a bit bigger so I'm making the font size to 20 pixel and also I don't want it to be italic so from here is tile I'm making it normal all right also I just wanna reduce the space at the bottom so from here let's unlink the margin make sure we are working on the username so here at the bottom I'm just adding negative minus 5 pixel not negative minus 5 pixel it's actually negative 5 pixel now here with the company name let's open the typography now from here I'm making the font size to 14 pixel and here I'm making the font width to 400 also I don't wanna make it italic so from here I'm making this tile to normal all right now I just want to select this first child container I mean this one and we can duplicate it couple more times so right click here duplicate it then right click here duplicate it right click here and duplicate it so we can just keep 4 for the moment but if you want you can add as many as you want and you know okay for the moment I'm just closing the Navigator if you wanna change change any of this just click over there you know how to change this image how to change their name and title then how to change the style rating you already know it so I'm just quickly changing all these images their name title and the real testimonial and I'm coming back to you all right so I have changed all the headshots their name title and the dummy text with real clients testimonials so we have completed our beautiful home page all the sections are looking really great after completing other pages I will of course show you how to work with this header also how to customize the folder and now I wanna show you one of the most important things that is how to make our website responsive for mobile device and all of the devices so to check our website's responsiveness all you need to do from the bottom left side click on this responsive mode icon and here at the top we can see the desktop icon here is the tablet and here is the mobile device so we have started from desktop so everything is looking great on desktop there is no doubt about it now have a look how our website is looking on tablet devices so from Top click on tablet it automatically jumps to the bar bottom but I want to start from the top of the page so here basically the banner looks okay but we can just reduce the font size a bit on the tablet device so just click over here go to this headings typography and here have a look right after the size here you can see a little tiny tablet icon so if you put any value here that will be only applicable for tablet device like here on the tablet device I Wanna Give the font size to 60 pixel so here you see the font size is 60 pixel but from here if I click on the size and if I select the desktop mode you see on the desktop 875 pixel is still but on the tablet mode so from here let's go to tablet you see it's 60 pixel so just remember when you are doing responsive design if you are on the table that mode and on that time if you change any value that will only be applicable on that particular device so right now this Banner looks perfect on tablet this ethical area looks perfect then the next one here I think we can reduce the height of this image so just select the image go under its style tab from here instead of 600 I'm making it 350 pixel only for tablet device then here this heading size let's select it from the typography here I'm making its size to 46 pixel other than that everything is looking perfect let's scroll down I also wanna reduce its size to 46 pixel oops 46 pixel and then here we need to do a little bit of work so I want to select the first child container and you know it's a little bit confusing because here at the same place the parent container and the first child container is sitting that's why I want to take the help of the Navigator so yep we have selected the first child container now let's go to its layout so make sure the width you have selected it in percentage and I'm making it to 48 percent now I wanna apply this change with other child containers so let's just select it from here make it in percentage and I'm making it 48 percent let's do the same with this one from here 48 with this one let's make it 48 percent also with the last two select this one make it in percentage 48 also with the last one make it percentage I'm making it 48 percent let's now close the navigation together see on the tablet device it's now also looking great now scroll down here you know we need to change its size to 46 pixel only for tablet device then everything is looking great also with this one let's go to typography and make it 46 pixel the testimonials are already looking great all right so on the tablet device everything is now looking great we can now move to the mobile device so from here I'm clicking on mobile icon again it's automatically going to the bottom of the page but I want to start from Top okay so here on the mobile device we need to reduce the font size of the heading more so let's select the font size go to its typography I wanna make it only 34 Pixel and similar like that tablet device if you apply anything on mobile device that will be applicable only for the mobile device on the tablet device and on the desktop device it won't be applied then the paragraph font size go to its style tab from the typography I'm making its size to 16 pixel then I wanna select this parent container this one go to its Advanced tab unlink the padding now here on the left and right I just wanna add a bit of padding maybe 15 pixel and also I wanna reduce this curved size I mean the curve height so make sure you have selected the container go under its style tab from here open the shape divider and I'm going to bottom here the height only for the mobile device instead of 400 I'm making it to 80 pixel all right now the banner area is looking great the next section is looking great let's now scroll down and here I think the top and bottom spaces are good but we need to reduce the spaces from left and right only on the mobile device so let's select this container go under its Advanced tab okay first of all make everything 60 pixel then unlink it now from the left and right instead of 60 I'm making it 30 pixel left and right now let's scroll down we need to reduce this font size as well so just click here go to its typography on the mobile device I'm making it's size to 32 pixel and you may remember on the desktop we have given some space at the left but on mobile device we don't need that so select this container and I'm making the padding to zero and you know we can add a bit of space at the top to make them separated from the image so here at the top I'm just adding 20 pixel of padding oops it's applied on all of the sides but here just make it 0 again and Link it and only at the top I'm adding 20 pixel of padding alright so now the about section is looking great also let's reduce its font size so select it and I'm making a size to 32 pixel and like I said with this container I mean with this container as well I'm making the their padding to 60 pixel then unlink it on the left and right I'm making them sorry pixel of padding let's now down here everything is okay but these buttons are not looking aligned perfectly so let's just select this button first of all I'm making its merging to zero and go to content tab here I'm making its alignment to centered only for mobile device so I can now just right click here copy it and then right click here click on paste style let's do the same with all of these buttons paste Style with this one right click and paste Style with this one do the same also with the last one right click and click on paste this style then with the portfolio section here select it and I'm making the font size to 32 pixel and you know the same thing select this container go under its Advanced tab make everything 60 first then unlink it only at the left and right I'm making the padding to 30. now let's scroll down here is our testimonial area so let's do the same select the container go to its Advanced tab first make everything 60 pixel unlink it left and right I'm making it to 30 pixel and let's reduce its font size so from here I'm making it to 32 pixel so right now everything is looking great on the mobile device also on the tablet device and for sure on the desktop device now click on this green update button to save your work and now I want to show you another interesting thing so first of all just close the responsive bar from Top click on this x I want to show you how to add some entrance animation with your website to make your website look more interesting like here I am selecting this heading now go under its Advanced tab from here scroll down and open the motion effects from here you see it says entrance animation and if you click on this drop down menu you can select any of these animation type actually there are a lot of Animation types like let's say if you select bounce you can see the bounce effect if you select let's say rotate in you can see the rotating effect but this type of crazy animations are not good for professional websites I mean this type of rotate in or rotating down left these are not professional type of Animation you know instead you can use some of light type animations those are not crazy enough like those are not bouncing everywhere of your site not like that you can use decent type of Animation so I'm showing you some like with this one let's just scroll up from here yep you can use this Zoom zoom in animation so I'm selecting zoom in yep it looks decent also you can set the animation duration from here like this is the normal duration if you want to make the animation happen more faster you can select fast you see it's happening faster if you select the slow you can see the animation is happening within very shortest time I mean the longest period of time also if you want you can add some delay like here I'm adding 500 actually 500 represents half a second now here instead of slow I'm making it normal then with the button actually you can add these animations with any of the elements even you can add the entrance animation with containers so with this button go under Advanced tab open the entrance animation where are you yes here motion effects open the entrance animation here with this button I just want to use fade in effect but I want it to happen very fast okay let's just keep it normal but here I'm adding 300 MMS of delay then I wanna add some effect with this whole container so let's select these six dots from under Advanced tablets open the motion effects now from here inference animation I wanna add here slide in up so if I select sliding up you see it's sliding from bottom to top and for this one I wanna make it slow cool then with the next containers or next areas I just wanna give you some ideas how you can generate these animations like here is our about section so here on the left we have got one child container on the right side we have got another container so you can do it like this like I'm selecting this left one go to its Advanced tab from here motion effects inference animation I'm setting it as let's set it as fade in left and the right one go to Advanced tab from here motion effects entrance animation I'm setting it as fading right so when the page will load this one will come from left and this one will come from right all together it will make a beautiful animation let's now scroll down and another suggestion would be don't make your websites all the contents with inference animation because that will look super weird so here I wanna keep this heading and sub heading static there would be no animation with them but with their parent container so let's select it and like I said I have selected the first child container but I wanted to select their parent containers so just right click here open the navigator from here oops from here I'm selecting their parent container so I wanna add the animation with it just go under Advanced tab from here open the motion effects and here I'm adding just fair in effect then let's scroll down with this one I want to apply the animation with this whole container because it's a different color from the top area so let's select this area I mean this container from under its Advanced tab let's open the motion effects and here I wanna add fade in up this effect all right let's scroll down here I also wanna keep this subheading and heading static no animation with it and now with this one let's select this first child and always make sure you have selected the right container from the Navigator now go under Advanced tab with the lift one I wanna add fade in left also with this one as it's in the left so with this one let's go to motion effects um adding fading left and with this right child container selected go to Advanced tab open the motion effects entrance animation here I'm adding fade in right also the same with this one go under Advanced tab open the motion effects here I'm adding fade in right cool let's now click on this x so far everything is looking great now click on this green update button to save your work and remember we are now inside Elementor page builder we can only see the animation on the first page load so to see it in action or to preview the page outside of the Elementor page builder you can just simply click here on this eyeball icon so I'm clicking here now have a look you can see all the animations here the bottom media is coming from bottom to top also now just have a look while I'm scrolling you can see all the animations how they are coming together okay so just have a look you see they are coming from left the image is coming from left this one is coming from right also let's scroll down this one is static and this area is coming from bottom to top this one the the left areas are coming from lift the right containers are coming from right so all together they are creating a nice illusion or nice animation our home page is really looking so much clean unique modern and really really creative all right let's now design our next page and that would be our about us page but before that let's go back inside Elementor so this was our home page and now before we start creating other pages I just wanna save some of the areas so we can reuse those sections on the other Pages like on the other page for example if we want to create a container or section like this we can just save it and reuse that on the other page so similar with this one we can just save this portfolio area and we can reuse that on the other page so let's start from Top first of all I just wanna save this main Banner area so to save it just right click over these six dots then click on save as template and I wanna name it Banner area click on save you see under my templates it saved the name is here Banner area all right let's close it because I wanna save some more areas so from here this is the services area I also wanna save this section or container so right click over the six dots click on save as template I'm naming it sir vs area let's save it and then I also wanna save this portfolio's area so here right click and save as template I'm naming it port for Leo's area let's save it now close it and let's also save this area the testimonial area so from here just right click here click on save as template and I'm naming it testimonials area let's now save it so we have saved these four areas we will be reusing this on the other Pages all right for now let's close it and like I said now I want to create our about us page so from left first I want to go back to our WordPress dashboard so from here click on exit to dashboard now from this left menus click on all pages and from here Yep this is our about page now click on edit then from Top click on edit with Elementor now just have a look how quickly we can create our Banner area just by reusing the home pages Banner area so to reuse any other template that we already have created on the other page just click on this folder icon now go under my templates you see here we can see the four areas we have just saved so at the top I wanna import the banner area so from here just click on insert and here I'm clicking on apply and here you go now here instead of this heading I just want it to say about us then instead of this paragraph I'm just pasting some text and here I think we can add some space at the left and right so it would look proper aligned to do it just click on the six dots go under Advanced tab from here I'm unlinking the padding so only at the left and right I'm adding 120 pixel of padding right now it looks more organized and here this button I wanted to say made our awesome theme and actually I just wanna link it with the next section because here I will be creating our team members area I will show you shortly how you can link anything with the other portion of the same page so here I'm just removing the contact Pages link for now I'm just putting here hash I will show you shortly how it works okay so let's now scroll down on because here I want to create our team members area and you are already familiar with flexbox you know how the rows work how the columns work why we should take wrap so now you have all those basic ideas so now I will be creating everything a bit faster all right now to take a new container just click on this plus icon and I'm taking this row directed container and first from here I'm making the justify content to space between then here I'm making it to wrap so the child elements would be wrapped with their own width and also let's add some padding here so go under Advanced Tab and Link the padding okay first we can just link it and let's add 60 pixel all around this container now unlink it only at the top I'm adding 100 pixel of padding now within this container click on this plus icon here I'm dragging a child container I'm making its content with to full width and here I'm making its within percentage it's 23 percent also I don't want any Gap here so from items I'm making the elements Gap to zero and with this child container I also wanna add some space at the bottom so that will make it separate from the below child container so just go under Advanced tab from here I'm unlinking the margin I'm adding only margin bottom that's 30 pixel all right now within this container I just wanna take an image so click on Rubik's Cube icon and here I'm dragging this image widget here let's now select the theme members image go to upload files click on select files actually I want to use all of these images so I'm selecting all of them together let's select them all and now I'm clicking on open now for the first team member I'm selecting this image then click on insert media now let's do some styling with this image so go under the style tab first of all I'm making its width to 100 let's give it a height so I'm making it something like 300 let's make it 330 pixel and you know from here object feed I'm making it to cover then right after this image within this container actually I want to take another container okay so let's click on this Rubik's Cube icon and from here I'm dragging this container just after this image here so actually this containers parent is this container you see this blue line is covering this container as well also to make you triple share you can just right click here and open the Navigator so here you see this is the main parent container this one within that here we have got our image and then here is another container all right now let's select this inner container I also wanna make its Gap to zero so from items let's make the Gap to zero and then go under the style tab I wanna give it a dark type background color so from here background type let's select the Color Picker from here I'm putting the color code that's hash 00173a and also I just wanna add a bit transparency so I'm dragging this Bottom bar to a bit left like this now I just wanna push it to the top so basically I want it to be appeared at the bottom place of this image so to do it you know we can just go under Advanced tab from here first I'm unlinking the margin and here we need to add some negative margin at the top now here I'm adding for example 100 negative margin or we can just make it more Pixel Perfect that's 97 actually you can understand it properly if I minimize it so actually we cannot see the black area right now because there is no content inside of that black container so just open it and now I wanna add some content within this black or bluish area but here I also wanna add some padding within this container so from here let's add padding I'm adding 25 pixel it's actually too much okay on the left and right instead of 25 I'm making it 15 and on the left also 15. okay actually we can make it Pixel Perfect later but first here I want to add some element so click on this plus icon here I'm dragging and heading widget here oops let's just drag this heading widget inside here and here I'm writing the team members name that's done Dino let's make its alignment 2 centered I'm going to install tab from here I'm making the color to white and you already are familiar with this so from typography I'm changing the up on the family to feed a sense condensed this one let's make the font size to 22 pixel and wait I'm making it 700 then let's just duplicate this heading and here instead of a dandeno I want it to say eui okay I'm just writing here lead designer now go under style tab from here I'm just reducing its font size to 14 pixel and font white let's make it 400. so here if we now minimize the bar from left we can see it's looking really nice all right now underneath this black area actually I wanna have some floating social icons so to do it just right after this container not within this container right after this container I wanna add social media widget so from here click on the Rubik's Cube icon and I'm searching for social media here we go just drag it after this black container here only to make you double sure from the Navigator have a look if I now minimize this container you see it's outside of the container here and within this container here we have only got this heading that says dandino then here is another heading that says lead designer okay so let's now start working with this social icons and here by default we can see the Facebook Twitter and YouTube icon let's say if you want to use any other social media icons then from here you can just click on ADD items then click over this icon then if you want to add any other social handles for example your WhatsApp Viber or SnapChat or any other social handles for example here I'm adding Instagram then click on insert so here you see the Instagram handle has been added here and to put your Instagram handle link I mean you just need to put your Instagram handle link within this link field same with the Facebook just click on the Facebook you need to put your Facebook profile or Pages link here you just need to open Twitter as well and from here you can add your Twitter handle you can add your YouTube channels link here like this also if you don't want any of these social handles let's say I don't want Instagram at this moment so click on this x to delete it now first of all the ship is by default rounded but I wanna make this Square now I wanna do a bit of styling with this social icons so it has to go under style tab from here you see these colors are basically their official color but instead of this official color I'm selecting the custom color now from here the primary color I'm making it white and then the secondary color that's basically the tiny icons I want to make its color kinda grayish color or I can just write here 999 999 all right now if you wanna increase or decrease it size you can do it from here so you can increase or decrease the sizes of the icons but I just wanna make it 15 then you can increase or decrease the spacing from here so I'm making it 15. now if you want you can add border from here so I'm adding border type to solid and border with here one pixel then from here border color I'm making it just hash two two two two two two two two and also I wanna reduce this transparency so I'm dragging this Bottom bar to the very left like this all right and actually now I want to have these icons more closer so from here the spacing I'm just making it to zero all right now let's see if you want to add some hover effect with these icons you can just open the icon over from here only to give you example on Hover I'm making the secondary color to our Global dark blue color so if I am hover over here you see data icons are becoming the dark blue color now I just wanna adjust its position like I said I wanna make it look like floating so I will be pushing it a bit top here so to do it you already guessed it right just go and Advance tab from here unlink the margin and here I'm adding some negative margin probably negative 14 or negative 15 is looking great all right so for this card looks great now I just want to duplicate it so make sure you have selected the main parent container of all of these so I'm selecting this container just have a look from Navigator if I minimize this container all these are going inside this parent container that means this is the wrapper of all of these elements okay so make sure you have selected this container now just duplicate it duplicate it one more time actually I want to duplicate it more like this so in total there are eight containers duplicated now we can close the navigator from here and you know it's super easy to change the images there are titles the subtitles so from here I'm just showing you one example just click over there to change this image click over this image and you remember I have uploaded all these images so from here I'm selecting this image click on insert media here to change his name I'm just typing his name here that's Lex devil and then his role just click over this text his brand manager so here I'm typing brand manager so in the same way I just wanna change all these images all the names all the titles so I'm doing everything very quickly and I'm coming back to you all right so I have changed all their images their name their title everything now I wanna create our next container so just scroll down from here click on this plus icon this time I wanna take this row directed container and first just to go with in its items from here I'm making the justify content to centered also I wanna make the elements Gap to 60 pixel I'm explaining why I'm taking here 60 pixel just wait for it and you know I just wanna add some spacing all around this container to do it go under Advanced tab from here and Link the padding actually we don't need to unlink it because we wanna add 60 pixel all around this container here now here with this container I wanna add a background image go on a style tab from here let's select the background image um selecting this image click on insert media and you know I'm making the position to sender sender and size to cover now I also want to add some background overlay from here so let's open the background type to Classic and here I'm adding the background color that's hash zero zero zero zero one D It's kind of dark blue color and then I'm making oops from background overlay then I'm making its opacity really darker so it's 0.85 actually we can barely see the background image I just wanted to make it an abstract kind of background all right now within this I mean within this container click on this plus icon here I'm searching for counter widget so here we go this is the counter let's just drag it inside here okay now first let me explain how it works here's the starting number so if I set it to let's say 40 and and the ending number if I set it to 500 then you see the counter is animating from 40 to 500 but I don't want this starting number so by default it's 0 and here ending number I'm setting it to 10. now if you wanna add anything before this 10 then you can add prefix for example I'm adding here KL just a random word KL but I don't want this prefix just after this 10 I want a suffix that would be K so it would look like 10 K then instead of cool number I just wanted to say project completed or complete projects so here I'm writing complete projects oops complete projects also you can control the animation duration like by default it's 2 second but if you want you can change it from here all right now let's do some styling with it just go under the style tab from here for first I wanna change the text color to white color then from typography of course I wanna change it to our favorite fira sense contest font then I'm making the font size to 50 pixel and here I'm making font weight to 700 now let's design the title open it I also wanna make its color to white color the font size is perfect but I just wanna reduce its line height so from here typography let's set it in em and I'm making it 1.4 am and you know what instead of this 10K actually I wanted to say 10K plus so to do it just go to content and here the ending number I want it to say 10K then the suffix number I mean the ending number would be just 10 because you cannot write K here this is only input field for text this is only input field for numbers so I'm just writing here thin and here the suffix I'm writing here K plus so right now it says 10K plus complete projects all right now I just wanna duplicate this counter couple more times so let's duplicate it now I'm duplicating it one more time let's duplicate it one last time and if I now select this main container now go under its layout now I wanted to tell you why I have taken the elements Gap to 60 because if I take it to 20 you see there is space in between is decreasing and it looks super busy so if I take it 120 it's too much space that's why let's keep it in Middle I'm just writing here 60 pixel of elements Gap now we can just easily change these numbers like here instead of 10K plus I wanted to say 850 and here's instead of K plus I just wanted to say plus so 850 plus maybe client reviews so here I'm writing client reviews now the third one I just wanted to say 15 plus so here 15 then the suffix plus and here title I wanted to say winning hours then the last one I just wanted to say 2K plus here the title free oops not double space it's free resources perfect so if I go back to the banner actually we can change this background image because we have used this Banner background image on our home page so to change it just click on the six dots go under the style tab from here let's now replace this image with any other image just go under upload files from here click on select files so for the about page I'm selecting this image click on open now let's insert it it looks much better alright let's now scroll down here we have got our beautiful team member area and then underneath here we have some features now the features these are actually some facts about our theme and then underneath of course I wanna show off our great testimonials that our clients have given us and you know we already have saved them as a template so to import the template just click on this folder icon go under templates from here to import the testimonials here is our testimonials area just click on this green insert button click on apply and here we go we have got our testimonials area it's actually loading again and yep here underneath we can see all the reviews or testimonials properly cool now we just need to check this Page's responsiveness but before that I wanna add some anime animations with these team members so to do it just select this container from here go under Advanced tab from here let's open the motion effects from the inference animation I just wanna use the simple fitting but here I want to add some DeLay So for the first one I'm adding 500 Ms of delay that's basically half second and gradually I wanna increase the delay to 100 image so the second ones delay would be 600 the third one's delay would be 700 like that so when on the first page load I mean when anyone visits this page for the first time and they scroll down to this area they can see the images serially popping like this from left to the right side okay so I just wanna make it really quickly from here with the second one go under Advanced tab from here motion effects from the entrance animation I'm making it fade in again and here instead of 500 I'm making it 600 and you already understand the process so I just wanna first forward this process all right now we just need to check the responsiveness of this page so you know to check its responsiveness from here we can click on responsive mode now go to tablet device let's start from the top it's already looking great because we have taken it from our home page now let's scroll down we need to work with this a little because these are looking so much narrower right so we need to increase their width just select this container go under its layout from here only for the tablet device let's make it in percentage and for the tablet I'm making it with to 30 percent I wanna do the same with all of these containers so I'm just right clicking here on the first container click on copy and with the second one right click and then paste this style let's do the same with this one as well paste style also with other right click and paste style same with this one also same with this one paste style actually I have two more so here right click and click on paste style also right click here and click on one paste style but here as we have selected its parent containers justify content to justify in between that's why they are going to left and right but on the tablet device I just wanna change their appearance so to do it first let's select this parent container go under its layout open the items only for the tablet device I'm making the justify content to centered so you see on the tablet device there are now Justified to centered but on the desktop device there are Justified two space between all right we now just need to check it from mobile device so click on mobile device from here like the home page we can keep the top and bottom padding but we need to reduce the left and right padding so just select this container from under its Advanced tab let's unlink the padding here top and bottom I'm keeping 60 pixel and on the left and right I'm adding 30 pixel of padding so it's looking great on mobile device all the team members then here underneath let's scroll down this area everything is looking organized also here we have got our beautiful testimonial area we don't need to make it responsive again because we have made it responsive on the home page then we have saved it as a template that's why we don't need to do any work with this let's now close the responsive bar from top and to save or work click on this green update button by the way I forgot to tell you about another thing like I wanted to show you if you click on this middle Awesome theme button that will take us to the immediate next section or to any other section so to create that type of a jump button all you need to do first you need to select the container where you want to be scroll down from this button so first of all let's select this container go under its Advanced tab from here you see there is a field it says CSS ID so I wanna give it a ID name just a random ID name I'm giving here team Dash section now I'm just copying this CSS ID from here now let's select this button within this link after the hashtag I'm just pasting the CSS ID that's theme section now have a look from Top If I now click on this button that jumps us to our team members area so basically this is how it works again click on the green update button to save our work we can now move to our next page that would be our services page so first we can go back to our WordPress dashboard from here again go to all pages here within all pages here is our services page so let's click on edit and now of course I want to design it by using Elementor page builder so click on edit with Elementor now here within the services page first I wanna import the banner area or Banner template so just click on the folder icon from here go to my templates here is our banners area let's now insert it click on apply and you know I just wanna change the background image oops let it load here you go just select this container go under its style Tab and let's change this image go to upload files click on select files for the services page is Banner I'm selecting this one click on Open click on insert media then instead of this I just wanted to say services and here instead of this paragraph I'm just pasting some text here then this button text I just wanted to say see our services and then I will be linking it with this next section or container and as this is our services page so right after the banner I wanna insert here our Banner template so click on the folder icon again go to my templates from here this is the services area just insert it click on apply and here you go see how fast now we can do our work just by using the pre-made templates that we have done on the other Pages now underneath this Services area I wanna input another area that would be our portfolios section so again click on this folder icon from under my templates here is the portfolios area let's just insert it click on apply and here you go this is our beautiful banner this is our services area then this is our portfolio's area and underneath that I wanna create a pricing table so let's first create the container just click on this plus icon and I'm taking this column directed container and as always just go under Advanced tab let's add 60 pixel of padding now I also want to add background image so from under digital tab let's open the background type to Classic and change the image and I want to use this image click on insert media then you know from the position to Center Center and size to cover all right now I just wanna copy and paste The Heading and subheading so we can do it from this place just copy this sub heading from here now inside this container just paste it here also let's just copy the is heading from here and I'm pasting it inside here the subheading I just want it to say pricing table and here with this main title I wanted to say this small pricing plan for your awesome business now right after this heading I wanna take another container so click on the Rubik's Cube icon and I'm dragging this container underneath here now open the items here I'm making the Justified content to space between and definitely I wanna make its direction to row and then you know I'm making the wrap value to wrap now within this container I just wanna take some child containers so again click on this Rubik's Cube icon from here I'm dragging a child container inside here now first I wanna make its width to full width and I'm making its width in percentage it would be 32 percent now let's go under the style tab from here I just wanna make its background color to white color then I want to also add some border radius so from here border let's add 8 pixel of Border radius you know border radius makes the corners look surrounded then to pop up it more I want to add some box Shadow so from here turn on the box Shadow first I wanna reduce the colors transparency so select the color from here I'm making it 0.2 then I just wanna set the Blurred value to 30 and the split value to negative 10. now lastly also add some spacing stuff so go under Advanced tab from here first of all let's unlink the margin only top and bottom I'm adding 20 pixel of margin now let's unlink the padding here only at the bottom I just want to add for the pixel of padding so you see at the bottom it's adding their space now here within this container actually I wanna take another container and there is a reason behind it so just follow me at this moment so I'm clicking here on this plus icon let's now drag this container inside here I'm keeping the content with toolboxed and here I wanna I see the minimum height that's 130 pixel now let's open the item I'm making the Justified content to centered now let's go under our style tab because I wanna give it a background color so from here background picker let's select the global dark blue color that's basically this one and then I wanna add a curved shape at the bottom so to do it from here let's open the ship divider go to bottom then the type I wanna select curve like I said and of course first of all I wanna invert it then the width let's set it 100 oops 100 and the height we can keep it 90 or let's skip it 80 pixel all right now within this blue area I wanna add a heading widget so click on this plus icon and here I'm dragging the heading inside here I want it to say UI or ux design let's make the alignment to centered go under the style tab first I'm making the text color to white color now from now from the typography I'm making the font family to feed us and condensed let's make the font size 226 pixel and I'm setting the width to 700. all right now just after this blue container this curved container I wanna add a heading widget so let's click on the Rubik's Cube icon from here I'm dragging The Heading widget just after this blue area in this place all right now I wanted to say it starts from so here I'm writing stars from and actually I want to make it smaller so from here HTML tag I'm making it H6 so it's already looking so much smaller now just go under the style tab from here I'm making the text color to black color and then from here typography you know I just wanna change the font to Theta sense condensed or if you want you can use the feeder sense this one then here I'm making the font weight to 500 and of course I wanna make it align to centered so just go under content and from here I'm making the alignment to centered now we can adjust its margin so from under Advanced tab on link the margin at the top I'm adding 10 pixel of margin and at the bottom we can add some negative margins so here I'm adding negative 20 pixel now let's just simply duplicate this heading widget from here and I want it to say our project plan or project pricing okay so here first I'm writing 499 dollar per project but of course it wouldn't be H6 I I'm making 8 H2 now let's go to style tab from here open the typography I'm making the font size to 34 Pixel and found white to 700 also I don't want this negative margin with this heading so just click on the advanced tab from here let's link it and all together make it zero or you can just make it empty now underneath this heading I just wanna add an icon list so from here let's search for icon list here you go just drag it underneath here so here we can see the item lists and the basic of the item lists are if I open any of the items from here you can change your text if you want you can change this icon with any other icon but I just want to use this check icon so let's close it and first of all I just wanna delete this one and this one just keep this one I mean keep the first one which has the check mark with it so here instead of just list item hash one I'm putting here a real text it says powerful admin panel so basically you can push all your features what you will provide within this pricing package you can list them here and let's now minimize it and click here again so it would be duplicated let's now open it for example the second one it could be multi-language support let's now duplicate them couple more time and I'm replacing this text with some more realistic text and I'm coming back to you all right I have added all these to make it more realistic you know now we can do some styling with it so go under the style tab first of all I just want to make the alignment tool centered now let's first style this check marks so open the icons and to sync the colors I'm just opening the Color Picker and let's add the color coded Bay hash nine six nine six nine six it's kinda gray color you know and then the text color let's open the text I just wanna make it their color a bit dull so from here let's just make it like this and I wanna make them a bit bigger I mean I just wanna increase the font size so from here from the typography I'm making their font size to 16 pixel then maybe we can just increase their line height so from here let's make the line height to 40 pixel like this so now it looks much better in my opinion now right after this icon list I wanna put a call to action button for sure so we can just copy and paste that from the top of our page so from here I'm just right clicking now let's copy this button let's scroll down here just after our icon list put your cursor here right click and paste it but I don't want that negative margin at the top so go under its Advanced tab let's make the margin to zero or we can keep it empty and here instead of see our surfaces I just want it to say plain contact nouns so from under content let's say contact now and it's already linked with contact page so if anyone now clicks on this contact Now button that will take us to our contact page and now we can just simply duplicate this pricing table but make sure you have selected the right container so from here I'm right clicking here open the Navigator make sure you have selected this container because if you select this inner container or this inner child container then you will duplicate only this top area that's why before duplicating anything just check that from the Navigator so we have selected the right container now you can duplicate it from the Navigator as well just right click here and click on duplicate again right click here and click on duplicate now let's say okay just close the navigator first the second service name it could be hosting pricing so here I'm writing hosting the starting price could be different so for example 2.49 then instead of project here I'm writing month now the third one could be web design and you can set the starting price to 999 dollar per project so we have created our beautiful pricing table now we just need to check how it's looking from tablet device and mobile device so to do it from here click on the responsive mode first let's go to the tablet device and yep we need to fix a few things like here again just open the navigator from here so you can understand you have selected the right container I'm selecting this container go to its layout and here make sure you have selected the percentage I'm making it with 245 percent I want to do the same with this one or you can select it from here so let's just minimize this one also minimize this minimize this so we can understand these three are basically these three cars so let's select the second card from here the width in percentage and I want to make it 45 percent also with the third one let's select it from Navigator make the width in percentage and I'm making it 45 percent now to make it look good I just wanna adjust their appearance justify content so they are occurs this three child's parent is this container so let's select this container go to its items and here only for the tablet device I'm making the justify content to centered so they are now aligned properly and it looks great on the tablet device let's now close the navigator you see the pricing is already looking great and all other section as we have imported them from pre-built templates actually we have made them but we have made them on other pages but they are looking great on the responsive mode Let's now check from the mobile device on that mobile device the pricing table is looking great but I think we should adjust their spacing so just click here on the six dots go under Advanced tab again first I'm making the padding to 60 pixel now let's unlink it on the left and right I'm making the padding to 30 pixel so the pricing area is now looking great on mobile device and all other areas are already looking great let's now close this responsive bar from top and don't forget to click on this green update button to save your work next I wanna create our single Services page let's say this is our services page and here we can see all the services we are providing we can see all them together here now let's say if you want you can create a dedicated page for your UI ux design that's completely optional but let's say if you want to talk more about your your UI ux design service you can create a dedicated page for that if you want to talk more about your SEO and marketing Services you can create a dedicated page for that so now I want to show you how you can create that very easily so similar like other Pages let's just go back to our WordPress dashboard from here go to all pages and here we can see just Services page but we haven't created any single Services page notice we can create that right now so to create a new page you know just click on this add new button now let's say as a single service we wanna create a dedicated page for our UI ux design so this Pages name um naming it UI oops UI ux design let's now click on publish click publish one more time now let's click on edit with Elementor now similar like other pages I just want to create the banner just by importing the previous Banner so click on the folder icon from under my templates let's now import this Banner area click on insert click on apply now here instead of this title I just wanted to say UI ux design then let's replace this paragraph with this text you see it says best UI ux design theme you have ever made all right so you can write the text in more attractive ways and here instead of this get started I just wanted to say for example C Service details so here I'm writing C Service details like this and I wanna link it with the next section so if anyone clicks on this button that will take them to the next section you already know how to do it so for the moment I'm just removing this link and temporarily I'm putting here a hashtag Now to create a single service page there is no specific role you can describe in your own way like if you want you can describe in a case study way or if you want you can just put a video link there so people can see the video and they can understand about your UI ux design service like I said there is no specific rule for that but I'm just showing you an idea how you can handle it by following this idea you can repurpose it or you can design it any other way alright so here right after the banner here I'm taking another container let's click on this plus icon and I wanna take this two continuity structure and you know first of all just go under Advanced tab from here I'm making the padding to 60 pixel but here at the top just unlink it at the top um adding 100 pixel of padding now here within this lift container click on this plus icon here I'm dragging an image widget let's now select the image widget I mean let's just select the image from here so go to upload files click on select files for UI ux I'm selecting this image click on open let's select this image click on insert media and now actually I don't want to do any crazy thing with this image because right now I just wanna add a mask so go under Advanced tab from here let's scroll down open the mask and I'm turning on the mask the plane circle is kind of boring to me so instead of circle let's use blob it looks cool in my opinion alright let's now select this right container this one and here first open the items I'm making the justify content to centered then I want to add some space at the left side here so go under Advanced Tab and Link the padding only at the left side I'm adding 40 pixel of padding now within this right container I just wanna put a heading widget so from here let's just drag this heading widget here or actually we can just copy a previous heading but but there is no similar like hitting there in this page but also we can just copy and paste heading from any other page within our website so we can just go to any other page like I'm going back inside our about Pages Elementary page builder from here we can just take any of the main heading for example this one just right click here copy it so not only within this page we can paste it on other page as well so let's now go inside UI ux design page so here we no longer need this just delete it and here right click and paste it now I just want it to say your ux process so here I'm writing u i u x process actually you can write here anything I'm just showing you the way and let's just make it left aligned or if you also deselect it by default it would become left aligned now right after that if you want you can and add any paragraph so I'm just dragging this text editor widget here in this way you can describe your project the way you want now for example right after that if you want to create another area to Showcase your project facts for example if you give them money back guarantee or if you have any other features like that you can include them here like here I'm taking another container click on this plus icon let's take this row detected container here I'm making the justify content to evenly this one and you know I just wanna add a background but before that let's add some padding from under Advanced tab I'm adding 60 pixel of padding now I'm going to style tab like I said I wanna add a background image so from here let's select the same image because we will be using a very dark color overlay but for now make the position to Sender Center size to cover now from the background overlay let's set the overlay a color to Hash zero zero zero a24 and I'm making the opacity to really dark like 0.8 or 8 5. let's keep it 0.8 like this now within this click on this plus second I just wanna insert some icon box so here I'm searching for icon box here you go just drag it inside here first of all I'm making the icon position to left aligned then from here first I'm making the view to framed and I Only Wanna use this icon and the title I don't want this paragraph So I'm removing it from here then instead of this star icon let's change it um just here typing and shake so this one select it insert it and within the title I wanted to say best quality support but I wanna divided into two lines so before the support word you know I just wanna add a blind Break Tag all right now let's do some styling so from under style tab here is the icons Styles I wanna make the icons color to pure white color and then the size let's make it 30 and then I think we are good with this icon now scroll down and open the content first of all here you see this is the vertical alignment so if you want you can set it to bottom like this but I wanna adjust it to the middle so I'm setting middle I want to add some spacing here within the title okay I'm just keeping it five let's change the text color to white color then I'm changing the typography to our favorite free raw sense that's feeder sense then from here I'm making the font weight to 700. all right now we can just duplicate hit this icon box couple more time like this let's duplicate it one more time and the second one we can say it for example money back guarantee so before the line break I'm writing here money back then right after the break here I'm writing guarantee let's change the icon with something money related icon so here I'm selecting this one and the last one here I wanted to say affordable price so here I'm writing affordable then after break here I'm writing affordable pricing Also let's change this icon something looking like money icon so here I'm typing money let's select this one and insert it all right now right after that I wanna create another container just like this one but reversed I'm showing you shortly how to do that so first of all just copy these containers so I'm copying it now within this empty field right click here and click on paste and now I want to show you another interesting thing let's say if you just want to flip it or reverse it if you wanna move this left container to the right side all you need to do just drag it to the right side here you see it's instantly reversed and now with this lift container select it go under its Advanced tab I don't wanna add the lift padding here so let's skip it zero but on the right side I'm adding for the pixel of padding and here instead of UI ux process you can say any other thing for example you can say it case study now instead of this image let's just remove this image from here so I'm deleting this image you can insert any other thing like if you want you can add any Carousel or any other text but only to give you an example I want to add a video so from here you see this is a video widget just drag this video widget within the right right container here and then if you want to replace this video with any other YouTube video you just need to push here your YouTube video link and not only YouTube If you host your website not website if you host your video any other platform like from here you can select Vimeo Dailymotion or self-hosted videos here but you know YouTube is more popular even you are watching this video on YouTube so if you host your videos on YouTube you just need to put that YouTube videos link here for example I'm replacing this video link with other YouTube videos so here I'm just pasting other YouTube video URL you see it's instantly embedded here all right now right after this here if you wanna add any FAQ section you can do that because FAQ is very important for a business or for an agency because you might have different factors for your different services so people might ask different different questions in their mind so you can clarify that questions by using FAQs so here I'm showing you very shortly how you can create a figure section to do it let's click on this plus icon and here I'm taking this column directed container and first of all I want to add some spacing so Corner Advanced tab from here I'm adding 60 pixel of padding now go under the style tab from here I wanna add a background image let's add this image click on insert media and you know the position I'm sitting is sender sender the size let's set it to cover now here again I just wanna copy and paste some sub heading and heading so from our about page let's just copy this subheading go inside your ux page and paste it again let's just copy this main heading from here go inside your ux page and here I'm pasting the main heading here so here on the subheading I just wanted to say FAQ and in the main heading I'm just saying it frequently asked questions now let's click on this Rubik's Cube icon and here I'm searching for accordion widget so here accordion and I wanna use this accordion it says Advanced accordion not this one not the toggle not the image accordion but this one it says Advanced according so just drag it right after this main heading here and here before doing any other thing I just want to add some spacing so click on this blue pencil icon go under its Advanced tab first let's add 30 pixel of margin now let's unlink it because on the left and right I wanna add more spaces so 100 pixel at the right and 100 pixel at the left so right now this FAQ is looking descent now have a look how we can easily add some questions and answers into this FAQs or within this accordion just go to its content tab from here just open the content settings so here we can see some elements or items first of all I'm deleting all these just keep one so let's open it so here to create the question you need to put the question with within the tab title so here I'm putting a question that says should I pay up front because so many of your customers might have this question into their mind and then you can answer that within this field so here I'm replacing this with this text like no not a penny so here if I now open it you can see the answer is here so at the same way just minimize it let's just duplicate it I'm duplicating it couple more time and I'm replacing this question and answers some of my real questions and answers I mean some real FAQs and I'm coming back to you really quickly all right so I have replaced these FAQs with the most common questions I used to get from my clients so it's already looking great but I just wanna align them with our color codes so to do it just go under the style tab from here let's just open the tab style now open the typography and you know from here I just wanna set our font that's Fida sense I'm making the font size to 16 pixel and also I'm making the font weight to 700 and then if you have a look you see here is the hover color is black but instead of that let's open the hover from here from here I'm making the background color to our Global dark blue color so if I now hover over here you can see it also on the active State I wanna make it our Global dark blue color so here this one is active right now you can see the dark blue color here all right so far so good we have treated our beautiful single Services page now we just need to check how it's looking on mobile device and tablet device I mean we just need to check its responsiveness so from here click on the responsive mode first let's go to tablet device I don't know why it always jumps to the bottom area of the page I wanna start checking it from the top so this it is looking great let's now scroll down it's looking great on tablet I think we don't need to fix anything on tablet because it's already looking great and by the way let's just go to desktop view here I forgot to link this with this section so you know first just click here go under its Advanced tab from here I just want to add a CSS ID so here I'm just typing ux Dash process now copy this CSS ID from here now select this button from here just after this hashtag don't put any space just with the hashtag I'm pasting the CSS ID name so now from here if I click on see service details it jumps us to this section all right so we have checked the tablet view it's already looking great let's now move to the mobile device so it looks great let's now move to this section actually here we need to adjust the padding so select it go under Advanced tab from here I'm making the padding first 60 pixel now let's unlink it on the left and right I'm making it 30 I've been doing it from the first page so you are already familiar with it now let's select this image because I want to add some space at the bottom because you see there is no breathing space here so just select the image go under Advanced tab unlink the margin only at the bottom I'm adding 30 pixel of margin and you may may remember we have added some space at the left with this container so select it go under Advanced Tab and here I'm making the padding to zero also we should do that with this case study area so just select it from under its Advanced type I'm making the padding to Zero by the way we should also adjust the main parent containers padding just select it go under Advanced tab first make everything 60 then unlink it on the left and right I'm making them 30 pixel of padding by the way on the preview we cannot see the video properly that's a glitch you can see it perfectly fine on the real mobile devices so let's now move to the figure section also with this one let's select it by clicking on the six dots go under Advanced tab let's adjust the padding from here and Link it at the left and right I'm adding 30 pixel of padding then with this Advanced accordion this one just go under Advanced Tab and here I'm making the merging to zero so it's now looking perfect just to have a look it's now really looking great on mobile device all the areas are looking just perfect all right we can now close the responsive bar from top and don't forget to click on this green update button to save your work alright so we have created this single Services page for the UI ux design service so in the same way if you want you can create all the different pages for your different services so let's say if I now create seven to eight different single Services Pages this tutorial would be more longer so I don't want to do that I just wanna show you how easily you can just replicate this page and change other content so it would take only two minutes just stay with me I'm showing you very shortly how to do that so you know we just need to go back to our WordPress dashboard and from there let's now go to all pages so here we can see our services page this one Your ux Design This is Our single service page and now the first thing I want to do I just want to duplicate this page and the easiest way to duplicate this page is when you hover over here you see it says EA duplicator as we have installed essential add-on plugin it has these options so we can easily duplicate it just by one click so now click here on EA duplicator and now scroll down you see this one is on draft so we have just duplicated our previous UI ux design page now here click on edit and for example this ey ux page I want to convert it into a web design page so here instead of UI ux I just wanna say here web design Okay now click on publish now click on publish one more time then click here on edit with Elementor now you know from here instead of UI ux design you can just say web design you can change this text with any other text you can change this button text actually you don't need to change this button text because if you click here that will basically jumps to the next section here and you can replace this image with any other image instead of UI ux process you can just say here web design process and then you don't need to change this because it also goes with web design because your web design service is also best quality it has a money back guarantee with it and also you are giving your web design in affordable prices so you don't need to change this then with this next section here you can keep this case study and you can just replace this video with any other video now let's scroll down also you can change these questions and answers depending on this particular service if you want also let's say if you want to change the background image just click over here go under the style tab from here let's change the background so I'm selecting this image click on insert media so this is now your unique web design single page and again don't forget to click on this green update button to save your work so now we only have our contact page and block page remaining we are progressing really great I hope you are enjoying it as well so let's now move forward I will be creating our contact page so first of all I just want to go back to our WordPress dashboard now from here go to all pages and here is our contact page click on edit then click on edit with Elementor now first like other pages I just wanna import the banner area so click on the folder icon from under my templates let's just import this Banner area click on apply and here of course I wanna change it so I just want it to say contact and also I'm changing this paragraph with this text and the button text I just wanted to say let's work together like this and of course I want to change the background image from here so let's replace the image go to upload files select files let's select it and open then insert it here we go and then I wanna create our main form area so let's click on this plus icon and here I'm taking these two container structure and from here open the items first of all I'm making the Align items to centered then to Make spaces go under Advanced tab from here um first adding 68 pixel of padding now unlink it at the top I just want to add 100 pixel of padding now let's add background image with it granted style tab from here let's select the image so for this area I'm selecting this image click on insert media now also I'm making the position to sender sender size to cover all right now let's select this lift container and here just go under Advanced tab first of all I wanna add some padding at the right side here so to do it first unlink it and this time I want to set the padding in percentage and on the right side I'm giving 15 percent of padding now here within this place click on this plus icon and here I'm searching for icon box here we go just drag it inside here first let's change this icon so here I'm searching for map icon or map pin icon this one now click insert and here the title I just wanted to say address so you can provide your physical address here if you want and I'm providing the address here then from icon position I'm making it to left aligned all right let's now do some starting with it go under style tab from here first the icons primary color I wanna make it as our blue light color that we have set as our Global blue light color so I'm selecting that and here I'm making the size to 40. now let's open the content and here I'm making the vertical alignment to Middle let's said that title is spacing to zero so you see they are now more closer than here color let's set the global dark blue color and also I'm selecting our favorite Fida sense font here we go we can make the font size to 22 pixel and here front to it let's make it 500 then we can just go to Advanced tab here let's make the padding 220 pixel so here we have got some breathing space here now I wanna make its background color to white color and to do it from here let's open the background and from here I'm adding the background color from this Color Picker to white color also I wanna add some box Shadow with it so to do it from here open the border and you know from here I can easily add the Box Shadow so here first I'm making the transparency to 0.2 then here here I'm making the blur value to 20 and here I'm making this spread value to negative 10. all right so if I now minimize it we can see it properly yep it looks great now you know we can just simply duplicate this icon box couple more times so I'm duplicating it let's just duplicate it one more time and now I just wanna replace this with my email so instead of this icon here I'm searching for envelope icon so let's select this one click on insert now here instead of address I just want it to say email and here I'm providing my email address that's gmf digital gmail.com then with this last option select it and here I wanna provide my phone number so here I'm typing phone and here I'm giving my phone number now within this right container I will be adding the contact form but I'm doing it a few minutes later just before that I wanna add Google Map underneath so just stay with me let's scroll down here I wanna add our Google map then I will come back to this form so here to add the Google Map click on this plus icon this time let's select this column directed container and here this one I'm making its content width to full width now within this container click on this plus icon and here I'm dragging this Google Maps widget here and you know you can just put your location here so the pin will be put on your location and also if you wanna make it more zoom in you can increase the zoom in number so let's say if you push here 15 you see now it's zoom in more but I don't want that much zoom on just making it 12 to me it looks decent and now also if you want you can control the height from here like you see the height is increasing but I think here 400 pixel is enough oops not 4009 it's 400 pixel so it's looking decent now I want to show another thing like if I now go and rare style tab from here you can also add CSS fillers like here if you reduce the saturation or if you want you can increase the saturation also you can play with the U value like this but I wanna keep the hero 0 the way it was oops the way it was and from here the saturation I just wanna minimize it to 30 or 35 okay let's just keep it 30. all right now I want to create our contact form and you may remember we have installed a plugin that says metform so basically we will be creating our contact form by using that myth form widget okay so within this right container I will be using that mid form so to add it click on this plus icon and from here I'm searching for the mid form widget here you go it says metform let's just drag it within the right container here now from left we need to create our form first so to do it click on edit form and here you see you can select any of these pre-built templates but I don't wanna do that because I wanna show you everything from scratch so I'm selecting this empty form by the way you can also give your form a name so here I'm naming it contact Form 1 then to edit the form let's click on edit form and you see there is a pop-up has opened and within this pop-up on the left have a look first all you can see like here's the submit button text email number all these are basically the form inputs so by using this we will be creating our Awesome form okay but before that I just wanna make the layout so first click on this plus icon and here I'm taking this column directed container so let's select it and first of all you know I always love to add some breathing space within a container so select the container go under Advanced tab here I'm adding 10 pixel of padding all right now let's click on this plus icon and here first I wanna add the text input field so from here I'm dragging this text input field here basically it would be the field for name I don't wanna create two fields for first name and last name I just wanna create a simple input field that says maybe your name so first of all here I don't wanna display this label so I'm turning off the label from here and then I highly recommend you to not to change this name from here and then from here I wanna change the placeholder text so instead of text I want it to say your name then open the settings because I wanna make this field required so if anyone don't fill up this field they cannot submit the form that's why I'm checking this record option let's turn it on and let's say if anyone doesn't fill up this they will see this warning that will say them this field is required but if you want to change it to any other text you can do that but this field is required makes more sense so I wanna keep this default text now let's do a bit of styling with it secondary style tab from here layer let's add some padding I'm adding 15 pixel of padding but let's unlink it on the left and right I want to add more so on the left and right I'm adding 20 pixel of padding then from here the typography I wanna set it to our favorite feeder sense so here I'm selecting field of sense also make the font wet to 600 actually it's already 600 here and I wanna do the same with the placeholder because this is basically the settings for the input field like when I will start writing here for example here I'm writing gym file you see this style is coming from basically this place but if I remove the text oops if I remove the text the text you are seeing here this is basically the placeholder so that style is basically coming from this placeholder so here I also wanna change its color to Hash 9C 9C 9C so it's a bit visible right now and then from the typography also I wanna set its font family to feed a sense all right right after that I wanna add another fill so click on this Rubik's Cube icon here I want to add email field okay so here let's drag this email field underneath the name field here and I want to do the same thing with this just turn off the label from here within the placeholder I want it to say your email and also I wanna make it required from the settings and let's do the same styling that we have done with the name field so I don't want to make a board I'm doing it really quickly and I'm fast forwarding the video all right now underneath the email field I wanna add text area basically that would be the message area so here click on the Rubik's Cube icon and here I'm searching for text area here we go just drag this text area underneath the email here I also wanna turn off the label from this place and here instead of text area I want it to say your message also I wanna set up the required field to turn on now let's go under the style tab here let's say if you wanna increase its height you can do that from here like this but I wanna keep the default 150 then you can play with its padding but here on the left and right I just wanna make the padding to 25 and like the name and email field I also wanna change the font family to feed a sense let's do the same with the placeholder here I'm changing it to feed uh sense and I'm making the play solar color to Hash 9C 9c9c cool now to save this work you can click here on this update button okay so we have created all the input Fields but now we need to create the most important thing that is the submit button because if you don't have a submit button with any form you cannot send that form okay so to add the button just click on the Rubik's Cube icon and here the first widget is the submit button so just drag it underneath the message input here and I just wanna make the alignment to left let's change the label instead of submit button I wanted to say submit now then let's go under the style tab from here I'm adding the padding so first let's make everything 20 okay now let's unlink it because on the left and right I'm adding 40 pixel of padding then the buttons background type I'm selecting the gradient and from here you know the first color I'm setting the dark blue Global dark blue and then the second color I'm setting the global blue light color and then I'm making the angle to 90 degree like this then here you know we can add more border radius so to do it let's open the border and here I'm adding border radius maybe 20 or let's add more 40 yep it matches with other buttons of this website now to save it click on update here and now I just wanna show you first some basic settings so from here now click on form settings and here is the general setting let's say if you wanna change your form title you can change that from here and here is the success message so whenever anyone fill up that form and hit on the submit Now button they can see this message immediately like it will say thank you from submitted successfully and then I wanna keep all these settings default so from here click on Save changes and now click on update and close and yep we can see our beautiful contact from here let's now click on this green update button to save this whole page now I just wanna check if this form is working or not so to do it let's now click here on disable icon to preview our page on real browser let's now scroll down here we can see the form now let's say I'm just a visitor of this website so here I want to fill up this form so my name is John Doe my email address is John at gmail.com and let's say he write a sweet and simple message I need a website then please reply back to me then if Mr John Doe clicks on submit Now button it says thank you form submitted successfully so here the visitor Mr John Doe has sent that message he filled up this contact form now as the admin of this website if we now go to our WordPress dashboard now have a look from left if we hover over on metform from there let's go to entries I'm not sure why it took me to the settings just to make sure from made from you have clicked on entries I don't know probably it's mandatory to fill up all these tips so just scroll down from here click on Next Step click on next step I don't wanna install any of this so just click on Next Step also scroll down click on next is tape and now it says congratulations click on Save changes so actually it forced me to fill up those steps okay I have no problem because this is a free tool okay now from under mid firms let's click on entries and yep we can see here one entry it says entry 161 actually this one six one number is automatically generated but now if I want to see this entry I can just click here on view but also you can see this entry is coming from contact Form 1 the form we have just created so let's say if you create multiple form on different pages you can also identify this entry is coming from which form okay so now to view the entry click on view and here we can see Mr John Doe sent this and this is his email address also he says I need a website please reply back to me so if I now want to reply back to him I can just simply email back to this email address so whenever anyone fill up this contact form and click on submit Now button that will be directly going inside of your mid form entries and you can just open up the entry and see all the details from this place but let's say if you wanna also get the notification on your email like Mr John Doe has sent an email via your website's contact form you can also do that so to enable your email confirmation I mean to enable your email notification you can do some settings so I'm again going inside the contact page oops this is the preview page let's go inside element page builder of the contact page from here make sure you have selected this contact form from left click on edit form and here yep I want to work with the contact form one that we have just created click on edit form now let's click on form settings and this time from Top click on notification now from under notification first here it says notification mail to admin so whenever anyone fill up this contact form Fields you will immediately get an email into your email address that someone has sent an email through your website so to enable that option from here first of all turn on this notification mail to admin option and here email subject so you can put here anything but here I want it to say sum 1 contacted on oops on G Max form because my website name is g mix form so on my email notification I can easily understand this form is I mean this email is coming from my website's contact form only I can say it so no problem no matter which thing you put here then email to this is the email address where you want to receive that notification so here I'm putting my email address then here is the email from here I also want to use my email address so I'm just copying this email address and I'm pasting it here then this one is important it says email reply to here you need to put a dynamic data basically this will be your customers email address not customers I mean the person who have sent you the email via your contact form it would be his email address and to grab that email address first you need to write here a square bracket and in that within that you need to write m f Dash e mail I'm telling you shortly why you need to write exactly this but for now just stay with me right here MF Dash email and you need to keep that within a square bracket and make sure there is no Gap anywhere then we can keep this admin node to empty now let's click on Save changes now you may think why I have used that image Dash email that particular keyword because if I now click on your email field here have a look within this name field this name field name is MF Dash email if you change it to any other thing then you need to put that inside of that field so I recommend you not to change this just keep it the way it is I'm just explaining why we have used this particular keyword or party cooler MF Dash email word basically we need to keep this name let's open the form settings from the notification you see we have used this MF email but within this square bracket Okay click on Save changes and now from top right corner click on update and close then to save our work click on this green update button let's Now preview our page now let's say from our contact page here Mr Brown Fox came so here his first name is brown fox his email address is brown gmail.com and his message is um Brown and I need some SEO help then if Mr Brown Fox clicks on the submit Now button it says thank you form submitted successfully so if we now go to our Gmail inbox you see I have received an email and it says someone contacted on GMX form let's now open this email actually here is showing this error because you know I have used this fake Gmail address okay just ignore it for now and have a look here it says brown fox sent you the email and here is Mr brown fox access email address and The Message is I'm Brown and I need some SEO help so if you want you can directly reply him from here just click on reply you see you are now writing this email to Brown gmail.com so from the email address this email came to you you are basically replying to him so it's simple like that let's close it also if we now go to our WordPress dashboard from here let's click on entries again we can see here we have got a new entry and if we now click on view we can see here Mr Brown Fox sent us this information here is his email address here is the main message I hope now it makes clear sense so we are also done with our contact page but now I just need to make sure it's looking great on mobile and tablet device so to check its responsiveness from here click on the the responsive mode first go to tablet device on the tablet device everything is looking great let's now go to the mobile device so here on the mobile device let's now select this container go under its Advanced tab you know this is pretty basic we are doing it for the very beginning of this tutorial just unlink it on the left and right I'm making it to 30 and then you may remember with this container I have added some space I mean added some padding on the right side so here I'm making it to zero so right now our contact page is looking great all these sections are looking great so let's now click on this x to get out from the responsive View and don't forget to click on this green update button to save your work alright so we are almost done with our website now I will of course show you how you can create your logo how to work with these menus how you can change the footage styling but before that I want to show you how you can create a blog post how you can customize the blog post design or how how you can design single blog post so to do it first let's go inside our WordPress dashboard from here from the left menus let's now hover over on posts from there let's go to all posts here we can see a hello world post basically it came with default WordPress installation but I no longer need this just click on this trash to delete it and also let's close this notification okay so here I wanna create a new blog post so to create a new blog post you can just click here on add new and similar like the pages first of all you need to add a block title so here I'm pasting some text so our block title is why should you focus on speeding up WordPress and now within this block you will be writing your blog post so here within this block actually you can write anything let's say I'm writing here WordPress speed is one of the core features blah blah blah this is just an example right okay so my focus was here like I said you can make it anything let's say if you wanna make anything bold you just need to select that specific word and from Top you can make it bold let's say if you wanna make anything italic then you can just select it and from Top click on this italic icon you see it's instantly italic and then let's say if you want to make any word or any sentence link to any other website then let's say I just wanna link this what surface word to any other website so from here click on this link icon and you can put your url here so it's basically simple like that so here I'm writing my website's address that's the gym for the digital.com you see it's instantly linked with Jim for the digital.com so here instead of this dummy text I wanna add some real text to look it more like a real blog post so here I'm pasting some text and you see if you wanna make anything bold or italic you can just select that and you can do that now here I wanna show you another thing like just after this last line hit enter and here for example if you want to add any image then you can do that very easily just have a look here on the right side you can see a plus icon click there and you can see there are plenty of widgets and we can see the basic widgets here like Gallery list or image if you click on browse all you can see more widgets here but I don't want it here just close it I just wanna show you the basics how you can do it very quickly so let's click on this plus icon and from here I'm choosing the image now to choose the image click on upload now from inside this block folder I wanna select this image click on open you see we can see the image here now let's see if you wanna make the image size bigger or smaller you can just drag its corner from here you see they are becoming smaller and bigger instantly from here all right now let's say underneath this image if you wanna put more text just hit enter and here again I'm just pasting some text and then let's say underneath this if you want to add any heading just hit in there couple more time and here I want to add a heading so from here click on this plus icon and I'm selecting heading and I wanted to say for example Kingdom now from here also you can specify which heading you wanna make it like H3 or H4 I just wanna make it H3 then right after this hit enter Because I want to add more paragraphs like this all right so it's super basic like if you can write anything inside Google doc you can work within this WordPress blog editor it's it's really super easy and now I wanna focus on other things like here on the right side make sure you have clicked on the post not on this blog so make sure you have clicked on this post because from here you can add more information with this blog post so from here first of all let's open the category by default we can see the uncategorized category but I don't want to use it so if you want to add any new category from here click on add new category so I wanna create a new category that would be WordPress category now click on add new category also you can add multiple categories within a single post I'm writing here SEO click on add new category in this way you can add as many category as possible and you can write several blog posts under the same category so people can understand which post is is under which category you know we did blog posts every day so I don't need to explain it more then let's scroll down from here open the text if you want you can also include tags like here I'm writing a speed of T misation and if you want to add more tags oops I have done a lot of typos here all right so if you want to add more text you just need to put comma to separate them with each other here I'm writing for example WP business and put a comma like this and then the next important thing is let's scroll down from right open the featured image so basically it would be your blogs featured image or thumbnail image so let's select it go to upload files select files and here I'm selecting this image click on open and then click on set featured image now if you want to publish this blog post from the top right corner click on publish now click on publish one more time now if you wanna see the blog post from here click on view post I'm opening it from a new tab so here we can see our blog post you see here at the top we can see the featured image of the blog that we have just set then if you scroll down here we can see our blog title we can see here our categories it's SEO and WordPress categories post here we can see it says by gym first so this is the author name we can see the block details here here is the Big Image so basically within the left side we can see our whole blog post and also underneath here we can see the comment box actually we are now logged in that's why we can only see the text area but if you are logged out you can see the other fields like your name email and the text area field all right and if we scroll up on the right side we can see some other widgets like search options recent posts recent comments archives categories but I don't want to keep all of these also I wanna show you some customization options that you can do with your blog post so if you want to customize these single blog post page then you can customize it from this black top bar you can just click here on customize or also you can go to customize from inside WordPress dashboard from the left bar if you just hover over on appearance from there you can also go to customize but at this moment let's go to the live preview page of this blog let's now click on customize from top so basically that will take you to the theme customizer because all these themes options are coming from theme okay so like I said I wanted to customize this single blog post page and to do it from the left let's now click on blog and first I want to customize our single block post so click on single post then from here you can change the content layout this is the default layout what we can see here but let's say if you don't want this sidebar on the right side you can choose this layout it says full width contains so if I select this or let's select this one I'm selecting it actually we can still see the sidebar but this left bar I mean this left side is more stretched so if you don't want this sidebar on the right side you need to do the settings from here from this sidebar layout you can select this no sidebar layout now have a look there is no sidebar on the right side so people can read the blog post throughout this whole website but I don't want that I'm making the default sidebar layout also from here I'm making the container layout to default because I would love to keep this sidebar but I wanna use this sidebar in different purpose I'm showing you that shortly but before that let's just have a look on the theme options like here if I scroll down you see you can turn on or off all these options particularly like here you see this is our featured image but let's say on the single block post page if you don't want these featured image to be shown you can just click here on this eyeball can't just turn it off you see there is no featured image on this single blog post page but I want it to appear here so I'm turning it off and here we can see it again so in the same way if you want to turn on or off this title you can do that from here if you want to turn on or off all other meta informations like comment category author name you can turn on or off all this from this place and when you are happy with your work from the top left corner click on this publish to save this theme customizer settings okay now you know how to customize your single blog post page but now I also want to show you how you can customize the sidebar of this page so to do it from Top let's go back go back one more time now from here let's go inside the sidebar then globally if you don't want the sidebar bar up here here you can just disable the sidebar by clicking hello sidebar but I wanna keep this sidebar so I'm just clicking here on this pencil icon that will take us to the main sidebar widgets area from here let's click on got it so have a look here everything you can see on the left those are basically are the sidebar widgets so if I delete anything from the left side they will also be deleted from here now from here I don't want this search bar so from Top let's select it and click on this vertical three dots from here I'm removing the search I wanna keep this recent posts but from here I want to delete this recent comments so from here select it and from this vertical dots I'm just clicking on remove heading also this comments just click here and I'm removing the latest comments also I wanna delete this archives heading so let's delete it also I'm deleting the main content I mean main archives so click here on remove archives on the sidebar I just want to keep the recent posts and categories but here at the very top I wanna also add um image and by clicking on that image people can go any other website so let's say if you wanna promote any product or if you have your own product or if you have your own service you can also put that link here on the right side So within your own blog post you can promote your product or your affiliate product you know so to do it let's first click on this plus icon to add a new blog and here I wanna add uh image block so I'm selecting image let's now upload the image click here on upload I'm selecting this image click on open so here we can see the image but I wanna drag this image to the top of the sidebar so we can actually drag it just from here so let's drag it to the very top of the sidebar so we can see this image here now have a look if you click on this image from Top let's click on this insert link icon and here you can put any website URL so for example I sell Elementor templates on my camera shop so here I'm just pasting my Gambler profile link then hit enter so now okay instead of hitting it that just click here on apply so now if anyone clicks on this image that will take them to my camera shop so they can purchase my product now to save the sidebar click on this publish button and then click on this X so now you know how to write a blog post and how to customize that blog post then I wanna show you how to customize the main block page but before that we need to add more blog posts into our website so let's now go to the dashboard of our website because if we now go to posts to all posts we can only see one blog post here so I just wanna add a couple more blog posts here and I don't wanna make a board so I'm adding more blog posts very fast and coming back to you so I have treated all this blog post if I now go to pages to all pages and here is our Blog Page let's now view the page so I'm opening it from a new tab so this is our blog page here we can see all the except of the blog page this is the thumbnail or featured image of that blog this is the blog title and here you can see the blog posts category here is the author name here's the first few lines and after clicking on read mode that will take you to the single blog post page here we can see more blog posts one after another like this now let's say if you wanna customize this main blog post page not blog post page I mean if you want to customize this main block page then from Top let's now click on customize now from left from the theme customizer click on blog and then click on blog archive so similar like the single blog post page if you want you can change the container layout you can change the sidebar layout from here also from this place like this post structures on your main block page if you wanna hide the featured image you can do that or if you want to hide that title you can do that from here so I would say it's similar like the single blog post page you will find all these turn on or off option at the left side all right now I wanna show you another thing like if I go to a single blog post and let's say if you wanna change the font family of this blog post or if you want to change the title of this blog post how can I do that so basically these are not coming from Elementor like I said these are coming from your theme so if you wanna change the typography the font size you need to do that from inside this theme customizer and to work with this typography from left let's scroll up and go back let's now go back again now from here let's go inside Global and go inside typography now you see you can set all the global typography from this place for example if you wanna change the global body font you can do that from here like from this place if I make the global body fund to feed a sense this one let's select it you see all these body funds are changed to fira sense font then also if you want you can change the font width from here but I like the default one also let's say if you want to change the font size you can do that from this place so when you are done with these settings like always you can just click on this publish button to save your work now I also wanna show you some other things like how you can work with this header how you can change your logo how to work with this menu or how you can create a new menu for you so first let's go back go back one more time this is our main theme customizer first I wanna show you how you can put your logo here on the left side so to do it from here let's click on header builder then let's click on site title and logo and here you need to upload your logo if you already have your logo you can just upload your logo in this place but now I also want to show you if you don't have your logo how you can create your logo for free just by using an online tool so to create your logo you can just go to logomaker.com it's basically logo maker without the e so from here basically I just wanna use a very simplistic logo that will just represent my business name so I just wanna use that text so from left let's click on T now within this text field as my business name is GMX here so here I'm typing GMX now you can change this font family from here so there are different categories like designer Peaks or fancy and cursive if I set fancy and cash save then from here you can select multiple font type like this one but I just wanna take simple and modern and from here I'm selecting actually I'm searching for Mont setar so here we go I'm selecting monsirath then I wanna make it bold so to do it from here click on Styles and let's make it bold by clicking on this B now let's say if you wanna make it more bigger or if you wanna crop it you can crop it just by dragging its corner like this then you can make it bigger or smaller just by dragging its corner like this okay now I'm moving it to the center of this page here but before that I also Wanna Make It italic so from here let's make it italic all right then I just wanna duplicate it so right click over here and click on duplicate so here here from the duplicated one I just wanna keep the a keys so I'm just removing this first gym from here and from the first text I just want to keep the gym so I'm removing this AKs from here let's now adjust it just by dragging its Corner let's move it to the left oops the first one let's move it to the left in this place and then I just wanna put it after the m in this place here the reason behind it the first person the gym I want to make its color different than this akes so here first I'm selecting this gym word now you can change its color by using this color wheel from here also you can put any color code here like here I'm typing 0 0 4 BB e that's basically our website default dark blue color and then with the second person I want to use our light blue color the code is 0 1 a 3 F 8. all right so we are done with our logo now if you want you can just select them together just hovering over them like this I mean just dragging over them together like this then you can move it together like this or you can make it more bigger in this way alright so when you are happy with it to save this logo from the right top Corner click on the save logo icon now if you want to download a very high resolution file of this logo then you can click here on download your files and then you need to pay them a few bucks but I don't wanna use that I just wanna download it for free so I'm clicking here on download low resolution PNG file because we will be using it only on our website so I'm happy with this file just click here download low resolution PNG file now click on I accept and acknowledge now click on download free low resolution file so it's downloaded on my computer all right let's now go back inside our theme customizer and from here like I said we can upload our logo so let's click on select logo let's now upload file click on select file so we have just created this logo selected and click on open then click on select I don't want to crop the logo so here I'm clicking on skip cropping and here we go but I wanna reduce the font size so from here logo width I'm making it 160 pixel and here with the logo we can also see the site title but I don't want that so from here let's scroll down here you see it says display site title I'm just hiding it sometimes you may see it's hidden on desktop but on the tablet and mobile you can also see the site title so I just wanna double check it let's go to the tablet device by clicking here yep we can see the site title on the tablet device so I also wanna turn off it from here so just turn it off let's go to the mobile device yep we can see the site title here and it's looking super weird so from here I'm just disabling it so there is no site title on the mobile device also on the tablet device and there is no site title on the desktop device now I wanna upload the Fab icon of our website so to do it let's now go back go back one more time now from the main menu let's click on site identity now from here click on select site icon basically Fab icon is the little tiny icon that appears at the browser top in this place like if I go to Gmail digital.com here you can see a reddish tiny icon that's basically Fab icon of my website so here I will be uploading another 5X fun but always remember you need to upload a square shape five icon that will look great on the browser top in this place so here click on upload file go to select files here I'm selecting this Square shaped Fab icon click on open click on select and I don't want to crop it so I'm clicking on skip cropping and here we go at the top we can see the beautiful tiny Fab icon so for the moment let's click on this publish button to save our work that we have just done now I want to show you how to create a menu and how to design that menu by yourself so again from the theme customizer let's go back this is the main menu I mean this is the theme customizers main menu from there to create a menu click here on menus now click on create new menu and then you need to give your menu a name and I just wanna name it main menu you can give any name here and then this menu locations is very important make double sure you have selected both of these these primary menu also this off canvas menu because if you don't select this off canvas menu your this menu won't be shown on your mobile devices now click on next now have a look at the right side we cannot see anything because right now our main menu is empty we need to add items into this menu two add menu items click on ADD items so here within the menu if you want you can add any of the pages like here I'm adding first our home page then here I'm adding our about page I'm adding the services page and right after our services page I wanna add our single Services page like UI ux design then the web design page and then I'm adding our Blog Page and then I'm adding our contact page also you can reorder them from here like if I want to put the contact before Blog then I just simply need to drag it at the top of the blog here so you see how easily we can rearrange it but actually I wanna make the contact at the very bottom right after the blog here okay so in this way you can add your pages into your menu let's say if you want to add any external link inside the menu you can also do that and to do it let's just minimize the pages let's open the custom link so here for example here I'm typing https colon forward slash forward slash gym for head digital.com so it would be the URL and Link text only to give you an example I'm just titling it portfolio and let's click on add to menu and let's now minimize it so we can see the menu properly here you see if now anyone clicks on about that will take them to the about page if anyone clicks on the web design that will take them to the single Web Design Services page but if anyone now clicks on this portfolio that will take them to the gymfath digital.com that is other website but actually I don't want that so from here I want to delete this portfolio link so just click on this down Chevron icon and from here I'm clicking on remove you see that's instantly gone and then I want to show you another thing like this home about Services I want to keep them like this but this UI ux design and web design these are basically sub Services that's why I wanna make them as a sub menu of this Services menu item and just have a look how easily we can do it all you need to do you just need to drag it a bit right side like this also I wanna make the web design as Sub menu so I'm dragging it to the right like oops just like this so right now ey ux design and web design are the sub menus of main Services item so here on the right side you see with the services we can see a down arrow and if we hover over on that we can see the UI ux design and web design Pages link it's called drop down menu and we have created that very easily just by using this drag and drop options alright now click on publish to save this work and now I wanna change their fonts so to work with it let's just go back go back one more time now let's go inside header Builder and here we can see the primary menu let's now go inside it and now from here click on design so let's say if you wanna add any hover effect with this menu you can do that from here so many style I'm adding underline so if I now hover over on any mini items you see see there is a little underline at the bottom here then if you want you can add borders from here but I don't need that actually I just wanna change the color of these menu items so to do it let's just scroll down from here you see this is the text color option so from here if I hover over on it you see this is the normal color so the normal color I Wanna Make It Black we can select the color from the Color Picker and then the Hoover color this one and this is the active color so the hover color let's select the Color Picker from here we need to click on this detail inputs icon here I'm giving the color code 0 0 4 BBE also I'm just copying this color code let's click on this active color icon and here I'm also pasting the same color code that's basically our website's dark blue color code now click outside so initially we can see it's black but if I now hover over on it we can see our Blended blue color here now let's say if you want to change the font family of these menu items you can do that from here so just click here on menu font and of course I wanna set it as our feeder font so let's select feeder sense or we can select Fida sense condensed then if you want to increase the font size you can do that from here so I'm making it 16 pixel or 17 okay let's just keep it 16 and then I just want to make them a little bit Bolder so from here I'm making it to medium 500 right now they are looking perfect on the hover their color is changing also these Sub menu items color is also changing on Hover now let's also check this menu is looking perfectly fine on tablet and mobile device by the way we can hide this header Builder from here so I'm clicking on height so we can get the full fill how this menu is looking on the Real Page okay so to check its responsiveness from here click on this tablet icon on the tablet icon it's changing into a hamburger icon so from here if I click on this hamburger it opens up our menu items let's close it also on the mobile device it's working perfectly cool let's go back to desktop device and from here if I click on home that will take us to the home page of our website and now the very last thing I just want to customize the footer of our website so let's scroll down to the footer this is our footer so first of all I just wanna change the background color of this folder so click on this blue pencil icon then from left go to design then this back ground color open up this Color Picker let's scroll down I wanna make it a dark background color so from here I'm putting a color code that's zero eight zero a two D like this all right then I also wanna change the text colors so from here I'm clicking on this pencil icon let's now go to design and from here I'm changing the text color to white color now let's go under General because I wanna change this text so first it says copyright and then copy it within this square bracket actually it will make the year Dynamic actually not this one this copyright will make this copyright symbol and then after that you see it says current year so every year you don't need to update the year in 2022 it will show 2022 on 2025 it will be updated automatically then here the site title name it's dynamically showing the site title that's a gym for the digital I have set but if you want you can remove it and you can write here any other thing and then I don't want this text powered by Astra theme or like this I just wanna remove it and I wanna write here all rights reserved now to save this work click on this publish button then to go back to our WordPress dashboard click on this X from the left top corner all right so finally I just wanna preview all the pages and I don't want to preview it from this browser I mean here we are logged in so to get the real fill I wanna check it from a new incognito window where we are not logged in so from here I'm just copying our website URL now here I'm opening up a new window now let's preview our website from here so here we can see our beautiful home page all the sections are looking great all the animations are working perfectly I personally like this animated icons very much and here we can see these filterable Gallery is working perfectly then here we have got our beautiful testimonial area and here is our Global footer alright let's now scroll to the top now go to our about page here is our beautiful banner again let's scroll down we have got our team members section and then here is some fun facts about ourself and here is the testimonial that we have taken from the previous page all right let's now go to the services page the services page is looking great we can see the services actually we have taken them from the home page here we can see the portfolios and here we can see our beautiful pricing table let's now go to any single Services page so if I go to ey ux design we can see everything is showing perfectly here here is some fact about this project we know how to embed these videos and we also know how to create this type of FAQ section all right let's now go to our blog page so we now know how to create Blog Page and customize it like this and then if we click on any single blog post we can see the block featured image the block details all other inner images also we know how you can promote our own product or any affiliate product from the sidebar and then finally if we go to our contact page we have created this beautiful contact page and now you know how to create this fully working contact form by yourself and you can check the contact I mean you can check all the inputs from inside your WordPress dashboard also you will get the notification on your email address here you have got our beautiful map and here is our Global footer cool so you have successfully made the whole website now you can literally create any type of design you can imagine by leveraging this scale feel free to let me know your opinion about this tutorial in the comment section please give this video a big thumbs up and feel free to share it on social media once again thank you so much for watching this full tutorial I will see you in the next video for now bye bye

Channel: Jim Fahad Digital

Views: 433,054

Keywords: How To Make A Digital Agency Website From Scratch, how to start a digital marketing agency, digital marketing agency website wordpress, digital marketing agency website, create a digital marketing agency website, digital agency website, Agency website using Elementor, jim fahad digital, wordpress tutorial, elementor tutorial, elementor, digital marketing agency, Design Agency Website wordpress, WordPress Elementor, WordPress, WordPress 2023, Elementor 2023, Elementor Tutorial 2023

Id: 1sDJAIGVwV8

Length: 259min 17sec (15557 seconds)

Published: Tue Aug 09 2022