Elementor Class for Beginners: Design a Responsive Fitness Trainer Landing Page

1. Introduction: In this class, I'll be showing you how to use elementwise mobile responsive design tools to create webpages that feed properly on all screen sizes. You will then work on a real-world project where you will apply the skills you've learned to create a modern landing page that adjust properly to desktop, tablet, and mobile screens. My name is Ken Besser and I'm an online entrepreneur, web creator, and tech enthusiasts. I run a couple of online businesses and I built all of them with Elementor without any coding. To join them benefit from this class. You don't need any prior skills in Elementor. All you need is a strong desire to learn how to make mobile responsive web pages. But because Elementor is installing WordPress, my assumption is that you are familiar with WordPress and drag and drop builders. So when I was creating this class, the people I had in mind include feel as web designers, web design agency designers. So if you work at a web design agency, online entrepreneurs who would like to take matters into their own hands and design responsive web pages for their websites, even hobbyists. So if you want to do this as a hobby, it will still be something awesome for you. Basically, if you're interested in learning how to design modern mobile-first webpages in 2021 and beyond. This class will be a great feat for you. Why? Because you will be able to apply those skills in any future website project that comes up in produce outstanding webpages that not only look beautiful on various screen sizes, but also give users a delightful user experience. While in the class you will learn how to create responsive web pages in Elementor by creating your own landing page, you can apply those same principles beyond your personal website with the skills you will have gained if you're not yet a web designer. 2. Quick Update - The New Elementor Setup Wizard: Welcome back. Now, this lesson is a quick side note or a quick updates to the Elementor installation process. If you're taking this class in May 2022 and beyond, you will notice that Elementor activation now has a setup wizard that's made up of several steps that you have to go through to set up the basic parts of your website. While I was creating this class several months ago, Elementor did not have that setup wizard. So I just want us to go through that setup wizard. But everything else you're learning in this class does not change. It's still the same process all through. The only addition is the setup wizard. So as you can see right now, I have a brand new installation of WordPress and we're at Version 6. And what I wanna do is go to Plugins, Add New. So we can add Elementor and go through that process. I'll search for Elementor install now. And now when I click Activate will be redirected to that setup wizard. And we can go through it together. So here we are. I'll just zoom out a little bit so we can see more details. Alright, so now you'll notice that the first thing elemental wants us to do now is create an account to get the most out of Elementor. So these are some of the benefits for signing up for an account with Elementor. But the thing is, you don't need to have an account with Elementor to use Elementor. So I'll just go ahead and skip this part. The second step is to accept, to continue with the hallow theme that Elementor has made for us. This is made by Elementor, but we're using the Astra Theme, so we just go ahead and skip. Astra is a more powerful theme. The third step is to give a name to our website. While you were installing your WordPress. You gave the website a name. That's the name that will show up here. But this gives us an opportunity to change the name to any other name we want. My website, and then let's click Next. And if you have a logo for your website and you want to add it right now in advance. You can just go ahead and open the media library and pick it from the media library or uploaded from your computer. But we're not going to do that right now. So I'll just keep this step. And of course we can add the logo later and I'll show you how to do that. Let's click Skip. And now we get to the very last step where we have two options. We can start editing our homepage from a blank canvas with Elementor editor. Or we can browse from hundreds of templates or import our own templates if we have them. But I'll go ahead and skip. That. Will be redirected to the canvas where we can now start building a website. And here we go. So basically that's all I wanted to show you. It's a new updates. It was not there some few months ago. Now, it's there. But everything else in the upcoming lessons remains the same. The process still remains the same to build a landing page. So without wasting any more time, Let's move on to the next lesson. I'll go to this burger menu and click Exit to Dashboard. Let's exit from this page. Now we're inside the dashboard and we're ready to get started building the website. 3. Installing the Necessary Plugins: So this is the header of the landing page for creating. Everything you see on the screen right now will form part of the header. So these buttons right here that sex blocks in these nav bar right here. And this should be the first thing we'll create now. So jumping over to the backend of WordPress, this is a brand new installation of WordPress, so I don't even have a plug-in. So we'll go ahead and first install the plugins. We will need to create the nav bar. So let's go inside the Plugins and Add New. And the very first plugin we need is Elementor. So it's the first item is stone. Now, let's scroll downwards While on the same page and look for elements, Keith element or add-ons, iso now, and let's also East. So seek a header effects for elementor. Alright, so now that they're installed, let's go into the install plug-ins least and activate them all at once. So click that, select them all. And in this drop-down list, select, Activate and apply. So now that they're all activated, we're ready to create our nav bar. And the first thing we wanna do is create the menu items, these five menu items right here, and these are web pages. So let's create webpages. 4. Design the Navbar: So let's go ahead and create a page. Let's call it home. And right here on the right side, scroll downwards and look for Page Attributes, template. Set that to Elementor full width. And because I'm using the Astra Theme, I'm going to set this to content layout to full width, stretched. Then he'd publish this, create another page. Add New blog page. Scroll downwards, paid attributes set to Elementor full width. For me is that that's that publish. Go back, create another one. So let's call these courses. Scroll downwards Page Attributes, elemental, four-week stretch right there, publish. But don't worry about this section right here. Maybe the theme you're using doesn't have the settings because as you can see right now, our Astra settings, I'm using the theme Astra. So as long as you're using an elementor compatible theme, you will have these attributes option and this is what's important. It's called back here, but you can also access the page attributes in the front end and I'll show you how. So, those are three pages. Let's create one more contact. Go down. Data attributes, page template for wheat. All right, so now we have four pages. So the next thing we wanna do is create the actual nav bar that will be displayed on the page. And how do we create that will go inside appearance menus. And in here, you'll see create your first menu below. And we can go ahead and create one mega menu. Let's just call it mega menu, and let's make it the primary menu, Create menu. And because it just created these pages right here, they're available for us to add them to the mega menu. So let's go ahead and check these boxes and add them to the menu. Right, so they'd been added, Let's drag home to be the first item and contacts will be the last item on the menu from the left to the right side. Go ahead and save the menu. Awesome. So now we have a menu. Wordpress knows that we have a menu and the menu is called Mega menu, and he will contain these four links. These are four links to these pages. So how do we display these menu in a fancy manner like this? We do that with Elementor, and here's how to do it. So jumping over two elements key, remember this is one of the plugin sweep installed with Elementor. Notice when you hover over it, one of the options here is header footer. So click Header Footer, right here because we don't have any created yet. We can go ahead and create one, Add New, give it a name. And it can mean mu for consistency. Of course it's a header 1, it visible on the entire website. If you want it visible on particular pages, you can always do that, but you have to have the pro version of elements keep. And activation will want it active. That means when we publish the page, this menu will be visible light BCE. So now that we have the menu ready, Let's go ahead and create it visually to look like this. So click Edit. Go to edit content. Here we are. If we can just jump over to this page right here, you'll notice that the Napa has two columns. This column right here that has the logo and this one that has the menu. So what we need to do is add a double column section. But we can always resize it accordingly. What we want is to have it long on this side and shorter than this side, because as you can see, that's the case. So in here, drag the image elements in there so we can add the logo. And I had uploaded some of the images we'll be using. I'll provide them in the links, so be sure to check them out. So let's select this logo. Insert media. Next thing we wanna do is add a nav bar. So in here, type nav. And you'll notice that we have two identical Nav Menus. One of them has a lock icon and the other one is Iike. This one comes with Elementor Pro. And because it don't have in the mental Pro, we can't use it. Less. Use the IQ, IQ one elements Keats. And why can't we see the menu yet? It's because we have selected a menuet, but we just created one. Remember, it was called Mega menu. So there we have it now visible in the frontier, but it's on the left side. We need to push it to the right side. So let's go ahead and do that. Update that. And in here, click that cogwheel and make sure that the page layout here, he said to elementor canvas or RI. Let's preview it. I like how it looks. So the next thing we want to do is create the rest of the header section, and we'll start with the background. 5. Design the Header Section: Let's add a black background like this. So jumping over here, Let's exit from where we were editing the navbar Exit to Dashboard. Let's go east side pages. So the point here is we want to create the header section. What we were creating was the nav bar. We hadn't started creating the page itself. So now we have to select the path that will become the landing page, the one that we will populate with all these content. So let's select one of them. Any of them can be the landing page. Let's go with the homepage. And because we had published it already, you can click Edit with Elementor. So let's select the double column section. And to set the background color, click Edit section. Go to style under normal. Treat that box. Let's give you this very dark, bluish, blackish color. But you can give it any color you want. So loud to you. I like that. Click anywhere out there. The next thing we wanna do is add this lady right here. Because column content gives the section its height. So let's click that, drag an image element in there. And let's select that image. And our section is already now starting to look something like this. So the next thing we wanna do is click that. Add a heading. Think right here it says health. And so selecting all that, selects all of you. And so let's make it bigger. Go to style, change the color to white. Click topography. Pool it, resize it to the size you want. Let's give it a 115. Next, I want to duplicate that. Hover over here and click that duplicate icon right there in, just in case you're not seeing these pop up. When you hover over the corners. Can go inside the burger menu, user preferences and make sure the editing handles. He said, yes. So let's change this to fitness. While it's still selected. Let's go inside typography. Make that bigger. Decrease the weight. Decrease its size a little bit. Alright, Next I'll copy the Turks. Click this icon right here. Drag a text editor right there. Click inside their face, all the text in there. Inside style. Change the text color to white, and update the page. Notice that let's preview the page. And notice that starting to take shape, but the top right here, this white. Why is it white? We want it to look like this. We want the background to run all the way to the top. So how do we achieve that? So if we could just jump back inside the dashboard, go inside elements, keep header footer. And let's edit the Mega menu IT content. So now we're editing that navbar header. So what we wanna do is select Edit section. Go to Advanced sticky header effects. Say enable. Scroll downwards. Set this goal distance to one. That's how many pixels do you want the user to scroll before the navbar becomes sticky? Transparent header set to own and update that. So jumping back to our page where we were editing the landing page, if you refresh that control R or Command R on the Mac, you'll notice that now the section goes all the way to the top. So let's push everything in here downwards so that it's only the Napa and the logo that's at the very top. And we do that by increasing the padding on this section, on this whole section. So I'm unable to select it because of the navbar. I'll bring up the navigator by hitting Control I or Command I on the Mac. And I can right-click on section and edit, go to Advanced, delink these values, and then increase the padding. Let's give it a padding of 200. Yup. Let's give it a bottom padding or 50 update that. Let's preview the page. I'm liking what I'm seeing by now ways this brushstroke. Let's add this brush stroke. So going in here, edit section style. We already added the color, we want it for the background. So now click the image option right there and select this brush stroke. Remember I've already provided you with the image. You can check in the links below. Update that. Then let's preview it first. And you'll notice that seems to be repeating itself and it's misplaced. So below the image you'll notice that is position, let's say top right. And let's say no repeat. Let's say scroll for the attachment. And for the size, let's say custom because we need a custom size. Let's give it a size of 60. Update there. Now let's preview it. Alright, it's starting to take shape. So the next thing we wanna do is work on these links so that when you hover over them, they're changing the color. 6. Finalize the Header Section: Remember we were editing the navbar as well. So go to the page where you were editing your Napa case. You don't know where that is. Just go to elements keep, let me refresh this. Go to elements keep header footer, then edit, then edit content. Alright, so in here, what we wanna do is change the font color to green. So let's get in here. Select this navbar. Go inside style collapsed the menu wrapper. Expand the menu items style under normal. Change that to that green. For now. I don't have the accurate green, but just try to play around with it. See if it'll work. So let me copy that code because we're going to reuse it. Control C. Let me just update that. Then. Now let's go back to the page where we were editing the page right here and refresh the page. All right, so now the font is green. So the next thing we wanna do is change the hover effects are white. So jumping over there again, so on hover, that says that to white. And when it's active, it also needs to be white. Or write update that. Once you've updated that, we can go back to this page where we're editing the header and refresh that page. So now the active menu item should be white. Exactly. Here we go. So let's preview that. Awesome. So the landing page is almost ready. Let's add the buttons. These three buttons in here. Click there, type your. It'll bring up this dual button by elements keep light. It doesn't come by default with Elementor. So let's drag it in there. And the first thing we wanna do is change the name button right here, the button labels. And we do that by first collapsing the double button, expanding button one, and change that to join us or anybody else who might want to change it to. And this is where you add your link, where you want the button to point to. And if you want the link to open up in a new tab, you can always click that and open a new tab. Then update now. So let's change button to button. So should say Learn More. Right? So you notice that it's collapsed and the word More has gone down because it's too long. We need to make the buttons a little bit wider. So collapsed button, so a expandable button. And let's increase the width right there. Now it's there point. Let's update that. And preview changes. All right, awesome. So let's go back. So next we want to change the button color, so this should be green. Let's go inside while it's still selected, let's go inside. Style collapsed button one. Wanna change button to first. Under normal, you'll notice that there's color here, and there is also a background type. If you change this color, you're changing the color of the font, the Learn More text. And if we change the background type, that's when we changing the background color of this button. And we'll want to make it the screen. So for now I don't have that color codes, so I'll just try to get some really close to that. I think that's almost like that green updated. This other one, button one is white in color. So let's go to Button 1. Chains a backbone type here to white. And now you will notice that the font is not visible because it's also white. So we need to change its color. Right below normal is color. Let's see, is that these dark. Lou, blackish column like that. Notice that the font choose black as well for contrast. So let's change this font color collapsed button 1, Expand button to under color. Let's change it to black. The same black we had in Button 1. So let's, let's expand button 1. First. Click that color, copy it. Collapsed button 1, Expand button to click that and paste that color-coding there. Alright. So on. However, this font should turn black, not on hover. This button should turn green and the font black or ride. So on Hover, button 1 over, shoot, turn to color green. Go on and get these green. So I'll collapse that and go to Button to get the screen. Hold on right there. Go back to button one. Go to the hover state of Button 1 and change the color and the background type. It's a green. So on hover changes color to green and the function remains, changes to white. All right, So this button needs to change to white and the font to black on Holober. So let's work on the green button to on hover needs to change to y. Yup. And the font needs to change. So black to that dark black. I could have gone in, grab it from the other side. Okay. Let's grab it from this side. Let's grab that lack copy that collapsed, that, expand that. And we want to change the button. Color on hover here. Sh that black. All right, so let's preview that. And that's what we have so far. So the next thing we wanna do is add that small video button right there. And this bigger button is really cool. It's provided by elements keep light. It enables you to maybe add an About Us video or something to quickly tell people about who you are within that landing page. And this is how it happens. So you click the button and a video window pops up like that. If you have an About Us story, could quickly tell people about you. So let's go ahead and add that button. And we add it by clicking that typing video. And we have the frame video options here. Let's carry these one that's brought in by elements. Keep light, and drop it right below the buttons. By default, it's pink in color. So we first want to align it to the left. So let's go to style and alignment left. Then click button style. So we can start editing the colors. As you see, the glow color is blue. We want to turn it to the screen. So I had already copied that green color, so let me paste it in there. And now you'll notice that it's green when glowing. And right below the glow color we have the background type. Click that in chain. Let me scroll down once, change the color there to the same green. So I'll paste the green in there. And now it's green. So if you could preview that. The changes, that's super awesome. We still need to do some fine tuning to make it look for better like this. As you see, there is a difference in where this lady situated on the page compared to our reference. So let's push her upwards a little bit. Going back to this page right here, select the image of the lady. Go to Advanced and delete the margins and padding. Let's review some margin at the top to somewhere there. And updated. All right. Let's preview it. Yeah, we've pushed her up a little bit, but we need to do it more. We need to increase that margin. Don't don't worry about her touching the nav bar right here when the editor, when we update and go to the preview page, the actual if we preview changes, notice that now she's almost at the right spot, but we need to push these brushstroke outwards a little bit so that it's also fully visible. Let's do that. Let's reduce the size of the brushstroke. So I can't select this part up here because I'm obstructed by the nav bar. But I can hit Control I to bring up the navigator. And if I can collapse that, this section is all this whole section right here. So if I edited like that, some editing section that's holding the black background in the brushstroke. Let's go to style. And right here on sizing, let's reduce it further to maybe 55. Update there. And let's preview changes. All right, so we're almost there. Next thing we want to do is round off these corners, like in our reference webpage here. So let's go back here, selects the dual button. And let's go while still inside style. Under Button 1, Let's put the radius to 10, the border radius to 10, update there. Then scroll downwards while still under button one. The link, the padding. Give me the top padding of 10 and the bottom padding of 10. The scroll upwards and collapsed button 1, Expand button to do the same, border-radius 10. Scroll downwards to pad in the link dab. Top padding, bottom padding, ten data. Let's preview the changes. Awesome. So the website is Taney shape the way we wanted it to. So that's it. Our head section is ready. The next thing we wanna do is create the body section, then the footer. We don't have a body section to refer to, so we just going to do it freestyle. But don't worry, we're in full control will come up with something awesome. The main aim of doing these 0s, understanding the fundamental concepts behind creating web pages that are responsive or mobile desktop and tablet. Let's proceeds to create the body section. 7. Design the Body Section: So we'll create a very simple body section because we're just trying to see how to make our mobile responsive web page. Right below the head section, I'm going to add a divider. So first of all, let's add these triple column to structure. Then let's click that plus sign in the middle. And let's add a divider. I want to say, let's make it slashes. Yeah, let's leave it at that. I probably want to make it green as well. I think I still have that green. You might clip. Yes, So I want to make it back green. Go to Edit section, the link those values and add a top margin of 40. Next we want to add a double column section. Let's add an image right here. In this image could have. Let's add all these images in there. We'll be using these images and I'll provide them. So check them out in the link below. So basically we're trying to create a very simple landing page. It's all about learning how to make the page responsive. And once you grasp all those concepts, you'll be able to create very amazing WordPress pages using Elementor. So for illustration purposes or create just a simple landing page. Let's take that image and insert it in there. Let's maybe take, let's add a heading, the're and as a follow-up because this is a landing page, maybe these could be something to convince you. Why me? Here, let's say this is a trainer who's trying to convince us to hire them as our personal trainer, are good that that color 404040. There may be. Let's increase the size right here. Then we could add a sub-header right below it, or above results. Then probably we will give you that same color already, 40. 40. Then probably let's add a text editor right there. Yeah, probably something like that. Let's increase the size of a, all about that. So next we want to change the color of this column here. We want to give it some more life. So clicking that column editor right there, going sites tile, background under normal. Change that to, let's say maybe some these same color right here. So let me go in here. Edit section. Let me grab this color very quickly. Is black color. Copy that. I want to come here, select that in here. I want to say paste that code. And I want to change why me to the screen. So I'll click that. Select that green. Copy it. I'll select that under style. Change that color to green. Let's make these white. I'm all about results under style. Let's change it to white. Let's also change that to white. So maybe you could add a button. It goes, remember, a landing page is all about call to action or CTA. Another thing I want to do is make these corners a little bit grounded. So while it's still selected right here, go down to border under Style, go down to border radius, border-radius. Let's make it 20. Update them. And one more thing we wanna do, well, the column is still selected. Click Advanced. And let's add the padding while these are links together. So let's increase that. And that sort of brings everything towards the center so that no content is leaning too much to one side. So let's say a data and let's preview it. Or RI, awesome. So I think I'll get rid of this. Don't like it. We're just trying to get creative with this. And notice that now we don't have a space here. We can add some spacing by clicking this plus sign. And in here, we can add a single column section. Click the plus sign in there, and add spacer. Now you can increase and decrease the spacing is you want. Let's leave it at that. Next thing we wanna do is, first of all, let's update that so we have changes saved. So next thing we wanna do is add another spacer. So let's add a spacer there. Then we can add another double column. And this column, let's go ahead and maybe add a heading. And this heading will say something like find my ebook. Give it. Let's give it maybe a 40, 40, 40. That's a very dark gray. Maybe let's increase the size of that. I wish we had a book. Now we she had a book PNG. I think that's enough. So let's leave it at that. Let's add text editor. And this increase that text somebody to big data as add an image right here. Let's make sure these texts goes all the way to bear. So for the image and see what we can work with. Let's add that. Let's work with that. Each preview changes or right. Let's go ahead and duplicate that. Click this duplicate icon right here. To duplicate this section. We just want to drag it below my download, my e-book is duplicate this spacer right here. And let's drag this one right here so that we have that spacing and we can change this image to the front. One. Problem with that one. Update that page. We start scrolling. You'll notice that our head is still remains at the top even though we're scrolling and that's what we mean by a sticky header. We already said it adds a sticky header. Remember? So let's duplicate this section as well. Like that. And let's drag it below this section. And let's duplicate this phasor here. And let's drag it down, up to that point to separate those two. Let's duplicate yet another one and put it below that section right there. Then let's increase the size of this spacing so that there's room at the bottom a data page. So let's preview changes. So now here's a webpage that's already starting to look like an actual webpage. Of course, given more time, we can work on it to make it look much more beautiful. And I'm hoping that's what you're doing in your project. You're giving it time to make it look appealing. All right, so let's replace this image right here. Would yet another one. Let's maybe add that. Insert that. So let's say new routine. Maybe the Jedi gave you. Now. Let's make the selected beats. We can feets, then update that page. So let's preview the changes. Scroll downwards. I'm thinking maybe we could put these on this other side, Enbridge them. So drag these columns to the right side like that, flip them over. It's also flip these two columns like they're just for variety. Let's preview the changes in. You'll notice that when it's loading, at first this part is white thing he turns to blue. And that's because of not get made our navbars background same color as the so we need to make the navbar that's in color. I will do that. So let's go ahead and create the footer before switching gears and now focusing on making the whole page responsive. 8. Design the Footer Section: Let's create the footer. We will need to use the element kids light plugin that we use to create the nav bar. So let's jump over to the backend of our dashboard. So exiting right there, Exit to Dashboard. Let's go inside elements Key hover over elements kid, and go to Header Footer. Let's go to add new. Let's give it a name. Mega, mega folder, year. Awesome. And we'll want it to be a food of course change that, that M1 needs to be active and available on all the entire site. Save changes. And now we can go ahead and edit it the same way we did that with a mega menu. Edit content. So the first thing we wanna do is give it that background that is on the head section because we want to keep that consistency our website. So switching back to the page where we were editing the header section, we can edit section right there. Then come here. What we're interested in is the color only, we're not editing anything. So let's jump right here. We're in the front end. We've been redirected to these place by elements. Keep. The first thing we wanna do under here is create a section. As usual. Let's go to Edit section style, and let's paste that color. We just split in there, so that's our background color. Next thing we wanna do is duplicate that column. In fact, Let's triplicate it so that we have three columns. And we can add the logo here. So let's add an image there. And let's grab the logo inserted. Next we want to say something about Watson, the footer. So click that plus sign there. Heading. Trusts us through. Trust us. Trusts us to take humid air. That's a promise, right? Let's put it in the middle. Trust here should spell the capital, then let's change its color to white. I'll give it that green. Cube it this green right here. On the whole verb was green. So let's jump over back here. I want to give it this green updated. Then a short description of what the website is all about. Goals down here. So click that text editor. Right? So first of all, let's centralize it. Let's make it white in color. We could probably saw edit section and let's increase the padding on the top and bottom. So advanced padding, delete those on the bottom. Let's give it 60 and top 50. Let's see update that. We could also probably add the nav bar. So let's go here. Nav, nav menu, IQ, eat. Then let's select the menu will walk the mega menu, update that. But right here it's black. Why is it black? Let's first of all, centralize it. Center. And let's keep it that white color. So in here, it's collapsed menu wrapper. Menu item could be white in color. And when you overrate, we need it to be this green. Yup. And when we act, when it's active, it also needs to be that green update that. So that's a basic folder. Let's preview it. Don't worry that you're seeing it at the top instead of the bottom. It's because we're previewing world we've just created. That's how we previewed. Right here. What can we add? Let's maybe add a few links. So let's add a list. A list. And what we want is the icon lists. There are different types of nice we want the icon least. Drop it right there. We have pre-released items for now so we can change them. List item number 1 could be privacy, privacy. The sides M number two could be bookings, and this number 32 would be membership update that course, you can add links to each text. So, so for this item right here, your link goes here. Remember you can always open link in new tab. Let's collapse that. Then let's go inside style. This is where we change the visual look of any element we're looking at. So for the icons, we want them to be green. I still have that green rights. And for the lease, for the sex, we wanted to be White's. How about I construe, want them to be on the right side, on the left side. Let's go to the least alignment. We want alignments of the lease to be on the right side like that. Updated. Then let's preview it. Super awesome. So now if we go back to the page that we were creating, aka our landing page, the footer will now be available there. So let's switch over its birth switchover. It's there. So here we are. If I refresh this page, Control R or Command R on your Mac. And then let's scroll downwards. Will find the footer here. But now notice that there's this folder right here by default as well. And these photo comes by default with Astra, we have to get rid of these. So I'll go in here. Now that we've finished creating the footer, I can exit Exit to Dashboard, go to pages. And in the page now a landing page, homepage, I'll go to Edit. On the right side here. I'll scroll all the weights. So the Astros settings and change to disabled footer. So update that. That means we've gotten rid of this food that comes by default with asteroid. So if we refresh that, Let's scroll all the way to the bottom and see if we've gotten rid of the, uh, right, so now it's not there. So let's preview this phage, our landing page, all the way to the bottom. So now that we have these page, what's remaining is to make it responsive. But right now, how does it look before we make it responsive? Let's have a look. So notice that when we refresh this page, the navbar is first wide. Let, let me just refresh it. So you'll notice that this part is y then turns to these colors. And that's because our nav bar, by default does not have a background color. Let's go and set the background color to be peace. So let's go in there to our dashboard. It's go inside elements, keep header footer. Let's go inside the mega menu. And let's go to edit content. And I'd like us to come here. Pages already open. So we're editing the header for the nav bar. So go to Edit section style under normal. Let's base that background color there. All right, so if we go back to the spades and refreshing, then previewing. When this is reloading heavy, notice what's happening now. Let's refresh it again. You see that? So we've sorted that out in the scroll downwards and look at our landing page. That looks super awesome. So our sample landing page is now ready. The next thing we wanna do is make it responsive or mobile tablet and desktop. But before we make it responsive, let's first see what it looks like at the moment on mobile phone. So clicking this responsive mode icon down here. Look at the size of the logo on the mobile phone. Is not anywhere near Mobile responsiveness. So what do we do about that? Lasso we're doing next? See you on the other side. 9. Help Me Teach Elementor to 10,000 Students: Hello my friend. First of all, I just want to say thank you very much for joining me in this class and choosing to learn from me. And also want to say congratulations for coming this far into the class. The fact that you've come this far into the class means you're gaining value from the class. And so I really appreciate you and I hope you are enjoying the class itself. That being said, I need your help. I'm on a mission to teach at least 10 thousand entrepreneurs like you to use elementary to build their own websites or landing pages to sell their products. And here's how you can help. You see when a new student joins a class on Skillshare and then likes that class and leave a review. It helps other students know what to expect from the class. And when a class is getting a lot of reviews from students, Skillshare says, Hey, you know what? This class is getting a lot of engagement and a lot of reviews from students. So it must be helpful. So it must be useful. And so let's push it upwards in the library to make it more discoverable by new students. So the Skillshare algorithm pushes that class upwards and makes it more visible, more discoverable to new students. Because it's been receiving positive reviews. And that's where you come in. Please join me in this mission and helped me teach at least 10 thousand students how to use Elementor, how to build beautiful landing pages, functioning websites by leaving a review in this class and letting them know what to expect from this class. It'll only take you about two minutes and you're done. But your review will go a long way in helping new students, prospective students, know what to expect from the class. Class meet your expectations. Did it exceed your expectations? If you have any questions, remember, you can always drop them in the discussion area below this video and I will be able to help you out. I always respond to every single question or comments that students leave in any of my classes. And with that being said, I just want to say enjoy the class and I'll see you in the next lesson. Peace. 10. Make the Page Fully Responsive: So let's start with the navbar. Then we'll move on to the head section, then the body, then the footer, and we're done. So switching over to my header. Here we are in the header. If we preview it on mobile screen, this is how it looks. Right on tablet. Click right here to see on tablet. That's how it looks or more on a tablet. What I like to do is create a separate nav bar that will only be visible or mobile phone and tablet. So how do we do that? First of all, let's duplicate the navbar we already have. So now that we have to now buzz, they already look good on desktop. So we don't need to adjust or make them look better on desktop. So because this is already good on desktop, I want you to stay visible on desktop, but he didn't on mobile phone and tablet. So edit section go to Advanced responsive. And we want to hide on tablet and mobile phones. So when you're viewing this landing page on a mobile phone or a tablet, that's this menu will not be visible. It will only be visible when you're viewing it on desktop. Then next, let's come to this Edit section. Let's go back to advanced responsive. This time. This is the menu will want to change and edit so that it looks good on mobile and tablet. So we don't want it to be visible on desktop. We want it to be visible only on tablet and mobile because we will make it look good on tablet and mobile. So because now it's not visible on desktop, it's hidden on desktop. This is how it looks, turns to Grayscale. If we flip to mobile phone, notice that the top menu is now grayscale to say that it's not active on mobile phone. This is what mobile phone users we'll see. So the first thing we wanna do is remove the logo. We don't need the logo. We just need these menu. But it's black. We can't see, I bet you can't even see it right now. So let's first change its color. So selecting that. Now we're editing the nav menu. So inside Style, go to hamburger style. And then flip this to the left side, like that. So the manys now on this side, but we need to change its color. So scroll downwards and look for background type. Under hamburger background type, let's change it to white. Or maybe let's make it that green. So, so let's base that green in there. Now it's green. But on hover, we want to make it white. Make even white on hover, like that. Say update. So let's look at it on a tablet. That's how it looks on tablet. And let's look at it on desktop. On desktop, it gets hidden. And then the desktop menu shows up. When we switch to tablet, notice that the logo disappears. So now we have the burger menu and the one with the logo has disappeared, so it's not visible on tablet. Same case applies to mobile. That's featured desktop. And then let's preview the page we were working on, our landing page. Let's refresh that. And let's preview it on mobile. Cif changes I've taken effect. So now we have a burger menu instead of the other Ming that had the huge logo up here. So everything is taking effect. And we can always set the logo that appears here, up here by going to mobile menu settings, mobile menu logo. And I select our logo as usual, insert media. So when you open it this time, it has that tiny logo right there. I think we're all set. Our nav bar is now ready. Let's switch over to our landing page to see the changes we just made. So switching back beyond desktop mode, and let's refresh that. I like it. So, right, so if we could preview a mobile phone, here's our menu. So now our navbar is responsive on desktop and mobile. So it seems on tablet when needed on the left side. So let's switch over to this place. Switch to tell it right here. And here. Let's change the side that it's located in. Let's switch this side. And burger menu style as polluted bits of that side update. In fact, let's get rid of these columns right here on mobile and desktop. Oh, we already did. Yeah, so let's update that. And I miss go back to our page and refresh it. Control R or Control Command R on the Mac. So now we view it on tablet. The super cool. So the next thing we wanna do is work with every other content and the rest of the body to make sure that everything collapses and feet swell on any device. So let's start with everything or mobile. So you'll notice that health goes all the way beyond the boundaries, fitness as well. So let's offer the very top select health. And and you'll notice that everywhere where you can make changes to that particular property on mobile phase, the mobile icon next to that particular property. So if we could go inside style, we can size this help and Hayden their help and and put it in the middle. Let's do that for fitness. Fitness. Let's also put it in the middle. We could reduce some of that padding. Now let's reduce the margin. The top. And at the bottom. We could do the same for health. Let's reduce the top margin and the bottom margin so that it's close. It's decrease its size a little bit so that it's almost the same size as fitness year. Now let's reduce the seventh update there. Notice that high here goes beyond where F reaches. So let's increase the padding on this description right here. With this selected. Go to advanced queries the paddy to 10. I like the where the buttons are so we can leave them right there. So what we want is to select this background. Remember we added this as a background image, then we added this as a backbone color. But we want this to be on her feet right here, like on desktop. So how do we do that? Selecting Edit section can go insights tile here, and we can add a different image or the same image. In this case, let's add a yellow image. I just want to illustrate these two. You get inserted in position. We want it to be at the bottom. Rights. So let's increase the size size, Carson. And then now let's start increasing it manually like that. Let's reduce it. Point of data. So going back to the top, now we have all the space left. We can push everything upwards and we can do that by going to edit section, Edit section Advanced. And then let's delink everything there. And you'll notice that everything has reset itself to the top so that we can now start adding our patty. So let's increase the padding at the top right there. Like that. Updated. So in this case, I just added this yellow background image to illustrate to you that on, you can have different images to show up on different device. So if we switch to desktop mode, it will change to green. If we switch to mobile phone, it'll change to yellow. Let's see what it looks like on tablet. We can also have a different one for the tablets, so we'll get to that. First of all, we're dealing with a mobile phone. Now, another thing you'll notice is that this burger menu right here is not aligned properly to these texts. We need to push it inwards a little bit and downwards to balance the spades. So how do we do that? We go back to the menu itself and selecting it anywhere within this tiny blue box that it nav menu. Go to Advanced. And then the link that margin increase the left by 20. Now let's say 10. Let's say, Yeah, 10 is okay. And top 10. Let's update that. All right, Let's go back to this page and refresh it. So basically we're switching between different editing pages. So I hope that's not too confusing for you if you're a beginner. So our burger menu is now at least a little bit towards the side and looks a little bit more balanced, doesn't it? Let's continue. Let's call downwards and see if there is anything that needs our attention. I think this is too much spacing, so select that space and adjusted accordingly, we need just a little bit more space-like there. Scroll downwards. You'll notice that this column right here touches the edges, the borders, and we don't want there. So click that advanced. And then margin. Let's increase the margin to maybe ten. Yup. Let's decrease the spacing right here. What spacing degree? Creating 24, Let's make it 25. So that means stay uniform would make it 25 all through. Like where the seas. Let's go back here and see. Clip that text right there. And let's go to advanced. The padding was 10. So we want to maintain that uniform padding for descriptive texts like the so this will be 10. So inside this type 10, so that it's not too close to the edges. So the spacing here, 25 for the column, it's increased the margins. Shall we reduce this? Yeah, let's reduce the size of these titles. The lab they looked to Vk, get it now. It's reduced there, get it now. So the size now is 44 pixels, so I can copy the style. So right-click. Copy anywhere where there is a heading like this, I can paste the style so I've copied it. Rightly. Coffee. If I go here to this, that is similar to that. And right-click, I can paste the style, that means the size, the color, and everything. So paste style resizes it to the same size as the other one. We have another one that looks like that. No. No, we don't. So there we go. New routine right here, looks too big. Let's reduce it. And you routine. Update that. Then here remember that descriptive texts can have a padding of 10. Let's update that. We can also copy this new routines style, copy that, and paste it here. Paste style. Let's see if we could reduce this further, because it looks a little bit to the right there. Yup. We'll just run to have something that's visually appealing. Everything is within visual reach and it's easy to read while someone is consuming these as they scroll downwards. So you'll notice that the logo on the folder is too big, so we need to reduce its size as well. So what we need to do is go inside the footer. So that was in the mega footer area. So we have to go inside the dashboard again. Elements keeps header footer. You can just edit with Elementor. Are right, so, so make the footer responsive. We have to get inside it as well and editing, and now we're inside. So let's view it on mobile. And this is how it looks. So if we can, if we switch to the landing page itself, here we are. This is how it looks. Here's how it looks on the landing page. 11. Responsive Footer: So why don't we do the same thing we did for the header right now and duplicate the folder so that we have a footer for the mobile devices and another one for the desktop. So this already looks good on desktop. Let's edit section that advanced and responsive. We want it to be visible on desktop, but hide on tablet and mobile phone, or right? Then let's duplicate it. And on this second one will want to say edit section. And then in advanced responsive, we want the second photo to be hidden on desktop. We don't want it to be visible on desktop because we will make it beautiful on tablet and mobile. So this will be created for tablet and mobile, and this is for desktop. So if we switch to mobile and tablet, the desktop one becomes grayscale, and now we can edit this one. Let's get rid of the mobile phone logo. We don't need that. Don't need that column as well. Now we're left with these bare-bones. Let's get rid of that menu. But we can centralize this least. It's a line in the middle. Let's update that. Let's have a look at it on tablet. That's how it looks on tablet. It C are on tablet. We can change it to say, look, it's good to layout while edit section that has active layout structure. I wanted to have that structure that update. So on mobile, that's how it looks. And then on desktop, this will get hidden and this will become visible. So let's switch to desktop. And now this is heat and this is what would be reasonable to desktop yours. So let's switch over to our page, our landing page, and refresh it to see if it changes have taken effect on our footer. I like what I see, but now, if we view it on responsive mode and scroll all the way to the bottom. Now the footer looks good. Let's reduce the spacing to 30. Update their upper lake, how it's turning out. So let's view it on tablet. So this is how it will look on tablet mode. We need to adjusting accordingly as well. So let's reduce the health and lives. Let's reduce the fitness as well. I feel like we need to reduce the spacing right here. So let's edit section. Can also pull that out by Control I and then editing this section. So this section. So let's reduce the padding and margin. Let's reduce the. So you'll notice that same thing as having here. After delinking the padding, everything has gone to default padding so we can set everything from scratch. So let's increase the padding right there. And let's increase that. Speak it on the left. Let's make it 10. 10. Let's make this a 70, 19 min update there. That looks much better, right? So here's our menu. Let's close that. Scrolled away by my e-book. So you should be by my e-book or right? So remember, we can increase this descriptive texts padding right there on the left by trying to get rid of that. Actually, 10, let's say five. Let's push this column away from the edge a little bit. So we do that by selecting it. Then with margin left, that's increased by ten. So let's copy this styling. Copy that. Let's paste style right there. So this is our photo logs on tablets, so we need to reduce these. I think I want it to be right aligned instead of left align. So in here, we go right there. We want these to be left align like that. And then we want to increase that right there. This also needs to be left aligned. Let's increase the margin right there, and let's increase the size. Typography is the size, right for me. Leave I like that better. So let's switch over to our landing page and refresh it. All right, so let's preview on tablet. Let's scroll downwards and see what our photo looks like. Pick our footer looks better, but now we need to push this list inwards a little bit so that the spacing is almost the same as the soul. Switch over to the mega footer. Select this column right here. Or let's select the list itself. A vast. The link that I'm on the right, It's n, let's say 20. Update that. So if we could switch over to the landing page and refresh it again. Let's scroll downwards and have a look at it. But we want to view it on tablet. Perfect. I like it like that. Of course, given more time, pretty sure you can come up with something that looks amazing. This is dust for us to be able to understand the concepts behind responsive design. What are the tools provided by Elementor? And what's the flexibility that you have as an elementary user to create responsive designs. So let's edit section right here. And I want to push this downward so that it's below her legs. So under style. Let's add this up, let's make it the yellow one is, well, I know the yellow looks weird on this green. But that's just to illustrate that you can have different images for the different screen sizes. Remember on desktop, we have green. Now we have yellow. Let's increase. First of all, let's go to this default to the position and say bottom, right. Then let's increase the size customer right there. And let's say increased, updated like that. So now when you seach to desktop mode, it's green. On tablet, ClO, or mobile phone. It can be red or it can be the same, same image by now created to be perfect for mobile phone. Cause remember, an image might look awesome on mobile form, but not awesome on less Doc Mode. These fitness is supposed to be green. Let's make it that green. Let's go get that cream. Copy that. Let's change that to green. When you change the color in whatever mode, desktop, tablet, or mobile phone, the changes occur across the different sizes. Another thing you need to know is that moving elements around, like moving health from before fitness to after fitness like that. While the mobile mode or tablet mode moves the same thing everywhere on all other modes. So those are global changes you're making. Moving elements around is global. So there we have it guys. A fully functional WordPress webpage builds with Elementor and it's fully responsive or mobile, desktop and tablet. You can use those same principles and concepts to create any webpage you want to come up with a webpage that people will like visiting on their defend devices. 12. Final Thoughts: I hope you found this helpful. My name is Ken best sum, I'm really curious to see what you will come up with. Let's see the landing pages will be able to create as a class and see how we can help each other. Otherwise, I'll talk to you next time. Keep coming back to see if I have a new brand new class and I love you all. Peace.