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

in this tutorial I will show you how to make a digital marketing agency website really fast and to create the website you don't need any kind of coding knowledge or any design knowledge or any per experience I know digital marketing agency terms kind of bored so let me just give you some idea about what type of website you can create by following this tutorial you can create a web design agency website easier company website Facebook ads agency website Consulting Business website logo designer or graphic designer website Quantum writing Service website freelancer portfolio site or any kind of Business website and in this tutorial I'll be providing all necessary resources for completely free so you can just create your amazing website really really fast now let me introduce you to myself first myself is xparazi I'm a professional web developer and designer I have done hundreds of web development projects on very competitive Marketplace like upwork and fiber I have been providing related projects to my clients regularly in this tutorial I will show you the exact way how I have been creating my clients website so you are 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 things I want from you other than that video is completely free for you let's now have a look at what we're going to make in this tutorial first I'll show you that like how we can design this type of beautiful hair and in here in this area everything is editable like we can change here the logo maneuver and menu items the number after this will Design here this beautiful hero section and the interesting thing is like in hero section everything is editable for example if you like to change here this Facebook logo and background color you can do it if you want to change here this image and if you want to put your own image then you can easily do it and if you want to change this box color and background color a logo you can definitely do it also you can change everything in here like the background color and this box and these logos everything you can customize and if you look at the left side then these all the image everything is customizable you know you can put your own text In Here Also I will show you how you can design this type of beautiful buttons and how you can put the video on here and I will show you that like how we can change these images and after this we'll design these beautiful sections and everything is editable here you can change the content you can change the icon you can also change the color and the next we'll design here this about a section and in here everything is going to be editable like this background color these boxes and the images everything is editable then we'll design our services section and you can put here your own Services okay and I will share with you some Shortcut techniques if you follow this then you can change this icon and the images very quickly and it's gonna be 100 perfect after this we'll design here this pricing section and it's quite very simple I will show you that like how we can add in new features or you can delete any features from here and I will show you that like how you can connect this button into an a specific page like contact us or any other page and also how you can change this price or this icon and content after this in this section you can put here your completed projects with images so I will show you that how we can do it after these in here have achievement section and in here this section everything is editable that means we can edit everything in here like color icon text everything we can edit and here is our client's logo that is hundred percent editable here's the testimonial section you can put here your own clients pictures with their name with their position with their beautiful testimonial and after this we have a Blog section and you can change the style if you don't like this style right now you can put a different style by simply one click simple one click you can change the style so I will show you everything and the last thing is like our footer so so I will show you that like how we can change this content you can put your own content how you can change these you know Pages link and Pages name him and the interesting things like how we can set up this newsletter thing using MailChimp and how we can change these you know these copyright things and you can put your own also like social media everything I will explain you step by step now let's have a look about our about us page so this is our beautiful about us page that you can see here is some key features of ours and then why they choose us so everything is editable in here so in this page I will show you that how you can change this border color that you can see in here also like this icon and background all of this thing and I will show you that like how we can change the CTA how we can change the background image like this content and button and after these I will show you that like how we can put your team members images and social media handles and how you can change their name now let's move into our project page and here you can add your all projects that you have finished in before so you can put your all projects in here so I will show you that like how you can do it so where is our blog page so I will show you that like how we can customize our Blog Page you know like if you don't like this style then how you can put a different style by simply in one click and if you click on here these posts then you can read in details and definitely I will show you that how we can customize here this sidebar and how you can put your own advertisement and here I mean how you can change everything like background image content and numbers everything you can change and then is our services page here as you can see our all services in here and here is like if you want to make Apartments if anyone want to take appointments then they can do it very easily and here's our process section and and the testimonials section and here is our FAQ section and I will show you that how you can add a new FAQ how you can customize it all over the thing I will explain you and last and important things like contact us page so I'll show you that like how you can design this type of beautiful contact as page with our you know like this type of beautiful form when someone submit this form instantly you will get notification I mean when someone your clients will you know submit this form you will get it immediately and how you can change here these options like this locations and phone number social media and the important things about like Google maps location also website would be 100 responsive for all mobiles and tablet device can you believe we'll be doing all there just by drag and drop and by using 3D sources alright we'll be creating our beautiful website in easy for a step first I will show you how to get your own domain name and web hosting I'll also provide you a 60 discount link then how to install WordPress then how to install free theme and free page builder finally we'll start customizing our amazing website also I'll be adding a timestamp in the description so you can always jump into the necessary Port you need now let's start with this tip number one which is get your own domain name and web hosting so first of all what is domain name domain is basically your website address like Facebook has facebook.com Amazon has amazon.com we have a gmail.com similarly for your website you need an address that will be your websitename.com and what is about web hosting web hosting is the storage space for your website all the images text you will have in your website all this storage on your own web hosting is you owning your own web hosting so there would not be any limit you can run ads you can upload any ticks or images you can upload any theme or Plugin you want basically you are the in charge of your own website now how to get your own domain name and web hosting so first just click on the very first thing in the description below this video or you can go with Jim fahad.com web host and this will take you in a special discount Bluehost page so why Bluehost in my opinion Bluehost is the best web hosting provider I am a web developer I tried so many other web hosting companies I don't mention their name but I personally ended up with Bluehost so here click on get started now here you can see there are different plans the main difference between them with the basic plan you can only host one website you can choose plus or twice plus if you want to host unlimited website with the choice plan you will additionally get a domain privacy and Coast Guard if you take the basic plan then you will get 10 GB storage then 20 GB with the plus and 40 GB with the choice plan and with all of this plan you will get a free SSL certificate that means your website will be encrypted and super secure you will get unmeted bandwidth unlimited subdomain unlimited branded emails account with all of these three plants if you're just starting out and want to host only one website then I recommend you to starting with this basic plan then in future you can upgrade it anytime now let's click on the basic plan now we'll select our domain name if you already have a domain name that you want to use then you can go ahead here on the right side but for now I'm going to get a new one now here try something like apple.com it's saying that the domain apple.com cannot be used on Bluehost please try a different name it should be because it cannot take that we all know that Apple's official website so we'll be typing here our own domain name also if you click on here this right side then it will get to see dot com.net.org I always recommend to go with.com website because it looks more professional and legit so I'm gonna type here let's say like um tutorialic.com you'll put your name or your brand name here and now click on next it says that teacherallique.com is available that's awesome and in here we need to put our account information I'm putting mine in here really fast by the way if you don't have a business just keep this field blank or you can put your full name most important things about the email address make sure you put the correct email address because after completing the purchase a receipt will send to that email address so make sure you put your based email address in here all right scroll down having domain privacy is good for now I'm deselecting it we can turn it on anytime later I'm also deselecting all honestly speaking I don't need them all all right now you can see the price is only 35.40 for the full year including the domain name that's awesome right and I'm legally obligated to tell you that this is an affiliate link so we'll get a little bit credit off but it does save you a tons of money and it helps fund these free videos tutorial that we are doing so everybody wins I really appreciate it and here is the payment information you can pay using credit card or PayPal then scroll down and select I have read and agree this here um so that you can agree their terms and policy now click submit so our purchase is successfully done let's generate a password from here then here just type a very strong password combined with capital letter number and special characters then retype the password again so I type your very strong password and let's click on this privacy policy and time some service and create account meantime you will get an email like these so click on verify your email it's very very important then you need to log in again on your newly Creed Bluehost account you can just type bluehost.com login and put here your domain name as a username and put the password that you were given during the account creation now as I log in the first time you must see some screen like this you can just keep all this tip and Survey because a few minutes later I will show you how to do that from scratch again first click on create your website keep this tape then select any of these like block I'm selecting right now and again skip this step skip and if you scroll down then skip again now from left go to my site here you can see your existing site but like I said I love to do everything from scratch so let's delete this one click on manage site go to settings scroll down then you'll get to see delete site and delete let's delete it now here click on ADD site create a new site give your site name and tagline in here you can change them anytime and later and click on the advanced let's put my email address so write your admin username in here also put here admin password I know this is a super easy password later I will show you how to change this password from inside the dashboard let's click next make sure your domain name is selected on right side keep the directory empty this linked here all of this and let's click next now they are asking the word is the purpose of GF digital but I'm just going to skip this step it's saying that WordPress installed successfully it's awesome now we can sign in WordPress by clicking here on log into WordPress but this is not a user way because all the time you cannot log in in this way I mean from this page this button right so you should get used to signing into WordPress all the time by going up in new window and typing here your domain name forward slash WP Dash admin so I'm here typing my own domain name like tutorial league.com slash WP admin and hit enter so we can see our WordPress login page in here that means WordPress has installed successfully sometimes it takes 30 minutes to 24 hours to complete the process and this process is called propagation it basically has to let everyone know that hey this is a new domain name now exist and registered so now you know that your domain name is working now go ahead and I'm just gonna type here my username and I'm gonna type my password you can click this I button to show it let's fill up this capture and let's click on login right now we're inside WordPress dashboard or WordPress admin panel and we get this a lot of options like post media and pages and comment don't worry I will make you familiar with all of this but first I really want to clean this dashboard as you can see here a lot of options to clean it first of all click on here this teach mesh then cross dismiss and to clean out here just click on screen option then you will get to see here a lot sharp option that's antique Mark just uncheck all because I personally like to see them clean and let's screen option again and now let's go to install plugin so if you click on here this select button and then this plugin will be select and if you click on here this bulk action then you will get to see activate directive so if you want to delete it then just simply click on here and then just apply then this plugin will be delighted okay so now you are thinking that what is mainly WordPress plugin and what does it do right so the WordPress plugin is something like for adding new functionality on a website for example you want to add a contact for me and website so what you do you just need to install a plugin for contact form then this functionality will be added into your website so we use plugin for adding new functionality okay so to delete this all of this plugin just click on here this button then select all and first of all let's deactive this plugins so I just select here and just click on directive now select them all and just click on here this delete button and let's click apply and again to click on OK so all of my plugins is now delete and let's go to here this all pages and then just select all of these and let's just move to trash now let's go to our profile just over an user and click on profile and then you will get to see like this type of option so first of all you can see like admin color scheme so you can change the color if you like to change anything but the fun fact is like you know the admin can only see these changes like the user they will not get to see any of any changes from here if you do change the color and if you scroll down then you will get to see the language option if you want you can change the language and also you can put here your all information like first name last name and nickname if any chance the nickname that you can do from here if you want to change the admin email address I mean if you want to change it then you can change it from here like you can put your new email address they will send in a verification link and if you approve it then this email will be changed and here you can put your website name you can put about yourself and if you want to change the image if you want to put your own images then you can do it from here now let me show you that how we can change the password just click on set in new password then they mainly generate in a password for us but I personally I don't and I use this password at all because it's really hard for remember so I'm gonna put myself so I put a password and it's saying that yeah it's strong and let's update the profile yes now my password is changed I mean my profile is updated right now so now we says we'll see that this is our dashboard right so this is mainly called backend also and what is the front end or what our user will get to see so our user if they come tutoralic.com they will get to see like these like this for a boring website I mean boring things but Norris will change everything will change everything so you don't need to worry about it okay so the thing someone come to come to.com they will get to see this option like they will get to see all of this right so now let's go back and install in a theme so go to here apparents and click on themes now as you can see we get all of this pre-installed theme from WordPress so if you really want to delete any of these just click on here this delete button I mean just click on here this view details and then just click on delete button then this theme will be delete so if you you like to add a new theme just click on here this add new button or just click on add new theme then you can install a new theme so for this tutorial I like to use hello Elementor search here hello Elementor then you will get to see this theme just click on install button and now click on activate and if you go to our website front end like our website then just reload it then as you can see this design is now changed I know it's still it looks boring but don't worry we'll make them beautiful not only my thinking why I switched 23 to Halo Elementor this theme and what is mainly WordPress theme WordPress theme is something like in a structure like in a website structure if you look at these two images then you will get to see I mean if you look at this two themes then you will get to see things about like this structure now we get this type of structure and if you go with this 2003 then you will get to see like in a different structure as you can see so I'm just going back to the hello Elementor again here is the activate button so now our design is change if I give you a little bit summary of this again that the theme is something like for structure website structure and we use plugin for adding new functionality on our website so let's go back to plugin and click on add new and let's search here Elementor and install this plugin and activate it all right so now we get to see like these type of onboarding so I'm just gonna skip it because in later I will explain you everything from scratch so let's keep all or you can just close this page or you can just go back to here our dashboard again I'm just going to close it and let's go back to our Pages just pages and just make it trash and let's click on add new this button to create a new page here as you can see add title so this is mainly for your web page title so I'm just gonna type here awesome page and if you click on here this setting then you will get to see like full screen mode so if you click on here then you will get to see all of this option like your dashboard like other option you will get to see so I'm just gonna click on here this publish button now and after this publish just click on here edit with Elementor button okay so let me now give you a little bit introduction about Elementor what is mainly Elementor so Elementary is in a page builder like using Elementor we can design a page we can design anything that would be responsive for mobile tablet okay that would be 100 responsive so anything you want to design we can design it using Elementor for example if you look at gmail for digital.com this website is we also create using Elementor page builder we using Elementor because it's free if you see here this left sidebar then you will get to see lots of things like intersection heading this is mainly called Widgets or elements that we can use it for designing a website and if you scroll down then you'll get to see some premium you know Widgets or elements and here is some more free things and here is a free okay so to create a section first of all just click on here this plus icon then you will get to see like these type of boxes so just select one of these I'm selecting this one and now as you can see we get here few option if you look at here layout style and Advance the layout option we can change the layout we can also change the content but in a style section we can you know like change this style change the color font background color border like this type of thing we can do in a style and if we go to the advanced temp then you will get to see more Gene padding some Advanced things like effect and want to disable summer section or not so then you will get to see all of this here in advance section okay so now um in this section I really want to change the background color so go to style and then you will get to see background type classic and then just change the color into black as you can see it's changed and if you want to change the layout just click on layout then you we get to see here the option call height so just choose fit to hide then it's automatically fit for the for this screen and then if you choose minimum height then you can just like change this height by just drag and drop like just using this one okay so I'm just going to keep it like 600 for example so now it's 600 and again I'm just clicking here this top this icon here's it then now I just need to choose like in a heading let's type here my name and now let's make it Center and let's go back to style and let's change the color into white as you can see so in color option you can just like change the color or you can put the color code in here now let's change the typography just click on this pin icon then here is the size you can just change it you can increase and decrease it so I like to keep it in 60 pixel and if you want to make it more Bolder then you can select from here some of the 600 and then the transform you can make it uppercase and lowercase like this so yep and if you want to change the font just click on here this font name Roboto then you can just finding out what you personally like to get you can just search in here for example I like to get pop-ins so I just like pop-ins so as you can see my font is changed to keep it Roboto all right so now our text is changed again I'm just clicking here and let's put here text just drag and drop here text editor for description so I'm just gonna make it white color make it Center and now I like to add a button here so if you put like this then just drag and drop here again the bottom so I like to put here at this bottom so make it Center and now let's type here okay and now I'm just gonna put here my website name that means when someone click on here this contact Now button they will be redirect into our gym for digital this website okay and if you like to change the button color then go to color and change the color I like to get it right I think and the color it's I think okay so now I think it looks perfect let's click on here the update button to update it so it looks perfect right so if you want to know more about like in details about Elementor then I highly recommend you to please watch our this video I will put it in a AI button that video I mainly show you step by step like how you can using Elementor you can make in a website from scratch but for this tutorial I'm not gonna do it from scratch I will use any premium template for it that I can make this website really super fast now let me introduce you keithhapa.com is one of the best places to get a ready template kit in reasonable cost if you look at here this left side then you will get to see they have a different categories kit I mean business a portfolio agency freelancer this all of this category have a template arcade so it is really simple let me give you an example for example let's click on here this ECU agency and as you can see we get to see all of this SEO related templates in here so let's click on this one and after clicking this as you can see we'll get to see all of these features and the templates include all the details one interesting thing is like they are also providing video guide like watching this video guide you can build your website within two or three minutes if you like to see this live demo of this template then just click on here this live demo button then you can see the design of the template now we can check this full template it and you can make a decision you really need to buy these or not and also if you want to check this responsiveness just click on here this tablet option or mobile option to see their responsiveness how cool is that right so if you look at the price it's really affordable it's only 14.99 or like 15 if you like to make a SEO or digital marketing website for your client then you can easily charge you two to three thousand dollar from your clients it's truly a winning situation and that totally save your time let's go back to again kidpappa.com and now let's search here media Pro for this tutorial we're just going to use this template kit so if you scroll down then you'll get to see all details about this template key like features and what it's going to be included and also an installation guide if you look at here this price it's only 14.99 it's totally affordable right if you really want to support this YouTube channel then of course you can purchase this template kit from kidpepper.com I really really appreciate that but let's say you were just starting out and you don't have a 14.99 budget to create your amazing website but no worries at all I really really want to help you guys to get this kit completely free you can just visit like jimfaddigital.com I will put this link on my video description if you click on here this download the resources I use in the video this button then you will get the kit absolutely free after downloading the kit you will get like this type of G file and I'm just going to show you that how you can easily import this kit into your WordPress website so before import the kit we just need to do little bit things like go settings and go to permalinks and make sure that your Palmer links is structure is like a post name and just save it and then go to elementary and click on here this setting then go to Advanced then just enable here this one enable unfilterable file upload just enable it and make it safe and let's go to here the feature then you will get to see flexbox container make it inactive and just like save changes all right so now it's time to upload our template kit let's go to here templates and click on kit library and then click on upload kit now you can simply just drag and drop here the Z file I'm just gonna select it so I'm just gonna select this file and now they are saying about that like they will install this plugin and this plug is already in there let's click on next and now again click on import button normally they are taking like few seconds like 30 seconds to one minute to import it just hold on here cool now as you can see our kid is now live and if you just go to our website and just reload it then as you can see boom we get all of this content in here and now let's click on here this close button and now we just redirect on dashboard and it really wanna hide this hide this one to visit our website just click on here this visit site and as you can see it's now really working fine now let me show you that how we can customize our home page tweeted the home page you just need to click on here this top edit with Elementor then you will be reading on this page and here as you can see um like if you click on this pane then in the left side you will get the option to put the content or if you like to change the color or anything else then you can do it from here okay so the first thing let me show you on the top like um how we can change these text okay so as you can see it's showing the welcome to social AG but no our website name is Media Pro so welcome to mediapro and now if you really want to change the color then go to style and then you can change the color from here you can put in a specific color code or if you like to change the color from here then you can do it okay and if you think that okay you make a mistake and it's not looks you know beautiful then you can undo it just press on Ctrl Z or command Z then you can undo it now let's change the heading the same process just click on here this pin icon then you will get to see here this left side the you know this content option now we can change it for example I like to say like here two as you can see it's automatically changed right if I put in metal something then I can change it okay so you can you can really change the content from here whatever you like to put so make sure in here you put something that is represent your brand I mean when someone landed on this page when they just see this content they can understand it okay this website is work in this or this website is for this industry right they get get a meaning for example if you see our website we are just saying helping you to create successful website so try to put something similar and here's the description you can put like a description with this that when someone read this title and here's the button so to edit the button it's simple just click on this button then the left side you get to see the link so link is something like when someone click on this button they will be redirect into this specific page okay for example I like to you know redirect them when someone just click on this button they will be redirect into our gym for digital.com so I like to save it and let's go back to a website just reload it on here and now if I click on here this button then as you can see it's redirect me into our Gene fahaddigital.com if you want to change the content of this button then you can change it from here you can type here like for example I like to say contact so I type contact so as you can see it's now it's changed but I think the git status looks cool I like to keep this one if you like to change the button I can just click on icon library in here then you will get to see lots of Icon here for example I like to eat this one so as you can see our icon is now changed so I really like this world one it looks cool it's perfect I think that's when I kept it this so it's okay and now let's go to the next button it's mainly on a video button I mean when someone click on this then they will get to see in a video right so I like to change here this video so just click on here this paint icon then you will get to see the you can change here the icon from here and now if you want to change the video then you can change it for example in my case I like to use our one video so let me go YouTube so I like to use this video I just copy the URL and let's go back and just paste it in here and now let me just update it if I reload this page and now if I click on here display play I can then you will get to see our video is now in here and if anyone just click on this video the video will be in Stanley play if you like to add here a start time and in time then you can set up it from here and also if you like to add Loop or autoplay mute and media control all of this you can turn on from here okay so for this now if you really want to change here this button I mean display I can color then go to here this style go to button and here you can see the color I mean the text color you can change it from here and if you like to change the hover color like when I hover it as you can see I get something odd instead of color if you like to change it then click hover and here is the color as you can see just change it okay this is mainly the background color and if you want to change the text color then you can change it from something different and the next as you can see here this how many clients are satisfied for example I like to change here five as you can see it's now changed instantly and if you like to change here these images just click on this pin icon then you will get to see the images on here as you can see just click on here then you can just upload your own image or you can just select it from here but when you're just going to upload your own image make sure you have put the same size of the image now let's move on to the right side in the right side you can see here the image let's click on here the image then as you can see we get to see here this option choose image just click on here then we get to see here the image with the sizes so in this section I mean in here I like to add a different imagine here let me show you that let's drag and drop here the image so I add the image in here and now just click on select button and as you can see it's now changed all right so if you really want to change here this contact also just click on here then when I click on here I in the left side I get to see here this icon for example I like to add here like my B hands so I just add B hand so it's changed instantly and here as you can see we can change here this number we can also change here like a description and if you like to change here the same thing just click on here now you can change the icon from here you can just change the title you can change the description also you can change here the view like stack or default whatever you like you can just change it from here also if you like to change here this you know this social media icons for example in Instagram one I like to change it just click on here the Instagram one then if you click on here this icon then you will get to see lots of icon in here for example I like to add here like um YouTube on or like telegram one I just click on insert as you can see in Stanley it's now changed or if you like to add here a LinkedIn as you can see it's now changed if you like to change this background color then just hover on here and then as you can see I get an air you know like a hand icon in here and also if you see the top we get in a plus icon you'll just click on here okay so after clicking this come here into advanced Tab and scroll down in just background just click on here the background then just click on here this color then click on this box then you will get to see this color is now selected so now you can change here the color that you like to add or you can put here your specific color that you like to add in here so in my case I like to keep this existing color in here so it looks good but if you really want to change it then you can do it from here so I hope you understand about the hero section and now let's move into the next section why choose ask this section okay so in this section if you really want to change the content then very simple just click on the content then the left side you can change the content like whatever you like to add you can add in here and you can change the description from here if you really want to change the icon just click on this here this box then in the left side you get to see the icon title and description so for example I like to change here these cloak something different so let me search something cloak so as you can see here I have some more cloak for example I like to add here this one let's see how this look like so I just insert this one and now as you can see it's instantly changed so I just make it undo okay so in here if you really want to change here this background color then how we can do so first of all click on here this top and go to Advanced and go to here this background then you will get to see this option in here through here you can change the background color and if you like to change the con I mean the text color then click on here and go to style and you can change the primary color from here for example I like to keep here this black as you can see I'm just going to make it white so you just change the white if I make it black then just change into black okay so in the same thing with this content so if you go to style file and go to content then you'll get to see the title and description in here so in the title just click on this color and change the color whatever you like to add just then it will be change okay so I like to keep it white and also if you want to change the typography for example you like to add here you know like 700 volt then you can do it from here okay and also if you like to change the background color go here this this option and go to Advanced and go here this background okay so we just need to go here the style and here this style we can see here the background option and we can change the background color from here on the next section like about a section as you can see this section is totally something like our hero section so I already show you that how we can change the you know the color how we can change the image how we can change these boxes icon and content and the right side we get to see the title so its title changing is something like this same and this one is something like the same that means if you click on here and if you see the left side you can change the content from here if you like to change the color then you can change the color from here so it's the same thing and in this box let me show you and one of these for example this one for example I like to change here the content okay so first of all click on here then go here the icon box you can change the icon from here for example I like to change here this one so now as you can see it's change but the previous one looks perfect so I like to keep it the the previous one so here we can change the content now let's move into our services page in this section you can highlight here all the services that you are mainly offering okay so let me just show you that how we can customize or you can just put your own services in here okay so first of all let me just show you one just click on here this pin icon then go to contained with this content go to icon box you can change here this icon in here you can change the title you can change the display description okay so and if you like to change this background color then just go to a style and then go to background overlay you can change the background overlay from here okay so in here if you just want to change the icon that how you can just create your own icon right so to create a own icon it's very simple just click on here this choose image button then you will get to see the icon size as you can see it's only 600 by 600 so if you like to use fig like canva then you can just log in first and after this click on here this create a new design click on custom and just put here the size like height and width that we see on here so the first one is like a width and this is mainly the height so I just put it on here and let's click on here this create a new design all right now if you see carefully in this box that already have a background color you if you see the icon background colored already have something so to choose this color we are going to use the colorzilla Chrome extension if you go to like Google and search like color Jilla Chrome extension then you will get to see this Chrome extension install this Chrome extension extension and after this just pin it on here then you will get to see on here so I like to use it just click on the color pick color from the page I like to pick this color go here copy to clipboard and let's go back again click on here this background click on background color paste it and choose this color and now to give the icon you can use flat I can it's absolutely free for example we really need a email marketing icon so I go there and now let me put here the email marketing and now which type of Icon do you like to use so you can select it from here for example I like to use this one and it's have also have a different different versions so just click click on here this PNG option just download it so I get the icon in here let's go back to canva just drag and drop the other icon just drag and drop and now we can just resize it and after this you can just click on this share button and download this icon if you like to add a beautiful name of these icon then you can just type in here and type here whatever you like to add then just render it so in in this case I'm not gonna use it I'm just showing you so let's go back to your website and let's again click on here and let's just drag and drop here this icon and then simply just click on here this you know just select button then select this icon then it's gonna be change okay all right so now let's talk about the image like how we can change the image on our website so if you see this image or this image or this image you can follow the same process every single time for example I like to change this image so just click on here this image first of all I need to check hear these image size so as you can see the height it's almost like one three to change the image just click on here this edit column then go to style and click on background and click on this image then copy here the size I mean this is mainly the width and this is the height so let's go back to canva.com again and let's click on here like create a design custom and let me put here the size that you recently see and let's click on here create a new design to get the free image just go to freepik.com and search here which type of image do you like to use on your website and then you can select here and then just click on the image and just click on download button to download the image so I already downloaded one so I'm not gonna download it again so I just want to upload it so just drag and drop here the image that you recently download and then click on here and just resize the image on here so after resizing it I like to change this background color go to hear the background and as you can see they automatically generate the background color select a color and now put here the title whatever you like to add and just click on share and just click on download button and just download it after downloading this image you know you just need to just drag and drop here the image that you recently download and then you can just simply change the image let's select the image that you like to show in there just select it then the image will be automatically changed okay so I hope you understand let's move into the next section about our pricing so you can you can add here your base pricing that you wanna show your clients so you can change simply just click on here this text and go to here this left side you can change it from here and if you want to change the icon the same process to change the icon to same process chance the title and change the button I already show you at the beginning that how to change the button so we can change it from here this style or on the content um you can change it and also if you like to change the link for example if you want to redirect I mean when someone click on the this get start page you really like to redirect them into gymfahadigital.com you can do it but you know we're not going to do that I really like re-drake them into my contact us page so I just type here slash contact or you can just simply copy the URL from here and just go back again and paste the URL in here okay now let me show you that how we can add a new features on here so it's very simple like just click on the duplicate button then you will get a new one here just click on here then you can change the content for example as you can see I type Triple H it's instantly change customer support So customer free I'm just typing so as you can see the instantly change and if you like to delete any of this item from here just click on Cross button then automatically it's going to be delayed now let's move into our next section it's like our projects in this in this section you can just put your own already finished projects you can showcase and hear that people can see your beautiful projects in here that you've already done but let me show you the one of them like how we can change it I mean the contents just click on this pane icon then you will get to see here the image so I already show you that how we can just uh you know just just replace the image so what you need to do first of all you need to copy the height and width and you just need to go canva.com and then you just need to put here this height and width and then you just need to choose the image from VP or any of the website you can just take the images and just upload in on canva.com and after this you can just like resize and like do little bit edit and after this you can download it and you can just upload in on here and you can just replace it I mean for example sample for example this one I like to change here something like this one for example so what I can do just simply click on select then the image will be instantly changed as you can see the image is now instantly changed so I like to keep the previous one so again just click on select and as you can see now it's going to be changed now let's talk about the content it's very simple so you can change here the content from here also the description if you like to change here this you know this text size or anything just go to style and just finding out here the name with this name you can change share the typography I mean typography size and like font anything you want you can do it from here and also if you would like to change here this hover color then you just need to go to the content and after this just click on this hover then you will get to see the option of the color now you can change the color from here now let's move into our achievements section in this section as you can see you can showcase you your achievements right so let me show you one of them like how we can update just click on this pane icon and then click on I can then you can change the icon from the content you can change the content very simple you can change the color from the style section so I'm not going to repeated it from here and scroll down then you will get to see here this clients logo just click on here and you can just merely change the logo from the content side just click on here this logo then you will get to see all of these you can just change it one by one but when it's gonna change the image make sure the size it's gonna be same I mean the image size it's need to be same now let's move into our testimonial section in here you can change here the testimonial you can change the content you can also change this content you can also change the image and you can also change here these text also for example I like to type here 350 you can and do it so I think you already know about it like how to change it because I already show you many times now let's move into our blog section in this block section if you just click on here this pin icon then you will get to see like content setting you can just change the style from here okay right now it select this style 2 but if you like to change it then you can move into style 3 or style 4 or anything that you just think like it's perfect you can change it okay I think style toots looks perfect so I'm just gonna keep it style two so here is also like element order if you scroll down little bit then you will get to see some option about like read more option or if you like to add author then you can like add it from here also if you like to add here like this if you like to disable here this state you can do it from here and also if you want to change icon then you can do it from here and if you scroll down little bit then you will get to see like pagination option that means if you like like to add here like more right so they will get to see in a two option in here then if they click on this next button they will it's automatically load more content in here so since the landing page I don't really want it so I like to add it um no pagination and when you just work it's done then simply click on update button to make it update and if you like to see the responsiveness this this website just click on here this responsive mode and go to here this tablet to see how it's look like so in the tablet mode it's really looks perfect as you can see it looks beautiful and if you go with this mobile version it's also looks beautiful now our homepage is almost ready as you can see everything is looks perfect now we're just going to move into our hero and footer part before move into the hair and footer part I'd really like to change the image and let me update this page and let's go back to our dashboard again and go to plugins and click on add new and search chair Elementor header and footer then install this plugin and activate this plugin after activating this plugin go here apparents and click on Elementor header and footer and now click on here add new and then skip it now type here header select the option will be header and I want to display on into website and the user will be all and I just like I want to publish it just click on publish and then click on here edited Elementor button and now click on here this add template button and click here upload button in here in the top as you can see here is it and click on select file then select your folder and click on KP template and select here headed dot Json and open it now click on here this insert button and apply and as you can see we get this header in here and now let's click on update button let's go back to a website and as you can see now we get to see here our menu bar now I want to add our footer again so we'll follow the same Pro process just click on add new button after these we just need to type here footer and now let's select here footer select your entry website and select all and click on publish and now click on here edit with Elementor button now let's click on here this template box go to my template click on upload select the file like select here footer.json this one and open it now as you can see we get this footer file and let's click on insert and as you can see if we get the footer in here and if you like to change I mean if you like to update the footer then you can easily do it from here just click on this text button then you can change the content like Pages as you can see you can see insert the content in here if you like to change the maneuver you can just easily change here this menu bar also you can just link you can change the link for example I like to add here contact us I already have there or I like to add a new one that's going to be like single block for example so let's say sing single block and now I like to add here and a link so let me go back to our website and let's go to for example blog and I like to I like to use this URL so I go back and let's go to here put the link and let's click on update and now if I reload my website and as you can see we get here the footer with another option single block if I click on here then it's going to be redirect me on this page also if you like to change here the content like your email address you can put your own email address also you can put here your own number or you can put your own address and just click on here this update button on the foot and newsletter option as you can see it's showing an error that please sit up a MailChimp APA key on JK limited kit admin dashboard so what we need to do we just need to go here I mean our dashboard and just click on here jig Elementary key then click on use it data then you'll get to see mailcheep with API key option so in here we need to put a API key so what I do I just search about MailChimp API key on Google and the very first link you need to click on here and then you need to just scroll down a little bit then you'll get to see here API key just click on this link API Keys okay and also they are saying as like uh to generate APK I mean how we can generate API key so we need to navigate the API key section of your account then we need to create a key then we can generate a key and then you can we can just copy and paste here in a website so so let's create an account um so to create account just click on here create account button then we need to put here our email address password and username and I'm just gonna sign up here and they just ask him in a capture let me fill up it and I need to verify my account so this is for creating this account they ask me some information I'm just fill upping it I'm just going next so I'm just just gonna skip here skip again and again skip I like to select here continue free all right so I'm again go back again the link and I'm just going to click on here API key section and I need to just generate a key credit key our API key name so I just like to put here my website name and generate a key and copy to your clipboard and I'm just gonna paste it down here and let's save changes and in here I'm just going to click on done and on my tutorial website uh on the footer so on the footer I'm just going to click on here this newsletter option and select the list will be GF digital and just update it alright so our footer is almost done but one thing if you like to change here your Facebook I mean the social media links then you can do it from here for example if you like to put here Facebook account then you can just put here your Facebook URL if you would like to put here your LinkedIn just just put your LinkedIn in here for example sample I like to put mirror my LinkedIn here so I just put the link and just I click on update button so my footage right now it's almost ready so if you like to change here these um name I mean this credit then you can change from here I like to put here my website name in here so yes and I like to remove it yes media Pro marketing agency by teacher.com and here is the copy that all reset okay everything is almost done just update it and let's go back to website again and now let's you know just do little bit things on the header let me show you how we can do changes of this okay so to go to the header just hover on here edit the Elementor then you will get to see header option okay just click on the header then it's just gonna redirect into the header page now here we can do customization for example if you like to change the number then you can just type here the number whatever you want if you like to change the logo then click on here the logo and then you can choose here a different logo for your website for example I like to add here this food white one so if I add the white one it's not going to be visible so I did to keep this one so let me okay so as you can see I hope you understand that how to change the logo okay so it's very simple just choose the image apply load your logo and select it from here that's it very simple thing okay and if you like to change here this menu bar then just click on here then you can choose the menu bar from here okay and now you are thinking that how can I add my own member I mean how can I add things on maneuver to do that let's go to here apparents and go to menus and now in here as you can see our maneuver in here so I like to keep it manually or you can say like um main menu and let me update it and here is the bottom option as you can see selected header that's why this menu bar is showing on the header okay all right so if you like to add a new menu item in here so how can add so here's the page option that all the pages that we create in here all the pages can be showing in here right so if you like to add any new of them just click on here this add and just add to menu then these item will be added on the here okay and after this if you like to change the content you can change it so this will be visible on there so I don't want to do anything and here is the post if you like to add any kind of a specific Post in here so we can do it for example I add this post in here and I like to change into like something or like Tick Tock so if I like to keep it tick tock then it will be Tick Tock okay and if I like to add any custom um URL like things for example I like to add our gymfath website so I like to say here is a link and the link text will be like Zoom so let's add it here then it's going to be added in here okay and also if you go to here this category then you can see all of this categories in here for example I like to add here social media so let's add and let's save changes so all of this maneuver it's now added let's go back to our website and just reload the page and as you can see all of this in here if I now right click on this Tick Tock as you can see will be redricked on the page you know of the post and if I click on this gym then they will redirect into gymfar digital.com so if I click on here this social media they will be redirected into my social media category page okay so anyway I don't wanna keep them in here so I like to delete it I like to delete it okay so for example now it's all of this menu if you want to create Sub menu then how we can do for example in this block I like to add here Tick Tock will be Sub menu so what I do I just drag and drop in here under this block then it's automatically set up in here if I just save changes then it will be it will be work as a sub menu so let me just reload here this page and as you can see now our Blog Page have a sub menu so when I'm just gonna hover on block I get to see Tick Tock account okay so if I now click on here The Tick Tock then it's going to be work as a tick tock so I hope you get a clear idea now let me organize it little bit for example I'm just gonna keep this contact in last and the service will be here and I like to add here these projects on here let's just save the menu and let's go back and let's reload this page and online it really works fine right so right now our header and footer is almost ready to go let's move into the other page like about us page let's see how we can update the content right so right now I mean about this page and let's click on here edited Elementor button so in here the page title you can change the paste title into something different if you like to add and here is the breadcrumb so if you want to change the text then you can do it from here so this section is something like that we already see on the home page let me go to the home that I can easily compare it with our previous work so these hero section and this one I mean it's almost similar I mean this one and this one is almost similar so I'm not gonna be repeated again so in this section let me show you that how we can change it let me show you this one for example so if you click on this pane icon then you will get to see here this icon so if you want to change the icon then you can do it from here also if you like to change the title then you can do changes you can change the description from here okay now let me share with you that like how we can change this background color I mean when you just kind of hover it how we can change the color and also the icon so as you can see you can change the hover icon I mean when you're just going to hover it we get a different icon and here as you can see so if you want to change it then you can change it from here just go to content and then you will get to see hover Watermark I can you can change it from here and if you like to change the background color when it's going to hover go to here background overlay and go to hover then you can change it from here okay so now let's move into why choose as this section so this section is similar I think I I know you can do it I already share with you multiple times that how to change this content but for now I'm just going to show you only here the boxes that how you can can change the color or content so to do that just click on this pane icon here as you can see it's visible and then you can see the icon box you can change here everything from here if you like to change the color then you can go here the icon then you can change the color from here okay so now let's move into the next section our process so this is the similar type of thing you can say but let me show you this one first if you just click on this pane icon you will get the same thing that we do before everything is going to be same you can change the icon from here you can change the content all of this thing you can do from here now let me explain with you like how we can change this Dash like this line color that you can see in the border so how we can change it to change it you need to just click on Mouse right button go to navigator when you click on Navigator you will get to see here and a divider option just click on a big I mean the divider then you will go to see like these click on the style from this style you can change the width for example I like to make it like 7.7 percent it looks really bigger but I'm showing you that you can do it okay now let me change the color into black so as you can see now it's really changed right so I'm not going to change anything else right now in here so let me just make them undo so I just make them undo in here now let's move into the next section it's mainly like CTA so if you want to change the background color just click on here this section I can edit section this one and then go to style then you will get to see Miss option now we can change the image so previously I was mention you that like to change the image what you need to do first of all you need to follow this size okay and you can use canva Photoshop figma any of these but you need to follow the specific size you need to follow this width and you need to follow the height and after this you can put a different image and then you can just create it and just upload anything here and then you can select it okay so I hope you understand let's see like the change of this content so you already know about that how to change it is very simple all right so let's move with the next section it's about our team now let me show you that how we can change our team I mean how we can change the social media or name so let's click on this pin icon then you will get to see here this style you can change here different style if you like to put some different style that you can select it from here so here this image option you can change the image here's the social profile that you can see when you're just gonna hover it we get to see so you can put here your own link here like your team member link then you can put the link also Twitter have also have Instagram if you like to add a new one something like a different then you can do it to change the icon for example I like to say here Twitter right or something like telegram let me add it to Twitter so like Twitter later and as you can see this icon is now changed let me type this Twitter so it's going to be change as you can see so I hope you understand but I'm not gonna add any of these here so I'm just cross it but I hope you understand about it right and if you like to change here this content I mean the name and the position just click on here's the option if you hover run then you will get to see in here that like a title and description you can change it from here so this is mainly about our about us page if I look it out the responsiveness just click on this button I button and then go to tablet this is another tablet version of our design let's go to the mobile version this is mainly our mobile version design so everything's looks cool right let's go to our next page about project page so this page is almost very similar with our home page so in this section I mean this section this one this section and this section is very similar and these I'll really share with you this section and this section is also similar with the these two sections so I'm not going to be open in here but if you like to add then you can just add here your base projects like previously that you already finish or you can add here your case studies all of this thing you can add in here okay so NYX is our blog page so we are not going to edit anything on the blog page um but let me show you little bit that if you really want to change anything then how we can do if you if you don't like anything so to edit it just click on here this top edit with element or this button so here is our page title with this blog as you can see so when I click on here as you can see it's automatically coming from if you see carefully that it's automatically coming from so if you like to change it anything that you can do it from here right you can do it from here all right so let's go to the sidebar if you see the sidebar it's also coming from and a widgets you can say but you can still change it if you like to change the content or title or anything you can do it from here just go to typography and you can do changes if you like to update here these ads just click on here then you can update the image you can update the content you can update the button all of this you can do and this is mainly our category list you can say now let's move into our services page and this section is almost similar with this section I'm in this section so I'm not gonna repeat it again so you already know it and this section is very simple let me show you that how we can edit it and this section we already know here is a testimonial section here is an FAQ section so let me show you that how we can change the FAQ content and let me show you that how you can change the appointment content so let's scroll down and here as you can see the same title we can change it same description and here's the least mainly basically so in the list if you click on here then you can change the content for example if you change the content you can do it you can also change the icon from here also if you like to add new one then you can just duplicate it and then you can change the content from here okay so I hope you understand and if you like to delete it then you can delete it from here and you can change the content from here I mean this information so I'm just going to scroll down a little bit on this FAQ section so just click on this pane it's something like this similar that you see in here the list so it's similar okay so let me add a new effective in here let me type here like something funny let's who is xparasi it's quite funny but I'm typing it just giving example and here will be like the description okay so here let's have a two options when it's like Visual and another is like text so one is just going to add a new content make sure you you choose text or if you like to do it like kind of visually for example in here you like to add a you know like spacing so you just put in a space so in this visual mode you will get to see a space in here right so uh in here you will get to see in the same space in in here okay also it's some more option like if you like to add it bold or change this Con I mean this heading want to make it bullet point or anything else then you can do it from here it's something like classic editor and also if you click on this toggle bar then you will get to see some more option like uh some more extra facilities if you change the color then you can do it you can clear the formatting you can add a block code you can make it Center align or like Center left you can do it from here okay many things there have you can check it out one by one then you know you'll you'll learn everything and then later you can do it yourself okay so let me just now delete this one because it was really funny that's why so I'm just gonna remove it and I'm not gonna be update any of this so let me just close this page but if you really want to update it then just make sure that you click on this update button otherwise nothing gonna be safe and you will get to see oh my God what happened nothing changes you will get the same now let me show you that how you can customize your contact us page and as you can see now our contacts Pages look like blank I mean this contact form but don't worry I'm just gonna fix it don't worry so let's click on here edit with Elementor button then you will get to see something like similar you can change here all the content okay so it's very simple just click on this pin icon and just click on icon box and change the content okay so now let's click on here this right side box so so um I really need to finding out here the Box let's click on Navigator let's click on Arrow and then as you can see we need to select here mid form right so if you don't understand um then let me show you again so I first of all I click on here this right side box right then what I do I click on Mouse red button then what I do I click on Navigator then you get to see layer and this is mainly called columns this is columns okay so this is medical columns so under this column we get to see in a box it's called mid box click on here then you will get to see in the left side in form option with edit form button just click on here edit form button then you will get to see that like they are asking us for a form name so I'm just going to say like a contact form for example contact and then I choose general form and let's click on edit form and now I like to click on here this template box and let's go to my template and click on upload out click on select file and let's click on contact form okay just click on here all right so we get this contact form in here now we just need to click on here insert form apply all right so now let's click on update button and let's let's go back to our page right now and reload the page okay so our our form is still missing let's click on update and close and also we really need to update this form in I mean update this page on here okay so right now I update the page and let's go back to the contacts page and reload the page again all right so we get our form in here so let's try this form let's say my name is RC so let's export Aussie oops I type something wrong X but I see let's say my email let me type here test and also let's type here test and let's click on send message button as saying like thank yous form submitted successfully and it's reload all right so let's go back to our page two see the form you know the entry we just need to go back to our dashboard and we just need to click on here this entry made form then just click on Entry okay all right so now as you can see we get to select this type of forms so don't worry about these so um just go to here this finalized page so I'm just click on sign up then again click on here this website power up then surprise then click on finalize and let's click on Save changes button so it's saying congratulations let's click on here entry so to check the entries I'm just going to click on here this form and just click on Entry then you get to see here we get a new entry if you click on here this view button then you will get to see who is the sender will send you the message and all the details was there I mean the user was submitted alright so one thing that we miss out that is about the location to change the location you really need to just put here the name I mean the location name for example I like to type here milpur one Dhaka then you will get see the same location in here then you just need to click on here or you can specifically put here the location then it is going to be visible on I mean the map will be visible in the air I mean the location will be visible on here okay so let me just update it and let's go back to our contacts page and let's click on here contact us again and as you can see that we choose we get the you know like same location in here okay so we are almost last stage but before finish the tutorial I really want to share with you an important things just click on here this customization button that you can see in here then you will be you will get like this type of option so now you need to click on site identity you can change the logo from here here is the site title you can change also the attack line and here is the important thing it's something side I can so what is side icon if you see here this canva website in a browser top you will get to see like an icon this is mainly called Fab icon so in our website jimfadigital.com we also have this icon so to add a side I can just click on select side icon now you can select the site icon from here okay so for this side you can use you can use any kind of images but make sure that image height and width are like the same as you can see I use here for this five icon like 64 pixel by 64 pixel so that means height will be 50 64 pixel and the width will be the same 64 pixel and email is suggesting that like with 50012 and height 50012 so you can you can follow these or you can follow this one so let me select this one just click on select and then just like I skip cropping then as you can see our Fab icon is now changed and let's go to the menu bar so if you click on here main menu then you can also rearrange or customize or add new menu item from here for example I I like to add a new one so just click on add item then you can select a new one as you can see it's automatically add in here so we already know about that like if you you can add the maneuver from appearance to menu also if you like to add the maneuver from customization you can do it I mean the same thing okay also you can rearrange it like this so with the same thing it's work fine okay let's publish it if you want to make logo for free then I will give you another tutorial for it that that following you can create your own logo absolutely free so we have completed our amazing website step by step now we can go ahead and make your website live I hope you have enjoyed the tutorial if you like this video then please give a big thumbs up and don't forget to subscribe this YouTube Channel please share this video on your social handle and let me know your opinion in the comments section I will see you in the next video

Channel: Jim Fahad Digital

Views: 168,973

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: cl4aQq1goIg

Length: 80min 13sec (4813 seconds)

Published: Tue May 23 2023