How to Make a WordPress Website 2020 | Step by Step Elementor Tutorial

Video Statistics and Information

Video
Captions Word Cloud
Reddit Comments
Captions
How to Make a WordPress Website Step by Step. Elementor Tutorial Hey, what's going on guys? This is Jim Fahad and in this video I'm gonna show you how to make a fully functional WordPress website step by step. In this tutorial, You can learn how to create any website design that you can possibly imagine. Specifically, in this tutorial I will show you how to create an app landing website, but Following the principle of this tutorial you can make any kind of website we're gonna be using an awesome drag-and-drop page builder plug-in that allows you to have 100% control over the Customization of your website and it's super easy to use and there is no coding involved at all So whether you are a complete beginner or you have made a website before this tutorial will show you how to create a beautiful fully functional website like this That's 100 percent responsive on mobile device tablet and desktop I will show you how to make a header, navigation, jump buttons. So when you click on any menu item that jumps to the specific part of the page I will show you how to create a logo for free using an online tool and How to use that on your website. I will show you how to change the text and fonts I will show you how to create buttons and customize them however you like. I Will show you how to add your own photos and backgrounds to the site. How to add YouTube or Vimeo videos as background. I will show you how to add an image gallery With nice slider and how to make a number counter with nice animation. I Will show you how to create a service or overview section, also how to create a cool-looking featured section like this How to add your social media links into your website I will show you how to create a working contact form So people can contact with you easily from inside of your website. I Will show you how to make a custom footer by yourself. how to make your privacy policy, Disclaimer pages very easily. I will show you how to make your website 100% responsive for mobile device, tablet and desktop and so on We will be creating all of these just by dragging and dropping you don't need to know a single line of coding So first, let me introduce myself the instructor. My name is Jim Fahad. I'm a professional web developer I have been developing websites for more than 10 years now I started my career as a freelance web developer on a website called oDesk right now It's upwork.com. Whatever I'm not regular on that website because I get a lot of website orders from my personal website That's jimfahaddigital.com. If you want you can also contact me through my website But you don't have to do that because by following this tutorial you can make your own website by yourself I'm telling all this beforehand only to make sure you that you're learning from a real web developer now Let's get started. Okay So before we get started, why are we using WordPress? well, because WordPress is the world's most popular website builder on the market so you may see ads for WIX or Squarespace or other website builders But unlike those WordPress is free and it powers more than 30% of all web sites on the entire Internet, which is a lot of freaking web sites. So needless to say this is the best way to make a website Now in this tutorial I will be showing you how to get a domain name which is about five dollars But I will also show you how you can get your domain name for free For the first year and I will also be showing you how to get web hosting which is about two to seven dollars That's all there's no other hidden cost. So what is web hosting? Well, web hosting is just renting a space on a server that's connected to the internet so that you can fill the server with all of your pictures and videos and text and other media to build your website and Then publish it for the world to see. web hosting is a must-have if you want to own your own website There is no other way around it now There are such things as free websites, but there are a lot of downsides of that You will not own your own domain name It would be something like your domain name dot wix.com or your domain name dot squarespace.com What whoever is hosting this free web site for you? you cannot upload plug-ins to help with the functionality of your website and you are also limited to a very Small number of themes for the customization of your website and you can't upload new ones you also cannot monetize your website with ads in order to make money with it and Your website could be deleted at any point if the hosting provider feels like you have violated their Terms of Service So that's why I recommend getting own web hosting. Ok So let's get started and before moving forward. Please make sure you liked this video and subscribe this youtube channel Otherwise, you may not find this kind of valuable video into your home feed next time So now please pause the video for 2 seconds to give this video a like and subscribe this youtube channel i'm a waiting... and You will find the timestamp in the description so you can jump any specific part you need Alright, 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 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 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 that Anytime now, let's select the basic plan now We will select our domain name If you already have a domain name that you want to use you can just go ahead here on the right, but for now I'm gonna get a new one now here Let's try for something like Apple com and click Next It says the domain apple.com cannot be used on Bluehost. Please try a different domain name It should be because we cannot take that because we all know that's 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 dot site dot net dot info web sites I always recommend to take dot-com websites Because it looks more professional and legit. So I'm gonna type here let's say ourelementor.com as we are going to make our website through Elementor page builder and Now click on next it says 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 a month. So this is 50% off That's gonna be your biggest discount now What I recommend is to just do 12 months If you don't want to commit to the 36 months or 24 months It's still 33 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 this 12 months and Here 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 other options They're offering we actually don't need that. They're just upselling there is 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 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 Expiration date and CVV code then select this one here So that you'll agree 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 now verified awesome Now, let's log in into our Bluehost account with the domain name and password We have just created if you're logging in for the first time. You may see a pop-up like this Like it says let's create a website Bluehost actually want to help you to make the website Just click at the very bottom there I'm not creating a website Because I will be showing you everything step by step and skip all of these Pop-ups because we don't need any of that Cool we have successfully registered our domain name and web hosting 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 in step number two, which is to install WordPress and For some reason if you logged out then log in 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 jim fahad production and the site tagline. You deserve to be seen. Now Let's click on Advanced here. You need to put your email address, your username and password for your WordPress. So I'm putting my email address here WordPress admin user name I want to? name it Jim Fahad, and Here, let's put a password Do you want to see my password? I'm clicking here on show so it's ABC one, two, three 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 login this way I mean from this page this button right so you should get used to signing into WordPress all the time is by going up to a new window and Typing in your domain name forward slash WP dash admin So I'm typing here my domain name ourelementor.com forward slash WP dash admin and click in there So we can see our WordPress login page here. That means WordPress has installed successfully Sometimes it takes 30 minutes to 24 hours to process this installation and this process is called Propagation it basically has to let everyone know that hey this new domain name now exists and registered But we can see our website instantly 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 I'm 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 Okay, so we are now logged into what press dashboard or WordPress admin panel Whatever you say so first, let me familiarize you with the WordPress admin panel or dashboard Let's first close all this notification by clicking on this X. Let's click here Also this one let's now minimize this one this one this one this one and this one Just cleaning things up a little bit. So the first thing I want to do, I I want to change that easy password Abc123 that we have created a moment ago So to change our password first, let's go to this very left tab or navigation here You can see users hover over on this and from there click here on your profile so from here You can see you can change your admin color scheme by clicking these or blue or coffee Let's keep the default one because no matter what is came in select. No one can see that except you Okay, let's scroll down here You can see the first name last name so you can set your name or you can change that from here Also, you can change your email address from here. You can add your other website URL your biographical information Also, you can change your profile picture by clicking here isn't gravity' So basically we wanted to change our password So to change our password to a strong password under account management, you can see here new password So let's click here generate password if you want you can keep this Auto-generated password by what place and also, you know, you cannot remember this bizarre number so if you want to set that just copy it and Save it into any other place on your computer so you can find it later or you can type Easily rememberable password by yourself. So I want to type a password So let's first click on hide. So you cannot see my password. I'm typing here my new password Uses weak, but follow I'm ok with it. So let's click here confirm use of weak password and click on update profile all Right. So now from Left menu here you can see settings from there first. Let's click on general so from here You can change your site title name the tagline and here you can see that URLs You don't need to mess with this URLs also here you can change your email address and other default settings like Timezone language all these basic settings you can do from this panel and if you make any change then don't forget to click here on Save Changes to save your world and The next settings I want to show you here under the settings tab, you can see permalinks. Let's click here So by default permalink settings is the plain one But I want to change it to this post name option The reason is you can see here our domain name and then forward slash does pose Let's say if you create a separate page like about us So what should the URL look like for that about Us page? that should look like our Domain name then forward slash about us not our domain name and then forward slash and these bizarre numbers That's why I'm selecting the post name option and let's now click on Save Changes Alright now let me show you how you can create new pages or new posts. So let's first go to pages So from left tab, you can see here pages from there. Let's click on all pages So here you can see some pre-existing pages that came with what place by default So if you don't want any of this you can delete that like I want to delete that Privacy policy page because we will create this page later But I don't want the default one that came with what place so to delete it here. You can see the trash list click here It's gone, but it's not permanently gone if we now click here on trash You can still see the privacy policy page inside trash. So if we want to delete it permanently we need to click here Delete permanently It's gone then if we want to create a new page, we need to click on this button says add new I will show you that shortly before that. Let's also have an overlook on posts So from this left tab if we hover over on posts from there, let's click on all posts So like the pages here, you can also see a dummy blog post that came with WordPress by default Which is hello world blog post So if you don't want to keep it You can also click on this trash to delete it and to create a new blog post You need to click here on add new So we will see all this more detailed a bit later before all of these I want to install our theme so to install our theme from left here You can see appearance hover over on it and you can see here the themes let's click here So here you can see some default themes that came with What press but I don't want to use any of these because I personally don't like any of this I want to use one of my favorite theme that super lightweight hand super fast to load and it's one of the most Popular themes right now. So to get it, let's click on this very big button. Add new theme Then from top tab if we click on popular here You can see this theme the Astra theme So for some reason if you don't find it under popular tab, you can always search from here typing Astra So this one on the left not the right one. So let's now click on install and then click on activate Cool is activated successfully. Let's now click this pop-up Also this one so basically what is theme theme is basically the look and feel of your website Like you already have seen lot of different themes Those are basically the different looks and feels of your website like right now we have activated this Astra theme so at this moment if we want to see how our Website is looking from the top here. You can see our site name and then you can see visit site. You can click here I want to open it from a new tab. So I'm right clicking here and click on open link in new tab So at this moment our website is looking like this I know at this point, it looks super boring super ugly, but no worries We will make our beautiful website out of it But the thing I was going to explain about theme as we have selected the Astra theme that's why we can see our website like this if we would select any other theme then the whole look and feel of our Website would be changed. I hope it makes sense So we have successfully activated our theme let's now activate our page builder my favorite Elemental page builder and using that page builder we will be creating our website from this ugly dirty Look to us super-modern website so to activate our page builder Let's first go to zoom for her the digital comm forward slash Elementor one to eight I will put this pages link in the description So from that page if you scroll down a little bit You can see here important links and then you can see here get Elementor link. So let's click here get Elementor From this page you can click her get started or here Now here you can see our pop-up says do you have a wordpress website? Yes, we have so let's click here yes, I sure do click on continue and Here we need to put our website URL. You need to put your website URL here I'm putting mine. So my website URL is our Elementor comm and we have https before that so remember you need to include HTTP or HTTPS with your website URL and let's now go back Here. I'm putting my website URL that HTTP is our element or com You will put your website URL where you want to install element or page builder So let's now click here check for WordPress. Cool. If says great you are ready to install Elementor let's now click here click install and From this page on the very right here you can see install now let's click here Now click on activate plug-in Cool we have successfully installed our page builder now to get started with our website We only need to install some other plugins. So first from left here you can see plugins Let's click here on install plugins And here you can see some plugins that came with what place by default but I don't want to use any of these plugins Without the Elementor one. So I'm selecting other plugins this one this one this one This one now from the top here. You can see bulk actions first Let's click on deactivate and click on apply So all those unnecessary plugins are deactivated and this time I want to delete them so without the elemental page builder I want to select all other this one this one this one and This time let's click again on bulk action But I want to select the delete one and let's now click on apply And our browser pop-up says I'm sure or not. Yes. I'm sure let's click on ok, cool How are all unnecessary plugins are gone, by the way in this tutorial? We'll be using elemental free version but Elementor has its own pro version That has a lot more options So if you want to use their pro version, you can click here go pro and you can purchase their pro plan Ok, let's now add some other necessary plugins. So to add a new plugin We need to click here at the top here You can see add new are also under this plugins tab, you will find add new so you can click here or here and Now then on the right we can search for our necessary plugins but before installing any plugin Let me tell you what are basically plugins plugins are extra features, or I don't like things that add extra functionalities to your website like if we go to popular tab You can see here contact form 7 Yoast SEO plug-in like on your phone you have different Applications like Facebook Instagram and you use those apps for different purpose Like that these plugins are extra features for your website So here first I'm searching for is in shell Add-ons This one here. You can see essential add-ons for Elementor and you can see here it already has half million of Installations. So of course, it's a pretty good one. Let us now click on Install Now and Then click on activate and Then I want to install another plugin, so let's click on add new and This time I'm searching for WP forms So here this one contact form by WP forms by using this plugin We will be creating our contact form. So it will make our life more easier. Let's now click here on install now and then click on activate Awesome our necessary plugins are activated successfully also on the Left tab You can see here new tab added WP forms also here essential atoms added Alright, we are almost ready to go. So at this moment our website is looking like this if we refresh it now It's still the same because we have not done anything with our website So the first thing I want to create our menu or navigation on the right side here So to create our menu Let's go back to our WordPress dashboard here. And from left. You can see her appearance from there Let's now click here on my nose Now first give it a name I want to name it main menu You can name it anything because no one can see it and let's now click on create menu Then from left, you can see here options for pages or posts or custom links like that So if you have different pages And if you want to create this menu to link your other pages You can do it from here Like we only have our sample page right now that came with what pays by default if you want to add this page Inside the menu you need to click here. I mean you need to take this and click on add to menu Here on the right it's added So whenever you will create a new page, you can see that page in this place then you can always select that and you can add to that main menu by clicking here on add to menu but in these navigation instead of pages I want to use custom links because I want to make this navigation So instead of linking our menus to other pages I want to link the menos to the different part of our page. You can see that shortly for now Let's create the menu. So I want to name the first item - home and URL I want to keep the URL hashtag and Then top why is that? I will explain that a little bit later for now. Just follow along Let's now click here at ameno Then I want to add another one. I want to name it screenshots Also, I want to keep the URL hashtag Screenshots, let's make da is lowercase like this and now click a tomato And not to make you bore. I'm creating more custom links really quick All right I have created some more menu items and here we can still see the sample page that we have added at the beginning So I don't want that. I want to delete it. So let's click on this icon and click on remove is Gone. Also if you want to change the order like after home instead of screenshots if you want the overview at the top of screenshots Just drag this at the top of screenshots like this like that simple But I want to keep the screenshots under the home. All right now from bottom here You can see menu settings and here you can see display location I want to select this one - primary menu, and let's now click on save menu Now let's go back to our page and refresh it Cool, so we can now see our menus that we have just created and then on the left side I want to add Our logo, but we will do that a bit later Because I will also show you how to create a logo very easily So you can create your own logo and put that on your website. So I will show you that shortly Otherwise, we are almost ready to go. Let's now create our homepage So to create a new page we can go back to our dashboard and from here pages Then you can click on add new This is one way also there is another way like from here on this top black tab if you hover over on this new you can see you have Options for adding new post media page like this as we want to create a new page. Let's now click on page As We are creating our very first page what place wants to guide us, but I'm here to show you everything So let us now click this to close this dialog and here you can see it on full screen We cannot see the left bar So to minimize it Goto very right on these three dots click here and here you can see the full-screen mode is turned on by default Let's click here again Cool, so full screen mode is now turned off I don't know why what place make the full screen mode by default. It really annoys me Ok, so we were going to make our homepage. So I want to name our homepage to home and Let's now click here on the right top here. You can see publish click here Again, it says are you ready to publish? Yes, we are ready. Let's now click on publish It says our home is now live So now if we have a look from top left if we now click on visit site I am again opening it from a new tab Still we cannot see our homepage here, but we have created our homepage Instead of that page why we can see here. Hello world. What's the reason? Okay We have created our home page, but we didn't tell what place that to make that page as our home page so to make that newly created page as our home page, we need to click here on customize and From this customizer if we have a look here on the left, you can see home page settings. Let's click here and You can see here your home page displays. Let's now click here a static page here is the option for home page Let's click here And now I want to select that home page. We have just created to make it our home page. So let's now click here Cool a high load there is nothing special, but at least we can understand This is the page. We have just created let us now click on publish and now click on this X to exit Ok, so this is the most exciting part. I know we all are waiting for this part right now We will start creating our beautiful website by dragging dropping and clicking. So let's do it There's now click here on edit page Now click on edit with Elementor Alright so we are now inside Elementor page builder so here on the left everything you can see all these are elemental elements and Here on the right side. This is our main canvas or this is our main website basically We will just drag the elements from this lift bar and drop it to the right side of our website So in this way, we will create our amazing website But before we start creating our website using this amazing page builder I want to make you familiarize with the fundamental of this page builder so you only need to understand three major fundamental thing if you Understand these easy 3 things you can make any design Inside of your website using this amazing page builder. So what are those 3 fundamental things? Those are section column and element So whenever you want to create a new design or new section of your website You will have to take a new section for that So section is the most outer thing then inside a section. You can take multiple columns like inside of a single section you can take 2 column 3 column 4 column like that and Inside of each column you can take multiple Elements or widgets actually element and widgets are same thing. Sometimes I say elements Sometimes I say widgets. So basically those are same thing. Okay So the section is the most outer thing then inside of a single section you can take multiple columns and Inside of a column you can take multiple elements or widgets really very easy concept And this is all you need to understand. Ok. Let's now go back to our real page builder So like this image if we first want to take a section We need to click here on this plus icon Then you can select different Structures like if you want to take two column structure, you can select this Also, there are options for three columns four columns like that So first, I want to take a structure with two columns. So I'm selecting this one So this is our left column and this is our right column Now, let's say if you want to add a background on this whole section You need to click here on these six dots. Okay, let's click on got it so if you want to work on the section level you need to click on the six dots now our section is Selected and on the left, you will find the option whatever you want to do with this section Let's say if you want to give it a height you can click here on height two minimum height see it has got 400 pixels as you can see here on the left minimum height is 400 also if you want You can increase it by dragging it to the right or you can decrease it by dragging it to the left Like that, you can do it by pixel or VH or V W for now I want to do it in V h vh min vertical height and I want to make it 8 T Also from here you can see the options for column position by default its middle Also, if you want you can make it bottom or straight or top as we have selected our column position to bottom So now you can see our columns positioned at the very bottom of this section Also, if you want to make this section full width, you can click here on H section turn it on now Let's go under the style tab. Like if you want to add any background color you need to click here on this classic or paintbrush tool icon and then click on color picker here now from this color picker you can select the background color of this section and If you don't want any color just click here on clear. So that background color is gone Also here you will find option for gradient You can also add a slideshow from here. You can add a video background from here Let's say if you want to put a YouTube video background here Let's just go to youtube and copy the video. Url from here. Let's now go back Here you can see an option video link. Let's paste the URL here Cool. So now you can see the video background. I'm just showing you what's possible But for now, I don't want this video background I want to use a solid image here instead so to do that let's now click here on this classic icon again and Then click on this image. Now. Let's go to upload files click on select files Now let's go inside images folder. I want to select this image. Let's now click on open Now click on insert media Now I want to adjust the position of this background so from here you can see position I want to make 8 sinner sinner Then here's the attachment. I want to make it fixed and here's the option for repeat I want to make it no repeat and site. I want to make it cover So no matter how big the area is the background image will cover all the area That's why I have selected a size to cover now at the top of this background I want to use an overlay. So to do it here. You can see an option background overlay Let's click here. And I want to use a background overlay a gradient overlay So from here, you can see background type. Let's click here on a gradient basically gradient means the mixture of two colors like here you can see the option for the primary color and Here is the option for second color. So let's first click on the Primary color here and I want to pick a black color now click outside Also, you can manage the location by dragging it. I want to keep it like this Fully and here's the option for second color. Let's keep it a reddish color like this maybe a bit more like this red color And if you want to save this red color to use on other place of this page builder You just need to click here on this ad Picked color so we can reuse this color on the other part of our website. We can see that shortly So now click outside and here location. Let's make it 90 like this. Also if you want you can change the angle like this you can see the changes. Let's keep it 150 like this. Alright, so we are now working with our section level You may remember to work on a section level We have clicked on these six dots then if you want to do anything on column level so these are our Columns here is our left column and here is our right column Like if you want to do anything on column level you need to click here on this column icon So on the left now, you can see the options for this layout here is also the option for it style Let's say if you want to add a different background color only on this column You just need to now go here background type click here Let's say you want to add a white background color on this column like this or red like this I'm not gonna use background color on this column. I'm just showing you how to do it Okay So now first I want to add an image inside this left column, so to do that I'm clicking on this plus icon so you can always click on this plus icon or This Rubik's Cube icon to find all these available Elements, like I said first I want to add an image inside the left column So I'm dragging the image from the left and I'm dropping it inside the left column here now Let's click here on choose image Again, let's go to upload files and click on select files. I Want to select this image? There's now click open Now click on insert media It's added but it looks super big. So the first thing I want to do I want to reduce the column width to do it Let's click on this column icon again now go to layout and here you can see column width I want to make it for the percent like this and also you can see a little bit a space underneath this hand I don't want that and that's coming from the default padding of this column So let us now click on advanced here you can see the option for padding Let's make it 0 but I want to add some padding on the right So for that first We need to unlink or unbind the padding by clicking here then here you can see the right I only want to add some padding on the right maybe 2 pixel. Let's make it in M so I only want to give 2 pixel padding on the right and At this moment you can see there is no breathing space at the top of this section right now We are on the Advanced tab of this column So first we need to click on this six dot to select the section level this time. Let's go to Advanced and I only want to add some padding at the top. So let's first unbind the link and add 100 pixel padding at the top like this much better now okay now on the right column first, I want to add a heading so you know first we need to click on this Rubik's Cube icon and Then here you'll see element heading you can see it heading element or heading widget same thing So let's now drag this heading widget to the right column here. So first I want to change that text So to change your text You can type over the screen here or you can type it from this lift box here I want to type it on a screen from here. So I want to type here Perfect landing page - Then I hit in there to give it a line break now. I want to write Showcase your app So if you now want to change anything on this heading widget you need to click on this pencil icon Like when you work on any section level you need to click on six dots When you work on any column level you need to click on this column icon on the same way when you work on Any element level you need to click on this pencil icon here now on the left side You can see all the available options for this Specific widget or element so we are now working on our heading element at the top You can see edit heading that makes us here. We are working on the heading So from here you can see by default is heading 2 But if you want you can make it heading 1 or heading 3 Let's keep it heading 2 also you can change the alignment to left aligned or centered or right aligned I want to keep it left aligned. Now. Let's go under this tile tab. Here is the option for text color So let's click on this color picker. I want to make it white So I'm dragging it to the very top left now click outside and now click on typography So from here first You can see the font family option right now is the default font if you want to change it You can do it from here. Like if you select the Times New Roman it's changed Also, if you want to change it to this one it change to that but actually I like the default one So I'm keeping it default and from here you can increase or decrease the font size Like you can make it very big are very Small I want to make it 60 pixel and here is font of it I want to make it really light maybe 200 and here you can see the option for line height. You can increase it like this is too much I want to keep it one point too. Also here is the option for literary spacing So if we drag it to the right? The letter spacing is increasing and if we drag it to the left little spacing is decreasing But I want to keep it default So let's just remove it and I think the font size 60 pixel is too much Let's decrease it a little bit. Let's keep it 55 Okay, and I want to make the underneath line bold so to do it I'm just selecting the line and here you can see a tooltip from there Let's just click on this bold icon and I want to make this underneath line to bold So let's just triple click here And now from this tool tip click on this bold icon So it's bolded instantly cool now underneath this heading I want to add a paragraph So to do that, let's now click again on this Rubik's Cube icon. And here's the text editor Let's just drag this under the heading here Now here instead of this text. I want it to say this so like the heading you can change it from the Left editor or you can type it on screen here All right. Now, let's go to under started. Here's the text color option I also want to make it white. Also, you know, here's the option for alignment left centered Alright, I want to keep it left aligned and then go to Advanced tab you can also set margin padding for this specific text like if you want to give 810 pixel of margin all around it. You can do it from here Like if we want to add 10 pixel of margin like that, but instead of that I want to give it in percentage And let's unbind it I want to give eight for the person right margin - 2 percent So give it a - margin. I'm clicking on this down arrow here like this Actually, I'm just showing you how to give a negative margin All right now under this paragraph I want to add two buttons as we're creating an app landing page So here I want to put two buttons one button for app Listowel and another button is for Google Play Store. So let's do it Click on this Rubik's Cube icon first. I want to take an inner section here So I'm dragging an inner section underneath the paragraph here now. Let's click on Rubik's Cube icon again, and Here you can see the option for button. So this is the button widget Let's drag this inside the lift inner column here We can see our button here by default it says click here instead of that if you want it to say like download from App Store So you can type the text from here on the left then here you can put the App Store link and Here is the alignment option. You can make it centered or right aligned like this Let's keep it left aligned for now. Then here's the option for size so by default is small you can make it medium or large or Extra small like this Also, you can add icon by clicking here. Here is all the font awesome available icons Let's say if you want to select this checkmark icon Select this one and now click on insert You can see the check icon on the left if you want to position it on the right side from left You can see I can position Lisa later the after see the icon is now on the right side also if you want to add just the Pase in between the icon and the text you can do it from here like this. You can increase it more Or decrease it. I want to keep it default. Now. Let's go to understand tab from here You can change the text color background color like right now you can see it's green But if you want to make it red, just click on the background color Let's drag it to a red color, or maybe this red color Then if you want to change the text color You can do it from here like you can make it black red or white then here is the option for Border type if you want to add a border you can do that from here So I'm selecting about a type two solid and I want to give it a two pixel width You can change the border color from here like this Let's keep it white. Also, you can add border radius with it If I give it 10 pixel of border radius, you can see the corners are now rounded also You can increase it more like this. Let's keep it 30 Like that and here also, you will find the option for adding padding So if we now give it 10 pixels of padding or more like 15 pixel it now gets more breathing space But I think the default one is fine Also now let's go to the top and go under Advanced tab from here. You can also add the margin like this or Padding from here as well like this. All right, but you know what? I don't wanna keep this button I'm just showing you how to do a button so you can now create any kind of a button by yourself So now I want to delete this button. So to delete it I'm right-clicking here on this pencil icon and let's click on delete because Instead of that button here. I want to use an image So let's now drag an image widget inside the left column here Let's now choose the image from here. Let's go to upload files select files Let's upload this two together so We can use the other one next time let us now click on open So for the left one, I want to use the App Store now click on insert media Here we go And I want to make it alignment to left and here's the option for putting the link. Let's now click here And I want to select custom URL because here I want to put the app download link from the app store And as I don't have my own app, but you know, I like nightly a lot. So only for demonstration Purpose I'm putting the Nike app link here so I'm taking their App Store page link and Let's put it to the link field here like that and on the right column Let's click here on this plus icon Let's drag image widget here on the right column now select the choose image this time I want to select the Google Play Store icon not icon actually the image and click on insert media Here we go. Also. I want to make it alignment to left and the link Let's make it custom URL and here I want to put Nikes Play Store download page link from here So let's go to our elemental page builder and I'm pasting that download page link here Alright now you can see these two buttons are far away from each other So I want to make them closer so to do that just put your cursor in between these two and Drag this to the left like this Until you are happy with the spacing. Okay, let's keep it like this So now when any visitor click on this a pistol button? they will go to the Nikes Fe store download page and if they click on this Google Play button that will take them the Nikes Google Play page Our google play download page cool. Now the last thing I want to do with this section I want to make this column vertically centered so to do it Let's click here on this column icon here. Then from left. You can see here vertical align layers make it middle Cool, it looks perfect right now So our first section our top banner section is done Let's now create our next section, by the way I forgot to tell about a very important thing that is whenever You do any change and you are happy with that You need to click here on this Update button to save your work if you forget to click on this Update button after Doing any change it won't be saved a hand. You will lose all of your hard works So each time if you make any change, don't forget to click on this Update button Alright now, let's create our next section By the way If you want to download all these images I have been using for this website you can go to gym for how the digital calm for our Elementor 1 to 8. I will put the page link on the description So from that page here under important links, you can see here download the images plus templates I use in this tutorial Just click here Then you will get all these images I have used for this tutorial all together Not only images you will also get the templates Alright now, let's go back to our elemental page builder and let's now create our next section so to create our next section we need to click here on this plus icon and This time let's select the single column structure I also want to make this one stretch section to turn on and Now, let's go under the style tab because I want to give it a background color So from here background type click on this paintbrush tool icon. Click on this color picker I want to use that red color now click Outside and go under Advanced tab because I want to add some padding at the top and bottom of this section So let's first unbind the padding and I want to add 100 pixel padding at the top and 100 pixel padding at the bottom like this now here inside the section I want to add a heading first so let's click on this Rubik's Cube icon and drag a heading inside this section here now here on this heading I want it to Say the based startup app for your business and you know by default is heading 2 I want to make the alignment tools endured now, let's go under this tile tab Let's make the test color to white now. Let's click on typography font size I want to make the font size 250 pixel and font wet. Let's make a 200 all right. I'm good at it and let's now go to our under Advanced tab. I don't want any extra margin So I want to give it Margin:0 like this now here underneath this heading I want to add a counter So we're actually I want to show the download numbers of the app. Ok So let's now click on this Rubik's Cube icon and here I'm searching for Counter so this one layers to drag this under the heading here You see it appears with a nice animation from 0 to 200 here I actually want to show the download number so it starts from 0. Let's say we have got quarter million downloads on our app like 245 K 563 downloads also here you will have options for prefix or suffix Like if you want to add a prefix Slayers add here a plus So a plus icon is added at the before of the number let's remove this if you want to add that whereas suffix like if you adhere Plus so you can see the plus icon at the right side of this text also If you don't want these comma separator you can disable it from here by deselecting this But I want that and also I don't want these plus suffix I'm removing this and here instead of cool number. I wanted to say downloads now. Let's go to understand tab first here is the option for styling the number this so I want to make that test color to white and Then let's click on typography. I want to make the font weight to 900 like this Alright now, let's click on title. That means this download text I also want to make this color to white like this and let us now click on typography I want to make the font size to 30 pixel font weight to Let's make it 200 and here's the option for transform So from here if you want you can make it to all lowercase or all Uppercase like this. Yes, I like this one. And here is the option for later is spacing Let's now increase 8, maybe 10. Yep. It looks good Now, let's go to the top and let's go under Advanced tab here I only want to add some margin at the bottom. So let's Unlink or unbind the margin and only bottom I want to add 25 pixel All right now underneath this I want to add a slider or a carousel where I want to show some screenshots of our app So let's now click on this Rubik's Cube icon again and here I'm searching for Carousel here it is image carousel Actually, they're more carousel, but you can see here a lock icon because it's under elemental Pro So if you purchase a limiter Pro you can use all these Widgets or pro elements, but for this one, I want to use the free one So let us now drag this image carousel under these downloads Here now inside this carousel layers, add some images so to add images Let's click here on this plus icon now go to upload files click on select files And I want to use all these screenshots So I'm selecting all these together this one this one this one and this one Ok, let's now click on open All images that uploaded let's now click on create a new gallery From here. You can order or reorder the images Also by clicking here diverse order. You can reverse all the images. All right now click on insert gallery Here it is. Let's now customize it. So first here, you can see image size I want to make it full size like this. Oops is super big Ok So here you can see slice to show I want to make it 4 Much better slice twin-scroll default is fine image straight. No, here's the navigation option I want both arrows and dots here You can see all the dots and here is the arrows if we click on any arrow it slice to the left if you click On this right arrow it slice to the right same for the dots as well. Okay Now let's go on this tile tab. So from here, you can select the arrows position by default It's inside if you want you can make it outside like this. It looks much better to me Also, you can control the size of these arrows by dragging it to the right like this Okay, I want to keep it like this 26 or 27 you can also change the color but the default color is fine for me and from here you can also Increase the dot size. So to increase it. Please just drag it to the right like this Let's keep it 10 now let's click on image tab here because right now you can see there is no bidding space in between the Screenshots, so I want to add some spaces in between them. So here you can see spacing layers click here and click On custom. I want to increase it a more Let's keep it for the 5 pixel looks perfect for me Also, I don't want any external margin. So let's go under Advanced tab Here is the margin. Let's make it zero. All right, we have completed our Second section and it really looks super sleek So we have completed our top banner then our screenshots area Let's now create our overview section So now let's click on this plus icon to create our new section. Also this time I want to select this single column structure Let's make this chest Section turned on and I don't want to add any background color because I want to make this background color to white But I want to add some padding at the top and bottom. So let's go under Advanced tab unbind the padding I want to add 100 pixel padding at the top and 100 pixel padding at the bottom now first here I want to add a heading but you know what we can just simply copy this heading from here So right click here click on copy and now scroll down Inside this section right? Click here and click On paste we cannot see it here too because the background color is white and our text color is white So I want to change the text color. Let's go to under the style tab and here is the text color I want to make it black like this Also instead of the same heading text like this. I want to change the text So instead of this text I want to change a to this text present your app to the world Maybe after that let's click here And I want to give it a line break by hitting in there and let's write with J if oops oops, oops Like this and I want to make the second line bold so You know just Schiphol click here and click on bold from this tooltip like this and you see there is no space In between these two line. So let's go under the style tab. Click on typography Let's increase the line height a bit. There's too much Let's keep it one point two like this awesome Now here underneath this heading I want to add some icon boxes So first click on the Rubik's Cube icon And I want to drag an inner section underneath this heading here Let's click on this inner section grab icon because I want to add some margin at the top So let's go on the Advanced tab and bind the margin I only want to add some margin at the top maybe 50 pixel like this and Then inside the left column here from elements I'm searching for Icon box. So here it is icon box layers to drag this inside this column So here instead of this is the heading I want it to say full Responsive as we're trying to give the overview of our app so let's say use one of our overview is full responsive and then if you want to change this Icon, you can do that from here. Let's click on this icon box So here I'm searching for better icon. Let's search here for object. I like this one So I'm selecting this one and let's now click on insert. Alright now, let's go under style tab here So here's the primary color I want to make it the red color then here is this spacing by default is 15 if you want to increase that like this you can do that, but Default 15 is fine for me. Then here is the size option if you want to increase it You can do that by dragging it to the right, but the default one is fine for me So I'm removing this and also here is an interesting thing is the rotate option Like if we drag it to the right, you can see it's rotating on the clockwise like this So if you want you can do that on your personal need but for now, I want to keep it default Ok, let's now click on this content tab by default alignment is centered Vertical alignment top is fine. Let's make the title spacing to 10 and title color I want to make it a bit Ashe looking color or a bit black looking color. Maybe something like this Ok, and as you know, I want to save this color to use it next time So I'm clicking here on this plus so this color is added on our palette All right. Now, let's click on title. Typography from here. I want to make the font size 220 pixel and font weight. Let's make it 400 and then here's the option for later is spacing I want to make it 1.6 like this. All right now let's work on description color So let's click on this color picker I want to make the color 2 6-1 6-1 6-1. There's also ash looking color Let's now click on typography. I want to make the font size to 14 pixel font weight Let's make it 300. And here's the letter spacing also layers make it 1.6. Alright, we're doing good. Now. Let's scroll up a bit now Let's go under Advanced tab because I want to add margin and padding all around with these icon box so I want to add 15 pixel of Margin all around with it and also 15 pixels of padding all around it like this now I want to create two more icon boxes But luckily we don't have to do that one by one we can just duplicate it So to do that just right-click on this column icon here and click Duplicate let's do this one more time Right click on this column icon and click on duplicate and here on the right We can see an empty column right click here because we don't need that click on delete now here instead of full responsive I want to change the text to Well-documented Also, I want to change this icon from here I'm searching for window Let's select this one and click on insert also on the right column here instead of fully responsive I wanted to say real-time data and I want to change the icon from here Let's select this one and click on insert Awesome, so we have completed our overview section as well Let's now create our next really creative section You may see this kind of section layout on different websites But now you will see how to do that so you can do that as well by yourself Now we will be creating our feature section first Let's click on this plus icon as usual. Also. I want to select this single structure Let's make this one also straight now, let's go under this tile tab I want to give it a solid background color. Let's click on this color picker. Its off-white color if 9if 9f9 so this off-white color now lets go under Advanced tab here because you know I want to add some padding at the top and bottom so unlink the padding here Let's add 100 pixel padding at the top and 100 pixel padding at the bottom then here again first I want to add a Heading so you know what we can do. We can just copy this heading by that clicking here copy and Let's go underneath here, right click and click on paste Cool, but here instead of this text I want to change a to this it says JFD abs offers a wide range of features Because you know you saw our feature section so underneath this heading I want to add a paragraph Let's click on this Rubik's Cube icon and let's now drag a text editor widget Underneath this heading. Let's first change this text to this and Then let's go on this tile tab. I want to make the alignment tool centered. The text color is fine for me Let's click on typography. I want to make the font weight to 300 and here litter is pissing layers make it 5 like this now Scroll up and go under Advanced tab. I want to give it some tricky margins So first, let's unbind the margin and I want to give it in percentage Can you see this little tiny percentage icon click here then margin top? Zero is fine on the right. I want to give it 20% bottom I want to give it three and on the Left. I also want to give it 20 like this Do you like it? I personally like it. Okay now underneath this paragraph first I want to take an inner section so let's click on this Rubik's Cube icon drag an inner section underneath this paragraph here and Here is the interesting trick to create this cool-looking feature section. Okay for the moment Layers have a very close look what am I doing? So first I want to create another column So right click here on this column icon and click on duplicate right now. These three columns all are empty So first on the Left column click on this column icon, I make this one with two 35% also the very right column I want to make it with two 35% so the left one is 35% and the right one is 35% So, you know the mid column has nothing to do by default. It's 30 pixels. Sorry not pixel 30 percent All right. So first at the mid column, I want to add an image So let's click on this plus icon Drag an image widget inside this middle column. Let's now click here to choose an image Go to upload files select files. I want to select this one click on open now click on insert media So this is the image at the middle section now here on the Left column I want to add icon boxes like we have done at the top section here So, you know, there is a code work is smarter not harder. So why do I need to recreate this again? just to right click here on this pencil icon and click on copy now scroll down and Inside this left column right? Click here and click on piste. Boom But here I want to make some changes on this so to do it layers go under this tile tab here Remember right now our icon box is selected and we are under icon boxes is tile tab here now Under this icon tab. Here is the content. Let's click here by default. It's centered I want to make it write a line this time like this now. I want to duplicate this one again So right click on this pencil icon and click on duplicate. Boom. How cool is that? Ok, let's right click here again and click on copy now Let's go to the right column here, right click here and click on paste. And I think you already guessed it So we have now this icon box selected Now let's go under this tile tab here. Click on content I want to make this one alignment to lift like this Now right click on this icon box again and click on duplicate See how easily we have created this complex design using this awesome page builder now You know, we can change all these heading all these icons by ourselves So I'm doing it really quick and coming back to you Okay, I got back to you we're doing really great Our website is a holiday looking super modern and super slick Let's now create our next section that's social links section So basically we will put our all social media links like our Facebook Twitter Instagram all the social handling so people can click on that and they can easily find our Social media. All right. Now, let's click on this plus icon this time again I want to use this single column structure Let's make it also stressed and I want to give it a minimum height from here. Yep 400 pixel is fine. Now. Let's go under this tile tab I want to give it first a solid background color by clicking here on this classic or paintbrush tool icon so first click on this color picker from here and you know I want to select this straight color that we have chosen earlier So let's click here now click outside here I want to show you another thing like we already have given it a solid background color But at the same time I also want to use a background image or a background Pattern here. So to do it. Let's click here on this image. Go to upload files select files and I want to select this background pattern now click on open Now click insert media. Can you see the nice pattern already here? But I also want to adjust the position so here position. I want to make it top left Attachment default is fine. Repeat. I want to make it no repeat and Size I want to keep it auto like this. It looks really great the background color and this texture Combining these two. It looks really great here again first I want to add a heading and you know I want to copy the heading from top so now right click here and click on copy Nice, try and here, right? Click now, press on paste but here instead of a black color. I want to make it white So let's go under the style tab and from here text color I want to make it white like this and instead of this text I wanted to say this get social with your favorite apps and Then here underneath this main heading I want to add another heading so I just want to duplicate this one Right click here and click on duplicate here instead of this text. I wanted to say stay connected and I want to make it bold. Also. I want to add some literary spacing. So let's go under this tile tab and Click on typography here. So from the very bottom here is delivery spacing. I want to add Five letter spacing like this. All right Now underneath this heading I want to add some social icons So let's click here on this Rubik's Cube icon and here I'm searching for Social Charities social icons. Let's drag this under the heading here So by default, you can see here only Facebook Twitter and YouTube If you want to add more social links from lift, like here, you can see Facebook Twitter YouTube. Just click here on add Items here is new item added. Just click on this icon now then from here Let's say if you want to add your Skype click here and click on insert Your Skype is added if you want to add more click on add items again. Click on the icon Let's say if you want to add your Pinterest click here and select on insert let's add another one click here on add items click on icon and Maybe you want to add your Twitter. So let's click here on Twitter and select insert Oops. We already have Twitter here. Ok, let's do this one Let's add another one click on add item click on this icon Ok, let's add your tumbler here now click on insert like this now first Let's say on this Facebook icon if you want to add your Facebook page URL You can do that from here first. Click on this Facebook to expand this panel Here is the Facebook icon is fine. And here's the option to add links like here I'm adding my Facebook page URL. So I'm pasting my Facebook page URL here It's done on the same way. You can add your Twitter link here. You can add your YouTube channel link here you can add your esky Pinterest tumblr account all links just by clicking here and Type the link inside this field. It's all done Okay, now we scroll up a little bit and let's now go under the style tab by default The colors we can see here are the official color of them? So if you want to keep it like this you can but I want to make our custom colors So from here color click here and select the custom one So from here, you can select the primary colors secondary color I want to change the secondary color to white like this and Let's now select our primary color. Actually. I want to make our primary color to transparent So no matter which color we are selecting Let us say if we select this bluish color, no matter because I want to make it transparent So to make any color transparent you can see a bar here at the bottom Just drag this bar to the very left like this cool now click outside now here I want to add some border around these icons. So to do that here you can see border type Let's select this and I want to give it a solid border border width Let's make it 2 and here's the option for a border color I want to make it white and here's the option for border radius Let's make it in percentage And I want to make the border radius 2 50% to make it fully rounded now here is more options for size like I want to make the size to 20 a bit is smaller the default padding is fine, but spacing I want to make it maybe 10 Yeah, it looks good. Then. Let's have a look if we hover over on it. Nothing happens So I want to add some hover effect on it. So from left is scroll down here You can see I can hover let's click here So on Overlays, you need the primary color to a black color like this one and then the secondary color Let's select the red color and also border color. Let's select black color like this So if we now hover over on it, you can see the hover effect. It looks really cool. I like it Alright so far. We have done to save our work. Let's click on this Update button here so on this all sections I have shown you how to do it everything from scratch Dragging the element from left and drop it to the right how to increase decrease font size font family how to create icon boxes all their Typography is how to create this cool-looking structured section now I also want to show you another thing as I already have created some sections for you already So instead of doing everything from scratch you can use that what I have already created for you so to use that template Okay First you may remember we if we want to create a new section always in it to click on this plus icon but in this time as we are Going to use ready template that I already have created for you in this time We will be clicking on this folder icon. So let's click here Now go to my templates and as you can see, there is no template saved right now by the way before using my template Let me show you another thing from here If you click on blocks You can see here some ready-made blocks that provided by Elementor Some of them are pro like if you want to use this one you can see a pro bet here You need to purchase the pro license. Also this one under Pro. These are all under Pro some of them are free like if you want to use this one is FAQ section then just click here on this insert button Then you need to click on this get started button and you can create a free personal account on Elementor comm website, then you can use those free blocks or free sections So if you want to use any of that you can do that But now I want to show you how you can use the sections that I already have created for you so for now let's close this now click on this folder icon again this time click on my templates here and Then click here on this up icon to import template. Let's click here from there click here on select file this button and Then from inside the folder that I already have given you on the description Then from the downloaded file that I already have given you you can see Folders his templates there Let's go inside that folder and then here you can see JFD - features - block dot JSON file Let us now. Click on this JSON file and click on open. Here it is It says JFD features blocks Let's now click on this green button insert cool So you can see underneath the social section We have inserted the premade template that I created for you as a gift so here is this section and underneath this section also underneath You can see another section and all these sections are editable Like let's say if you want to change these taste you can do that. You already know how to do that Oops here. I did a typo is the receive it should receive okay, so you can change all these headings you can change this image from here this image to your own image you already know how to change this images and how to Replace this text with your own text All these are irritable and so this section is also editable and I want to show you another interesting thing Let's say if you want to place this right column to the left and this left column to the right How can you do that? Just grab this column icon here and drag it to the left Like this is instantly reversed. How cool is that? By the way, if you don't want that again You can just drag it to the right or you can just simply Press ctrl-z, or if you are on a Mac, you can press command Z boom Here's instantly reversed again. Then here is another pre-made section that I already have created for you So here on the left, you can change it to your own image Like I said also you can edit all this text with your text Also this text all these buttons in these buttons you can see there is no link I only have put hashtag. So if I want to put the same link like this top banner This one let's select this button again, and let's copy this link from here and let's now scroll down At the very bottom section here now click on this button now replace this hashtag to the real app download page Similarly you can do with this button as well And again doing all of these don't forget to click on this Update button to save your work Alright, we are almost done with our website now I want to add our contact from here and You know having a working contact form inside of your website is real really important Otherwise, how could anyone contact with you? Because if you don't have contact from inside of a website people will just visit your website browse your website But if they want they cannot contact with you So it's really crucial to have a contact form inside of your website So let's now create our working contact form and before that I want to recall you something that we have already done at the very beginning of this tutorial Like if we go to our WordPress dashboard on plugins you see here is element Reactivated and then we have activated essential add-ons for elemental. Also WP forms light these plugins I know you also have installed this plugin as you are following this tutorial step by step But I'm remembering you about these two plugins this time Because without these two plug-in we cannot make our contact form so make sure you have these two plugins essential add-ons for elemental and the WP forms activated on your WordPress website Alright now, let's go back to our elemental page builder Now first create our section, so to do that, you know, let's click on this plus icon Let's select the single column structure click on stretch section Now, let's go to advanced and bind the padding I want to add 100 pixel padding at the top and 100 at the bottom now here again I want to add a heading first and you know, I want to copy this from here from any of these top sections so let's copy this right-click here copy it and let's go to our Contact form section and right click here click on pissed but here Instead of this text I want it to say get in touch in comma Say hello now Let's go on little tab and click on typography Because I want to give the more let her spacing Let's add four like this and let's now go under Advanced tab here let's make the padding zero and Margin, let's unbind it first. I only want to add some margin at the bottom maybe 20 or 25 pixel like this. All right Now here underneath this heading I want to add our contact form so first, let's click on this Rubik's Cube icon here here I'm searching for Forums. Okay. Let's search more specifically I'm searching for WP forms, so this one let's now drag this under this heading here But we cannot see any form or anything here in this place Because if we here have a look here it says select form and if we click here nothing appears because we didn't have Created any WP form. So for now, let's save this page Let's click on this Update button. And now let's go back to our WordPress dashboard So from the top left click on this hamburger icon and then click here exit to dashboard Okay. So now from this left tab here you can see WP firms Let's now click here on WP forms now from there. Click here add new So first give it a name our form name I want to give this name - Jim's form this one Jim's form. Actually. We will hide it later So no one can see it You can name it the way you want and Then here is the option for selecting template If you want you can start from a blank form this one also you can start from a simple Contact form that already pre-made. So I want to use this one the simple contact form one So let's click here create a simple contact form Alright, so here you can see the fields here is the name field. So here is the first name last name? And here's the email then here's the comment or a message option and here is the submit button So this is the default form. Let's say if you want to add another field, how can you do that? Let's say if you want to add another field for grabbing phone number so here on the left you can see number Let's click here you can see a new field has been added here numbers and if we drag it to the top of this comment section just click here and drag this at the top of comment field here then click here on this number field now you can see the Options you can do with this number field So here the label it says numbers instead of that if you want to say phone numbers or Phone number then also if you want you can set a description from here But I personally don't like that and then here you can make it required So if you want to make this field required you can select this So if people want to submit this form, they must have to put their phone number But I think that's not a good idea so I'm detecting the required for phone number so you can do these settings with each field like if you select on The email let's click here on email here You can also see the required field and of course you should make the email field Required because if they don't give their email address, how could you contact with them later? All right And then if you don't want any field that you have created Then you just need to click here on this delete icon And let's say if you want to add more fields then just click here on add fields so you can add more Checkbox options more name fields more email fields ReCAPTCHA fields. Also there are more fancy fields here But if you want to use this you need to purchase their pro But do you know what we can actually create a decent form using all these free options? ok now at the Right now we are at the field tab. Let's now click on settings tab here because on the field tab You see here. It says submit but here we don't have any option to change this submit text So let's go to settings tab. So instead of submit if you want it to say st You can change it from here and then here is the submit button processing text So when any one fills up all the field of the form and they click on send? until the message sent that will show like sending dot dot dot dot dot That's really nice and all this default option is fine. Let's now click here on Notification, so here you can see st. - email address So this is basically the field where you want to receive the email like if anyone Filled up the form and they click on submit or send button Where do you want to receive that email by default? It's set to admin email So you will receive that email on the same email address. You are using on your WordPress website But instead of that you can put here any of your Gmail address Or yahoo! Address or any other email you are using just to make sure that's your active email Address so you can check that whenever Anyone feels the form from your website and here is the email subject It says new entry Jim's form So basically when you will receive that email the subject line will be this You will get the email on this of the client You can change it if you want from name, it's Jim fat production As I have said this you can change it the way you want Also here is the from email like this one. You can change it as well But if you don't change it, no worries It will go to the email address that you are using for your WordPress website And here's the reply - you don't need to mess with this field Because it will grab the email address that the user will put on the email field So it will grab their email address Automatically with this field ID equal one this property so you also don't need to mess with This field and here is the message never ever change this otherwise, you won't get the message so basically this all fields means you will get their first name last name their email address phone number all the informations they have put inside that Form you will get that from here You know what? actually You don't need to do anything with this only you can change your dis Address to your other email address where you want to receive the email, okay? Let's now click on this confirmation tab like here when anyone click on the submit or the send button They can see this message Instantly like thanks for contacting us We will be in touch with you shortly If you want to change it to another thing you can do it from here But the default one is fine for me. Also instead of a message you can also Make an unique URL if you select this go to URL so whenever anyone click on this submit or send button after Clicking on the submit button if you want them to redirect to other page like a thank-you page or to your other Website you can do that from here. You just need to put that URL here, but I want to keep it to message So they can see nstant message inside of that page Alright, so we have created our form and this time don't forget to click on the Save button here So I'm clicking here to save this form. All right now click on this X to close this and Here you can see Jim's form is created successfully. Alright now, let's go to our pages click on all pages This is our home page that we were creating from here. Let's click on edit with Elementor Now let's scroll down at the very bottom of our page So here we left off now Let's click here on this pencil icon here now from here WP forms here You can select from if we now click on this we can see here James form that we have just created Let's now select this one boom. We can see our contact form, but here we can see the name James form I don't want to show it here. So here you can see title I want to turn it off by clicking here. It's gone Alright now let's go under style tab of WP forms right now You can see the form is full width, but I don't want that So I want to add some margin here You can see for margin layers first unbind the margin by clicking here and I want to give the margin in percentage so I'm clicking here on this percent icon, and I only want to give a 20% margin on the right and 20% margin on the left. It already looks decent and Let's now close this from container. Now, let's open these labels because it looks too bold so from here Let's click on typography and I want to change the font way to a lighter one 300. Yep It looks good. And then the last thing I want to change on this form is the st Button, because if we have a look our website has read kind of color in it So I also want to change it to that. So to work with our Button, we need to click here on this submit button. Click here now from here first I want to change the background color. Let's click on this color picker I want to select the red color and then text color I want to make it white like this then I want to add some border radius Maybe 8 pixel like this then I want to add some padding layers first unbind it so 15 pixel at the top for the pixel at the right 15 pixel at the bottom and For the pizzle at lift like this now, let's click on this typography here because I want to Make the font size to 16 pixel. Also the font weight to 400 like this cool. Now, let's go to the top and click on advanced I don't want any extra margin. So I'm keeping it a zero like this Alright, our contact section looks great. Now let's now click on update to save our work now I want to add our footer and I already have created the footer for you So let's now click on this folder icon go to my templates and You know, let's click on this import template icon here now click on select files and from inside your download folder Inside templates folder you can see here jft - footer JSON file select this one and click on open Here it is. It says Jeff the apps - footer. Let's now click on this green insert button Here we go, so here on the footer I have created a button it says move to top if we click here that will jump us to the top of this page and Then here on the right here is the social icons again and here on the left. You can add your privacy policy Terms of service or disclaimer pages link here Let's say if you don't have your privacy policy or Terms of Service pages ready? and if you don't want to use that just right click here and you can delete it and Instead of that if you want to just simply put a copy I'd text they'll just click on this Rubik's Cube I can't drag a text editor here inside Then go under the style tab from here You can change the text color to white ish or grayish color like this and then instead of these text go to Content here. You can put your copyright tastes like this Copyright than 20 and then your company name Like this, so I'm just showing you how you can do that simple copyright text here on the left But I want to go back to the privacy policy page links So here I want to show you another thing like I have changed several things here and if I now want to go back to an earlier revision, all we need to do from Left here. You can see history. Let's click here here. We can see all the revisions we have done for this page So it's like time machine of our website so if we click here we can go back one stage back then ophélie click here or let's go back to Here. Yes we go back to that stayed cool All right. So let's say if you want to add one more page link here, how can you do that? Just click on this pencil icon and here you can see privacy policy is the icon list So here you can see privacy policy if we click here, you can see the text privacy policy that we can see here privacy policy and Then here is the option for link so you can put your privacy policy pages link here Also, here's the terms if we click here Terms of Service. You can put your Terms of Service page URL here Let's say if you want to add another page link here All you need to do click here on this add item here. You can see an icon, but I don't want this icon So let's click on this delete icon that checkmark is gone and here instead of list item Let's say we want to add our disclaimer page. So let's type this claimer then you can put your disclaimer page URL link here this way and you can click here to minimize it and if you don't want This disclaimer page you can click here on this X to delete that by the way I will show you shortly how you can create this privacy policy or terms of services page Really zealey because you know, these kind of pages are not kind of QT pages You only need to put some kind of heading and paragraphs like that So I will show you shortly how to create this kind of privacy policy or Terms of Service or disclaimer pages now here Let's have a look if we go to the bottom here We can see another footer but we already have created a footer by ourselves So we don't need this footer anymore So let's remove this footer But before that again don't forget to click on this Update button to save our work whatever we have done and Let's now go back to our WordPress dashboard by clicking on this hamburger icon and click on exit to dashboard Now here from appearance. Let's click on customize here now if we scroll down to the very bottom of our page Here we can see the footer that we have created a hand here. You can see another footer There's came with Astra theme by default So if we want to hide it from lift We need to click here on footer then click on footer bar And we need to click on the very first option this one disabled option. It's gone Let us now. Click on publish Now click this X to exit Now let's go to a front-end off our website to have a look how it is looking so click on the visit site So here is our website header and then this top banner looks great and Then here's the screens short sections looks great Then if we scroll down here is the overview section looks really clean Now let's scroll down here We can see our cool feature section and then here is our social media links looks great. And Here is some bonus sections that I have given it as gift and here is the download section Underneath that here is our working contact form and then here is our footer Everything looks perfect Also, we will check our website from tablet and mobile device shortly before that I want to show you something why I have created these jump buttons the purpose was if we click on these screenshots that Jumps us to this screen short section if we click on this Overview that jumps us to this overview section like that But if we now click on our strengths short section, it doesn't work okay, so to make it work, let's click here on edit with Elementor and You may remember on our wordpress dashboard when we were creating our munoz like here if we expand the Screenshots here. You can see we have put URL Hashtag is screenshots overview URL to hash tag overview Can you remember also here if we expand the home here you can see we have put the URL To hash top. Now. You can understand why I have done that So let's now go back to our elemental page builder So our goal is when we click on screenshots that jumps us to this section So to make it happen Let's first click on the 6 dot icon of this screenshot section Then let's go to under Advanced tab here You can see an option for putting CSS ID So here I want to put the ID name that we have used as the URL of this screenshot menu now, let's make the CSS ID to Screenshots and then click on update if we now go to the top and click on screenshots Now that jumps to the skin char section so the next section is Overview so let's go to the overview section here. Let's click on the 6 dots Go to advanced and CSS ID. Let's make it overview Then here is the features. So let's scroll down and this is our feature section Let's click on these 6 dots go under Advanced tab CSS ID. Now. Let's name it features Then we have got here download and contact So let's scroll down here is our download section here So let's click on this 6 dot go to Advanced tab CSS ID let's name it download remember these CSS IDs are identical to the name of this URLs like if we go to here download and Expand it here you can see URL is Hashtag download that's why we are using Inside element of page builder the CSS ID download without the hashtag here simple Let's now go to the contacts section here. Let's click on this six dot go to Advanced tab CSS ID let's make it contact now click on save or Update button. Now. Let's go to the very top. Oh And I forgot to name the top banner the top banner CSS ID So let's click on these six dots go to Advanced tab and see society. I want to name a table All right Now click on Update button to save our work now If we want to preview our work we need to click here on this eyeball icon Let's click here So if we now click on screen charts that jumps to the screen Shore section if we click on overview That jumps to the overview section Alright, everything is working perfectly and if we now click on 'contact that jumps to the context action also At the very bottom of our footer if we click on move to top that jumps to the top of our website cool now we only need to create our logo and put that on the left top of our website and then checking the Responsiveness of our website that it looks perfect from mobile device and tablet device Okay, let's now create our logo to create our logo. We will be using an online software That is logo maker com its logo maker without the e so logo M Aka our comm. So if we go to this website First you can see a video pops up it basically the instruction how to create a logo But I will show you how to do that. So, let's close this one So first from this top search bar, I'm searching for app as we are creating a planting website So I'm typing here app and let's now hit enter here. You can see tons of vector icons Let's select any of them. I like this one. Let's click on it You can basically drag it like this. You can minimize it I mean you can make it smaller like this or you can make it bigger like this then if you want to change its color just go to this color wheel here and Let's select a reddish color To make it match with our website So I want to keep it on the left and then on the right, I want to add some text So to add any text from left here, you can see that text symbol. Let's click here Then you can type your word inside it. So I want to type JFD then a space and then apps They now click here on this icon so we can make it left aligned by clicking here Let's now click outside and also you can drag it to the position you like then you can also change the color this text from this color will lace make it also read and Then if you want you can change the font family of it to do that from top here You can see some type or category Like if you want to have a fun and funky type font list click here Then you can see a fun a funky type font. You can select different fun and funky type fun from here, right? Maybe this one TV like this, but as our website is not a fun and funky type website so first, I'm selecting the Simple and modern option here and then from font Let's select the antique one then also you can resize it by dragging like this You can make it more bigger by dragging it from this corner like this also on this icon click here I want to make it smaller like this to adjust with the text and Let's drag it to make it aligned with the text in this way. Also if you select both the icon and text together now this both icon and text is selected together you can Now make it bigger or smaller by dragging the corners. Have fun with it until you are 100% Happy so when we were happy with it Just go to the very top right corner and click on this save logo icon It says if you want to download the high resolution files, you need to pay them $19 But even know what we want to use this only at the top of our header So we don't necessarily need a high resolution image for that. So let's click here. No Thanks download low resolution file. Let's click here So you can see it's downloaded so you can find that inside of your download folder Alright now, let's go back to our website Now if we want to use that logo here on the Left top first, let's click here customize and From this customizer from left here. Click on header Then click here on site identity here. You will find the option for uploading logo So let's click here select logo. Now, let's go to upload files select files Now you can select the image from your downloaded folder I have already that logo inside this images folder here So this one let's click on open now click on select now Here's the cropping option because we have lot of what space we don't need that So let's crop this let's drag it to the left like this I want to add more space on the right like this also I want to reduce some space from top also some spaces from bottom like this Alright, let's now click on crop image Here we go But it looks super big so you can reduce the logo width from here by dragging it to the right or left. I personally like small logos like 150 or 60? Yep 160 looks good, and we don't need the site title So from left, let's scroll down here. You can see site title So let's deselect this one display site title is gone how our header looks really cool I like it Now if we scroll down from this left bar here also, you will find the tagline by default Its deselected so you don't need to worry about that then here you can see the option for site icon like if we go to Jim for her the digital calm you can see and fab icon a Little tiny icon at the top of this browser. This is the fav icon or site icon So if we want to add this site icon into our website Lets click here on this site icon. Click on select site icon Go to upload files select files and you will find that inside that images folder. I want to select this one The little tiny one now click on open Click select. I don't wanna crop this one. So let's click on skip cropping Wholesome you can see now the favicon at the top of the browser So when we are done, let's click on publish to save our work now. Let's click on this X icon to exit Awesome now before checking our websites responsiveness You may remember on the footer here We have created page links like privacy policy and Terms of Service I told you I will show you how to create these kind of basic pages really easily using elemental page builder because these pages like privacy policy or Cookie policy disclaimer pages you need to keep these pages always simple easy to read. Let's have a look on some Example if we go to entrepreneur.com and if we scroll down at the very bottom of this website here You can see their Terms of Use privacy policy cookies policy page if we click on their cookies policy page You see these pages are pretty simple Only a simple header and some takes then if we scroll down some bullet points Very simple page. So let's see how you can create this kind of pages because if you're a business owner, You may need to create your privacy policy page or disclaimer page Okay So to create a page in layers first to go to our WordPress dashboard and from there You already know let's go to pages - all pages now. Click at the very top here add new Let's name this page privacy policy now click here publish click again on publish now click here edit with Elementor so here first, let's take a section. Click on this plus icon layer select easy structure Let's make it is trace now go to advanced and bind up adding layers add 100 pixel heading at the top and 100 pixel padding at the bottom now click on this Rubik's Cube icon and drag Heading inside this section. So here layers type J if the apps column Privacy policy then now go to styling already know that how to miss with the headings So let's now click on text color. Let's make it black color. Now. Let's go to Typography here. Click here. Let's make it 50 pixel font size font weight layers make it 300 All right now let's click on this Rubik's Cube icon and let's drag a text editor underneath this heading here now here inside I only Want to put some dummy takes? Okay. Let's copy some text from a entrepreneur.com Let's copy this text only to show you Some copying it from here and let's go back to our website then inside this text editor I'm just pasting it see how easily we can create these kind of privacy policy page on the same way You can create disclaimer page or Terms of Use page and on the left This text editor is super easy. Like if you want to create any text bold just select that text Let's say this website. Okay under the website Let's say if you want to make this together with any related sub sites You can just grab these takes and from top here click on this bold icon You see it's instantly bolded here Then if you want to make anything italic just select the specific word and click on this italic icon simple you see here content associated is Italic, then here you can see WWE green entrepreneur.com so let's say if you want to make it a link just Select these takes and then click on this insert link icon then type the website URL whatever you want to link it and Then just click here to apply see here www Entrepreneur comm is linked to green entrepreneur com so it's super easy to use you already understand that and let's say if you want to at the global footer here also All you need to do just click on this folder icon here Go to my templates here is the JT apps footer. Let's click on this green insert icon Our footer is added on this page as well. So to save it layers Just click on this update button, see how quickly we have created our privacy policy page So let's now go back to our WordPress dashboard So if we now want to preview this privacy policy page on the top here, you can see a button says preview So let's click here So we can see here is our privacy policy page here is the footer here is all this text Here is our header and this is the URL of our privacy policy page So let's now just copy this URL from here and let's now go to our main home page Because we want to link this page URL to here at the footer privacy policy in this place, so to do it Let's click here edit with Elementor on this page the home page Let's now scroll down to the very bottom of our page here Let's now click on this pencil icon from left Expand the privacy policy and here you can see the link option Let's paste the URL of our privacy policy page. That's it Let's now click on update to save it on the same way You can create your Terms of Service page and you can link it to here on the same way You can create your disclaimer page and then link that page URL here very easy. All right Now you may ask me Jim You didn't show us how to create cool animations inside of a website. No worries. I got your back I'm showing you how easily you can create cool animations Let's say if you want to add an animation on this image first place click here on this column icon Now, let's go to Advanced tab here. Then here you can see motion effects. Let's now click here You can see here in trends in nation. Let's click here live select fade in left See how smoothly is coming from left to right also, here is the option for animation duration by default It's normal, but you can select it too fast like this or you can select it too slow like this Cool. Okay, let's keep it to normal Also, if you want some animation delay, you can set it from here. Like if you want one second of delay that means 1000ms so you can put the value here 1000 whoops, not 100 1000 So the animation delays for one second and then it comes from left to right actually 1000 image is too much. Let's keep it 500 like this Cool and not only on column level you can add Animation on any single widget like here you can see a heading widget Let's click on this pencil icon. Then from left go to advanced scroll down a bit here. You can see motion effects Click here in trance animation for this layer select the zoom in one Cool, if we select it to slow Awesome also You can apply it to anything like if we go to this inner section and go to Advanced tab Let's select the motion effects in trance animation. Let's select for this one Fade in up like this cool. So in the same way you can apply any animation to any column or widgets or Sections the way you want and whatever you do Don't forget to click on this Update button to save your work Alright now we are at the very last step of our website now We will check how our website is looking on mobile device and tablet So to check responsiveness of our website first, we need to click here at the very bottom You can see your responsive mode icon. Let's click here And first let's click on tablet to see how it looks on tablet device Okay, our header looks fine. And on the right our main navigation becomes a hamburger That's great. If we click here the menu items drops down nicely if we click on this X It's hidden. Perfect. Now, let's have a look on this top banner It looks super big on tablet device So first, let's click on the section icon here first I want to reduce the minimum height of this only on tablet device So here you can see minimum height and beside that here. You can see a tablet icon So whatever change we will make here it will be only applicable for tablet device It owned harm the desktop view. So also for this one, let's select the VH and let's drag it to the right Maybe a more less Ok, let's keep it 50 on tablet And then I want to reduce the font size of this text So let's click here on this pencil icon. Go to under the style tab now. Let's click on typography Let's change the font size for tablet device And again, as long as you see the tablet icon, it will only applicable for tablet device so let's drag this like It let's make it 35 pixel it looks perfect now and Also, I want to fix these buttons because you see these two buttons looks way different So first, let's click on this left column here and on tablet device I want to make its width to 40% then let's select the second one column icon here also I want to make this one with to 40% It looks perfect Now also you may remember on desktop. We have added some padding at the top but on Tablet device we don't need that. So let's click on these 6 dots I Go to Advanced tab. Let's unbind the padding now The banner looks perfect on tablet device Okay, let's go to our next section This section looks perfect on tablet, but here these screenshots looks too big So instead of two on tablet device I want to display three images at a time So let's click on this pencil icon of this carousel So here on the left You can see slice to show and also you can see here the tablet icon so it will only applicable for tablet device So let's click here, and I want to select three images Perfect. Now let's go to the next section here in this section Everything looks perfect, but I think here is the padding at the top and bottom is too much on the tablet so let's now click on this six dot go to advanced layers now unbind the padding and Here, I want to add 15 Pixel padding at the top and 50 pixel at the bottom right now. It looks perfect the next section It looks perfect But this person looks kind of weird so I want to make this column vertically centered So to do it, let's click on this column icon here So from left here, you can see vertical align and here also, you can see that tablet icon So let's make it vertical alignment to middle like this now, it looks way better now Let's go to the next section. It looks perfect. This section looks perfect This one looks great download section looks perfect. Here's the contact form looks perfect And here is our footer looks perfect Alright now, let's go to our mobile view from here responsive mode. Click here. Let's now click on mobile Okay on mobile here the header looks perfect here on the Left we can see the logo and here on the right we can see the Hamburger if we click on this hamburger, the menu items pops up perfectly and if we click on X it disappears Here this image comes first and then we can see other text It looks kind of weird right? what if only on mobile device we can make this image to the bottom and This section at the top. Is that possible? Yes. It's possible Elementor makes that possible for us So to do that first click on the C's dot icon and from under Advanced tab Under motion effects here You can see responsive so not on tablet, but on mobile device here, you can see rivers columns So columns will only reversed on mobile device So let's turn it on for this section. Click here. Awesome So now the image is at the bottom of this section and all this text are at the top of this section But we need to fix it a bit. Like I think we need to add some breathing space at the top on mobile device So let's now click on 6 dots here and then from under Advanced tab click here advanced and bind the padding and lives at 50 pixels of padding at the top on mobile device because you can see here mobile icon So this padding will be applicable for only mobile device. It owned harm the best of view or Tablet view as long as you can see mobile device icon is only applicable for mobile device All right. Now I want to make these buttons align main center So let's now click on this pencil icon and from here alignment on mobile Let's make it centered also for this button. Let's click here on this pencil icon and for mobile device Let's make the alignment to Center. Now this top banner looks perfect Now, let's go to the next section It looks perfect on mobile device, but on this section this heading is looking too big So let's now click on this pencil icon Let's go to Thai tab click on typography and only on mobile device I want to make the font size to 30 pixel. Yep. It looks perfect Now let's scroll down all this looks perfect This area looks fine, but I think we need to reduce the margin from this paragraph So let's click here on this pencil icon now go to under Advanced tab layers Unbind the margin hip looks perfect. Now then let's scroll down you can see it's aligned on the right This one also lined on the right here this mobile image looks perfect and Here actually, it looks perfect to display as left aligned So also I want to make this two left aligned on mobile device so to do it Let's click on this pencil icon. Now. Let's go to his tight hub. Let's expand the content and Only on mobile device. I want to make the alignment to left Awesome. Let's do the same with this icon box. Let's click on this pencil icon go to his tile expand the content and let's make it left aligned see how easily we can manage the Responsiveness of our website using this amazing page builder, okay Let's now scroll down to our next section. It looks perfect. Now let's scroll down This section looks perfect Now here is our downloads section. It looks perfect. And here is our forum section It looks perfect, but we can reduce the margin from the left and right so to do it Let's click on this edit icon layers Go to style tab of this WP forms now from here. You can see four margin Let's first unbind it. Now. Let's select the percent and lives ad only on mobile device on right 5% of margin On the left. I want to add 5% of margin right now. It looks perfect Now let's scroll down here is our global footer It looks perfect on Mobile device and if we click on move to top it jumps to the top of our website Perfect. All right Now don't forget to click on this Update button to save your word So we have successfully completed our WordPress website It looks perfect on mobile device also if we go to now tablet device it looks perfect on tablet device as well and If we go to the desktop device it looks Perfect Awesome Everything is looking and working great. We have successfully made our complete website and it's now live Congratulations Alright guys, so that was how to create a WordPress website Step by step if you enjoyed the video Please hit that like button And if you want to see more awesome videos on how to create a website from scratch how to make money with your websites and all sorts of awesome helpful website related Videos then please hit that subscribe button on this channel. He will not be sorry Alright guys, that's it for now Thank you so much for watching, and I will see you in the next video for now. Bye. Bye
Info
Channel: Jim Fahad Digital
Views: 4,977
Rating: undefined out of 5
Keywords: How to make a WordPress Website 2020, Step by Step Elementor Tutorial, Elementor tutorial from scratch, app landing page wordpress, app landing page elementor, how to make a website for free, how to make a website from scratch, how to make a website with wordpress, how to make a website using elementor, elementor 2020, Elementor tutorial for beginners, Wordpress tutorial for beginners, jim fahad digital, hey wordpress, wordpress tutorial, make a website, create a website
Id: dAv7wTwq1lM
Channel Id: undefined
Length: 144min 25sec (8665 seconds)
Published: Tue Apr 21 2020
Related Videos
Note
Please note that this website is currently a work in progress! Lots of interesting data and statistics to come.