How to Create a Landing Page Using Elementor in WordPress?

1. What We Will Learn in This Course?: Hey guys, Welcome to this lecture course. Now, if you don't know me, my name is Muhammad rather than money and I'm a WordPress developer having seven years of experience. I'm also wanting a digital agency and proudly serving my clientele all over the world. In this short course, we are going to learn how we can create a one-page. We will be using elementary page builder to create a landing page. Now, we could also use other things, but the purpose of using Elementor is, it is very easy and quick to build a landing page using Elementor. With its beautiful Drag and Drop page builder, you can easily create layouts you need. You can adjust the columns, section positions, font sizes, and all that with simple clicks. So the pitch that we will create will contain a clickable logo, social icons. That could give us a set of icons in the header, a catchy manner with a clickable call to action. We will also create other sections along the goal. At the end, we will add some nice animations to make it look more beautiful and attractive. So now I hope to see you inside. Let's dive into it. 2. How to Setup a Website?: So congratulations for getting into this course. As you're in, we'll have to see how to get started. So here's a question for you. Yes, we can skip this part. If not, we'll have to do some configurations here. First of all, we'll have to set up a domain and hosting. And for that, we'll have to definitely purchase a domain and hosting the different companies. I will refer you to purchase a domain and hosting, as you can consider SiteGround, maybe Bluehost, or maybe Host Gator. These are the few names. I know there are good, but you can choose any other questions as well, any other domain as well as you'd like. So after you have configured the domain and hosting, you have to install a fresh WordPress CMS on the new website we have recently configure, makes sure to save the username and password. You configure. Now if you want to see, if you want to see how you can set up WordPress on or maybe set up domain and hosting. You can see different courses from other Skillshare courses. There'll be able to help you set up the domain and hosting and installing a fresh WordPress CMS on that. And once you are done from all of that, we'll have to dive deeper and get started building up our landing page. 3. Setting Up the WordPress Theme: So now as we have the fresh WordPress install will have to set up the themes and plugins. So first of all, we'll set up the theme for that. You'll have to go to the WordPress as we've just installed. So this is a WordPress as we have just installed. And now we'll have to go to the dashboard for that. We'll go to rewrite WP admin after the URL, and it will take us to the dashboard. By the way, if you're not logged in, you'll have to log into your website before you dive into this dashboard. So for installing, the team will go to appearance and then themes. Wordpress comes with a few install, a few default themes that are pre-installed. And if you are, if you've installed the WordPress using any hosting or maybe some software installers, you will have some default WordPress themes as well. So in that case, I've got this scenario team and now there are different things that we can use Elementor. The best team, I believe to use Elementor is Hello Elementor because there are different reasons. Hello elementary outcomes is mostly blank. The theme is mostly blank and we can only use it with Elementor. So I'll go to appearance and then themes, and then add new here to install a theme. And on the right side, I'll type Hello Elementor. And here I'll install this scene. The best thing about this team is it is very lightweight as I previously mentioned. So the plug-in, the elementary plug-in and this team becomes a perfect combination. So as you have installed the theme in the next video, we will see how we can install Elementor plug-in and get started. 4. Setting Up WordPress Plugins: So far we have configured the domain and hosting. We have installed fresh WordPress, we have configured the theme. Now there's a time to install Elementor plug-in. And as I mentioned, why we are using Elementor. There are different reasons to use Elementor are first of all, it comes with a very nice UI UX editor, so we can easily manage the columns and the layout and all that. And the second thing is, it is so quick and easy to build landing pages using Elementor because it comes with very easy, different add-ons that they can use, like sections, headings. The drag-and-drop builder, we can easily change colors, text, fonts, margins, and all that. So there are different reasons. There are a lot of benefits to use Elementor. So we can easily make the peer lending Visa responsive, but it's easy enough responsive tools. So now moving ahead and install the Elementor plug-in on a website. For that, we'll have to go to the dashboard again. And here's the dashboard. And now this time we have to go to plugins and you click Add New here. And on the right side, you will search for element two. The first result showing here is eliminated. Website builder will install that. And let you get this plugin. And this was a simple step to install the Elementor plug-in here, I believe we won't need the plug-ins to create the lending page. So we'll just stick with this one plug-in, but maybe later on if we need other plug-ins. That is the reason why we are using the plugin and how to use a plugin, right? So now we'll move forward and start building up our landing page in the next video. 5. What is Elementor and How to Use It?: So before actually starting creating a running page, first of all, we'll have to see how to use our limiters so we can see the tip then breaks and all that. That will make us easy. Make it easy for us to build our learning page. So let's get started. Again. I'll have to go to the large bore. So here's the dashboard. And as they've installed Hello Elementor theme and elementary plug-in. This is how the dashboard looks like afterwards. So let's create our page, our first page actually with Elementor to see how it works. Right now, I'm creating this page. Because after that we'll create our actual landing page. This is a test page to see how Elementor works. Let's publish it in Publish. And now let's view our page. And this is how the page looks like on the default Hello Elementor theme and applying page on Elementor. So to edit that, we'll have to go to the dashboard again. For that. Let's go to WP admin because I close the page. And here again, I'll go to pages and click Edit button here. And here, I'd have to click this Edit with Elementor because the current builder that you are currently seeing is called Gutenberg. We are using Elementor page builder in this case, so we'll click edit with Elementor. So we can actually open up a drag-and-drop page will recruit environmental. So this is how Elementor page builder works and looks like. On the left-hand side, you'll find different add-ons that you can use to build up your learning page. Here are a few of them, B6 and then PRO, emitter, Pro, you can use them as well. And on the right-hand side you have a clear view of your page. And here you can click, edit the columns and the columns here by clicking the plus icon. And here you can, on the left-hand side, you have unknowns. You can simply drag the add-ons from here to the right side to use them. E.g. if you have to use a heading, you have this heading here. Just drag it to the right side and you're heading is here. You can simply edit this, maybe let's say, or our first heading. And that's not it. You can completely change the typography. You can change the colors, the size, and all that. For that, you'll have to simply create this style tab. And you'll have all the options that you'll need to add. You know, you're hiring e.g. the text color, you can change your text element to anyone you want. And epigraphy, you have different options. You can select any font you like to have. So let's let this waveform that we never see anywhere except for him for a few websites. And here we can adjust the size as well. And we have different weights. You can simply stick. The weights in the form will have different weights. It will change the, you can see the boldness and lightness of this fun and transform. You can simply make this text uppercase or lowercase or capitalize and all that. You can simply change the style of this one as well. Let's say if you went to have italic, you can use that, have to do oblique, normal and all that. You can simply do it from here. And then we have the declaration failure. We can simply add underlying overline, line through or maybe none. Then we have the line-height, e.g. if we have, you know, the texts on two different lines, we can adjust the line hits from here. Like this. The next option we have is letter spacing. We can simply adjust the lighters here. And now we have the word spacing, so we can use simply, let's move it back to the single lines so you can see it properly. You can see how the spacing works here. This is spacing works between words and this is basically works with me letters. So these are all the options that you'll need to have. You have more options as well. The texts true? You can add a little water to your texts. Change the color as well. And we have the text shadow. Then we have the blend mode. This is something you can call add. Once we know what it does, you can use it, but maybe we can skip this. Industry knew this was the heading. And if you want to use an image, you can go back to the add-ons by clicking this 9-node icons. And let's see, we'll have to use image here. And I'll have, I'll click New one demo image that I've uploaded on the Media Library. So from here you can adjust the image sizes. We can thumbnail medium or anyone you want. And then here we have alignments of the image, e.g. if you're a small image, we need to align them left. You can do that center right now. And then we have also an option to add captions. Let's see if we need to add captions on the image. You can do that as well. And we have an option to add links. If you want the image to be clickable, you can use this links to make the image clickable to maybe some other link or an internal page of the website. And that's not it. You can also customize image with different options. We have the attribute here, e.g. if we need a specified width for the image, we can do that. The next width, the height. You can adjust it as you want. And then the object fit, e.g. right now you are seeing the images stretch because we adjusted the height. We want the image to not stretch. We can do cover, contain, or we need it to be stretched. We can again do the full, right? So here's opacity of the image. Css filters. Again, this is some advanced thing that we can consider maybe in later course. And then the Border Tribe solid double the different borders you can definitely play with. And then this is a box-shadow. If you want the shadow on the backside of this video, sorry, image. You can also do that. So yeah, this was an image like this. You can add any element you want. There are different elements like video buttons, a spacer, divider here, Google Maps, icons and all that. Let's also see how video works here. And you can see default years already placed. You can simply drop your YouTube video link here, or maybe a video link that you want to be embedded and the video will be automatically embedded. You'll see how easy it is to use Elementor to create the pages. And you'll maybe imagining how we can help with NO how quick and easy we can build our learning page using Elementor. So in the next video, we are exactly going to figure out how we can use it to create exciting landing pages. See you in the next video. 6. Creating a NEW PAGE: Now, we will have to read a page for our learning page where we will actually build up the sections and all that. So for that, we'll go to pages here and we'll add a new page. You will be building up a landing page for a new model, a new car model. So we will plan things accordingly. So for that, I'm going to write here ABC. All right, so clicking Edit with Elementor. It will open the page in the Elementor editor. So first of all, you will clean the layout by removing all these additional things. So to do that, we will go to settings on the bottom right side. And we will go to settings on the left bottom side. And we will select elementor canvas page layout. Once we asserted elementor canvas, you'll see that all the additional things has been removed. 7. Developing the HEADER and FOOTER: So now we will start building up our landing page. First of all, we will add our header and footer. Initially. The header we need is a two column header. Over on the left side we'll add a logo and on the right side we'll add some social icons. So clicking this plus icon and adding a two column layout. On the first column, I will add the image element here so I can add the logo. I selected some images to use in this landing page. So grabbing them all here. Select this image for the logo. As you see it's appearing very large. We will do some customizations. Here. You go. This time. We'll go to the Styles tab and you'll add some height. And as you can see, the image is stretching out. We will select object fit as cover. We'll add some max-width, decrease the height moved. And now we have to align this image on the left side. So we'll go back to the content tab and we'll select this left alignment. From here, you see the logo has been aligned to the left. And on the right side will go and add some social icons. Here you will find the element for the social icons will grab that element here. And by default, it comes to these three icons will go in Instagram as well. So that Instagram is also added here. Now we also have to align the social icon on the right side. So for this, we will select this right here. We have to align the logo and social icons vertically centered. So for that, we will go in and select this section from here, from the navigator. And here on the left side you will find is Vertical. Vertical Align option. Just go in and select middle, and you will see that the header is properly aligned. Let's add some light background to the header. For that, we will have to select the style tab. And here we will select a light background, white, so the background is also applying here. As you can see, a beautiful header is ready. We will go in and add a simple footer here. For that. We also need, for that. Again, need to click this plus icon. And initially we need a one-column footer, I believe. So selecting this one column here. And I'm going to add to an image. Again to add the logo for the footer section. This logo again, customizing it with the style tab. Using the high. Yeah, I believe that's good. And after that, we had everyone heading here. Says Writers. Centering the heading here. And we will select a font for. You will select a font for all lending page. So I'm going end selecting the proper font here and changing the color to black. Making the text uppercase and reducing the size of it. Changing the content to see 2022. Right? Now I'm going to add the copyright line here. By adding the text editor elements. Here, I will write the copyright line, right, 2022. All rights reserved. Later. I'm just adding a generic line here, aligning this center as well. And changing the font to Poppins again. Right? So our footer is also ready. 8. Developing the HERO/BANNER section: Now, as we have our photo ready, now, start adding the mean sections for our learning page. For that, I will go in and add one more session by clicking this plus icon here. And as we're going to add the banner here, you will select a single column layout. And we will move this by clicking this icon. And we will put it on the top of the firm because for credit will be the last section of the website. And now go in and click this section. And a left side, you'll see the options for detection. And we'll go in and select the style tab to add the background image for better. And for that, I'm going in and selecting this classic icon and uploading an image here, I will select one of the image, one of the few images be uploaded before. So I'm going to select this one. Certain media and we'll see the image has been uploaded. To make some configurations. I will change the size of this image to cover. And we'll set this to set the position to center, center. And we will give a minimum height to this section by clicking this layout tab. You see this height section here, we will select min-height and we will add maybe seventh grade, right? So we have a nice section here, a nice background for our banner. Here. You see this column is appearing here. We need a column on the right side. So for that we will go in, select the column and click duplicate. It will generate another column that we can adjust. So Menu more closer to the center, you will see the icon will change, the mouse cursor will be changed and we can click in a click it and drag it to the right two edges size. Select the right column to 40%. Now we will start adding elements here. So I would go in and select one heading. And the name of the heading will be new car launched, right? Change the styling of this heading. By the way, I had selected the Poppins font and the black color for the headings, right? So I will go in and click the topography and we'll change the size of this font. Will also increase the way to 900 maybe. And we'll change the text transformation to uppercase. A size small. And you see a nice title is appearing. Now. I'll go in and add the text editor element to add a bit of texts here. Let's use this placeholder text for now. Because you know, you can change it later. I'm just going to build it up for you. So I'm going to style and changing the text color to like write. Um, I will also change the size of this font to maybe 18. And now I will add a button. There's calling a call to action, right? So I will add a button element here and click. Learn More. Change the size to medium. And going to the style tab will change the typography a bit. Making it uppercase. A bit bold. Not that they deserve hundred. Yeah, it looks good. And I will maybe remove the border radius. I believe it's showing a bit of border radius. So when n is zero. And now you can see that nice section has been designed to try to adjust the background image for this section, maybe we'll try center left, or center right doesn't make any difference. So don't make it center, center again. Maybe I will decrease the font size, this heading. And we'll change the column that as well. Because it's touching with the car, you know, not looking good. It looks good now. So our banner section is also ready here. 9. Developing the REST of the LANDING PAGE: We will go in and add a new section. Again, click the plus icon. And now we will need a section, there will be two column. So taking the two column layout here, again, we're breaking into the top. And now we have our section here. I will select, I will add image on the left side of this column. Select one of the few minutes I uploaded before. Let's select this one. And now we have our image here. We'll add a new heading. Let's type about. Maybe leave it about. And again, style the headings to 700. Site needs to be as is. Make it uppercase, right? Let's rename it to about PBC. Right? I will add one more element here, the text editor to add some texts. Let's leave here. And we'll add one more element for the button. Let's maybe duplicate the button we use for the banner. For that, you'll have to right-click on the button and click Duplicate and copy ragged on the bottom of this session. So now we have to vertically align the content of this section. For that, we will click the column settings by clicking this six icons here, fixture Eigen here. And we'll make it middle as we did with the header. Now you can see it looks good. We will add a padding. We will add some padding to the top and bottom of this section. For that again, we will go to Style tab. And two, sorry Edwin step. And we'll add some padding here, maybe 50. Let's unlink them because it's also adding depending on the left side, remove the right and left side of the painting. Maybe increase it to 70 from top and 70 from bottom, right. So now you can see a nice section is designed. I will just duplicate this section for, because sometimes we have some additional equals to show on the landing page. So duplicating this section here and reversing it. So now the image will be on the right side and the description will be on the right side. Let's change the image. I'm using this one, maybe this one for now. Let's just call it design. And yet, this section is also here. And let's add a bit of background to this section to make it a bit different from the Tuckman. For that, I'm going to this typedef. I think, sorry if not the image but to color, giving it a light background. Maybe. This looks good. And now as we have the two sections for the information, the, let's create one more section where we will add some characteristics for the car or maybe any product that someone will add. So again, adding one more section, and here in the single column section, dragging it up to the footer and adding one heading here. Let's type. Let's type benefits. Alright. Centralizing the texts that go into that one's going into the style tab, this color. And this time I click this icon from here and select the accent color. We'll change the text color to white. We'll add some padding. Again on LinkedIn, this coming from top. From bottom. And below that, I will add one more section. And we'll duplicate this color to make it tweet and the tweet globe. And here I will add, by clicking this icon, I will add one heading here, manuscript one. And the third one. Let's change the styling again, making the six white. Typography needs to be uppercase. Font sizes should be a bit small here. And font weight needs to be certain break, right? Adding one more element for text editor. And this time also change the text color to white. And gets great. Duplicating this. Duplicate, dragging this on the right side. Same with this gene units to benefit number two, number three. And we have one session here. Let's add some padding to the top of these three columns. Again, unmute them because setting depending on right, that as well. From Baltimore with the ad. So now this session is also ready. Go in and duplicate this section again. To add the last chunk of information. Here I will write maybe hydrated call information. At the bottom there'll be seen because it's a placeholder information right? After administration, I noticed that the footer is also matching with the top section. So we will change the background color of the footer and we'll match it with the header background color. So we will go in and see what Macron be. F9, F9, F9. And here, I will also change the color of this photo to add in some padding. Unlink this, and it's almost ready. Now let's see how our new page looks like. I've opened this patient, Anita, and let's see how it looks. We have completed a nice landing page. And then we discussed that all the content in this page can be added easily. So for that you can just go to the editor again. And as you build the page, you can just click, add it to any of the content blog, and you'll be able to edit anything in this page without having any programming knowledge. You on Ben. Yeah. Let's make it bold. Icon here and click Update. And now I'm refreshing this page again to see how it looks. And yeah, that has been made him. So this is how you create ONE page. And in the next video we'll discuss how you can add some cool and nice and emission students land invasion. 10. Adding ANIMATIONS to the LANDING PAGE: Hey, in this video we will see how we can add some cool and nice animations to this website, to the landing page actually. So for that, we'll go to the Elementor again. Here we have our editor open. Let's see, we need to add some animation to this, to the header. So for that, we'll go to the column by clicking this column icon here. And in the advanced tab, you will have one tab for motion effects here that select and fill your life. Maybe, because I'll be adding simple animations here. And we'll do four. Right-hand side. Here is you're seeing that clicking the column icon is a bit difficult because it's hiding behind the three options. So Elementor has created the navigator for us. Let's open the navigator. And here we have simple algorithm where we can use this to add columns in. So the first session was this. Let's read the second column of this section and we'll open up the settings for us to do that once again and motion effects. And we'll be adding freedom, right? Same we'll be doing with this section here, clicking the column icon, advanced and motion effects. And then I'll be adding maybe fade in right here. Seeing that this will be keep doing this till the end. You can also add some other animations according to your lightnings, but right around. But I like the simple animations here. So I'll be adding these ones to land and left. And again, right. Same with this phenyl, left and right. And here I'll add maybe some different animation. Let's say because these are three columns sections. I'll be adding, fit in maybe. Yeah, it looks good. Fade in. In cemeteries. We're on left and right. And last the footer. Let's maybe add fade in and better. There are lots and lots of animations. Let's try some other ones. You can maybe try these ones and try uploading your projects in the section below, I'll be happy to see them. And other people who also respond to your projects. It will be, it will be amazing thing to practice. Try different animations and see how you know which one you like. I'll be sticking to my failure animation here. All right, so I'm updating this pH after adding all the animations here. And we'll go in and test our website again. And you'll see the animation start here. With these simple animations. The page look a bit more nice and cool. And it will start getting attractions of the customers and all that. So there are many different benefits of animations. You can try, you can try it out and see how it works for you. 11. What to do now?: As we have completed our website or landing page. So it's your turn now, let's create some amazing landing pages and maybe post a project screenshots in the projects tab below. And I'll be happy to see them and we'll be happy to provide feedback accordingly. So you can start by waiting your WordPress website, maybe on local host or maybe if you have a live server, you can create a seating website or maybe a temporary sub-domain. You can do that. The hair. You can do that there and install WordPress team. The team be used in this horse was Hello Elementor. The plug-in we used was Elementor. So you can install the theme and plug-in and start tweeting the lending page. As you know. You can also try changing some colors, changing the pictures, chaining animations, and try to build something different, right, to practice things move. So thank you for watching this course. I'll be excited to see the projects you'll post. You also make sure to follow my Skillshare profile as the posting more detail videos, wordpress. So don't forget to follow the Skillshare profile. You'll be getting all updates are reporting in this profile. Thank you. Take care. Bye.