Hey, what's going on guys? This is Jim fahad. In this tutorial, I'm gonna show you how to create a complete WordPress website using all free resources. We will create a complete, fully functional website step by step. But without doing a single line of coding. And it's not a single page website only, We will create a multi-page website. I will show you how to create a modern-looking, Super-slick home page, how to create an About Us page, how to create a services page, portfolio page, Contact page. I will show you how to create a fully functioning blog - Everything you need to know. And you may see in the title or thumbnail that it's worth $5,000 and it's no BS. I mean it. I'm a Professional web developer. Like, if you want me to build a complete website like this, I mean if you want me to design the whole website and then develop it and make it fully functional, I of course will not charge you less than $5,000. So if you're planning to invest like $5,000 to create a complete website - Luckily, you don't have to do that. Just follow this tutorial step by step. And as you are learning from a real web developer, I have more to give you. I will give you all the page templates for free that took me almost a couple of weeks to design. So as soon as you complete this tutorial, you can make your website LIVE. And before moving forward - Please give this video a big thumb up. Because you may find funny cat videos, co**na v**us videos, funny prank videos every day, But maybe you cannot find this kind of valuable video on YouTube every day. So please make sure you like this video and subscribe to this channel. In this way, You can find me next time. Okay! Now, let's have an overlook what we're going to make in this tutorial. So this is the cool homepage we're going to make. By the way, we will be creating our all pages just by dragging and dropping and with few clicks. so for that, we will be using a free page builder, my favorite - the Elementor Page Builder. I will show you how you can put your logo on the left like this and how you can create this kind of Navigation. And put that on the right side of your website and then I will show you how you can create this banner, the hero banner and how to put these headings, paragraphs and how to create these buttons and How you can link this button to different pages! And then I will show you how you can create this Services section. You can put different images with each section. Also, if you don't want to use this image, you can use icons. You can change all these headings paragraphs. Then on the next section, I will show you how you can create this kind of full width Section with nice background image. And not only image if you want you can use video background, Slideshow background. I will show you how to do that. Then in the next section, I will show you how to create this portfolio section. So this section is necessary for all businesses. Like if you're a photographer you can showcase your photography videography Services in this way. if you are web designer You can showcase your all services in this way. And if we click on any single image that pops up with a simple lightbox like this, that's really cool. So let's close this and go to our next section. I will show you how to create these cool pricing tables so you can let your visitors know about your pricing. I will show you how to create these. Then I will show you how to create this cool latest post section. So here your most recent three blog post will be shown inside of this home page then on the next section - This is one of the sections you must should have inside of a website. This is the testimonial section because it doesn't matter what you tell about your business, But what your client say about your business does matter, so I will show you how to create this testimonial section with the clients the client's nice headshots, the ratings, Their real feedbacks, name, Company name, all these and then I will show you how to create this cool looking image slider with your clients logo You have worked with and then I will show you how to create this call to action section like this also, you can put here a button to take them to the other website or other pages of this website and Then I will show you how to create this kind of global footer. So like here on the left you can put your address your email address phone number your other website URL and then I will show you how you can put your Instagram feed inside of your website also, I will show you how you can put your Facebook page like box inside of your website So people can like your Facebook page from inside of your website And then I will show you how you can create this Bottom footer like copyright text on the left and on the right side You can see social media links so you can put your Facebook Twitter Pinterest YouTube all social media links here on the footer Right and then if we click on this go to top button that will take at the top of our website and like I said We will be creating all these Just by drag and dropping and with some few clicks and we will be creating all these Using awesome Elementor page builder. Let me show you a little bit the power of Elementor Right now we are inside the Elementor page builder. So basically whatever you can see on the left side here You can see all the Elementor elements So basically all we need to do we will be only just drag these elements from left to the right inside of our website I will show you everything is step by step how to do each part of our website But for now just lets have a sneak peek to see how easy it is to create a website using Elementor page builder. So here you can see a heading says business planning if you want to change it just select this text and And, Here instead, I want to type Jim Fahad Jim Fahad Digital Agency, I just typed in over screen and it's instantly changed. How cool is that? And here you can see two buttons Like if you want to create another button all you need to do just click on this column icon Right click here and click on duplicate a new button is instantly created and Then if you feel like if you don't want this button anymore just right-click here on this column icon again And just click on this delete. It's instantly gone So it's freakin easy like this now let's say if you want to reduce the height of this banner all you need to do you just need to click here on the six dots and here you can see on the left minimum height is 550 so if you want to reduce it, just drag this bar to the left The height is decreasing if you drag it to the right the height is increasing. Let's keep it 550 for now and let me show you other cool things like if we scroll down a little bit and Then let's now go to under this tile tab, and if we scroll down here here you can see shape divider options So let's click here. And let's now go to bottom and from here type list select mountain shape now here at the bottom You can see a mountain divider here then if you want to increase the width You can do it from here just by dragging it to the right or left You can change the height from dragging it to the right like this also, if you want you can flip it you can change the color from this color picker like you can make it red black or white like this not only mountains you can make it like zigzag shape or tilt shape or Waves brush shape like this. how cool it is? Okay, for now, I don't want that so from here type Let's click on none and it's instantly gone so you can basically create and control each part of your website using this awesome Elementor page builder and That's why already 4 million-plus people Started creating their website using this awesome Page builder and not only this top view if you want to see how your website Looks on tablet and mobile device. You can do it from here You can see the responsive mode click here and go to tablet So from here, you can see how your website looks on tablet device If we click on this hamburger, we can see that tablet Menu it would work great for big fingers also Let us now close this So you can eat it and check and manage your whole website how it looks on tablet view from inside Elementor page builder and let's now have a look how it looks on mobile device. So from here, let's now click on mobile This is how our website looks on mobile device and let me show you now how easily you can change anything Only for mobile device. So let's say only on mobile device you want to make these buttons centered aligned? How can you do that? Just click on this pencil icon here and then from left you can see alignment Let's make it centered by clicking here It's instantly centered and here if you have a close look you can see a mobile icon here So whatever changes we are making it's only applicable for mobile device the tablet and desktop View will remain same so you can change anything particularly for any device from inside this amazing Page builder and also I want to create this button alignment Center So click on this pencil icon and let's make the alignment Center cool. Let's have a look other part of our homepage Everything looks perfect on mobile device that we can manage from inside this awesome page builder Okay. Now let's have a look on the other pages. We are going to make now first. Let's go to our about page Now on the about Us page, I will show you how to create this cool banner then underneath that I will show you how to create this cool section with all your core values designed into this grid layout like this Then I will show you how to create this full-width section, how to embed YouTube or Vimeo Videos inside of your website then underneath I will show you how to create this our theme section So you can put your team members big image their separate social media links here Their name their position everything now. Let's go to our services page I will show you how to create a separate services page like be so basically you can reuse the home page content So all the time you don't need to do things from scratch You can copy any section from home page and reuse that into other pages. Let's now go to our portfolio page Here I will also show you how to create this separate portfolio page like this so you can add your own Portfolios inside this single page. Let's now go to our blog page I will show you how to create this kind of clean looking blog page like this So here you can see the block Thumbnail the block title post date author name and a summary here and if we click on the read more button That will take us to the single blog post page So I will show you how to put this search bar on the right sidebar how to put recent posts widget on the right side also on the right sidebar You can put your Instagram feed like this Also, I will show you how to post this kind of a blog post and design it You can go to your previous post and next post by this Navigator Also, your visitors can make comments on the blog post using this comment posting area I will show you everything and let's now go to our contact page I will show you how to create a cool-looking contact page like this So here you can put your address your email your phone number So people can easily contact with you and here underneath I will show you how to create this working contact form So people can contact with you from inside of your website instantly Also, I will show you how you can put your Google map So people get to know where you are physically located I will show you all of this step by step Okay, and this video will not become older! I mean this video will not become outdated even if you are watching this video in 2025 or 2030. Sounds unreal, right? Okay Let me tell you why Wordpress itself, themes, plugins, Softwares get updates release new features very free currently So whatever I will show in this tutorial if any update will come after that I will create a new video for that specific updated portion and I will put that updated video link in the description not only that you already see I have separated tutorial pages on my website for each tutorial and I already keep a blank space underneath the main video for future updates So as soon as any update will arrive I will add that part into that blank placeholder I'm trying so hard to make your life more easier when it comes to creating and Keeping update your website all the time So this video could be your lifetime asset. does all these efforts Deserve a single LIKE from you? a single thumb up? It's up to you and You will find a timestamp in the description so you can jump any specific part you need. All right So without further ado, let's get started The first thing we're gonna do is to get a domain name and web hosting and I will provide you my special link So you will get a discount around 50% Then we will install WordPress Then we will install a free theme called flocs and a free page builder called You know Elementor then we will start creating our amazing website So let's now first get our domain name and web hosting If you have your domain name and web hosting already, you can skip this part. If not then follow along So first just click on the very first link in the description below this video or you can go to Jim Fahad digital www.jimfahaddigital.com/hosting and this will take you to a special discounted Bluehost page So why Bluehost? in my opinion Bluehost is the best web hosting provider? I'm a web developer I tried so many other web hosting companies. I don't want to mention their name, but I personally ended up using Bluehost Hundreds of my clients using Bluehost and they never complain about using it if you see my Bluehost account I have hosted tons of websites here and I never get a downtime Their customer support is really cooperative in case you need any help and their price is really affordable That's why I always recommend Bluehost So now click on get started Here you can see their different plans the main difference between them with the basic plan You can host only one domain. You can take their plus or choice plus plan if you want to host unlimited domains Also, you can take their pro plan if you have millions of visitors on your website already I recommend starting with the basic plan then in future you can upgrade at any time now Let's select the basic plan now, we will select our domain name If you already have a domain name that you want to use you can just go ahead here on the right, but for now I'm gonna get a new one now here Let's try for something like Apple.com and click Next It says the domain apple.com cannot be used on Bluehost. Please try a different domain name It should be because we cannot pick that because we all know that's apples official website So we will be typing our own domain name here And also if you click on the right side, you can see dots I'd donate dot info websites I always recommend to take dot-com websites because it looks more professional And legit so I'm gonna type here let's say our elementor.com as we are going to make our website through Elementor page builder and Now click on next it says www.ourelementor.com is available. That's awesome. And Here we need to put our account information. I'm putting mine here really fast only to not make you bored Okay here you can see the business name field if you don't have a business just keep it blank or put your full name But here's the most important thing. That's your email address. Make sure you put your correct email address Because after completing purchase a receipt will be sent to that email address So make sure you put your best email address here all right now scroll down here is the package information and It's automatically set to 36 months. And this is gonna be your cheapest plan So yes, you're paying for 36 months up front But it comes out to only around $3 95 cents a month. So this is 50% off There's gonna be your biggest discount now What I recommend is to just do 12 months If you don't want to commit to the 36 months or 24 months It's still 33 percent saving and it's only around $5.95 a month and you also have your domain name for 12 months so no more additional cost for your domain for these twelve months and Here you got package extras First here is the option for domain privacy Having domain privacy is good. And I always recommend having domain privacy So no one gets to know who is the owner of the website But for the sake of this tutorial, I'll be selecting this one Let's click on turn it off because I don't want to hide myself at this moment I want to be transparent. So if anyone knows I owned this website, I have no problem You can keep this one checked if you want not a big deal I'm also deselecting all the other options they are offering. we actually don't need that They're just upselling their stuff. All right Now you can see the price is now only $71.40 for the full year Including the domain. That's awesome. And I'm legally obligated to tell you that this is my affiliate link So I do get a little bit of commission off of this but it does SAVE you a ton of money And it helps fund these free YouTube tutorials what I'm doing, so everybody wins I'd really appreciate it. And here is the payment information. I'm putting my credit card number here The expiration date and CVV code then select this one here So that you are agreed to their terms and policy now click on submit It says your purchase was a success also you can see here is your receipt They will also send it to your email. I'm also waiting to get that email Meantime we can create our Bluehost account. So let's click on this create account button here Here's the domain name that's automatically selected now. Let's create our password Create a really strong password combining capital letters numbers special characters You know how to make a strong password and then retype the password in the second field Now take this once again that you have agreed with their Terms and policy now click on create account. I Already have received an email to confirm my purchase So I'm opening my email you will also get an email like this Then click here verify your email. It's very important So it's not verified awesome Now, let's log in into our Bluehost account with the domain name and password We have just created if you are logging in for the first time. You may see a pop-up like this Like it says let's create a website Bluehost actually want to help you to make the website Just click at the very bottom there I'm not creating a website because I will be showing you everything step by step and is keep all of these Pop-ups because we don't need any of that Cool we have successfully registered our domain name and web hosting Congratulations So far. If you have any questions, please let me know in the comment section. I will try my best to help you personally so now we can move on to is tip number two, which is to install WordPress and For some reason if you logged out then login again Now from left menu bar click on my sites Then you can click here create site or here create a wordpress site. I'm clicking here So let's now add a site name and site tagline. We can change that any time So I'm putting a site name gym fat production and the site tagline. It deserved to be same now Let's click on advanced here. You need to put your email address your user name and password for your WordPress So I'm putting my email address here What press admin user name I want to? name it Jim for HUD and Here, let's put a password Do you want to see my password? I'm clicking here on show so it's Abc123, I will of course show you how you can change it. Later so for now click on next close this browser pop-up now it says where we want to install our WordPress so make sure you keep this directory blank and here is your domain name selected and Bluehost here is suggesting some free plugins, but we don't need that Let's deselect this all now. Click Next awesome. It says what press installed successfully Now you can copy these informations right here and save that somewhere on your computer Where you can access it again later and click here to show your password actually I intentionally give this an easy password. That's Abc123 never ever use this kind of easy password I'm showing you shortly how you can change that password We can now sign into WordPress by clicking here But this is not the usual way because all the time you cannot log in this way I mean from this page this button right so you should get used to signing into what place all the time is by going up to a new window and Typing in your domain name forward slash WP dash admin So I'm typing here my domain name our element comm forward slash WP dash admin and click in there So we can see our WordPress login page here. That means what place has installed successfully Sometimes it takes 30 minutes to 24 hours to possess this installation and this process is called propagation It basically has to let everyone know that hey this new domain name now exists and registered But we can see our website instantly They actually say it might take 30 minutes to 24 hours, but I've been using Bluehost for more than 10 years I always get domain live immediately. Actually, that's another reason why I love Bluehost So now you know that your domain name is working. So go ahead and Just gonna type in my name which was the user that I created and I'm gonna type that easy password Abc123 you can click this eye icon to show it now. Let's click on login so we are now logged in to what place this is our WordPress dashboard and Only we can see it because only we have access of this WordPress dashboard and if we hover over here on the top left here You can see the site name and under this here. You can see visit site. So let's now click here on visit site I'm opening it from a new tab So far, this is our website at this moment The whole world can see this website right now and at this moment It looks super boring super ugly and we will be creating our beautiful web site out of it So let's now go back to our WordPress dashboard So first, let's close all this notification So let's click on this all X icons here And let's minimize all these this one this one and this one just cleaning things up a little bit so first I want to make you familiarize with all this what please - options and the first thing I want to do I want to change that easy password that I have given one two three ABC one, two three So to change it from here on the left, you can see users hover over on it. You can see the option your profile Let's click here. And first here, you can see the options for admin color scheme so it's the default one if you want you can change it to light or Midnight or blue so you can see your dashboard colors are changed So no matter which option you pick only you can see it So let's keep it default and then here you can see the options for changing your first name last name nickname and your display name So I'm giving here my first name Jim and my last name to fahadh Also, you can change your nickname, but the most important thing here is your display name So right now it's the Jim Fahad So at this moment if we go to the front end of our website here You can see a blog post says hello world and here you can see by Jim Fahad So this author name is coming from this place? So if you change it to any other thing like here instead of Jim Fahad if I only said to Fahad and Let's scroll down if I click here update profile and let's now go back to our front-end and if I now refresh the page Now here you can see instead of Jim Fahad here only you can see by Fahad as we have changed the display name from here - Jim Fahad - Fahad only so I want to make it Jim Fahad then here is the contact information if you want You can change your email address from here. You can add your website URL here. You can talk about yourself You can write your biographical information here Then here is the option to change your profile picture and here is the most important thing under account management Here you can see the options for setting new password because we want to change our password. Of course, we don't want to use Abc123 that kind of easy password. So let's now click here on generate password. You can see here Auto-generated password if you want you can keep it So you need to copy this password and save it somewhere else on your computer to use it later But I want to set a password for now. So I'm setting my password Typing here my new password. It says weak, but I'm okay with it for now So I'm clicking here confirm use of weak password and let's now click on update profile All right now here from left You can see plugins Hover over on it and let us now click on install plugins. Now, you can see some plugins that came with WordPress by default, but we don't need any of this We will be using some plugins, but we don't need any of this So to delete it You can do it one by one by clicking here on delete to delete like this or you can do all this together like you can select all these by clicking here and at the top here you can see the bulk action option click here and first click on deactivate and Click on apply all the plugins are deactivated right now Let's now select all again and click on bulk action this time Click on delayed and let's now click on apply Here is a browser pop-up up here. It says I'm sure or not. Yes. I'm sure let's click on OK So our plugins are gone cool. Let's now go to settings from left here. You can see settings So hover over on it first. Let's go to general. Let's click here on general and from here You can change your site title name that I have given Jim for production You can change it to your way from here You can change the tagline and here is your website URL You don't need to do anything with these? Then if you want you can change your email address from here and here is some other option like date format time format let's keep all these the way it is and then click on Save Changes if you have made any change and Then under settings you can see here writing reading discussion media. Parmalee is privacy Let's keep all these settings to default because the default settings is fully Okay, but I only want to change the permalink settings. So let's click here on permalinks So by default here, you can see the plain option is saved but instead of plain I want to make it post name. Why is that to make you understand? Let's go to front end of our website and here you can see a blog post if youi now click on this blog post now We are at the single blog post page if we have a close look at the URL bar here You can see our element or comm then forward slash a question mark P equal one why is that because if we go to our dashboard here you can see the permalink settings is plain And that's why our URL is showing like our domain name than this kind of mumbo-jumbo link But I don't want that. I want to make it post name So our URL will be like our domain name then our post name or our page name That's way good. So after selecting post name, let's click on Save Changes And now let's have a look if we go to front end of our website and if we now rephrase the single blog post page Now instead of that mumbo-jumbo link, you can see here our domain name then forward slash. Hello - world It's more human readable right now. Alright Now I want to change the theme of our website to change it from here left You can see appearance. So if you hover over on it, you can see here themes Let's now click on themes now You can see some themes that came with what place by default like 20 20 then 20 19 17 16 all this and Right now 20 20 theme is activated because you can see here it says Active, but personally I don't like any of these So I want to install a new theme so to do that here You can see a big button say add new theme So let's click here Now here you can see more themes and all of these are free So what is a wordpress theme basically theme is basically the look and feel of your website Like here, you can see different themes. That's basically the different look and feel of your website Which theme you will be selected your website will look and feel like that theme So I want to use a theme that says flocs. So I'm searching for the flux theme You can see a search bar on the top right here. I'm searching pH. Ello X that flux. Here it is I like this theme because it's free and it has tons of options for customization so let's now click here on install to activate it and Click here on this activate button All right. So our flux theme has been activated successfully here You can see activate flux theme and now I want to install a plug-in So to install a plug-in from lift, you can see her plugins from there Let's click here on add new and now I want to install flux core plugins. So I'm searching for flux core plug-in so this one is the plug-in you can see here short codes and extra features for flux theme as We're using flux theme. So installing this plug-in is very important otherwise You will not get most of the features or options So let's now click here on Install Now and let's now click on activate to activate this plug-in Cool. So here you can see flux core elements plug-in is activated and now I want to install Our page builder. So to install it. Let's go to Jim for hot digital calm I will put this page link in the description So from that page if you scroll down a little bit You can see here important links and they here you can see a link says get Elementor. Let's click here Now to get the page builder, you can click here on this download button or here free download Let's click here then here We need to put our email address some putting mine here and then click here on this button, subscribe and download It started downloading Download is completed cool now close this bar Let's now go back to our WordPress dashboard and from left here. You can see plugins Let's now click again here on add new and at the very top here you can see upload plugin So let's click here and here you can see a button says choose file. Let's click here And here is the file we have just downloaded The element of page builder file. So let's select this one and let's now click on open and Now, let's click here on install now Now here at the very bottom. It says activate plug-in. Let's now click here All right Now our elemental page builder has been activated So our all basic necessary tools are almost ready now I want to create some blank pages first So to create page from left bar You can see pages from there first click on all pages So here you can see some pages. You can see her privacy policy here. You can see sample page We have not created these these pages came with WordPress by default But we don't need any of this page. So let's delete this page Let's select all this together and from bulk action let's click here move to trash and click on apply those pages are deleted but not Permanently gone because if we click now here on the trash you can see this pages here So if we want to delete them permanently Let's click here on this did it permanently? Or you can do it all together by selecting all these and let us now click on bulk action again Here delete permanently. Click on apply. All the dummy pages are permanently gone now I want to create a new page so to create a new page Let's click here on add new button or here from left bar under pages. You can see here add new So let's click here or here Same thing let's now click here. Add new button Ok, so from here, you can add a title that means the name of your page from here But before creating our page I want to install another plugin that called Classic editor plugin because right now the editor you are seeing here is the WordPress Gutenberg editor And I'm not really a big fan of this editor That's why I want to install classic editor plugin Let's now install the plug-in and then you can see how cool is that? so before creating our pages layers now go to plugins and then click on add new and Here you can see already classic editor plugin But somehow if you don't find it on the home feed of plugins You can search here by typing classic. So here you can see classic editor Let's now click on Install Now then click on activate. It's activated And now if we go to pages to add new page Now instead of that Gutenberg page editor you can see the classic editor I like this editor because it's super easy to use Something like Microsoft Word, so you can write anything you can immediately make that bold italic you can insert images Easily you can make anything heading 1 heading 2 Very very easily. So there's actually the reason I have installed this classic editor plugin So now let's make this one our home page So on the title bar I want to name it home and I don't want to type anything inside of this classic editor I mean inside this visual builder because we will be creating our complete page Elementor page builder so for now, let's just keep it empty and from the right click here on publish Let us now create a few more blank pages. So from the top click here on add new after home I want to create about Us page So let's keep the name about and click on publish now. Let's click on add new I want to create a services page. Let us now click on publish Then click add new now. I want to create a portfolio page click on publish now Let's click add new again. I want to create a blog page. Oops I typed here not here inside this add title here blog now Click on publish and I want to create another page. Let's click on add new. I want to create a contact page Now click on publish Alright, we have created our pages but at this moment all the pages are blank. Let's just have a look how it is Looking right now. So from top left click on visit site. I'm opening it from a new tab So at this moment our website is looking like it I know it still looks super boring super ugly and we will make our website Supercool out of it. So first have a look here. You can see hello world Inside the home page. Why is that because by default what piece shows all the blog post on the home page? But we don't want that because for blog we want to create a separate page That will only show the blog post and for the home page We want to create a custom home page, right? so let's go back to our WordPress dashboard and from left here If we hover over on settings from their lives click on reading then you can see here your home page Displays by default. It's your latest post So let's now click on a static page and home page We want to select the home page. We have just created the home and the post page We want to select the block page and now click on Save Changes If we now go to the front end of our website And if we refresh it now we can see it says home instead of displaying the blog post So at least we can understand this is the home page cool So at this moment This is our header and this is our footer and we will be creating our home page in between this header and footer though the header is not complete at this moment because we will be adding our logo at the left and our main navigation or menu on the right side and also we will be Customizing our footer but at this moment, I know you are excited to see how to create a complete page So right after completing our home page, we will be customizing our header and footer So let's now start creating our home page using awesome elemental page builder So we start creating our home page using elemental page builder here at the top bar You can see edit with Elementor so you can click there to start creating our page But I want to show you the usual way. So let's go back to our WordPress dashboard let's now go to pages to all pages and Here you can see home page. Let's now click on edit here You can see the big button says edit with Elementor. Let's now click here Okay. So now we are inside elemental page builder the most exciting part of this tutorial here inside elemental page builder on the left You can see all the available elemental elements and on the right side here You can see all empty space basically This is our website and we will be creating our website Just by dragging the element from the left and we will be dropping that into the right side in this way So before starting creating our page, I want to make you familiarize if elementor's three basic things or three fundamental things if you understand these three fundamental thing You can create anything using this page builder Literally anything so I have made an illustration for you So basically you need to understand these three things. Number one is section Number two is column and number three is elements so your elements or wizards because sometimes I say elements sometimes I say widgets so you only need to basically Understand these three basic things the most outer thing is section and inside a section you can take multiple columns Even you can have one single column you can have two column 3 column Inside a section and then inside a column you can have multiple Elements and what are elements elements can be a text elements can be a heading? Elements can be an image Elements can be a YouTube video so if we now go back to elemental page builder Whatever you are seeing on the Left all these are elements So like here at the top you can see in our section or heading this heading is a element Images an element video is an element like that. I believe you already understand the basic So let's now be more practical. Let's now first take a section to take a section here on the right You can see a + icon. Let's click here Then you can pick any structure from these like a single column structure or two column structure or three four Five all these kind of structures. So first, let's take a single column structure this one. So this is our section so now if we want to edit or work with this section We need to click here on the six dots let's now click here. It tries to guide me Hey, so let's click on got it Okay, if you click on these six dots on the left, you can see here at the top it says edit section So right now we are at the section level. So here you can see it peps number one tab It says layout so from here, if you want you can give it a height to give it a height here You can see height So let's from here click on minimum height and I want to give it a minimum height of 400 pixels so right now our section is 400 pixel height and if you have a look you can see on the left and on the right, there are some Spaces so if you want to make this section full width first you need to click here is stretch section Let's turn it on and then you will have the option for content width from here You can make it boxed or full width this for now. Keep it too boxed. Then let's now go to under style tab here from under this style tab You can do all the styling of this section Like if you want to add a background color or background image you can do that from here You can see here background type if we click on this paintbrush icon Then here you will find the color option Let's click on this color picker. If we want to give it a grey background color like this Just drag your mouse cursor from here and pick a color that you want to give it as a background color for now I'm selecting this grey color for background in this way. Now. Let's see how we can add elements inside of this section So to add a element you can click here on this plus icon or on the left Here on the top. You can see a Rubik's Cube icon Let's click here. And let's now drag a heading inside of this section here so this is a text widget or element now if you want to change the text you can change the text from Typing here, or you can change it here by typing it on screen like here I want it to say business Planning and I want to make it centered. So here you can see alignment Let's make it centered and then here you can see HTML tags So right now by default, it's h2 If you want to make it more smaller You can a ch3 or you can make it h4 to make it more smaller or you can make it h2 again so right now we are basically editing this heading so if we now go to under Startup here like here you can see the options for text color. Let's click on this color picker You can change the text color from here. Like you can make it red or white or black for now Let's keep it black and then click outside here. You can see typography Let's click here on this pencil icon Now here you can see the option for font size if we drag this bar to the right Our font size is increasing if we drag it to the left. Our font size is decreasing Also, we can manually type it like if we want to keep it 42 pixel like this or 50 pixel this way Also here you can see family so we can change font family from here Like I want to make it Poppins font. I'm tapping here Poppins and click here. Now. It's popping font We can change the font weight from here by clicking here. Let's make it super bold Then here is the option for transform if we want to make it all uppercase Let's click here on uppercase or if we want to make it all lowercase like this for now Let's keep it all uppercase also here You can see line height options so you can increase the line height or decrease the line height Let's now remove it to keep it default and here is the option for literary Spacing like if we drag it to the right The letter spacing is increasing if we drag it to the left. The letter spacing is decreasing. So I want to keep it default So let's now remove it from here. All right now click outside. Now. Let's say you want to add another heading Underneath this heading so you can go here on this Rubik's Cube icon and you can just drag another heading underneath this Business planning heading and drop the new heading here and you already know that how to make it centered how to make it bold upper case we already have seen that with this heading right and if you don't want this heading you can To go here. You can see a pencil icon right click here and click On delete it's instantly gone also if you want to duplicate this heading Instead of dragging a new heading each time and give it all these tiles what you can do to make your life easier Just right click on this pencil icon and click on duplicate. Its instantly duplicated Then let's say here instead of business planning. You want it to say? modern solution oops modern Solution and let's say if you want to make this solution word Italic, right after selecting this solution word. You can see here top and italic icon click here The solution is italic right now. Let's say you want to make this modern word? Underlined. So after selecting just click here on this underline icon. It's underlined. How cool is that? Ok, so underneath these headings. I want to add some text widget So let's now click on this Rubik's Cube icon and here you can see text editor Let's just drag this underneath the second heading here So you can change these texts to anything from typing here or you can type it on a screen from here Then let's go to style I want to make it alignment to centered also you can change the text color from here dragging it to the right left Until you are happy with the color like this. Then let's say underneath this text widget I want to add button So let's now go to this Rubik's Cube icon again and here you can see button So let's now drag this button underneath this text widget. So here is our button element And right now it says click here. So instead of click here. I want it to say contact us So from left, you can see here text here instead of click here. I want it to say Contact us And I want to link it to our Contact Us page. So here you can see link I want to link it to our contact Paige There's forward-slash contact then here's the option for alignment We can make it left aligned Center aligned right aligned Let's keep it centered and here is the option for size By default, it's small. We can make it medium or large or extra-large Let's keep it medium. Then now go to is tight up here because instead of this gray color I want to change its background color. So here you can see the background color option. Let's click on this color picker I want to make it a green button like this now click outside Now here you got the option for border radius. So let's give it a border radius of 25 pixel So right now you can see border radius all around with this button So instead of 25 pixel lists, make it 20 pixel like this also If you want, you can change the text color from here like if you want to make it black or red I think what is fine here like this and If we now have over on it Nothing is happening. If you want to add an effect on hover so from left here right now We are on normal. Let us now click on Hoover and on Hoover I want to change the background color to Maybe black so if we now Hoover over on 8 the background color change to black Also, if we want we can add and Hoover animation from here you can see the option Hoover animation Let's select the pulse 1 and if we know hover over you see the pulse effect Or we can make it to push So if we now Hoover over on it, you can see the push effect like this. So for now, let's keep it pulse Now let's say instead of one button. You want to button side by side? So, how can I do that? If you click on this pencil icon right click here and if we click on duplicate is Duplicated one under another but I to the east a side-by-side So, how can he do that? so for now Let's just click the newly created button now on the left you can see an element in our section Let's now drag this inner section Here. So basically you can see here two column on the left here is one column and on the right here is another column So now what you can do you can just right click on this pencil icon and Click on copy and then inside this left column right click and then click on paste How cool is that? Even if you don't want this button anymore just right-click here and delete this button So now this button on the Left column and on the right column, we want another button So on the same way, you can just copy and paste it inside here but I want to show you another way like here you can see the column icon if you right click here and Now click on duplicate. He's instantly Duplicated so we don't need this empty column anymore. So right-click on this column icon and delete it So now we have this two column and this button let's click on this pencil icon and I want to make the alignment to the right for this button and For this button. Let's click on this pencil icon And I want to make it aligned on the left like this and then on the right button instead of contact us I want it to say maybe see portfolio because every business owner Wants to show their portfolios. Also if you want to change the color of this button only you already know what to do Just go under this tile tab and from here background color for this one Let's make it a blue button like this And also I want to show you another cool thing if we go to Content on this button editing here You can see an option for adding icons if we click on icon and here you can see tons of available icons So let's this down arrow icon and click on insert now You can see a hand arrow here on the left But instead of left if you want it on the right side here you can see icon position You can make it after like this and now let me show you another interesting thing that will blow your mind Like this button is now blue color and on hover. It's black now Maybe you are thinking you also want to make this button color blue You don't have to do that manually now only you need to do just click on this pencil icon, right? click here and Click on copy and then on this button right click Here and this time instead of clicking on paste. You just need to click here on paste style So instantly it becomes blue as well like this one But I want to make it aligned on the right like this. So basically when you want to change anything on element level you need to click on this pencil icon and then you can do Everything within this content style and under this Advanced tab And if you want to work with on any column level you just need to click on this column Icon and if you want to work on any section level you need to click on this six dot icon Let's say instead of this gray background You want to add a background image on this banner? All you need to do from under this tile tab here. You can see an option for image. Let's click here Right now we have no images So let's now click on upload files now click select files now from inside this folder inside to twelve five images inside images folder Backgrounds, I want to select this image. Let us now click on open it's uploaded Let's now click on insert media button here so our background has been added but now we cannot see the text properly because it's black and our Background is also black. So let's now make our headings color first Just click on this heading and from under the style tab here is the color picker. Let's make it white also I want to make this one's background color of white like this. Also the text widget color I want to make this text color to white like this now Let's click again on this six dot icon So here is the background image, but we cannot see the background image properly because we need to save the position So here you can see the position. Let's now make its sender sender Attachment let's make it is call actually by default. It's a scroll and here's the repeat Let's select no-repeat. And here's the size. I want to make it cover So no matter how big the image is It will cover all the available area of this section now you can see our background is Kinda whitish and our fonts color are also white so we cannot read the text Properly in this case. I want to add a background overlay over the background So to do it under the background here you can see background overlay Let's click here, and then you can see background type Let's click here on this classic icon now select the color from this color picker Let's select black color from here now click outside and then here you can see the option for oppacity so if we now drag this opacity to the right our background is less visible and If we drag this opposite to the left our background is more visible But our main purpose is to make our text more easy to read That's why I'm dragging this opacity to the more right? Let's keep it point 5 like this cool Okay, but I think I haven't talked about the Advanced tab what it is Okay, basically from under this Advanced tab, we can add margin or padding That means the spaces you need like here. You can see the option for padding on the section level so if we now want to add some space at the top right left and bottom We can do that from here. Like if we give it 50 pixel of padding you can see 50 pixel of padding has been added at the top bottom Left and right but I don't want that I only want to add padding at the top and bottom not on the left and right So to do it first You need to click on this link icon to unlink it then here top 50 pixel is fine But on the right, I don't want any padding. So let's make it zero and bottom. Let's keep it 50 and on the right I want to make it zero like this So not only on section level if we click on this text widget and now if we go to advanced Let's say we only want to add some space at the top so we can do that using Padding or margin. Let's now have a look on margin Let's now first unbind the margin and I only want to add some margin at the top. So here let's add 100 pixel at the top is too much less a 20 pixel like this Alright, it looks clean. Now now let's say you are happy with this hero section So when you are done with all the editing's then you need to click on this Update button to save your work Because nothing sucks than losing your hard work So after changing anything, never forget to click on this Update button Also, I want to give you some quick tip like on this button You can see here on the right there is an icon So let's click on this button and let's say accidentally you have deleted this icon by clicking on this delete icon So don't panic all you need to do you just need to click on? Ctrl Z or if you are on a Mac, you need to click on command Z So no worries if you accidentally do any mistake You can always undo that by clicking ctrl Z from PC and command Z from Mac Also from the bottom left here You can see an history icon if you click here You can see all the history you have changed so far so you can go to any on your stage You can go back to that like this is the last change you have made But if we want to go back to the earlier stage like on this stage click on this history icon We'll got back to that stage or more earlier like here Let's click on this history icon we go back to more earlier stage So in this way, you can always back and forth on the stage. You're working, isn't it? Cool? I hope you already understand all the basics of a limiter page builder so now it's time to create our real home page and Now I want to delete this section all of this hard work to delete it I need to click on this X icon here. I'm clicking here to delete it. It's gone No worries, because I have a surprise for you. I have a gift for you I already have made the whole home page template ready for you So to import that template we need to click here on this folder icon. Let's click here By the way, you can also see some ready templates Here that's provided by Elementor. But most of them are come with elemental pro version So if you use elemental pro, you will get all these pro templates, but no worries i'm giving you this beautiful professionally built template for free as a gift to you So to get the template you need to click here on this top import template icon here Let's now click here and then click here on select files Then inside the templates folder Here you can see adjacent file says JFD corporate home Let's now select this one and click on open now here you can jfd corporate home So this is the home page template that I have made for you now Let's click on this green insert button here cool. It's inserted So you can see within this template here is all the sections here is our services section Here is about a section here is latest work section Here is nice pricing tables then here is latest post then here is nice testimonial section all the client logo section a nice Call-to-action button section. I will show you everything how you can customize it on your way Just follow along. So not only for homepage. I have also created templates for about Us page services page portfolio page contact us page and to get all this templates all you need to do you need to go to Jim for her the digital comm forward slash Elementor 1 to 7 I will put the link in the description from that page if you scroll down a little bit, you can see your important links and Under that here. You see download all templates plus images are using this tutorial You just need to click here Then you can download all the templates and images we're going to use for this tutorial It took me more than a week to create all these templates But I'm giving you all this as a gift because I want to make your life more easier Ok, so now let's start with the hero section So here you already know how to create this kind of heading This kind of text widget and all these buttons with hover effects now if you want to change the background image of this section You need to click on the 6 dot icon and then from left click on style then here image Let's click here. Go to upload files select files now off to download the file You will basically see these two folders images and templates So templates for has all the templates and inside images You will find all the images you can use your own images or for now. You can use all these images I have given so let us now click on this images folder Backgrounds, I want to select this image. Let us now click on open now click on insert media. It's done Let's now go to our next section There's our services section here first, you can see Subheading. So if you want to change it just click over here and then you can change this text to anything you want also If you want, you can change all this color from this style tab all the typography there are sizes if you want and then here is the main heading like if you don't want to make it italic just select this and Click on this italic button again to undo it But I want to keep it italic like this and here is your single services section so you can change basically Anything this heading this text widget just only by clicking over it and then on the left You will find the option here. You can change the title from here Like it says right now branding strategy You can change it to anything then if you want to change this bottom text you can change it from Here and then if you want to change this image, you can see here is the option for changing image Just click on this image and then you can upload any other image if you want Just by clicking here on select files Then inside images folder here is the icons folder You can select any image from here Like if you select this image and click on open now click on insert media like this But all you need to do if you want to keep similar height and width From left you see image size you can change it to anything like large So this image is comparatively larger than this image but I want to keep it thumbnail 150 by 150 this size like This but this image and this image is same. So I want to go back to the previous image so, you know what to do from this history tab I want to go back here one more time there or this stage like this so I got back my previous image and when you are happy with it - just click on update to save your work and Here is basically two columns This is the left column and this is the right column and here you can see one two, three four five six Services, if you want to add more all you need to do here you can see in this row at the top here you can See another six dot icon just right click here and click on duplicate So more two services are added here in case if you have more services So from there You can change this title and you can change this text you can change this images to your own images This way and if you don't want that just click on this X icon to delete it Also instead of this images if you want to add Icons you can do that as well Because basically to create this I have used this element here You can see image box. I have used this element to create it So let's say if you don't want to use image instead if you want to use icons you can do that I am showing you how so for now. Let's delete this one right click on this pencil icon and click on delete So here we have empty column and inside of this column I want to drag this icon box element and drop it here like this So here's the heading here is the icon and here is the text. You can change everything from left also Here you can see the icon at the top if you want to make this icon on the left from here You can saikhan position you can make it to the left by clicking Here and it's a ch3 if it's too big for you you can make it H4 this way also if you want to change this icon click here on this icon You can select any of the icons available here. There are tons of available icons for now Let's select this icon and click on insert now from left click on this tile tab from here You can change the icon color by clicking on this color picker Let's say if you want to change it to red like this. You can do that. Here is the option for spacing so if you increase the spacing it will make more space in between these text and Icon then also here is the option for size If you want to make the icon size bigger You can drag it to the right Like this if you want to make it is smaller Drag it to the left like this in this way Now here is the option for rotate If you want to rotate the icon You can do it from here in this way like this and if you want to keep it default Just remove it from here. So it's now default rotation. Now fold this icon option and click on this content so this is basically the settings for this heading and Texts, so from here, you can adjust the alignment to centered. All right, let's keep it left also you can change the vertical alignment by default its top you can make it middle like this then if you want to make the Spacing in between this title and text widget you can do that by dragging these to the right or left This way you can also change the text color like this Also here is the option for changing this description colors so you can do that from here this way like that then now let's go to Advanced tab from here if you want to add some spaces all Around with this icon box. Just go to here padding Let's say we want to add 20 pixels of padding all around with this icon box. You can do it this way Also, if you want to add a border all around this you can do that from here You can see the option for border here. So let's click on border If you want to select a solid border click on solid If you want to give it a double border like this or a dashed border like this, you can do that I'm just showing you what's possible Also, here's the option for background. Let's click on background. Let's say you want to change the background color? So let's click on this paintbrush tool click on this color picker Let's say you want to make it pure white like this or a gray color like this Or a bit radius like this you can do that then also here is the option for motion effects Let's click here on this motion effects. Now click here. If you want to add some fading animation click here on fade in Here's the animation duration. Let's make it slow and Here also you can add animation delay layers. Give it the delay of 1000ms Cool, so instead of fading if you'll select fade in left So you'll get this kind of cool animation then let's say you want to duplicate this So let's just click on this column icon right click here and click on duplicate Its instantly duplicated and if you don't want the right column just right click on this column and click on delete Then if you want to duplicate these two column together Underneath this just click on this six dot I can't right click and click on duplicate The whole row is duplicated underneath here how easy it is Then you can just simply change all the icons if you want like this one You can change all these icons all these headings to different headings all this takes two Different text you are totally free whatever you want to do with it. So I'm just showing you what's possible now I'm going back to the initial stage by pressing command Z couple more time like this Okay, cool now, let's go to our next section So this is another section with background you can use this section on your own strategic way like you can talk here about yourself or about your team and Then on this button you can link it to your about Us page So here instead of try it now you can say it about us And you can link it to your about page like this Also, you can change all the subheading heading and all this text widget the way you want now I want To change the background of this section. So let's now click on the six dot icon go to a Styles tab Click on image go to upload files Select files now for this I want to select this image now click on open now click on insert media Background image has been added Also, you can see I have added an empty column on the left. So I keep it empty But if you want you can add any image here like if you want to add an image You just need to click on this plus icon Drag an image element inside here like this and then click here to choose an image for the moment Let's say you want to select this image and click on insert media. It's instantly added also if you want you can adjust the width of these two column just by keep your cursor at the middle here, and you can drag it to the right to adjust the width or You can drag it to the left to adjust it. See how easily you can manage it So for now, I want to keep the left column empty some pressing command Z couple more time Now, let's go to our next section. Here is the portfolio section so in this section You can showcase your work. No matter what your profession is Each professional has their own personal portfolio. So, let's see if you're a photographer You can showcase your photography here. If you are a web designer, you can showcase your completed websites screenshots here So if you want to change these images just click on this image and then from left if you want to change the image Just click on The image and you can upload any image from your computer So click on select files Now I'm going inside portfolio. Let's say you want to add this image. Let's click on open now. Click on insert media So these images added instantly? So in this way, you can change all these images also if you want to add more images You can just click on this six dot. I can't right click and click on duplicate more three images are added here So all you need to do you just click on this image and change that you can click on this image and change that in This way you can add as many as portfolios you have so far now Let's click X to delete this newly created section or row. And here is the title of this portfolio You can change it from here Even if you want to add some text underneath this heading you can do that all you need to do just go to here and click on this Rubik's Cube icon Just drag a text editor underneath this heading here and drop it Let's now go to style and let's make it centered like this So you can basically tell a short summary about this specific portfolio So let's do the same with rest to portfolios. So let's click on this Rubik's Cube I can't drag a text editor here underneath the heading Go to style and make it centered now again Click on this Rubik's Cube icon drag this text editor underneath this heading here Now go to style tab and make its inert then you can change all these text the way you want Maybe a short description about this portfolio things like that Also, if you click on this image, this image will be pops up with a nice lightbox But we cannot see that effect within this elemental page builder But when we will preview this out of elemental page builder we can see that okay, so let's now go to our next section This is the pricing section Though this is not a ecommerce tutorial so in this tutorial I will not show how to create a shopping cart with this and add all the payment gateways This tutorial is not about that But it still you can use this kind of price list inside of your website Even if you don't want to make a direct Rancic sable like here You can give your visitors an idea how you charge was your pricing? you can give them an idea from here and Then within all these call-to-action buttons you can link that to your contact page So people can get an idea from here and they click on this contact Now button They will go to your contact us page and then they will contact you through your email on that way But it still it's very helpful if you want You can keep this pricing list inside of your website no matter which industry Are you in you can use it without any hesitation? If you want to reveal your pricing in public, so from here You can change each of the thing like here. It says designing if you want to change it Just click over here, then you can change it to designing to any other thing if you click on this price You can change it to any other price instead of $40 all this if you want to change all these tips Just click over on this text to Jade. Let's say here. You want to add another line? So let's just click here and click in there or let's click shift in there And then let's say you want it will say graphic design like this You can see her graphic design, but you want to make the graphic word bold So just grab this and then here you can see a bold icon click here It's instantly bolded cool So in this way, you can change all of this also here to make this design more cool I have added a cool background price effect on the back You can see a big 40 on the back If you don't want that just click here so you can see the value 40 here just to remove this if you don't want it Like this so you're free to do whatever you like but I like that cool design some pressing command Z because I want to keep it and on the second pricing table You can see a gradient effect from top to bottom if you want to change the gradient color to any other color, you can do that by clicking on this column icon here and Go to style then you can see under background here is the color top color. Is this kind of reddish color? And the second color is kind of bluish color But if you don't want that you can change it to any other color from this color picker All right Now, let's go to our next section here is our blog section but we will discuss about this section a little bit later because right now we Don't have any blog post. So after creating some blog post, we will create this section So, let's see skip this section for now. Let's go to our next section This is our testimonial section so again you can change the subheading main heading and all this text on the same way and Here is your client testimonials. So here's the client headshot here. Is these two ratings? Here's their testimonial their name and their company position or what they do So if you want to change the picture of your client You just need to click here on this pencil icon Then you can change the image from here and you don't need to upload any rounded image because I have created in that Way if you even upload a is quite image, it will be automatically squared like this So no worries So let's say click on this choose image and let's go to upload files select files from inside these headshots folder Let's select this image and click on open now. Click on insert media See it's adjusted properly Just to make sure you have not changed this ratio because I have made this so you don't have to do anything with that Like here instead 100 by 100 if you make it 150 by 150 and click on apply this image will be bigger on 150 by 150 pixel So it's now way bigger than rest, too So if you want to make it bigger make sure you do that as well with all these images as well like here also instead of 100 by 100 you also need to make it 150 by 150 to keep the same ratio of the images, but to me 100 by 100 is fine So let's click on this pencil icon and instead of 150 I want to make it 100 by 100 and click on apply also You can make it left aligned or right aligned of course centered aligned looks more good now here's the option for ratings Let's now click here and then you can see the options for rating scale It's out of 5 by default. If you want you can change it to the 0 to 10 scale Like this and here waiting you can give you let's say 9 out of 10 So in this way, if you go to understate Abe from here You can change the size of the stars like this But I want to keep it 20. Also if you want you can change the spacing so if you drag it to the right the Spaces in between the stars is now increasing but I want to keep it to like this Also if you want to change the color of the stars You can do that from here Like you can make it black or red like this cool and you already understand how to change this This is just a text widget just click here and you can change all the testimonials from here Also, you can change your trance name by clicking here. You can just type your client name here Also underneath that you can write their company name or their role on their company like that Also instead of 3 in a row if you want to add another testimonial on the same row just right-click on this column icon and click on duplicate another Testimonial is headed here. If you don't want that, you know, what right click and delete also, if you want to duplicate this whole row just click on these 6 dots and right click click on duplicate now new 3 Testimonials are added underneath for now. I don't want that So let's now just click on this X to delete it in this way. Alright so underneath Testimonial area here is the work with area So basically here you can add all the logos of your clients you have worked with so let's now click on this pencil Icon here. You can see all the clients logos So if you want to delete this from left You can see all these images and at the top here is the Delete icon Just click on this delete icon to delete all these logos. It says I'm sure or not. Yes I'm sure let's click on delete. So all the clients levels are gone So now you can upload your clients logo just by clicking here on this + Then go to upload files select files and from your computer You can upload all your clients logo you have worked with so for now I want to select all those clients logos again. So inside brands folder I want to select all this together by pressing command a and let us now click on open then click here create a new gallery and From here. You can just order or reorder these logos, or even if you click on this diverse order They will be reversed. So in this way, you can order the order all the logos then you need to click on insert gallery So it's inserted here nicely Then here also you can see the options for image side slides to show like your image size if we make it too full It's now showing the full size of the image and here the slides to show right now. You can see here is three images in a slide, but if you want you can Change it to four. So right now for logos at a single slide has the option for images stretch Of course, I don't want to be stressed. I don't want to make this image is stretched Then here is the navigation you will have the option for dots only or you can select arrows and dots So if you select this option you can see here is a navigation arrow at the left So by clicking here, you can go to the previous logo Also here is the doors underneath you can navigate through these dots like this So if you want you can keep both arrows and dots but I want to keep only dots here All right, and here at the very bottom of our homepage here is a nice Call-to-action area like here. It says we offer awesome service. So if we have something very Good to offer to your customers. You can put that at the bottom of your page by using this kind of nice Call-to-action and of course with a nice call to action button So I want to link this button to our Contact Us page. So I'm linking it to contact page so not only Inside of your website if you want to make these call to action button to any other place like if you have a youtube channel So you can say here Don't forget to subscribe our YouTube channel Then you can put here your YouTube channel link So you can just copy your YouTube channel link and paste that here on the left under? Link field here or also, you can say don't forget to like our Facebook page then in this button. You can put your Facebook Official pages link here then also here you can see a gradient background a reddish background - a blueish Background if you want to change that just click on this column icon Then go to his tile and then here you can see the primary color - a blue color if you don't want that you can Make it to anything like white Black that we want, but I want to keep it blueish like this also If you want you can change this second color. So this is reddish color - any other color like this or this? anything you want you can basically pick any color to match with your brand curl and Now a whole after doing a don't forget to click on this Update button to save our work so let's click here on this Update button to save it and now If we want to preview our page from bottom-left here, you can see an eyeball icon So let's now click here to preview our page so far we have done So here is our hero section looks great Then underneath that here is our services section looks great with nice animations then underneath that here is our Another section with a background. It looks also great then now scroll down here is our portfolio section all the portfolio looks great and Here you can see if we click on any of the images It appears with a nice lightbox. It looks really really cool. So let's now click outside Now let's scroll down here is the pricing tables. It looks great And if we click any of the content button that takes users to the contact us page then underneath that Here is the latest post section, but we don't have any post right now. We haven't posted any blog post So this section is right now empty, but we will get back to this section after completing our blog section I mean after posting some blog post. Ok now underneath that Here's the testimonial section looks really great and here underneath all the client logos And then here is a nice call to action area and then here is our footer Perfect ok, so now before creating other pages, I wanna make some basic customization like introducing you with the theme customizer and Then we will be customize our global header and our global footer also, we will be creating our main navigation that will be shown on the top right here and then We will create our other pages and we can create our next pages really quickly as you are already familiar with Elemental page builder. So now close this preview page now from elemental page builder Let's go back to our WordPress dashboard. So from top left this hamburger menu, click here and Then click here exit to dashboard So now first let's create our menu So from appearance layers, click here on my nose and then here you can see menu name. You can name it anything you want So I wanna name it main underscore menu Actually, you can name it anything because no one can see it now Let's click on create menu. And in this menu, I want to add all the pages we have created So not only pages you can add anything inside of your menu Like if you want you can add custom links if you click here on custom links You can put a custom URL Even if you want you can add your Facebook page URL and add that to into your menu But for now, I want to only add our pages. So I'm clicking here on pages. Let's now click on View all So here is our all pages home blog about all these pages. Let's now click here select all and click Add to menu So here is our all pages added home blog about I want to make the about page under home so to do that just simply drag this about and drop it under home like this also after about I want to put services and then Portfolio then blog is fine. Then contact is fine. Then here underneath you can see display location This is very important as we are going to make this our main navigation So let's check this one header primary navigation Let's select this one and now click Save menu So at this moment if we have a look of our website fronting from top left Clicking here visit site from a new tab that may no supposed to appear here It will be appeared here shortly right after customizing our header so we can see that shortly just to make sure you have created this menu and Selected this primary navigation header primary navigation selected. Alright Now I want to make you familiarize with theme customization option So from top bar here, you can see customize. Let's now click here on customize So this is the customizer of our website like all this inner section We have created using elemental page builder But we still need this customizer to customize other things like to customize our header or footer And some other basic general stuff like here you see in the home page here this text home Looks so weird So if we want to remove this home text from customizer from the left, you can see here page Let's now click here on page now click on page title here. You can see display title bar section Let's disable this now that we add home text is no more also here You can see some space at the top if we want to remove that Let's now go back and now click here on page layout then here. You can see display content top margin It's by default enabled. Let's click here to disable it that top margin space has gone It looks super slick right now. So let's now go back. Go back one more time. Now. Let's have a look What's inside this general option? Let's now click on general So from here if we click first on the general layout here You can see here is the option for website layouts on the left like by default It's full width, but we can make it boxed like this But we cannot see any changes on the right side because we have made this whole page using elemental page builder But let's have a look here. You can see site max width 8 1600 pixel if we make it to 1000 pixel like this You see our whole website becomes more narrower 1000 pixels so now let's make it that way. It was let's make it full width and side max to it The default was 1600 pixel. Let's keep it 1600 pixel. I'm just showing what options they gave us now Let's go back and then here you can see page animation and play loading. Let's click here So here you can see the option for enable page animation if we enable it So you can select any of the animation type from the left like until your page is fully loaded Then you can see this animation before loading your page like if we hover over on it You can see a fading effect. If you select this one your page will be loading with this faded in So if you want you can use any of these but I don't want that So I'm disabling this one and here is also option for enable page pre loading. So let's enable it and have a look So personally I like this option because here you see a option ad Progress bar. So until your page is fully loaded You can see a progress bar at the top here goes left to right That looks pretty cool. Also, you can change that progress bar color from here Like I want to select a reddish color something like this one and click on apply now have a look See our red line comes from live and that goes to the right until your page is fully loaded Also instead of top you can use it at the bottom from here. Let's select bottom So you can see the effect at the bottom like this, but I like the top one. So I'm selecting the top So this kind of progress bar animation looks really cool So let's keep it and to save it click on publish at the top here now let us go back and then here is the option for Custom J's code if we're good at JavaScript and if you want to write any JavaScript code by yourself Here is the place you can write that here So now go back and then here's the option for Google API keys and SEO. This is very important Let's click here and here you can see Google Analytics code so if you want to track your Visitors how many visitors you are getting every day or every week you can monitor that using Google Analytics? And tracking your visitor is really important So to enable your Google Analytics into your website you first need to go to your Google Analytics account and you need to click here on this gear icon that's admin and then here you can see Tracking info click here then click on tracking code then inside this snippet You can see here G tag config then a small tiny code. Let's copy this code from here and let's now go back to our customizer and Paste that code inside here. So your Google Analytics is Activated right now. Let us now click on publish to save it. Cool now, let's go back Go back one more time, then you can go inside this appearance options here You can find all the options for we've set background color change content background website frame Let's have a look What's inside skin options? Like if you have video player or audio player inside of your website You can change the skin from here Like if you want a dark background and white icons of the player or a white background dark color icons of the player you can see the options from here and Underneath here. You can see the pagination option So like when we will have a lot of blog post then we need to use this kind of pagination and from this place you can select which kind of Pagination do you one so you can select the pagination skin from here? So we will have a look on this after creating our blog page Let's now go back. And also I have a full complete tutorial about all these options There's a complete flock theme customization tutorial. There's a 45 minutes complete tutorial So if you want you can check that out. I will put that link. I will put that tutorials link on the description If you really want to learn deeply about all these flock stream customization option but in these tutorial Let's just discuss about all the options that we need to create our dis website Because we don't actually need all these options all the time But you know They just gave us all this and like I said if you want I have a full tutorial on that You can check that out. So now let's go back but here is one important customization option. That's site Identity let's now click here on site identity So from here, basically you can change your website logo right now If you go at the top you can see here only the site name and tag name That's coming from here site title psyche tagline. So for now, let's upload a logo to upload a logo We need to click here on select logo, then go to upload files select files Let's now select our dis logo and click on open now. Click on select If you want, you can crop this logo by adjusting it from here But I don't want to crop this logo. So I'm clicking here is keep cropping So here is our logo hand it looks super big but no worries We will adjust that when we will be customizing our header for now Let's just keep this big logo and let's have a look on the other options see you already know you can change the site title and tagline from here and Then if we scroll down at the very bottom you can see here site icon So what is a site icon? Site icon is basically the little tiny icon what you can see on the top of the browser tab Like if we go to Jim for her the digital calm here, you can see at the top a little tiny icon That's the favicon So if we want to add a 5 icon into our website, we can do it from here so site icon Let's click here. Select site icon Let's go to upload files select files, and I want to select this favicon Let's open it now click on select. No, I don't want to crop it. So click on skip cropping Here we go. Our site icon is showing Immediately. So to save it lives now click on publish Ok. Now, let's go back and here you can also see the options for a blog here You can see the customization options for single blog post page Blog page we'll have a look on this later after creating our blog page. So for now, let's go back now Let's customize our header and we will be creating our header using Elementor header template So let's now close this customizer by clicking here on the six icon Let's now go to our wordpress dashboard and from lift bar here underneath Elementor here you can see templates hover over on it and Let's now click here on add new then. It says choose template type from here Let's select header this one click here and here lips now name our header I want to name it header one now. Click on create template So here whatever we will be creating that will become our global header So let's first click on this plus icon and for the header. I want to select this structure So let's now click here so here is basically to column the left column is less width than the right column because I want to put the logo on the left and our navigation or our menu on the right so first on the left Let's now click on this plus and here at the top You can see some elements some site header elements that's provided by phlox So here you can see an element logo. That's basically the logo we have uploaded from our theme customizer So let's just drag this logo on the Left column here so now we can see our site logo and here is some option like image size full or you can make it anything like thumbnail size but let's make it full we can change the width from style and Here the logo link is homepage Always keep your logos linked to homepage then now go to on style tab here You can see the width by default the width set is in percentage So from here, let's click on pixel. Now. Let's drag this width to the right. Maybe 200 is 198 let's make it 200 Okay, it looks perfect. And let's now click on the right column plus icon here now here you can see an element Navigation menu, so let's now drag this inside the right column, Col we can see our navigation here because on the left if you have a look you can see menu here our main menu is selected and right now We only have one menu that's main underscore menu that we have created a few times ago There it is. If we have had multiple menus, then we can find that under this drop-down But as we have only one menu, so it's selected by default Let's now go to a style tab. I want to make it aligned to the right like this also, if you have a close look the menu is not Vertically centered so let's click on this column and then on the left You can see vertical align layers make it middle. So it's now vertically centered Cool. All right Now let's select the header section icon on the 6 dots. So let's now make it straight and Content with boxed is fine. Let's now go to style tab and from here background type I want it to give it a background color. That's white and Also, I want to give it a border only underneath. So let us now click on border your border type I want to select solid so you can see the border is all around the header But I only want to give it on the bottom So here first layers unbind the width, and I only want to give one pixel of border at the bottom Oops, it's on the top. I want to give it on the bottom one pixel and color I want to make it something like grayish color Like this. All right. Also, I want to give some space at the bottom and top So let's now click on the six dot again and go to advanced and bind the padding Let's give it 10 pixel padding at the top and 10 pixel at the bottom and on the top Let's make it 15 pixel like this. Yep, it looks way better now Let's click here on this publish button to save our work So let's now close elemental page builder. Click on exit to dashboard. Let's now click on visit site We still can not see the header. We have just created why Because we need to tell what place to set that header We have created using elemental page builder to make our global header. So to do that let's click here on this customize and Now click here on header Then at the top click here hidden templates now here You can see hid our one that we have created there's added here, but we need to select this. So let's now click here Cold we can now see our header that we have just created awesome, by the way here you can see some more pre-made header templates that's provided by Elementor like if You select this one this red one. Let's click here So it's changed to that header, but we cannot see it because the menu color is white Let's select another one that's provided by phlox. So let's click here on this blue one So here you can see another pre-made header Provided by phlox if you want to use it You need to go here top and you can click here eat it with header builder then also You can adjust that using elemental page builder But we don't want to use any pre-made builder pre-made header because we already have created by ourself There's header 1. So let's select header 1 cool. Let's now click on publish now Let's close this customizer Perfect But now if we have a look if we scroll down our header disappears I want to make our header to be sticky at the top all the time No matter if we scroll down at the bottom, so to make it sticky. Let's go to customizer again Let's now go inside header and let's now click on header template settings here You can see in a ballistic header Let's now enable this by default is taking header height is a typical. Look, it's fine. Let us now click on publish and now close our customizer If we now is scroll down our header Sticks to the top, maybe you can see some cut off, but that's because of this what press bar So no one can see that Only when we are logged in we can see that cut off like if we open it from another browser where we're not logged in So if we scroll down here we can see our sticky header nicely it looks really cool awesome Now, let's create our global footer template So if we go to our footer right now, you can see the default global footer here So we will be creating a similar footer like this at the very bottom But at the top of it, I also want to add a sub footer So on that sub footer we can display some nice widgets like Facebook like box Instagram feed this kind of cool widgets inside of our website. So as we are going to display Widgets like Facebook like box Instagram feed so before creating the footer widget Let's now install some plugins So let's go back to our WordPress dashboard Let's now go to plugins to add new. So first time searching here Facebook like box So here this plug-in is a social post feed. I want to install this one Let's now activate this Click here. Allow and continue. All right, we don't need to do anything with this plug-in at this time Let's now install another plug-in. So from plugin, let's click on add new and Now I'm searching for Instagram by wpzoom So this one wpzoom social feed widget, let's install it now click on activate Now it scroll down here. We can see wpzoom Instagram widget is activated now. Let's click on settings Don't get scared with the settings. It's super easy Just follow along as if say Instagram feed widget So we need to connect it with our instant account sohere reconnect with Instagram button I'm opening it from a new tab. So it basically says it's my Instagram account or not. Yes It is Jaime script is my Instagram account handle so let's click here continue as Jim script and Here you can see an excess token. We need that. So let's just copy this access token and Let us now go back Here you can see a field access token. I'm pasting Max's token here, and then just click on Save Changes Alright our Facebook like box Instagram feed all plugins are activated that we're going to use on our footer So let's now make our footer template. So from here templates, let's click on add new Then choose a template type from here Let's select footer and let's name it footer one Or you can name it anything you want then create on create template So now first click on this plus icon and I want to take this two column structure then go to elements Here you can see the copyright element. I just want to drag inside on the Left column here. So it says copyright 2020 jimpad production all rights reserved actually this 2020 and Jim fad production is dynamic. It's coming from here You see there is a why inside double parenthesis here. So there's 2020s coming from there and you can see here site name inside double parenthesis There's actually the site name Jim forth production that coming dynamically If you don't want that, you can type here anything manually that will be appear here But I'm happy with it then on the right. I want to add some social icons So I'm clicking on this plus icon and from widgets I'm searching for Social create is social icons. Let's drag this inside right column here So here you can see Facebook Twitter YouTube icons and Not only that if you want to add other social link's you just need to click here on add item then click on this icon and here you'll find all the Popular social media icons like let us say if you want to add your Pinterest let's click on Pinterest and click insert and then here you can see the option for link so you can Put your Pinterest handle link here then here if you click on Facebook here You'll find the option for link. You can put your Facebook URL here You can put your Twitter URL here then click on YouTube You can put your YouTube URL here this way then if we scroll down here you can see shape By default its rounded but if you want you can change it to a square or circle like this I want to make the alignment to the right now. I scroll up Let's go to his tight ab here You can see color is official color, but it own to match with our website So I want to make it a custom color. So I want to make the primary color to white and then the secondary color to black like this and Then I want to make the size more smaller like this Let's make it 20. Okay. Let's keep it 18. Also, you can adjust the padding from here. Let's keep it point 5 Also, if you want you can change the spacing from here in this way, but I'm happy with the default one Also, if you want you can add border from here like solid border, but I don't want that Also, if you want you can add hover effect on the social icons, you can do that from here now. Let's select this section Click on the 6 dot. Let's go to style then background color I want to give it a dark color maybe something in between red and black like this And you see now we cannot read the text so let's now click here and go to style click on color palette and I want to make it white like this and Let's click on typography. I want to make the font size to 16 pixel like this. Maybe it's too big Let's make it 15 pixel. Alright now, let's click on the social icons again Let's reduce the size a little bit like this let's keep it thirteen and Spacing let's spread this pacing a bit like this eight. All right, and Lastly I want to add some spacing at the top and bottom So I'm clicking on this six dot icons and let's go to advanced and bind the padding I only want to give it some padding at the top maybe clean pixel and ten pixel at the bottom like this Alright, so we have created our footer and like I said at the top of this footer I want to add as a footer So let's now click on this plus icon to add as a footer at the top of it Let us now. Click on this plus icon and this time I want to select these three column structure. Let's click here So first on the Left column, let's click on this plus icon here I want to drag a heading here inside and I want it to say quick contact Let's make a th5 now Let's just duplicate it a couple more time duplicate now right-click here duplicate now I want to drag one of these on the middle column here and another one I want to drag it on the right column here So on the middle one, I wanted to say follow us on Instagram and On the third one I wanted to say follow us on Facebook so leaves now it stirred from the right column Here underneath this heading follow us on Facebook. I want to put a Facebook like box widget So let's now take on this Rubik's Cube icon and let's scroll down at the very bottom scroll down more Here you can see what place let's click on here here you can see more elements some of these are default WordPress elements and Some of these are coming from the plugins you have installed Like here, you can see easy Facebook like box that plug-in we have just in told a few minutes ago So let's grab this Element to the very right column underneath the heading here now here on the left You can see fanpage URL. So here I want to put my Facebook page URL Also, let's scroll down here. You can see the option for responsive. Let's check this one It's still loading here. But no problem. Let's scroll to the top and click here on apply Cool now we can see the facebook like box inside of our footer also, it looks super narrow so let's click on this pencil icon and here you can see the width is 250 pixel so I wanna remove it from here and let's now click on apply Kohl it now takes all the space looks way better Now from the elements here We can search one by one or from the top we can search so I'm here searching for Instagram It appears it says Instagram wizard by wpzoom the plugin we have just installed So let's just drag this at the middle right under the followers on Instagram widget cool But it's not showing properly right now. So here it says title We don't need this title because we already says at the top followers on Instagram. So I'm removing this title from here and here number of images shown I want to display 12 images and Desired numbers of images per row I want to display in a row for images So it's still looking like this, but it's only showing like this because we're inside element or page builder So just to minimize the page builder once and let's maximize it again It looks okay now and here underneath you can see a button view on Instagram if we scroll down From left here. You can see display view on Instagram button. I don't want that if you want you can keep it So i'm d selecting this one and from top let's click on apply Let's minimize the page builder again and maximize it again. It looks perfect and Side lifts column. I only want to add some text widget. So here's the text widget let's drag this underneath this quick contact heading here and Now here inside. I just want to paste some text So basically you can put all your quick contact Information like your address mail all the informations you want to share with your audiences your visitors Now let's do some final work with this footer so let's now click on the six dot to grab this section and let's now go to this tile because I also Want to give it a background color? Let's click on this color picker I want to give it a dark background color like this. All right, now, let's go to advanced and Bind the padding. I want to give a twenty pixel padding at the top or maybe thirty let's keep it thirty-five like this and At the bottom maybe 20 pixel. Yep. It looks alright, but now we cannot read the text So let's make it all white go to his tile and make the color to white. Let's do the same for all Style color. Let's make it white also for this one go to style color Let's make it white also for this text widget Go to style select text color. Let's make it white cool Let's now click on publish to save our work. Let's now go back to our WordPress dashboard Now from left, let's visit site Now I scroll down to the very bottom of our page Still we cannot see our footer you can already guess the reason for that, right? Like the header we need to tell what place to make that our global footer. So let's now click on customize Now I scroll down to the footer of our page Let's now from left click on footer and then footer templates, so instead of default footer Let's now select the footer one that we have created Let's click on this footer one. Here we go. Awesome Let's now click on publish to save our work and click on this X to close our customizer so now our header looks perfect and if we scroll down to the very bottom of our page We can see our footer and sub footer perfectly awesome Okay, so before creating other pages the last thing I want to do I want to change all the fonts like all the heading fonts and text fonts But we don't have to do that one by one like selecting these and change that font not like that We can do that all globally and if we change the font Once that will be applied on all the pages that we will be creating using Elementor So first place click here, eat it with Elementor again Now from inside elemental page builder, let's go to at the very left Click on this hamburger icon now here. You can see default forms. Let's click here So it says default fonts are disabled. You can enable it from the elementary settings page So let's click here elemental settings page so it takes us to the elementary settings page inside WordPress dashboard and here under General tab you can see disable default colors is checked and disabled default forms is checked So let's uncheck these all and now click on Save Changes Okay. Now let's go back to elemental page builder and refresh this page again Now let's click on this hamburger and this time click on default forms we can see the options for Changing all the Falls for primary headlines secondary headline body text ex in text So let's now click first primary headline here phone family. I want to select popping phones that Powa in there's the Google font Poppins You can see the heading font changes immediately and for the width I want to make it 900 like this and then if we click on secondary headline I also want to make it Poppins this one font where it lives make it nine hundred body text I also want to make it Poppins and Font-weight four hundred is fine. Now. It's in text. Let's now make it also Poppins and Four hundred by default is five hundred. Let's make it four hundred like this and once you have done all these at the top Let's click here on apply now if we scroll down you can see some colors has been changed as we have enabled Global colors. So let's now click on hamburger again and click on default colors So basically these bluish colors are getting from here. You can see the default color palette here the primary color Is that bluish color? Then the secondary color text color and Excel color? So let's have a look if you want you can select any palette from here Like if we select this palette this color will be changed like this if we select this one That will be changed like this if we select this palette the color will be changed on this way also
we can change that color palette by clicking here and Pasting our color code here or let's say I have clicked on primary We can select that by dragging any specific color We want instead of grabbing all the headings one by one we can do that only by Selecting our primary color from here. So for the primary color, I want to pick a bluish color like this and then for the secondary color, I want to pick a grey color and Then for the text color, I want to select Seven a seven a seven is this color? Yep, it looks perfect And then for the extent color, I want to select kind of reddish color like this now click outside Have a look. Yep, I like it So after selecting all the default color palette, let's now click here on apply So now this color palette and the default forms, we have just said that will be applicable for all the pages We will be creating using elemental page builder cool. Let's now create our other pages really quickly So let's now go back to our wordpress dashboard Now from what past bored, let's go to pages to all pages now We want to create our about page. So here is the about page Let's click on edit now click on edit with Elementor You see we already have get the header and footer from global header and footer and all the fonts, by the way The header navigation fonts looks more bold. We can fix that later for now. Let's create our about page So I also have created template for this page So to import that template let's click on this folder icon. Let's go to my templates Let's now click on this import icon here at the top click on select file Then from the downloaded folder click on templates folder Then you can see adjacent file says JFD - corporate - about dot JSON Let's select this one and click on open now here You can see JFD corporate - about so let's now click on this green insert button. Cool So here is our about template inserted and here is the all sections Here's the team section and then here is the nice call to action section and then here is our footer So let's start from the top. So here is our about page table banner You already know how to change the subheading and main heading you can change all these by yourself at this point I know and then if you want to add a background into this banner Let's click on 6 dots click on style then from background click on image Let's now click on upload files select files now from inside images folder Let's now select this image and click on open click on insert media cool So you can basically insert any background image you want. Let's now go to our next section So here in this section, you can talk about yourself or your team and on the Left column here You can put a call to action button, like instead of try it now you can say it contact now and can link it to your Contact page like this or anywhere else you want and then on the right side You can talk about your core values or about your core services here in this boxes So if you want to change any of it, let's click on this pencil icon and from there You already know you can change all these icons from here You can change all the titles from here and all the description from here Also, if you want you can change the icon position like this are these let's keep it icon on the top You are already familiar with all these sections all these icon box options Then let's say if you have only three core values if you don't want that just right click here and click on delete Now it's showing three is still it looks very good in design sense, but I want that back So I'm placing command Z also now, let me show you another interesting thing Let's say if you want this column at the right and this column on the left just simply drag this Column at the right like this. He immediately reverted and if you want it back just grab this and Toggle this in this way. How cool is that? even let's say if you want to duplicate this whole Section and then if you want to create another new section All you need to do just go here at the section grab icon or the six dot icon right? Click here and click On duplicate so now the intersection has been duplicated here underneath in this section Let's say you want to drag the left column to the right like this You can do that as well on this way. So basically you can do whatever you want So I'm just showing you what's possible. So for now, let's delete this one. Newly created section Okay. Now let's go to our next section this section is the similar section like home page We have a section like this on the home page So you already know that how to change all of this on your own way Like if you want to add a background image click on this six dot icon so go to style and from there Let's select this image again and click on insert media. It's instantly inserted and here on the Left column I keep this empty like if you want to add here a YouTube video or Vimeo video about your team or maybe you want to put here your office video or your work video anything you want to just click on this plus icon and Here you can see video element here Just drag this video element inside this column and then here on the left you can see the source if it's a YouTube video select YouTube and then just paste the YouTube video URL here if It's a via video from here. Just select a Vimeo and put your video video url here is instantly done and Also here you will find the option for autoplay If you want you can turn it on here is the mute option Here is the option for loop. Also you can change the controls color from here like this So even you can match the video player color with your website basic colors so now if you want to make this video vertically aligned just click on this column icon here and from left You can see vertical align. Just keep it middle now Its vertically aligned and looks more cleaner in this section Okay. Now let's go to our next section. Here is our team section so here you already know how to change this subheading you can change your main heading from here and Then here is the team member options So here you can put your team members headshot if you want to change an image Just you need to click on this pencil icon and from left You can change that image and to keep all the images balanced. I keep the size image size to medium There's 300 by 300 So make sure you upload a square size image, but it don't have to have 300 by 300 You just upload a square size image and from here image size. Make 8 medium 300 by 300 it will be automatically cropped into 300 by 300 pixel then if you want you can make the alignment to left right or Centered and then underneath the image from here. You can change the text so here basically you will put the name of your team members so you can change her name from here and Underneath that if you click here so you can put your team members role here her position in your company So it's basically a heading if you want you can change it to anything like this. Let's keep it h6 and you know You can make it all left aligned right aligned centered like this like all other regular phone settings You can do everything with these and then here is the social links of that specific team member Let's click on this pencil icon. Now. You already have seen the uses of social icons on footer settings So is the same thing like if you want you can add their Facebook account URL here Twitter whatsapp or any other? social links if you want to just click from here and select anything like Skype or YouTube even if you want you can add their email address here So let's close this so you can see it all there different platform social platform links for different Members like this way then also if you want to talk about or if you want to write a short summary About this team member, then you just need to click on this Rubik's Cube icon And from the earliest drag a text editor underneath these socials just drop it here so in this way You can talk about your team member so you don't have to have put that a state or only here you can just drag it to the top of The social icons like in this place if you want so you can play with it the way you want you can do it So here is the two row of team members so you can put sixty members pictures here Let's say if you have more team members, all you need to do here is the three team members layers just click on this row icon here right click and then click on duplicate this whole row is Duplicated underneath here and a newly duplicated row we can see here underneath so in this way You can create as many as rows you want and then just change their images name Title and socials all this so far now. Let's delete this row Okay, cool. And on the about Us page the last thing we have is the call to action section This is the same Section we have on the home page so you can change it on the same way Like you can change this text this paragraph this call to action button All these you already see that on the home page and then here is our global footer but if you want to add more sections You can do that by clicking on this plus icon and selecting. I structure in this way So if you want to create a new section Underneath you need to click on this plus icon and let's say if you want to create a section in between any existing two section Let's say if you want to create a new section in between this section and our team section all you need to do you just need to click on this plus icon here and Then you can click on this plus icon and you can create a new section in this way. So for now I'm good I'm just showing what's possible. So let's now close this Alright, so after changing everything never ever forget to click on this Update button to save your world So we are done with our about Us page. Let's now create our surfaces page. So let's go back to our WordPress dashboard now, let's go to all pages and Here is our services page. Let's now click on edit and now click with edit with Elementor So now we are inside elemental page builder. And also I have made template for this service page So let's now click on this folder icon Go to my templates and let's now click on this import icon here at the top Let's now click on select file now from inside templates folder here You can see JFD - corporate - services dot JSON file Let's select this one and click on open now here at the bottom. You can see jave the corporate their services Let us now. Click on this insert green button cool. So here is our services template So, you know already how to change this background image if you want you can change that You can change all the subheading main heading then underneath here is another heading if you want you can add a text widget underneath there Sallah need to do you just need to click on this Rubik's Cube icon and you can drag a text editor underneath here and then Underneath here is our services section. This is the same section. We have used on our home page So you already know that how to change all these then on the next section here is our pricing table So you already have seen this section as well on the home page? So also on this page here instead of order now because it's not a ecommerce website So here I wanted to say contact now and I wanted to link to our contact page like this Also for this button, I wanted to say contact now and I want to link it to our contact page also for this button I wanted to send it off order now to contact now and I want to link it to our Contact page like this and then underneath here You can again add your testimonials because if people come to your services page The testimonial will be appeared again. So actually you can use this testimonial section all of your pages because as many as times you can see your testimonials the more trust you will gain and I already have shown you how to edit all this sections so you can do that on the same way and here is the Companies you work with section. We already have seen on the home page So you already know how to change these and then underneath here is the call to action section The same section we have used on the home page and about Us page And then if we scroll down here is our global footer alright So like all other pages if you want You can add a new section by clicking on this plus icon and if you don't want any of this section from this template You can just click on the 6th icon and if you want to insert a new section in between any of this section You can just click on this plus icon and you can create a new section in between any sections cool So our services page has been dan. Let's now click on this update button to save our work So in the same way, let's create our portfolio page really quickly So let's now go back to our wordpress dashboard now click on all pages and here is the portfolio page Let's click on edit. Now click on edit with Elementor. We also have template for this portfolio page So let's now click on this folder icon Let's go to my templates and you know, you need to click on this input icon at the top Let's click here and then click on select file and from inside templates folder here You can see JFD - corporate portfolio JSON file Let's select this one and click on open then here underneath you can see jave the corporate - portfolio Let's now click on this green insert button cool. So here is our portfolio page. You already know how to change this top banner background Subheading heading text all these and here is our portfolio. So this is the same portfolio staff. We have created on the home page So like if you click on it It will be pops up with a lightbox image and here is the title of this specific portfolio So we already see that how to do these changes on the home page. This is the same thing So on the same way if you want to change this image, just click on this image And then you can change the image from here on the left. Just click here And if you want you can upload a new image from your computer By clicking on the select files on the same way Then you can change this heading of this single portfolio from here and Like on the home page if you want you can click on this Rubik's Cube icon You can just drag a text editor underneath this heading here Then you can go to style and make it a line main center So not only with this one you can do that with all these portfolios So for this portfolio, I don't want this text widget. So I'm deleting this one And if you have more portfolios Just click on this row icon this 6 dots and right click here. Click on duplicate So in this way, you can add as many as portfolios you have alright, so for now let's delete this row by clicking on this X and then again, You can add this section the logos with the company logos You have to work with and then again the call to action section So if you don't want that on your portfolio page Just click on this X and here underneath we have our global footer So we are done with our portfolio page here. You can add as many as portfolios you have cool Let's now click on update to save our work now We only have our blog page and contact page remaining So before creating our blog page, let's now create our contact page. So let's now go back to our WordPress dashboard let us now click on all pages and Here is our contact page. Let's click on edit now click on edit with Elementor So like other pages I also have created template for contact page So let's click on this folder icon go to my templates and let's now click on this import icon at the top click on select files and Here you can see JFD - corporate - contact dot adjacent file Let's select this one and click on open then here You can see JD corporate - contact now click on this green insert button So here is our contact page template inserted here is our top banner Then underneath here is three-column section. Then here is our working contact form and Underneath that here. We have google map and then here is our global footer. So let's start from the top You already know that how to change the banner background all these headings subheadings So let's now go to our next section here. You can see three column so here all the things are editable like here you can put your address and here I have put Address or home like icon if you want you can change that from here to any other thing you want but it makes more sense With address this icon, so then you can change your address from here also instead of this gradient background if you want to change it to a solid color can do that all you need to do just Click on this pencil icon and from here. Let's go to Advanced tab and Underneath you can see here background click here. You see from background type I have selected the gradient one. If you don't want that you can select on the classic one So you need to click on this paintbrush tool then you can select a solid color from here like black white red anything any color you want also if you want you can make the background to white and Then you need to change the text color to black to make it readable. You already know that kind of basica stuff So let's now click on a gradient because I want to keep that gradient color. My colors are gone So I'm pressing command Z a couple more time, okay? I got back my color You know to get back your previous work control Z or command Z is here always the best friend So then in the next column I have put like support 24 by 7 and if you don't have support you can put here only your email and Then here underneath you can put your email address and then on the right column You can put all your phone number Like I have put here email and phone number on this single column and then I put my email address and my phone number here So you can use it any way you want Even if you don't want this three column if you only want to show your address and email So you can delete this middle column like right click on this column icon and click on delete So now you only have two columns. So one is for your address And another one is for your email or your phone number so you can do that on your own way now Let's go to the next section. This is the contact from section before Talking about this working contact from let's talk about this section So here you can see a background image if you want to change that background image. You already know that how to do that Just you need to click on this six dot icon and from lift You need to click on style and from there. You can change this background image So let's now talk about this contact form and you will be older to see how easy it is to implement contact firm So all you need to do you just need to click here on this pencil icon and I have used here Flocks contact form so you can see here from left contact from type its flux contact form is selected So by default here is the name field email field website field and message field All you need to do you just need to put your email address here. So I'm putting my email address here It's done. So basically this is the email address. Where do you want to receive the contact form? That's filled up by your visitors So like when any visitor will come to your contact page and they will fill up their name They are emailed their website and their message and then they click on the submit button Then on this email address you have put on this left box You will receive the contact for email on this email address so if such an easy task So let's say if you don't use phlox contact form if you use any other form like contact form 7 so you can do that From here as well Like if you have install contact from 7 or gravity form You can see that on these drop-down so you can select that and setup that firm but I'm showing you the phlox contact form because this is the easiest one and Not only on this contact page you can use this contact form anywhere of your website So let's say if I delete this contact from by right-clicking on this pencil icon, and I'm clicking on delete So now here you can see inside this section here is two empty column So I want to put our contact form inside this left column So you just need to click on this plus icon and from the left elements. I'm searching for contact So this element that contact form and here you can see tiny flux word on this element So we are gonna be using this contact form all you need to do just drag this and drop inside this column it's done and Then you just need to put your email address here So now you have a working contact form and if you want to do styling like if you want to add any background image You can click on this column icon and let's just go to its tile tab here from background Click on this pencil tool the paintbrush tool icon and from here click on this color palette and you can select white color Background like this then click outside here. You can see option for border. So let's click here Like if you want to add some border radius at the corner so you can add the border radius from here You can see border radius options so you can add 20 pixel of border radius like this Okay, cool. Now here's the next section the Google map section So all you need to do here you just need to click here on the right here. You can see the pencil icon so to change your google map address just click on this pencil icon and Then on the left, you can see your location option just put your location here like for instance here I'm putting facebook office address so it's Instantly gave the address of Facebook and here you can see the pin in blue icon then also here you can see the height Option. So right now it's 400 pixels in height So if you want to change that like if you want to make it more bigger like this Or if you want to make it more shorter like this you can do that But I want to keep it 400 pixel like this and also here you can find the zoom option so you can increase the zoom by dragging it to the right like this or you can decrease the zoom by Dragging it to the left like 10 or 11 like this. So for now, let's keep it 13. It looks very good Alright and here is our global footer section. So we are done with our contact page as well So let's now click on update to save our work now. We only have our blog page remaining So first, let's go back to our WordPress dashboard Because before creating our blog page, we need to create some blog post So to create a blog post from left you can see post from there Let's first click on all posts and here you can see a post says hello world It's actually a dummy first aids came with what first installation but we don't want this post So let's now click on trash to delete it and you know It's not permanently gone if you click on trash you can see that post So if we want to change the delete post permanently, let's click here on delete permanently So now that dummy post has permanently gone So now let's first create our first blog post to create a new blog post You can click here on add new or from left under post. You can see here Add new click here or here the same thing I'm clicking here on this add new so we will be creating our blog post using this classic editor We don't need Elementor to create our blog post because you know creating a blog post is super easy You don't need to design multiple columns or rows? to create a simple blog post all you need to do you need to put a title here and You can type in all your blog post inside this visual builder Let me show you how easily you can post a blog post. So first here you can see a title So I'm putting here our title. It says we're better to go for a delicious coffee I personally don write blog post based on coffee I'm just giving you an example and then here inside this visual builder. I'm pasting a dummy text here So, let's see how easily you can make your blog post using this visual page builder Let's say here is the word art you want to make it bold Just double click this word or you just select this art world and here at the top You can see B, that means the bold icon. Let's click here is instantly bolded if you want to make anything Italic, just select this and click on this italic icon And not only this we have more options to get all these options You just need to click here on this toggle icon. So now you can see here more options so like if you want to add a delete tag if you Just select this word and click on this. Delete. There is a delete bar on this word Also if you want you can change Color like if we select this taste from here, and then let's click on this text color icon Let's say you want to make this color to pink. So I'm selecting the pink color from color picker So it's instantly changed and let's say after this you want to create a new paragraph So just hit enter right now this is a new paragraph and before this paragraph if you want to create a new heading just hit enter one more time and Here in this line. Let's say I want to put a heading here some typing. This is heading So all you need to do to make it a heading just select this line and from top here You can see this paragraph click here so you can make it h2 in this way or if you want you can make it H3 like this it's super super easy Also here is the option for align left align Center align right like this Then let's say here is a word heaven if you want to make it a clickable link Just select this word And then from here, you can see a link icon click here and then put here that URL like here Putting my website address that HTTP colon forward slash forward slash Jim Fahad digital comm and then just click on this apply button It's instantly linked to Jim Fahad digital comm also If you want to insert an image Inside of your blog post all you need to do. Let's say you want to put an image after this paragraph So after this paragraph layers hit in there and then from top you can see here add media. Click here Then you can add any images from your media library the images you already have downloaded or you can add any image from your computer So for now I'm adding an image from my media library. Let's say this image and let us now click on insert into post So it's instantly added here Also, if you want to change the image or edit it, let's just click on this image You can make this image centered You can make the image left aligned you can make this image right aligned like this so for now I want to make it centered aligned and Then if you want to create any list, let's say under this paragraph you want to create a list? so after this paragraph Let's just hit enter and then here at the top you can see bulleted lists or here is other option for a numbered list So if you want to create a numbered list, let's click here So you can create a list here. Let's say list one and just hit enter So in this way, you can create multiple lists. So when you are done just Hit in there double-time. Now. You can type regular paragraph underneath just like Microsoft Word So here it's your blogpost details inside this visual builder Here is your blog post title and whatever title you will be putting inside this title bar That will become your page URL by default so let's say if you don't want to make this your Page URL you can change that by clicking here on edit let's say you want to make this page URL - coffee - reveal, oops, I made the coffee spinning wrong his coffee review and Let's now click on ok so now this blog post URL is your domain name for our slash coffee - Review, it's way more human readable right now. So your blog post is ready. It's time to Publish the blog post But before that I want to show you some more options like here you can see the format option always use the standard format here Is some other options like gallery image link code So basically if you select any other that that will be shown as a thumbnail on your blog post page So if you want you can use that but 99% of time you need to use this standard format So let's keep it standard and then here's the option for category so you can add a single category or multiple category for this blog post So to create a new category all you need to do click here on a new category Let's say is the topic about coffee. So coffee the food So I want to create a new category says food and then click here on add new category also I want to create a category says review and let's click on add new category So if you want to keep only under review category, you can select only this one and you can deselect this one but if you want to keep the both category then select review and food as well then underneath that is the option if you want you can add tags and Then here is the template Always keep default template because this is the standard one. And here's the important thing. There's featured image So this image will be shown on your blog overview page So let us now click on set featured image. Ok for now Let's select this image and then click here on set featured image We are all done with our blog post. So let's now is scroll up here You can see the options for publishing like if you don't want to publish this blog post immediately If you want to post this tomorrow or a week later, you can schedule your blog post from here so all you need to do you need to click here on edit and you can Select our future date from here. Then you need to click on OK, but I want to publish it immediately So I'm canceling this one, by the way, if you don't want this blog post You can click here to delete it to move to trash but I want to publish this blog post So let us now click on this publish button to publish our first blog post Let's now click here. Cool. Our blog post is published So now the whole world can see this blog post by visiting this permalink That's our domain name forward slash coffee - review So let's now open it from a new tab and let's have a look So this is our single blog post page here at the top You can see the featured image that we have said and then underneath here. You can see the post title here you can see the post date by here is the author name then here you can see the categories we have set and You can see this edit button only because we are logged in so no visitors can see this edit button here You can see the color changes and here you can see we have made this a link We can see it here here you can see the image is centered here is our list and all the block-post Here we have not set any tags. So here Tex is no tags. Also here is the option for sharing Then also people can make comment on this blog post then we have global footer and if we click on this top two Button, it takes us to the top of this page and also here on the right You can see a sidebar so we can basically customize all of this So also we can basically customize all these side bars and other things using theme customizer But before customizing our single blog post page, I want to post couple more blog post So let's go back to our WordPress dashboard. So this is a single blog post now I want to add more blog posts to add a new blog post we need to click here on add new or here add new and I want to post eight to ten more blog posts, and I don't want to make you bored by Posting all of the blog post one by one so I'm now posting all the blog post and I'm coming back Ok, so I have posted couple more blog post. Let's now click here on all posts So I have created all this blog post Let's now click any of the single blog post page. So to see a single blog post. Let's click here on View So now like other blog post page other single blog post page here You can also see the sidebar here is the main media here is the title here is the blog Description and here is the tags also here you can see the navigator to go to the previous post and here is the navigator to go to the next post and here is the option for Commenting layers now customize this page a little bit using our customizer So from top list click on custom mice and if we customize this single blog post page It will be applied on all single blog post page So this is our single blog post page First from left click on blog then first click on single post title So this is the option for customizing this title like here you can see title alignment It's left. If you want you can make it centered like this, but left is more readable Also, here's the option for display title bar section If you click on it Then if we scroll up here, you can see the blog post title is showing above all in this way Also, there are a different templates Like if you select this one, it will become like this or if you select the dark option It will become like this so you can do this kind of title bar section By using this option, but I don't want it for now So I'm disabling this one and let's now go back and let's click on single post So now here you can see all the options for customizing this single blog post page First here on the left. You can see single post sidebar position So right now you can see a sidebar on the right if you don't want this sidebar, you can select this template So there is no sidebar, but let's keep the sidebar Also if you want the sidebar on the left you can select this one, but sidebar looks always fine on the right then also if you Have a close look you can see a border on the side of this sidebar if you don't want that You can select this option. Let's keep the border. Also. There are plenty of options here like if you want to set a custom width You can say that from here Like if you want to make it more narrower Let's say if you want to make it 1000 pixel so it will be like this Let's keep it default then if we scroll down and let's have a look here You can see the content is tiled Like if you change this to this option or this option now, you can see the content becomes more narrower But I like the first option now underneath here. You can see the option for this kontin top margin So you may remember on home page and all the pages we made with Elementor on that pages We have disabled this option, but on this single blog post page I want this top margin then here you can see some options for display post media display post information post date post author So all of these are basically here you can see post date author name tag name category names So let's say if you don't want to show this post date you can disable it from here You can see display post date if you disable it now. The post date is hidden. Let's enable it from here So basically you can enable or disable Everything from these options like if we scroll down here You can see all the tags share buttons You can enable and disable all this from here then scroll down Now here you can see the skill options for these navigations by default It's set to the first one. But if we select the second one, it looks more cool So it's basically our previous post and next post navigation with that post thumbnail. It looks really cool. And then Here is option for a comment about her side. So you can also control that from here on the left So let's now go to top of the page and let's have a look on this sidebar so if we want to do anything with this sidebar Like if we want to change any of these then we need to do that from widgets So from left, let's now go back go back one more time and Here you can see widgets. Let's click here And this sidebar is basically coming from global primary widget area So let's select this one now You can see here first widget is search so you can see here search then the second widget here is descend posts That's why you can see here recent posts and then here you can see this and comments widget That's why you can see this in comments here on the right sidebar Let's say if you don't want these recent comments, all you need to do from left Let's expand this and here is the option for removal a stream of this one See it's gone Now instead of that if you want to add any other widget You need to click here add a widget and you can add basically any widget on that sidebar so you can add any Available widgets that provided by what press or any widget that you have installed Like we have installed Facebook like box Instagram feed widget if you want you can also add that widgets on to your sidebar. Let's have a look here We can see calendar So if we click here now, you can see a calendar on the right sidebar also You can set the title from here like I want it to say Calendar and when you are done editing click on done, and if you don't want to keep that, let's click on delete Let's say we want to add Instagram feed widget that we have installed using a plug-in So if we search her Instagram, so this one Instagram wizard by wpzoom. Let's click here So you can see the Instagram widget on the right sidebar So when you are good with it Let's scroll down and click on done. And then finally click on publish to save all this work Let's now close this customizer by clicking on this X. So this is our single blog post page But what about our main blog page? Let's have a look on our main blog page now click on blog from main navigation so at this moment in our blog page You can see a big hero image at the top and then here is all the blog Posts one after a hannah there goes it looks like crazy right now. So we need to customize this page as well So to customize our blog page, let's click on customize Now from left, let's go to blog So first thing I want to do you can see a big Hero image at the top of this blog page if you want you can keep it But I don't want that on our blog page. So first you can see here blog slider. Let's click here and I want to disable this one so that big hero banner has gone Let's now go and now click on block page on the block page. I don't want this sidebar So from left, I'm searching for that Option here. You can see block side bar position. I don't want sidebar on block page now Let's go to the top here. You can see some block templates So if we select this one now, our all blocks are looking in this way But I want to select this option. It looks much cleaner. Now. I really like this template cool Okay. Now from left, let's have a look on the other options like on the single blog post settings here You also have all this option display featured media if you disable it, we cannot see these images But we want to keep these images also, you can change the custom max width from here You can change the image aspect ratio from here Also all the options we have seen on single blog post page like post info post date categories You can all enable or disable these from here also You can see here is the button says read more if you want to change this text to any other thing You can do that from here So basically you can enable or disable all these from this left bar then if we scroll down here You can also specify the blog length, like how many words you want to show in this place? You can specify that as well from here like you can select the summary Also, if you want a specific word count you can do that from here so let's now click on publish to save our work and click on this X to Close our customizer. So this is our blog page looking like this right now It looks super clean And if we click on read more button of anything post it takes us to the single blog post page here We can see the sidebar here is the hero image. That's the featured image. Here is the title all The description and here is the tags. Here is the option for going previous post as this is the lastest post So we cannot see the option for next post and here is the option for make comments. Here is our global footer Everything looks perfect So we are almost done with our website now we only need to make sure our website looks good on mobile device and tablet and all other devices on this planet so we can check the responsiveness of our website just by shrinking our browser like this So whatever you can see is the tablet width so people can see our website who are using tablet and if we shrink it more to a mobile with This is how it is looking on mobile devices and you can see everything looks Perfect because I have made that on that way now Let's first make our browser to full width and have a look how we can make our website responsive using elemental page builder So right now we are at our home page now from top. Let's first click on edit with Elementor so whatever we can see right now is the desktop with if we want to see how our Website is looking at tablet. We need to go here at the bottom left You can see here is a responsive mode icon Let's click here from their lips now first click on tablet to see how it looks on tablet device So at the very top you can see the logo, but we cannot see the navigation Actually, there is the navigation, but we cannot see it from inside Elementor page builder sometimes it happens, but Nori's it lives here But if you have a doubt, let's click here on this preview changes icon So let's have a look if we now shrink our website to tablet with you can still see the navigation here So sometimes you cannot see that from inside a limited page builder, but trust me it's there but shortly I will also show you how we can make that to a Hamburger icon on tablet as well like mobile device so if anyone visits our website from tablet device They can also see that hamburger and whenever they will click on that the navigation will pops up on that way So for now, let's have a look on the other sections of our website from tablet device Everything looks perfect. All this section looks perfect on tablet device Latest work looks perfect. Here is all the pricing tables looks perfect Now we can see the latest post perfectly and here is the testimonial section looks perfect Here is the call to action section and here is her Fuda looks perfect Okay, let's now have a look how our website is looking on mobile device so to see it from left now, let's click here and go to Mobile so this is how it's looking on mobile device so you can see here a hamburger if we click here Now you can see all the menos but I want to change it that way if showing right now I will show you that shortly for now. Let's close this one also I want to make this hamburger not in this place. I want to place it on the right here We will do that shortly, but for now, let's have a look how other sections are looking on mobile device Everything looks perfect this section this section looks perfect Let's say if you want to make this button centered on mobile device only, how can you do that? so just click on this button edit icon here then here you can see alignment and Right after this alignment, you can see a mobile icon So as long as you see this mobile icon now Whatever changes you will make that will effect only on mobile device So let's now make it centered So it will be centered only on mobile device on desktop and tablet It will remain same the way it was. Also. I want to make this button alignment Center on only mobile device So let's make it centered. So not only on these buttons if you want to do anything Specifically on mobile device you can do that. Let's say here's the headers is latest work Let's now click on this pencil icon. Now, you can see alignment and here you can see the mobile icon So if we make it centered it will be only centered on mobile device, but I want to keep it on left aligned Not only alignment Let's go to is tile tab and let's click on typography like here you can fontsize Also here you can see this mobile icon. So on mobile device, it's 36 pixel let's say if we make it more is smaller like 24 pixel it will be only applied on Mobile device the tablet and desktop size will remain same but I want to keep it 36 pixel the way it was. I'm just showing you how you can change that Only mobile device is specifically let us now have a look on other sections. Everything looks perfect on mobile device Block section looks perfect testimonial looks perfect call to action and our footer looks perfect on mobile device and After making any change, you know, you need to click here on this Update button to save your work All right Now, let's go back to desktop with and now the last thing like I said I want to work with this navigation like on tablet device I also want to display this navigation as a hamburger menu like mobile device So for that I want to do a little hack. So first, let's go back to our WordPress dashboard and From here templates. Let's go to saved templates now Let's go to header tab Because you may remember we have created this header one using Elementor. So let's now click on edit with Elementor So now we are customizing our header only so first let's click on this pencil icon of this Navigation and here you can see some dots in between menu items you can disable it from here You can see her display mini splitter. I don't want that. So I'm disabling this one. Also, it looks super bold Let's fix it. Let's go to style. Now. Let's click on typography. Here is the font weight. Let's make it normal It looks way better right now. Okay, now let's go back to content here You can see the options for mobile menu now, let's click here By default the mobile menu will be up here only on mobile device You can see your mobile is selected, but I want to show the hamburger menu also on tablet So I'm selecting the tablet option So if we now go to the tablet width, let us now click on tablet to see it You can see on tablet width we can see the hamburger and if we click here you can see the sub menus here But instead of showing it in this way. I want to select mobile menu type this option So let's now click on this. So what's the difference? Let's have a look if we now click on this hamburger icon Now all the menu items appears over fully screen of the tablet Not only on tablet if you now go to mobile device also mobile device You can see this cool pop-up menu And if we click on this X, it will be disappeared like this. Ok. Now, let's go back to tablet with like here You can see the hamburger on the left side And there is no way that we can align it to the right side And for that reason I want to show you a little trick how we can force it aligned to the right But I'm saying again if you are happy with it, let's keep it but I want to show you that little hack So let's now go back to desktop first So here first we have a column here with our logo and I want to duplicate this column by right clicking here and click on duplicate and Inside of this column. I want to remove the logo because we don't want this logo anymore Within this column, so let's click on delete Actually, I only want this empty column. So on this top view I want to make this width really narrower like this Because we will be using it only on mobile and tablet to push our menu align to the right side So let's have a look If we now go to the tablet width now first Let's make this column and after clicking on this column icon of this menu go to left here You can see the column width option in percentage. Let's make it really small like 20% or more less like 10. I want to make it 5% you can see it's only 5% width of this whole section and now I want to force it to Become aligned on the right side. So to do it now I will increase the width of this empty column. So let's increase the width So let's now increase the width of this empty column I'm clicking on this edit column icon and from Left column width Let's make it bigger until our menu hits on the very right corner like this If we make this empty column more bigger like this Then you can see the menu goes to the next row So I want to minimize the width of this empty column a bit like this Let's keep it 60 and let's have a look if we now click on this menu It works perfectly, but it's aligned on right cool. Let's now go to mobile device So let's apply the same trick on mobile device So first, let's click on the column. That wraps the logo So let's first decrease the width of this column like this Let's make it 50% or a bit bigger like 55% ok, let's make it 60% and Then let's select the empty column and let's make is with for now Let's keep it 5 and let's now select on the column of the menu and let's now decrease the width column width on Mobile device I want to keep it like 10 ok Let's keep it 11 and let's now click on the empty column Now let's increase the width of this one until it pushes the menu on the very, right? Like this if we increase it more the menu goes under the row So let's minimize it a little bit. Ok, let's keep it 28% cool Let's now click on update to save our work Let's now go back to our WordPress dashboard and from top click on visit site to have a final look of homepage Okay, so now I'm logging out because we want to see the real feel of our website without this top bar So let's log out Okay, our website looks super slick right now. All the section looks very beautiful I really like all the sections all the pre-built animation I have made for you and here is the global footer Okay, let's now go to the top and shrink our browser so let's now shrink our browser to a tablet with now you can see the hamburger menu on the tablet as well as we have made that so if we now click on ate Cool, here is the all menu items pops up over the browser Let's now close this and let's now shrink our browser to the mobile width now here at the top You can see look on the left hand on the right side You can see the mobile may know if you click here on mobile device. It will be looking like this It looks super cool right now and if we scroll down everything looks perfect on mobile device Cool so let's now have an over look on all other pages. We have created. Let us now click on about page Here everything looks perfect on desktop with all the team member section Here is the global footer. All right, now, let's shrink it to Tablet with like this. It looks perfect on tablet with all the team members section looks perfect on tablet Everything looks fine. Let's now shrink it to the mobile width like this. Now. Let's have a look Everything looks perfect on mobile device as well So I'm super happy with our about Us page Let's now shrink our browser to the full width and let's have a look on services page on this top view. It looks perfect I Actually loved the whole website and all the pages It's now showing this page to the tablet with first and have a look everything looks perfect. And Let us now shrink it to the mobile width Everything looks super clean. I Love it. Okay. Let's now go to our contact page So in this top everything looks perfect. Here is our working contact form looks perfect. Here is the map Here's the global footer. Alright, let's now shrink it to the tablet with like this table banner All these three columns looks perfect contact form. Looks perfect. Google map looks perfect Awesome. Let's now shrink it to the mobile width like this. Let's click on this mobile may know everything working perfectly Let's now scroll down all this section looks perfect contact form looks perfect on mobile device as well Contact form and here's the global footer everything looks perfect. We have successfully completed creating our complete website each of the pages looks super slick super clean and super modern and Everything looks perfect on mobile device tablet device and desktop. I love it Ok, congratulations. Now, you know how to create a complete WordPress website. So what's the next step? Next step is to make your website live as soon as possible because only watching this tutorial onde, make any change you need to take action and During your website creation if you face any problem, or if you face any difficulties just comment down below on this video I will reply back each question Once again, thank you so much for watching this tutorial. Have a good day
