Elementor Class for Beginners - Learn by Designing Lyft's Landing Page | Ken Mbesa | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Elementor Class for Beginners - Learn by Designing Lyft's Landing Page

teacher avatar Ken Mbesa, Web Design | Blender 3D Modeling

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

    • 1.



    • 2.

      The landing page we're designing


    • 3.

      Quick Update - The New Elementor Setup Wizard


    • 4.

      Installing the plugins


    • 5.

      Installing the theme


    • 6.

      The navigation bar


    • 7.

      Adding the logo


    • 8.

      Adding a search bar


    • 9.

      Adding the nav menu


    • 10.

      The hero section


    • 11.

      Adding the hero buttons


    • 12.

      Adding the hero images


    • 13.

      Button margins and padding


    • 14.

      Styling the hero images


    • 15.

      The main body section


    • 16.

      Adding an image mask


    • 17.

      Adding body text


    • 18.

      Custom feature list


    • 19.

      Advanced buttons and links


    • 20.

      Adjusting section margins


    • 21.

      Adding client testimonials


    • 22.

      Advanced body section


    • 23.

      Help Me Teach Elementor to 10,000 Students


    • 24.

      Scrolling image carousel


    • 25.

      Adding a form


    • 26.

      Styling the form with custom CSS


    • 27.

      Double column sections


    • 28.

      Full width single column section


    • 29.

      Adding a self typing animated text


    • 30.

      Adding a client logo slider


    • 31.

      Designing the footer


    • 32.

      Making the page responsive


    • 33.

      Responsive navbar


    • 34.

      Responsive hero section


    • 35.

      Responsive body section


    • 36.

      Responsive footer section


    • 37.



  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Do you want to learn Elementor by building real-world landing pages?

For the next few months, I'll be publishing a series of classes in which you will learn how to design high-converting landing pages with Elementor by building some of the most successful landing pages (Landing pages of world-famous brands).

With this practical approach, you will gain a deeper understanding of how to use the tools and features offered by Elementor and other plugins to recreate the different important parts of an effective landing page.

Let's start by building Lyft's landing page!!

In this first class, we'll be trying to understand Elementor as we attempt to design a clone of Lyft's landing page from scratch using Elementor.

By the time you finish the class:

  1. You will have understood how to work with Elementor sections, columns, typography, media content, breakpoints, alignment, forms, and custom CSS to build responsive landing pages. Every landing page project needs someone who understands these concepts properly
  2. You will be able to create more effective digital marketing campaigns for your online business because you will be able to make landing pages that have a higher conversion and success rate. Many digital marketing experts will agree that "In the modern world, an online or social media marketing campaign without a powerful landing page is bound to fail than succeed."
  3. You will have gained 21st-century skills that you can use to earn passive income by designing and selling Elementor landing page templates on marketplaces such as Creative Market as I do.
  4. Even if you're doing it just for fun, you will be able to create amazing landing pages that you can show off to your cuddly pet and friends

Meet Your Teacher

Teacher Profile Image

Ken Mbesa

Web Design | Blender 3D Modeling


Ever since I graduated from college and started working, I've always been driven by a strong desire to make a difference rather than a living.

By making a difference in people's lives through the content I create, I know I will never lack.

I joined Skillshare to (1) Help others learn the web design and 3D modeling skills I've gained over the years and, (2) Learn useful 21st Century skills from other amazing content creators.

I started as a self-taught graphic designer back in 2014 (I'm an Adobe Illustrator and Photoshop expert), then morphed into a WordPress web designer around 2018 (I started with Divi, and now I build websites with Elementor) and learned Blender 3D modeling by taking online courses and watching free tutorials.

I'm also a big fan ... See full profile

Level: Beginner

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Welcome back to another awesome elemental class with me can versa. It's always a pleasure having you here. If you're a beginner, I'll be showing you the different tools and features of Elementor and will not just be looking at that as an overview, we'll be designing real-world projects, will be designing the landing pages of existing world-famous brands. And in this first class will be beginning with leaf. If you don't own leaf. Leaf is a company that's pretty much like Uber or boat. They deal in rights and ride-sharing and all that. They have an app. So they have this very awesome landing page that we'll be looking at in a short moment. And then we'll be designing that landing pages in Elementor. We'll be looking at the shortcomings of Elementor and we'll be looking at strength. And by the time we finished, you will have understood how to constantly come up with the awesome landing page on your own. So if you feel like you want to learn how to build better landing pages for your website or your client's. Join me in this class and I promise you the next two hours will be fulfilling to you, or most of all, will be beneficial to your future. So join me around. 2. The landing page we're designing: So here we are on the leaf.com landing page. This is what will be attempting to design today. And so if we could just scroll downwards and see what we have in store for us. Here we go. So as we design this will be trying to understand how to use the tools and features of Elementor to build a modern working landing page that can convert visitors into customers. So without wasting any more time, Let's get started. 3. 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. 4. Installing the plugins: The first thing we need to do is install the plugins that we'll be using. So we'll go ahead and install all of them at once and activate them. And as we design the landing page, you get to understand where each plugin will be used. So let's go to Plugins, Add New, and let's search for Elementor. Let's install it. And while we're at it, let's go downwards in the install Elementor header and footer builder. We also need to look for another plugin called formulator. These others are installing in the background. So let's look for formulator. This will enable us to create these tiny form right here. So let's install it. And I have a research library search. And that will enable us to create a search bar at the top and anywhere else who will need a search bar. So once that's done, let's go inside installed plugins and activate them all. So just confirm you have all of those and select, Activate from the drop-down menu, then apply. All right, So all our plugins are now installed and activated. 5. Installing the theme: Just in case you want to change the theme that's currently installed. This is the time to do that. And of course, I don't want to use the theme that comes by default with a new WordPress installation, which is for my case, 2021. It's the current theme. I want to add New, and I'll search for Astro. This is one of my favorite themes because it's a multi-purpose theme that you can use for many different types of businesses. Online stores, personal blogs, you name it. Astro is a super awesome theme that I recommend to you if you want a nice multipurpose theme that you can use for your WordPress projects. So I'll install it. Let's activate it. Awesome. So right now, let's just close this down. So right now, our active theme is Astro. 6. The navigation bar: So let's now move on to the very first thing and create the top navbar. So we'll go inside appearance, Elementor, header and footer builder. So let's go ahead and add new. Let's give it a name. Now bar for example. And let's hit Publish. So now for the type of template, it's a header. So select header, display on the entire website. Who should see it? All. People who visit your website. And let's update that. And right here on this right side, we have a few settings that come with Astra. And on the sidebar, select no sidebar. And full width stretched. I'll disable the primary header, disable mobile header, title and footer, and I'll hit Update. So now that we've set it up in the backend, let's go and design it visually in the front-end with Elementor. So click that will be redirected to the front end where we can now start building this. So here we are. If you're new to Elementor, you need to think in terms of columns. And this navbar has three columns. There's a column that holds this navbar, and another column holds the search bar, and another holds this logo. Right here we have two columns, one that holds this area and one that holds the images. And you'll see oh, that as we go down. So the thing here is we need to add a triple column. Pick an ad that triple column section. 7. Adding the logo: And on this end, let's reduce that size a little bit, and let's add an image element. That's where the logo will go. So that's how to add a logo. And notice that once you select this, it brings up this Edit Image option. When you select this, it changes to edit section. So whatever active elements you have selected here is the one that you can make edits to. So if you want to know what is currently selected, just look at this. So go ahead and click that and upload a logo image. And I'll provide this folder right here. I prepared a folder that contains all the images that I've used in this class. So if you want to follow along, you can download this zip folder, extract all the images and use them. So here's our logo. I'll just go ahead and in fact, I'll upload all these images because you'll be needing them. But I'll go ahead and grab the logo because it's already loaded and inserted in there. 8. Adding a search bar: So the next thing we need to do is add this search bar here. And the way to add it, because we'll be using the ivory search lagging we just installed. What we need to do is add a short code here and place it there. And we'll go and grab that short code from the plugin. So we need to go to the backend. But before we do that, let's click apply here. All right, and then update the page. So at this point, what I wanna do is open up a new tab and I will just quickly grab this section right here. Let's go to the dashboard. Copy that. Go to the dashboard. And I want to go straight inside ivory so we can create our search bar. So let's keep that. Now if we open a library search again, let's pick this short code, copy it, switch the other tab, click the short code holder, and in here, paste that short code, then apply. You notice that it's already appearing. But of course it needs some additional styling and we'll take care of that, so don't worry about that. So switching back to the settings right here. So our aim right now is to basically try to stylet to look similar to this, but it's going to be a basic search bar. If you want to learn how to work with search bars in depth, you can look for videos and tutorials on WordPress search bars. And if I could quickly switch to the original lifts landing page, our goal is to mimic this search bar, this outline here on our page. So in here you'll notice that we have different columns with settings. These are the main settings here. And when you expand any filled in here, it expands to this area. So right now, it's the search configuration that we can see right here. So we can configure the post types that we want. And same case applies to the rest of all these fields. So if we could switch over here, we pasted this code in here so I could show you how we're going to use this short code. But let me delete that and let's go back in here and add new search form. This was the default for, but we want to create a form that we'll use in our page. So let's call it my search form. Let's save it. All right, so I don't want to get deeper into what results the search form will be showing and all that. But what I'm interested in is making it look similar to this. So our area of interest is the Design tab for now. And you'll notice that we have this search form Customizer. Just click that to enable customization of your search form. When we click, it will be redirected to the WordPress customizer. And here we go. So here we can choose form style. So currently it has these buttons, but we don't need those. So we can select that and publish or weight. So right now the form isn't showing up because remember we've removed the short code and we have to grab the short code of the new form we just created. So let's duplicate this quickly. And in this tab, Let's go back. And let's grab this form. Copy that. And let's go back in here. In here, and paste that in there. Updates. So you'll notice that it's already taken the shape we've selected on this customizer. So it's already taking shape. Let's apply that. Alright, so at least we have something we can work with. For now. I want us to add the menu. Then we can style the whole nav bar at once. 9. Adding the nav menu: Let's add a menu. And the way to add a menu is, first of all, let's go back to the dashboard. And in here, what we need to do is create a few pages. Right now we have the default pages that come with a new installation of WordPress, so I will delete them all. Move to trash. Apply that. And let's switch to the leaf website for a moment. And you'll notice that we have driver, writer, business login, sign up five items. So that's basically what we're doing when we're creating the pages, because these are webpages. When you click this, you, you'll be taken to the page that contains information about writers if you want to be a writer. So let's create about five pages. So I'll say Add New. So driver, so driver. And on the right side here, remember the Astros settings. On this section here we want to disable the title mobile header and disabled primary header and the footer. And we wanna make sure this is full which stretched and no sidebar. Then for the template below Page Attributes said it's Elementor full width and publishing. So we'll repeat the same process for all the others. Is go back, add new. Now fast forward, and create the rest. So do the same. Now that we have five menu items, the next thing we need to do is create the actual menu. And we do that by going into appearance menus. And you'll notice right here that below menus, we have create your first menu below, so we can create a menu and colleague, my top menu. Let's create menu or ride in. Now after that, these items become active and these are the pages we've just created. So select all of them and add them to the menu. This menu, awesome. So let's rearrange them accordingly. So driver writer business login sign-up, driver writer, business login, sign up, and let's make it our primary menu. I'll save that. Now we're set and we're ready to go to the front end and add this menu that contains all these menu items right here. So clicking in there, let's look for nav. And you'll notice we have defense navigation menus. We're interested in this one that has hate FB for Elementor header footer builder. Let's drag it in there and you'll notice that the menu items are already showing up. Now I refresh my landing page after adding this menu element here. That's why this area looks a little bit different. So if you see a blue notification here saying that you don't have menus, refresh the page so that this menu shows up right here. And if you have multiple menus that you've created in here, they'll show up here in this drop-down menu and you can select it, and whichever you choose will show up here. So now let's tell the menu to look like this. When you hover over items here you notice they turn purple. So let's do that. So selecting their menu element, it becomes active here I can go inside styles. Under the main menu. We have topography, and this is where we can change the font and everything. And what we want to do right now is change the hover color to that purple that we just saw. Let's just give it some bright purple. Yeah, I think I like that. I'll copy that. And let's also make sure that when the link is active and has the same purple color. Let's go ahead and update it. And let's preview the changes. Now I know you're wondering, how about these vertical lines here and this horizontal line here, where is it? And that's because everything in here is inside this one single element. 10. The hero section: And as I mentioned, as we were beginning designing the navbar, everything inside this page falls inside a section. And every section has columns, at least one column. So as you can see, this area has two columns. The site that has images and the site that holds the buttons in the text, and vice versa right here. So jumping over to our Elementor editor page. First of all, I'll update the changes we just made because we've finished working on the napa for now. We'll still do some final touches on it. I want to close it by clicking that button over there and Exit to Dashboard. Then what we wanna do is go to pages. And we'll choose one of the pages to be our landing page. So let's go with the business page. So I'll say Edit. And because we had set up everything here for starters, what we need to do is edit with Elementor because right now we're building everything visually. So you'll notice that we have the nav bar, but this time it's not editable or clickable. And it's because we're not inside the nav bar editor, we're inside the page editor. So the first thing we want to do is create those two columns. And in here, on this right side column, we need to have two images. So we can just have them stacked together. So to add an image below this, I'll go here to this menu and add an image, drag it, and drop it when this blue line appears here. Now we have two images stacked up together, but shortly, we'll make them overlap like this. On this other side, we want to add some of these texts. And I'll just copy this text directly as it is. Because this is just for educational purposes. You can't go copy someone's website just like that. So I'll go ahead and grab that. A tax right there, copy. And in here I'll click the plus sign and add a heading. Because this is a heading. And one best practice when you're designing landing pages or webpages, make sure you use one H1 per page because H1 is the main subject of the page. And once you have one H1 in your landing page or your webpage, everything else can be subtitle or subheading, which would now fall into H2, H3, H4. But remember, one H1 per page. Don't have to. Let's change the color here. So with this selected, I'll click style and the text color. I'll change it to color that's close to what we want. And of course, looking at the font looks more like Montserrat. Of course, you can choose any font you want. Let's go ahead and say Montserrat. So under Typography, click this Edit button and type months around. And I think, yeah, I think that's a font. Let's increase the font size. I think we're almost got it right. For now, let's just look at what we have. So I'll up data and I'll preview the changes. Awesome, So now it's starting to take shape. Let me copy this text. And I'll add a new hashtag. And this time it's going to be on top of that. And I'll paste that little font here. And I'll see it's a smaller fonts. So first of all, it's an H2. And we want to make sure it's black. It says copy these black. Select that. Click the color under style, copy that, and then select these smaller font here. Click the Color. Paste the one you just copy the. There is a slight difference. And then we need to make these fonts smaller. And I think it's Montserrat as well. Yes. So let's go ahead and say monstera under text, typography, Montserrat. And of course, let's make it that size. Update that. 11. Adding the hero buttons: Next, let's create these two buttons right here, apply to drive, sign-up to drive. So what we need to do is click that menu again. This is the menu click when you want to add any element. So we need a double intersection and an inner section dwells inside another section and you can add multiple columns inside of it. So because we need two buttons right here, we just need two columns. I'll delete that and that. And now that we have these two columns, I'll drag a button elements in there. And while it's still selected, it's time to style it. So I think it has this purple color. So while it's still selected, go to Style. Now before you go to style, Let's first of all change the texts applied to drive. So under Content button applied to dry. Now we can go inside the style tab. And under the topography. We can first of all change the type to Montserrat. And we need to add, notice that the buttons right here, how these round corner. So that's the border-radius. And because this is linked, any figure we enter in here will be applied to these others. So let's say 50 gives it that rounded corner effect. And then for the color, of course, we need to make it purple in color. Thank you. It was let's see, a bright purple. Alright, so be a little bit dark. Border ring. Yeah, bordering blue. Click anywhere within here to get you to that menu. Now that we have this button right here, we can go ahead and duplicate it. Then drag the copy into this other column and bring them closer together. Now we need to style this differently. No fill color, just an outline. So with this selected, go inside type. So for the color, Let's change it to white. And you'll notice that it's disappeared. But that's because it doesn't have a border. And if we add a solid border and give it a width of one and colored that border lack. The button is now visible. And let's change the text color to black. Update that. So this button is changing to grayish on hover. To achieve the same results, we need to come inside here under button style, background type, under color. Change that to a gray. Light gray. Yeah, I think that's good. Update. And let's preview the changes. All right, so notice that up here, there is some spacing. But on our page we don't have the spacing, so let's work on that. And that's all about margin. So we'll be adding some margin to the top of the columns. So click the column and selected. Go to Advanced, unlink that, then add a top margin. It's just play around with it and see which one fits, which one looks best. Let's update that. Let's review the changes. So at least we have some margin at the top. The image seems to be properly, properly positioned. So next thing we wanna do is add the two images and make them overlap like that. 12. Adding the hero images: Let's go in here. Click the first image, and of course this will change to the image settings. Click that. And I'll go inside my folder. You'll find a hero section images folder. So we can just grab all these images and throw them in there. I'll go back and grab these others that we don't have to go back there every time. So let's go back. I'll also get these slider images, say open. So now that we have all these images, let's grab that and insert media, update or ride. Let's move to the second image. Let's pick that one. Update that. And let's review the changes. So there we have all the content we need on the hero section. 13. Button margins and padding: So let's bring these buttons a little bit closer together. Let's reduce this gap. But first of all, what I wanna do is select this column, go to Advanced, and remove all these default margin and padding. Same case applies to this. Select that column advanced. Remove all these defaults. Then pull them closer together like that. Then say Update. I like where they are now, but now we need to push them down a little bit because this distance is too small. So we'll take the whole section intersection advanced, remove this link, and then add, maybe, let's say a 40 update. These buttons seem to have some nice padding, top, bottom and sides. Our seemed to be a little bit shorter in height. So let's add some padding on top and bottom. I'll select one of those buttons. I'll go to padding and say trainee. Same case applies to this other one. Click Update. All right? Okay, so the next thing we want to do is make these two images overlap over here. 14. Styling the hero images: So I'll select the first image. Go to Advanced, and we'll play around with the margin and padding. So let's remove those links. And then for the margin, increase the margin to words like that. All right, let's move on to the second image. Advanced. Let's reduce the top margin. Let's give it a negative 100, negative 150. And then let's reduce the left margin. And let's increase the right margin. Let's give it maybe a 90. And let's update that in looking at the changes. Awesome. I think although we're not perfect at this moment, we're going somewhere. We did. So right now, I'm satisfied with our hero section. So far. Next, we want to move on to the body area, which is made up of a couple of sections, all having different number of columns and rows. So. 15. The main body section: So for the body section, we need to have a double column again. So we can duplicate this by clicking this because it already has two columns, or we can create a double column again. So let us create a double column. And you'll notice there is some margin here, spacing between the two sections. So let's do the same. Let's add some margin, the top of the section. So right-click Edit section. Then will go here. At vast. Remove the link on the margin. And let's give this a margin, top margin of 50. Maybe let's say 80. 16. Adding an image mask: Let's add an image here. Drop it in there. And of course let's bring in an image, maybe this guy, insert media. And now what we need to do is while the image is still selected, go to Advanced, scroll downwards and you'll see mask. Click that mask and say on. And you'll be presented with these settings. So at the moment right now it's set to circle. Let's try out the others. Flower sketch. We don't have this shape here in this list, but you can always upload your own informal SVG or you can upload an image that has that shape. But SVG files are usually considered unsafe. I think I'm just going to go ahead and work with sketch for now. Update that. And we can go ahead and add this block of text with these two buttons. Let's copy that and put it in here. I'll click Plus, and that's a heading. I'll paste that in there. And remember we created something similar to that Here it is. So I'll just click that, right-click, Copy. Click that right-click. And I'll not pasted, outpaced its style so that I don't have to try and figure out what I did to make the other look the way it looks. So there we go. Next, we want to grab is this right here. It's a sub-header of course. So we can duplicate this, hover over these and click that, click inside. They're coming here and paste that text in there. And while it's still selected, go inside styles, typography, that's bump up the size. I think I like it like that. And up data. 17. Adding body text: Next thing we wanna do is grab some of this text again. Click that button right there to add an element. And the element we're adding these texts. Click inside here, highlight everything, and paste it in there. Now if you notice that you've pasted in there and the text styling looks funny as in maybe the font is big. Make sure you select everything in here. Click this toggle and clear formatting so that in case the tax came with any pre formatting, you get rid of that formatting so you can do your own formatting. 18. Custom feature list: So here we have a list and the list has icons. So how can we achieve that in Elementor? Now there are different ways to add this, but the way that will work in this scenario is by adding an intersection. In that intersection will be divided into two. So we'll have an inner section that has an icon and a heading. And then below the heading we'll have the text. So click the plus sign icon. So let's drag an icon in there and click there. We can grab with heading here or we can just duplicate this and put it in the reliable earnings. Let's paste that in there. And now for the texts, we can just duplicate this and drag that duplicate in the what of course now we have to change this. So while this is highlighted out, highlight everything in there and paste that in there. This spacing is too much so we need to reduce it to match what we have here. Let's select this text advanced, remove this link and this link. Then for the top margin, let's reduce the top margin up to that point. Maybe can go further if you want. And so the next thing we wanna do is reduce the size of this font and while it's selected, go to style size. Let's leave it at 20. And then let's drag that all the weights that point. Let's reduce the distance even further. Can reduce it like that. So I noticed that we have a lot of margin below the texts. So I'll select the text and reduce the bottom margin up to that point. Now, all we need to do right now is duplicate that and duplicate it again. And we have a list. So we can go ahead and copy all these other list items that's pasted in here. Let's grab this text right here. Click that text, add it right there. Then go to get paid. I'll do the same, you know, the drill. Copy that put it in there. And I love day the changes because we've made so many changes and having saved them. Then let's preview what we have so far. So if we start scrolling, I think it's starting to take shape right now. But notice that the distance here is very small. We need to increase the width of the, of the spacing here to match this. And at the same time also need to change these icons that are too tiny to be selected, but I'll try my best. I'll select that and I'll go to Contents clicking there. And I can choose an icon. So reliable earnings, so that's a bank notes. So I'll just type money. Yeah, I think we can work with that. Or that. We could also give it black color. And then instead of doing the same for the rest, I'll just copy what we have here. And I'll highlight these. I'll paste the style and it'll change to that over that selected paste. And I'll change this to a different icon. Select any random icon. Because right now what we need to understand is how to add and edit the icon is not really what icon is the. Let's do that. A car, because this is all about cars and way. Update that. And the next thing we want to work on now is these two buttons. 19. Advanced buttons and links: Let's go ahead and add a double section right below that. And in here we can add our buttons. So let's go and grab a button. Put it in there. I'll select this button. Copy, select this one, paste style, and change to that color. And then I'll duplicate this. Now let me just duplicate this and drag it down here. That's why this is a drag and drop builder. So now that we have it here, we need to style it gets me to the background and all that. So first of all, let's change the font color to black. So inside style, while the button is still selected, will go to next color. Change. It's that lack. Then for the background. We want to select the background and because it's green now, we want to come and say it needs to be transparent, completely transparent so that it's white like that. So another thing we wanna do right now is change the button text. So plied to drive how Dr. pay works. Let's click that. Applied to Dr. Lisa. Other ones say is content. How dry works. Now you will notice that they're not aligned. Let me update that in preview changes. If I scroll downwards, we'll get rid of these. Don't worry. There is too much distance between the two buttons and this one seems to be misaligned. So what we need to do is go back to our page, rightly BCE, and remove the default margin and padding and do the same for that. Remove those default paddings and all that. So let's bring these two close together and we need to push this one down a little bit. So let's increase the padding, top padding like that. And let's go ahead and add this arrow at the end. So while it's still selected, go to Content icon library. And let's type in arrow. Let's use this one. Insert. And let's say we want it after. So right below icon. After an update, let's preview the changes. Let's get rid of this button first of all, before we forget scrolling downwards. And let's increase this top margin for these buttons to have some more space, more room. So let's click that. Go to Advanced, remove that, and then top margin. Let's give it a 35 update. And before I forget, let's increase the spacing between this image and this block of text. 20. Adjusting section margins: So I'll click the section and the layout and go to where it says columns gap. So I think I'll just choose wide and update that and see what it looks like. I think I like it so far, but we could do much more. We could do more. So let's say wider. All right, So, so far so good. Oh wait, look at what this button looks like. Think we reduce the spacing too much. Let's us reduce the margin on, I think it's the left ear, the left margin. And update that. Let's preview the changes. I like it so far. So next, let's move on to this testimonial section. And you will notice that there are more hidden testimonials on the right side. And to see them, you have to click and scroll. 21. Adding client testimonials: So to create these testimonials, we will need to install another plugin, and I'll show you something quickly here. So let's go ahead and type testimonials. And you'll notice that we have to testimonial elements here, but these are not the ones we want to work with. So let's go back to the dashboard and I'll go inside plug-ins and add a new plugin that has an option that will give us results that are similar to these. So going back here, type elements, elements, kids. Let's install elements, kid elements or atoms. All right, so let's activate it. Awesome. So now that it's installed, I'll jump over to our editor and I'll refresh this page so we can show up here. So click the plus sign here and type in testimonial. And we'll grab this testimonial here. And notice that we have these different options for how we want to display them. And can go ahead and choose any, I think I'll choose maybe I'll choose this one. So what we have currently is one testimonial showing per slide, and we want them to be three at a time. So let's collapse the Layout tab and go inside testimonial. And the first thing we wanna do is duplicate this so that we have for light on the left page 1, 2, 3, 4. And then let's collapse the testimonial tab and open up Settings. Under Settings we have slides to show, let's say three, so that it's three showing at a time on the screen. And let's update that. Let's preview the changes. All right, So let's now let's populate each testimonial with some content. And I'll go ahead and quickly and grab these testimonials from here. So collapsing the settings, I'll go inside testimonial. I'm going site testimonial one. Also name here, Mary Mary drivings leaf since 2019. So Mary Mary driving since it's running 17. And let's paste that testimonial him in here. Right? It's already starting to take shape. As you can see. Let's grab the second testimonial here from Harold. Let's collapse Mary and open up system on your tool. That's Harold driving with us since 2009, 2018. Let's paste that testimonial right there. Let's grab that paired one. Collapse Harold. Right? You want to say Alex says 16. Let's paste it testimonial right there. And then let's go ahead and grab the last testimonial here. Collapsed. Alex, expand that. Let's say Anthony Driving since 2020, striving good Sperling, right. All right, So let's paste it right there. Let's preview the changes. Scrolling all the way to the bottom. And let's add the images right here. So clicking in anywhere inside the section, I'll just go straight to Anthony first of all. And let's go inside the client avatar. And I had already uploaded these images here. Remember I provided a zip folder that you can find below in the description. All these images are in there. I actually used this person does not exist.com to get these immediate. So these are not real people. So I'll choose this guy. Insert media, update. I'll collapse Anthony, go to Alex. Client avatar is called downwards. Get this guy. He looks like an L, It's Harold. Let's go ahead and grab client avatar. Let's grab that. And finally, let's add Mary's photo at that updated. Awesome. But now these testimonials here don't have a drop shadow, but ours have a drop shadow, so we need to get rid of that. And we'll go inside style and look for the option to remove the box shadow. And in this case it's under style layout box shadow. So notice that when we clicked it, it changed a little bit. And what we wanna do is click that tiny box there and make it transparent completely. Then update that. Let's preview the changes. Right? So let's scroll downwards and see the results we have. And you'll notice that we have extra staff here that is not here, like these ratings stars and these quotation marks. And that's because these guys who made Lyft did not use elementary to create this page. Maybe these guys actually coded everything here, but we're using a drag and drop builder. And the drag and drop builder comes with certain elements by default, but we can remove them. So let's get rid of the quotes. But if you want to maintain them there, you can keep them there. If you want to remove them, go ahead and remove them. So let's look for, I'll scroll upwards collapsed layout. Go back to content. Let's see inside the testimonial enable rating this able that. So now that's gone. And enable quotes. These Abel that as well. You can go ahead and play around with the settings further to see what else you can be able to do with the testimonials. But of course, as you've seen, there are many options here. So go ahead and try out all these other layouts and see what you can achieve with your results. The point here is to understand how to use the elementary tools and features to create awesome web pages. And of course, it's pretty easy to see that we weren't able to create these arrows right here. With which to scroll through the testimonials. And of course it's because they use different technologies to create their page. We're using a drag-and-drop builder that has its own powers and shortcomings. So ours looks like that. And there's looks like that. So next, let's work on this bluish section right here, all the way to here before we create this form. 22. Advanced body section: Looking at this section right here, you'll notice that it's one blue section and he has a mixture of different column sections inside of it. As you can see, this is a double column. But when you come here, this is a single column because it runs all the way to the end. So what we need to do is come in here, create a single column section. Let's first of all give it this background color and I had already checked it out. It's if you go inside, edit the section, right-click it and go in there, go to style, background, color. The color is hash, PB, VB, Ff, or ride. And inside this, we need to add a double column intersection. So come in here and say add an intersection, which is now a double column. And below it, we can add a single column. Let's go ahead and just delete that. Add another intersection. But this time of course, we will remove this single column, but we'll get to that. So what I want us to focus on is this top part for starters. So let's add this image in this column. And then in here will need to add some text. So let's copy that, right with Lyft. And we can just go ahead and duplicate this because it will enable us to have uniform subtitles. I'll carry that and drop it in there. I'll grab that. And I'll also scroll down here. We'll duplicate that and drag that in there. Let's drag it down here. Let's just drop it there and grab this and put it above that. Click inside this. And let's paste text. We just grab, they're just getting my hands on it. And of course you can guess what we'll do next is grad, duplicate these and that's how elementary makes it easy for you to work. You don't have to keep adding new elements. You can already use the elements that you already styled. So let's paste that text in there. Next, let's create this button. And we can do that by duplicating this. And then let's drag it inside this area. What does this button say? Get a reliable right in minutes. So let's change that. Sex. The button. While the button is still active, let's go inside style. And therefore the color. Of course it needs to be wide. But the border type needs now to change to Solid and we'll give it a one. And the border color should be black or white, or color is it here? It's that purple. So let's give it a purple color. That bright purple color like that. And you'll notice that it has a drop shadow. So let's add a drop shadow here. But so box shadow. And then let's reduce the opacity of this box shadow so that you ease into screaming. Just want to make it a little bit subtle. Then going up to the button right here, text color, Let's change it to, I think it was black. Then let's update it. And I notice it has this tiny icon right here. So let's add an icon. Let's go back to content. While it's still selected. Click that tiny icon right there. Ripe can find right car, car. Let's grab that, insert that. Next. These are two more buttons, and they're styled pretty much like this button right here. So let's just duplicate that. Drag it and drop it right below this. Let's duplicate it again because there are two buttons. Schedule your writing advanced. Know that you're right. Know that your driver is wearing a mask. So with that active the mass. And the second one says, schedule your ride in advance. So let's click that in advance. Let's updated schedule. Right, has 1 r. Let's make sure these icons come before the text. So before, and for this one before as well. Before. Let's update that. Next. Let's add an image of the phone. Click that image. So I'll click that. Grab this phone in here. Now insert media. Update that. Next. Let's create this button. So we'll just go ahead and duplicate that. And put it right here, drag it and drop it in the update that and they are what does he say? Get a ride. So I'll say our ride. Right. Let's add this logo. But now this logo, although it seems to be directly below this button, they're not together, they're not in one group. And you'll notice that when you're doing these on mobile screens, because let's hit Control Shift I for a moment. And if I make this screen narrower and scroll downwards, you'll notice that the image comes before that logo and the button comes before the image. So this logo ease with these texts and they come after this image. So that means we're supposed to add a new section right below these double column section. And remember we had added a double, another double column section. We can use that. So let's add an image here. I'll click that. We should have that logo here. Let's go ahead and use that one. Insert media, and let's put it on the left side. Next. Let's grab this text right here. Copy that. And I'll click that. Drag a text editor in here. Clicking there and paste that text in there. And this should be joined right here. So join. And then let's update it. Next. Let's have a look at what this looks like on mobile screens. Just for a moment. So if we collapse that scroll downwards. Yes, so it goes directly below this, below this. So this is a new section. Let's go ahead and create a new section. So I'll duplicate that. And now we should have a new section. So I'll just get rid of all of that logo. What do we have here? We have this, right bites could go bananas. And that's I, H2. So I'll click that icon right there and drag a header and paste that in here. Let's change the color to black. Of course, you need to be consistent as you're creating these pages. I'm just putting in any black, but if you're using black, make sure you're consistently using the same black. If you're using a specific color, purple, make sure if your button is purple. Every button that's purple using the same purple, not differentiates a purple. Let's update that. And this font seems to be Roboto, the default fonts. So let's change it to Montserrat for consistency. That's what we're trying to insist on. Montserrat. I mean, we can give it a weight of maybe 700. Yeah, Things have been a 100 years. Okay. Let's grab that and let's click in there and replace these with that new text. But you'll notice that this text is slightly smaller than this. So let's make it slightly smaller than the other ones. So soil maybe. Yeah, let's update that. This sentence seems to be in one line. So let's expand that all the way to maybe somewhere there. Update that. So now I'll go ahead and duplicate this one more time because remember, all these content we're creating at the moment is on the blue section. So this is where we'll add our image slider. Let's remove that. 23. 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. 24. Scrolling image carousel: So now we have this single column in a section. Next thing we want to do is type logo, client logo by IQ kids. Let's drag it in the end. In here we can add all the images we want for each slide in here. So I'll go inside Title 1 and I'll click the image area. These are the images will be using. So I'll click the first one, the inserted in there. Click the second one. Let's put it in there. And I can fast-forward here so I can add the rest. Let's update them. And notice that they have box shadows and we don't want those box-shadow, so we'll have to get rid of them. So jumping inside style, Let's go to Logo and you'll notice we have this border-radius. Let's give it a 10 or write update that. Let's remove the box shadow. So clicking that box shadow option there, and then that opacity button right there, we can reduce the visibility of the box-shadow and update that. As we move along. I hope you can see some of the strengths and shortcomings of a drag and drop builder like Elementor. But there are many other tools that you can combine with Elementor to get better results. And remember, we're using the free version of Elementor. The paid version has plenty more features and tools that can help you achieve much better results. And then again, it's all about your creativity. Let's create this availability region. So that's x, looks pretty much like this. So I'll just go ahead and duplicate this in case you missed my instructions on how to bring up this. These two options, when you hover, how to enable that. You go inside this program a new user preferences and make sure editing handles is set to yes. So let's exit that and drag it down here. Now of course I'll replace it with that takes you just copied on the other side update. So next, we want to create this single line in line four. 25. Adding a form: So the next thing we wanna do is create this form. And as you can see, we have two columns. One column that's holding the text, and this column that's holding the form. So first of all, it's jumpy side, our dashboard. Of course, as I mentioned, there are many form plug-ins out there, but the ones we'll use, the one we'll use for this class is formulator. So let's scroll downwards and look for formulator and clicking right. So you'll be taken to this window right here. And you'll see this option here. Create form can create polls, but of course this class is not above form creation would just go ahead and do what we want. And we can pick any preset here. So I'll just go with registration or we can start with a blank. Lets us pick blank and continue. Let's call it registration. And then let's create it or ride. So here it is. We can go ahead and start adding fields. These fields. So I'll click Insert and you can add any field you want. So let's pick any two fields, like e-mail and phone. Then let's insert fields. And you'll notice that they are stacked going downwards. But what we want to achieve is a single line form. So going back here, Let's drag this and drop it as soon as you see that blue line right here. Drop it in there, and then let's hit Publish. Will be presented with these short code. Just click that small icon to copy the short code. You'll get that tiny message. Go back to our page here. And now, while we still have this short code copied in our clipboard, well, first of all, create a double column section. And on this side of the double column section, I'll add a short code element. So let's drag it in the end in here, we can now paste that short code we just copied. And please observe this number because we'll be using it shortly when you'll be learning how to add some custom CSS, we'll apply that. Let's grow downwards to that section. Right? Notice that you can, for now you can't see anything because first of all, let's give it this blue background and add these texts. So grabbing this section, Edit section style is go in here. And we'll give it that background color. Thank you was somewhere. Let's go with that data. So on this side, we want to have these texts. So I'll grab that. Then I'll come in here and select Heading. Paste that text in there. And let's say this color to white. Text. White. Of course, let's make the type are graphy Montserrat, it's already Montserrat, so we're good to go. All right, So if we now preview the changes, scroll downwards and see what we have. So this is what we have currently, but the button is below the input fields. So how do we bring it here? Now, it reaches a point where when you're working with WordPress and WordPress plugins, all those plug-ins are unable to help you achieve certain appearances that you want on your page. So that calls for custom CSS. 26. Styling the form with custom CSS: While we're still on this preview page, not the editing page, will go inside customize and we'll add some custom CSS. Wordpress provides you with this section right here. If we scroll downwards, you'll find additional CSS. So our goal right now is to bring this button over to the side. And our plugin doesn't have that by default. So how do we do that? We'll come in here in the Additional CSS and I'll just switch tabs quickly. First of all, I had already prepared some code snippet that we will be adding in the so these code snippets will be in the zip folder in the description below, so be sure to grab them and adding them will be very easy. So grab the first, SO grab the first code snippet out to their copy it. Let's go inside our page and paste it right there. And when you paste it, watch what happens here. So now the styling has changed. First of all, let's publish that. Remember, we've used for minister to create this form. And we've used a short code. Let me click that. We've used these short code that we've been provided by formulator. And this form has this number right here, which is the number of the form. If I could go back inside for minister in clique forms. You'll notice that we have the form right here, registration form. And if you click this COG with here, we have copy short code. That's the same short code we have in here, and it has this number 350 to now. Our page here is misaligned because this 570 is the number of the other form that I use to create these code snippets. So we need to replace these 570 with the number of your form, 352 in everything now is properly aligned. Let's go ahead and publish that. Let's go back here. Click Review. And now this is what we have, but we wanted to run it all the way to the end. So going back inside our form in either form, registration form, click, Edit. So we can change the appearance in there because as I mentioned, this form is not editable with Elementor. It's editable with the plug-in that created it, which is formulated. So now that we've opened the registration form, go inside appearance and we can make edits in there. So what we want to do is first of all go to the colors and then under custom, we'll get all these options. But what we're interested in is the Submit button. So click that. And let's change the background color to white. So I'll just click that white. And then on hover, or does it look like it has that gray? So on however, we wanted to have a gray color and you can pick it from here. And on focus, we want it to have that same great color and update that. So let's go back in this page and say Apply. Scrolling downwards. Right? So let's click preview. See what we have now. So that's our buttons so far, we need to change the text color to black. So to do that, let's go back in here and below the background color we have the text color. Let's give it that dark gray that's close to black. And this black now is applying to the focus state. Let's make sure it applies to hover and default because right here it remains black in all states. So I'll copy that code. And then I'll come side the hover state, Click that and pasted in there. And I'll come inside the default state, copy that, and paste it in there. Update the form or right. So if we come back here and scroll downwards, click that apply. Then let's just say Preview. Scroll downwards. And the button right now should have that color when we however, it's gray and the text remains black. So now it's time to give them that rounded corner. As we did with the other buttons. Inside formulator. Scroll downwards, you'll find a custom CSS section, enable custom CSS. And in here you can add more custom CSS to style specifically your form. Right here we already have basic selectors for the different parts. Will not talk about what selectors are. Because remember, this is not about CSS, it's about understanding that you can make these changes, these edits. So we'll go back to our code snippets and we'll pick these two code snippets and go back in here and paste them in there. Then up day. So if we update that, then preview it right here. Let's see how the forms look now they have that rounded corner and the button right here is invisible because the background is white. But let's close that. And let's go inside here. Scroll downwards, click the form again and apply. So if we click Preview now, scroll downwards. Our form now has this rounded corner button and the corners right here, the border radius is 5, looks a little bit better. 27. Double column sections: So jumping over to this page right here, let's add that, Let's add that column. And now on this column right here, what we need is safety first, how to show up like a stranger. Remember, in elementary you can recycle stuff. So why don't we pick these first, duplicate that. And then let's drag it down here. Drop it there. Let's duplicate this text right here as well. And drag it down there. And then let's grab what its way. We still have these smaller text right there. So let's duplicate that. And let's drag it downwards. Let's drag it to the spot. So now let's get that safety first. Put it in there. Let's go ahead and grab that. How to, how to show up like a best stranger. Click that, then paste this in there. So let's grab that as well inside there and paste it in there. And as you can already guess, we already created something like this earlier, so we won't need to recreate it. So let's go here and grab it from where we designed it, where here it is. So let's duplicate that and drag it to our new spot. Let's drop it there. And now the margin here seems to be too much. So let's reduce the margin on the button section. But if we leave it at 15, now let's just say five. And now let's just say 0. Then update that. Scrolling downwards or right. So let's add that image that's supposed to be here. Clicking their image element. Let's grab an image right now. Imagery like grab. Let's grab this lady. Let's grab this guy again. Viewed him quite a lot, but we don't have too many images. So update that. Let's preview it or RI. But now we need to increase the spacing a little bit. So let's grab this section, edit section. And then, first of all, remove that link on the padding and let's add some top padding of maybe 20. And this seems to be the opposite of this. So now the image comes to this side and the textblock goes to the other side. So what we need to do is duplicate that and then just drag these columns well aside. And there we have it. And I've noticed that we don't have enough spacing here. So let's make the spacing in here wider. So columns gap, Let's see, wider. Update that. Let's do the same for this layout. Columns gap wider. But let's change this image first. Let me use that for that section. So next, let's work on this area. But before that, I noticed that the button right here, there's only one button right here. So let's remove this extra one. In fact, let's remove that column and leave that button right there. And we can change what the text says. Learn more about vaccine axis. Clicking the button itself. More about community guidelines. Click that guidelines and think the song was saying about learn about safety. Learn about safety. Update that. And let's preview the changes. Scroll downwards. Let's do something about this button right here. Looks a little bit squeezed. Right there. Update that. So the next thing we want to do now we can go to work in on that lower area. And this is a full width single column section. 28. Full width single column section: So let's add a full width single column section. Now, first of all, you see this is text, but this is an image because it's some selectable. So let's add an image elements in there. And then let's click in there. I'll pick, I'll pick this logo that I had created for that area. And as you can see in size, It's very small, 123 pixels by 54 pixels. And that's why it fits right there nicely. If you pick a large image, you will fill up this area and you don't want that. So make sure your image is the right size. Next, let's create these. We help you move your. So I'll go ahead and grab this text right here, duplicate it, and drag this in the paste that in there. And then let's put it in the middle. And then to add these animated texts right here, we will need to install another plugin that adds more functionality to elementor. And that's called essential add-ons for elemental. 29. Adding a self typing animated text: So let's go back inside our dashboard plugins. Let's see if we have it already. No, we don't. So let's add essential add-ons for Elementor. Show. The same show. And it's the first one. Of course. Let's install it. All right, so let's activate that. So this is a setup wizard. Just go ahead and click next. And what we're interested in is the fancy text, so it's checked. We can go ahead and click Next. Don't install this. Next. Finish. Awesome. With that installed now we have essential add-ons and we can access it in here. So first of all, I'll update this page four, we move on. Then I'll refresh the page so that essential add ons is loaded. All right, so let's scroll downwards the bottom. And now I'll type text and you'll notice that we have different texts elements, but what we need is the fancy text. So grab that and drop it right below that x right there. So these fancy text element here has the prefix text and the suffix text. So let's remove the prefix and suffix. Now we're left with this animated area in this is a list of all the different words or phrases you want to animate. So in our case right here we have customers, ideas, interviewees, visitors. Let's go with those for now. Somos ideas into her students, patients. I'm basically just duplicating them and adding the extra one. Let's add one more. Employees, business, business and employees. So let's update that. And we don't want it to be typing, wanting to fade downwards. So let's go to fancy texts settings. And now in these settings here go to animation type, select whichever you want. So in this case we're saying fade down. And thus he felt were looking for we can change the delay time. How long you want it to stay right there before it moves on to the next word or phrase. This seems to be moving fast and as snappy manner. This seems to have that slow transition. Next, let's create this. Copy that. Let's just duplicate that. Then drag it right below the text. Then I'll just paste it in there. I'll go to style and align it center. Update that. Next we need to add this button. You're already guessed. We just need to come in, grab these right here. But we're not grabbing the inner section, we're grabbing the button itself. Duplicate that. Drop it in here. And let's put it in the middle. Is too much margin right here below this. So while this text is selected, I'll go to Advanced, break that and that, and then I'll reduce the bottom margin. I think that's the right spot. And I'll select this fancy text and do the same. So let's break that and let's reduce the top margin. Let's reduce, Let's reduce the bottom margin as well. That year the button looks nice. Learn about leaf business. It's selected. Update that. Next. Let's create this logo. Let's create this logo area. 30. Adding a client logo slider: So we'll go ahead and grab. Let's duplicate this section right here. And let's remove everything. Delete all these other elements. Let's remove that button. And then I'll add log client logo drop within the. Now, remember we had already used that client logo elements up here. So I'll click anywhere inside here. And I'll copy. And I'll scroll downwards and click anywhere inside here. And I'll paste the style. See, all the styles applied on this are now applied on the other one. And all we need to do is now replaced the images with our images. And the sum will be using these logos down here. So I'll grab that, collapse that Grab image two. Grab Logo tree. Collapse that expand the image for collapse that, expand that. Image 5. Collapse that duplicated. Double six. Duplicate that. And of course you need to replace the name. You can give it a name. Ascension. Then let's duplicate it one more time and add one more logo. And let's update it. Right, so let's preview the changes. Let's scroll downwards and see what we have so far. And then notice that there are logos. The logos appear to be smaller and we need to make ours a little bit smaller. So let's collapse local settings. Let's go two slides to show. Let's make it maybe six. Let's make it seven. Yes. So seven makes them a little bit smaller because the space is limited. And let's preview the changes. All right, I think I like it like that, but let's reduce the margin. Top margin right here. It's a little bit too much on our landing page. So I'll click the client logo elements advanced. Remove that, and I'll reduce the top margin. Let's say up to that point. Let's scroll and see what we have so far. Our website is almost complete as you can see. So the only thing we haven't designed is a footer. Let's go down and designing. 31. Designing the footer: So what I'm going to do, so what I'm going to do at this moment is exit from this page because we're done with it for now. We'll go ahead and design the folder. In. Once we're done with our folder, will open up the whole page and make it responsive on different devices and screen sizes. And I'll click that. So to create a folder, we'll use the same same tool we use to create the header and thus the Elementor header and footer builder. So click that. And we'll click New, add new. And right here we'll give it a name, my folder. And of course, it's footer. We want it visible on the entire website. And we want we want to make sure that everybody has access to it. Then let's hit Publish. And before we edit with Elementor, Let's make sure it's full Elementor, full width, no sidebar, full-width stretched. Disable these three and the footer because you don't want to display the default that comes with Astra. We want to create our own with Elementor. So update that first. Sorry about that. And then we can edit with Elementor will be taken to the frontend. As usual. We will design it visually. Right? So here we are. Who go ahead and let's have a look at what it looks like. So these are our four columns. This is a 40 column section. So click that, and then let's choose this one right here. Now we have these four columns. So the first thing to do here is click this button right here. We want to add these texts, this list of texts. So typing here, lists. And we have different list elements. And what we're interested in is the page list by elements kid. So drop it in there and we can add the first item, which will be become a driver. Earnings CDs help safety driver. No need for a subtitle for now. Then we can select the page to which that link will lead. Because when you click this, you'll be taken to a page. Any link you click there is a page. So let's just choose any page or go with a business page. And the item gets listed immediately you choose a page. We can duplicate that. Help. You can edit that. I'm just making up these words. So business. Then let's duplicate that. Let's change this to ride. The less complicated collapse that. Let's change this to us. And of course we can make the list as long as you want, but I'll stop there. Let's make two more lists. So I'll just duplicate that. And I'll drag it in there. I'll also duplicate it again and drag it in there. So first of all, if I could select that, go to style text. You can change the text color to black. What else? And then we can copy the style, paste, style. Paste style again. Update that. Now let's add these subheadings right here. Driver, writer, lift. So I'll click that. I'll get a text heading, H2. We need to make it a little bit smaller. So let's go to typography. Let's try 18. Yeah, I think I like that, but it needs to be black in color. And of course, let's change. The text says driver. And I can duplicate that drug with there. This is a rider writer. Duplicate that, tried it out there. And this one is lift. So let's create our buttons. Click that, go to Button, drop it there. Let's go back right here into style. Let's change the color to white. And then let's give it a solid border of one. And let's give the border of black column override. Then let's give it a border radius of 50. So the text color right now is none. Let's change it to black. And what does the button say? Lyft driver app. So while still selected, let's scroll upwards. Lifts. Driver app, Hi. And own, however, it has that gray, so style. While it's still selected over, six colors should remain black. And the background color should be this gray. Yes. So now let's just simply duplicate that twice. And then we can change what the text says. Leaf writer app, right on web. Right on web or right. So, so far I like what we have, but I believe they need to be a little bit closer and leave some room on the sides. So what we need to do is add some padding on the section that's holding them. And we need to first of all break this link. Then the right, the left padding. Let's increase the left padding to maybe 50, maybe a 100. And the right padding the same. A 100. Then let's update that. Preview the chain, preview the changes. Not yet, so let's make it. So let's say 200 by 200. Then let's update it. I think I like that. So now that we have the folder ready, Let's exit from here, Exit that to dashboard. And then let's go to Pages. And this is our page. So let's right-click and open link in new tab so we can preview it. So now that all the contents is added to the page and laid out, let's go ahead and make the final touches at all the padding and margin and alignments that we need on the page, then make it fully responsive before we finish. 32. Making the page responsive: So what I'm going to do is bring up the DevTools by hitting Control Shift I. Every browser has DevTools. If you're using Chrome, you will still be able to access the DevTools. And then I'm going to hit this responsive design mode icon right here. And it'll bring up these different settings for different screen sizes. Here you can see we have the Galaxy S9, the iPad, iPhone, and we can switch through the different devices and see how the webpage will look. So now, as you can see, the menu has collapsed. The search bar has moved to the right, and our logo remains right here. So we still have the three elements on tablet and on iPhone. The elements come closer together, but they are still there. And of course in every other phone, the three items will still be there. So let me jump over to our page and let's do the same control shift, I and C, the current state. So I'll hit that icon right here. And let's see what we have. So this is what we have currently. That's how many looks the logo, it seems every element is stacked on top of the previous one. We have quite a lot of work to do here. So I'll go ahead and hit that and then close that. And right here, I'll hit that and then close that. 33. Responsive navbar: So coming back to our landing page, hover over edit with Elementor and click nav bar. All right, so here we are. So what I wanna do is hit this small responsive mode icon down here. It'll bring up this bar. And as you see, we have the different devices here, and you can choose the mobile phone. Let's start with that. Let's go to the tablet mode. That's how it looks. I think on desktop we can work with that. So what I wanna do is create a different navbar for every device so that we're able to comfortably customize it without affecting how it looks on other areas. So I'll duplicate that. And this is what we'll customize for the tablet. And I'll duplicate it again. And this is what we'll have for our smartphones. So in this nav bar that will be visible on desktop only, I'll click that, make sure it's the one I'm editing and L go inside advanced. Scroll downwards in you'll find responsive. And what we wanna do is hide on tablet and mobile screen and update that. That means this menu will not, this navbar will not be visible on mobile screens. And you can tell that by the color it has when we're on a different mode. So if I click to go to the tablet, notice that now it's grayscale, the color has changed. I mean, it's not active. In other words, right now it's not visible. If you're viewing it on tablet and if we go inside the mobile screen and let's select the tablet napa, go inside advanced, scroll downwards, responsive. And let's hide it on desktop and mobile. Update that. And let's go inside the mobile size. And now notice that both these are grayscale so they're not active or mobile screen. And then right here, Let's select that advanced and let's hide it on tablet and desktop so that it's only visible on smartphones. Now that we have that, I want to drag this and put it at the top so that we're able to work with it comfortably and see how it looks when it's up there. What we wanna do is achieve this result. Let's just bring back the mobile view. And what we want to achieve are these three columns currently we have them stacked up on top of each other. Selecting this first column here that holds the logo. We want to go inside layout. And on the width dot did the logo maybe 10 percent, let's say 20 percent, 30 percent. I'll click the column right here, holding the search bar, and we'll go inside here, let's say 60 percent. So 30 plus 60, that's 90. Let's give this 10 percent the column there than 10 percent, voila. So we have them in a row. Let's preview the changes and see how it looks. Control Shift, I. Click this icon right here. We need to add some margin and do some alignments on the elements. So let's go back in here. And what we wanna do is select that column. And let's go and break this link and that link. And then we want to add a top margin up somewhere there. Let's do the same for the logo eddie column. Let's break that and that. Then let's add the top marginal little bit up to somewhere there. Update that. Let's have a look at what it looks like or RI. So right now they are properly aligned, but we still need to add some margin or padding to both the left and the right side of the screen. So selecting this element itself or go to Advanced, seems it's the margin. Let's decrease the margin at somewhere there, negative 20. Let's preview the changes. Let's also do the same for the logo. Select the logo itself. Advanced. Let's try to increase the margin on that side and update their preview the changes. I think we're getting somewhere with this. And of course we can play around with it until you're satisfied. As long as you know how to use the tools, you're able to play around with these numbers and values until you get the perfect appearance. Now, let's move on to the tablet size. For now we're done with that. And this is our tablet Napa. And of course, let's open up the iPad setting. We need to push the menu to decide. With the menu selected, the navigation menu selected click Layout. Let's go here to alignment, and let's put it on the right side. Then, right now we need to divide this 100 percent width. Exactly I wanted. So as you can see, this column is long, goes all the way up to here, so that should be about 55 percent. This looks like 45 percent. So let's select the logo column. Excuse me, the 55 percent. Let's push the logo all the way to the left or right. So the menu has been pushed downwards because we haven't given values for these columns, so good. This may be a 30 percent. And let's give the menu 15 percent. Now maybe let's give it about 10 percent. So let's get this 40 percent. Let's give this a 50% of right. So let's preview the changes at this moment. Let's open up the iPad. So I think we can work with that. But of course you can always continue working on it until you get something that really pleases you. The point here is to learn how to use the tools. That's what I'm insisting on. 34. Responsive hero section: Let's move on to the next part, which is the hero section. As you can see right now, on this side we have two images. And on the side we have the text and buttons. And when we control shift I, this heading texts right here collapses and comes to the middle, its center align the buttons right here, our central aligned. Now we have only one image. The other one has disappeared or is hidden. So let's make this hero section responsive because we are done with this. So let's close this window. Let's go back to the dashboard and let's go inside pages. And our front page is business, so often with Elementor. So let's go ahead and click that responsive mode icon. Let's see what it looks like on tablet. So just as we did with the menu right here, we need to get these columns a new width for the tablet. And so what we wanna do with this one here. So what we wanna do is click this column right here and inside column. Let's give it a 100 percent we override. Just like that. Let's update that. Right now, everything is centered, so let's center our text and buttons. So beginning this, select that and hit that alignment, write the select this, do the same. And now, now that we have these buttons right here, we can't make them stack on top of each other because they're in different columns. So what we'll do is duplicate this and we can go ahead and select this top one in a section, go to Advanced responsive. And then let's say, hi Don tablet. So this is what will be visible when we're right here. But when we go inside the tablet mode, this is what will be visible. And what we wanna do is drag this below this like that. And now we can get rid of this column. Clicking this button right here. Align it in the middle. Same case applies to this. Update that, and I want to drag this up to that point right there, but as you can see, I'm unable to drag it directly right there, so I'll just drag it all the way up here. And when I release it, it will come right below that. Just find a way to drop it right below these texts so you can work with the more comfortably and see how they align. So now let's go back and hide this on tablet. Update that. And let's reduce this font size because it looks a little bit too big. Typography. I think this is a little bit bolder, so let's give it a font weight of 700. Think it's a little bit darker, like that. Updated. So let's go down to the images, select the image column, and let's give it a width of a 100 percent, just as we did with this column right here. So a 100 percent and it's already taking this shape, this shape right here. So what I'll do is select this image. Now go to Advanced responsive Haydn tablet. So right now only this will be visible on tablet, just like right here. So we hit save and preview changes. This is what it looks like. Whoa, we need to hide these two buttons first. So let's go back here quickly. Select those two buttons. Advanced, responsive, Hi Don, desktop and smartphones. Update that. And if we go back to our page, all right, so we have our original desktop buttons, but when we control sheep eye, now we have those two buttons that stack up together on tablet. Let's see The distance right here. We need to increase the distance a little bit right here. So going back to this image, Let's select the inner section. Go to Advanced. And let's increase the bottom margin. First of all, we remove that link. It's increased the top margin up to somewhere there. And the bottom margin up to somewhere there. Update. Let's preview the changes. Right? So our spacing right here looks a little bit better. So this image needs some correcting. But notice that we only have this image now because this other one is hidden on tablet. So what we need to do is bring this to the center. So I'll go ahead and select that column. And I'll remove these links right now. And then selecting the image itself, go to Advanced. You move those links as well. Then bring back the padding. Let's give it a padding of 25. And let's preview the changes or right, think like what we have so far. I think we need to increase the padding right here a little bit further, maybe a 50, 70. Let's preview the changes. Alright, but now notice that because of the padding we've added the image, this distance is too large. So let's go ahead and reduce the margin. The bottom margin fact, let's remove that bottom margin and update that. Previewing the changes. That's more like it, but we can go a little bit further and reduce it up to 30. Maybe. I'll go ahead and preview the changes again. That looks good. Not exactly like this, but still have something we can work with. Remember, take your time to work on this and make it perfect. So I'm satisfied with our hero section for now. Stamp to move on to the main body section and make it responsive. 35. Responsive body section: So going back to the main page, the actual page, think we had it looking nice, but remember we added padding around this image, no sides, so we have a lot of padding here. Let's reduce the top margin on this section. So selecting this section, I'll go to Advanced unlink that. And you'll notice that it's jumped up after removing the default margins. And now we can give it the margin we want. Let's just use our eyes and see where we want to have it. I think we need to give you maybe 10, marginal 10 or right, so I like that so far. Next section, but right now these icons seem a little bit squeezed. And so we need to add some spacing between the icon and the subheadings as getting there and do that. So we need to get these maybe 10, 10% percent in this 90 percent. Let's do the same for this 10 percent and for the flexible schedule 90 percent. And finally, that 10, 90% update that. Let's preview the changes. All right, that looks good too. It's much better by looking at the button right here. It almost looks like a circle. Let's see what that looks like. And they seem to have centralized this sub-heading right here. Ours isn't I think I like ours like that. We don't have to copy exactly what they have. But if you wanted to achieve that, we'd have to select that. Then just come here and say center align back. In the same case with that. All right, so let's move on to this button right here. What does this look like? All right, they're stacked up on top of each other. We can do the same thing we did for these two buttons right here. Or we can just leave them side by side. Let us see what we can achieve with that. So let's go ahead and duplicate this as well. So we can hide one on desktop. Let's hide this. Hide it on desktop. And now let's carry this and put it right there below that. And let's get rid of this column right here. Update that. So this will be visible on tablet only, and this will be visible on desktop. So let's hide it on tablet. Advanced responsive. Hi Don, tablet. Update that. And let's preview the changes. There we go. Looks nice, just like this. You can play around with the distance between the two. Make them make it narrower or wider, right? So moving on to the testimonial section, what does this look like? So right now they're displaying only one and ours is playing too. I want to give you an exercise. I want you to duplicate this section right here and make the copy of the visible on tablet only instead of the one on tablet to show only one testimonial at every given moment. And once you've done that, let's move on to this area now, let's increase this margin right here. As you can see right now, it's a little bit tiny. So I'll select this section, go to Advanced, remove that link right there and give it maybe a 50. Yeah, I think I like that. Let's do the same for this blue section right here, or select the inner section right here. Let's go to Advanced. Remove that link and give it a 50 top margin. Then update that. Here, Let's preview the changes or right? So it looks a little bit more presentable right now. And as you notice right now, this column was below this button. By now it's jumped to this other side. And on ours, it hasn't jumped to the other side. And this is because of how we added it. Remember, we had this double column section. So how do we put this? On this other side? We use duplication as well. So let's duplicate that as we've been doing. Let's drag this in there. And now we want to make this visible on tablet only. So let's go to Advanced with that selected responsive. High don't desktop and smartphones update that. And we want to hide this on tablet and smartphones. So advanced. Hide on tablets and smartphones. I think this looks good, but let's preview the changes. I think I like how it looks. But we can put it in the middle, like that. Selecting me right there. Let's get rid of this column right here. It really isn't playing any role. And let's select that. It put this in the middle and that as well. Scroll up to style. Next. Here are our testimonials, self scrolling, think alike where they are so far, then we have this availability of bikes. Think we can add some margin or padding and push it to the right a little bit. So let's select that text. Go to Advanced. Let's just increase the padding by 20. Update that. Let's preview the changes. And notice that our form right here has collapsed, while the form right here is still inline. And again, that's because of the method we've used to add the form right here using for minister, we would have to add some custom CSS here to make this an inline form on tablet. But that's not our goal for this. Our goal is to understand the elemental tools. For now we'll just go with the collapsed like that. So let's close that. Next we want to go on to this section. Let's see what we have so far. I'll click that responsive mode. Scroll downwards, right? So I think we can make this column right here seems to be longer than this column and, and that's why the buttons here seem properly aligned. But ours seem a little bit squeezed. So let's make this column a little bit longer. Scrolling downwards. I'll select this column. So let's give this a 30 and give this a seven. Alright, let's update that. Right? So let's do the same for this right here. Let's increase that to maybe 60, 40. Update that. We're almost done. So let's see what we have for this section. Let's scroll downwards. Almost similar. But now notice that our logos here. First of all, we can only see two logos and they're a little bit big. But let's see what we can do about that. Let's collapse the logo then go to Settings. And let's see where is it slides to show. Let's say four. Yeah, I like that. Let's update that. Let's preview the changes. Scroll all the way to the bottom. Yup. 36. Responsive footer section: So let's scroll downwards the footer. Let's see what we have on our side. So ours looks a little bit messed up. We need to make quite some improvements or Knauer, so let's jump right in here. And now that we're done with the main page content, we can go ahead and close this and Exit to Dashboard. Then I'll click that. Let's go inside appearance, Elementor header and footer builder. And let's edit the footer edit with Elementor. All right, So let's get into responsive mode. Let's go inside tablet. So what we need to do is duplicate this like we did with the header or with the nav bar. And we'll make this visible only on tablet. Responsive. So we want to hide it on desktop. And smartphones. Update that, and we want to make this visible only on desktop. So let's update that. So let's come right here and select the section. Let's remove these links right here. And then let's link the padding together and give this some padding. Let's give it maybe a 50. So let's select the first column right here. Go to Layout. Let's give it maybe a 20, 20% percent or 20. And let's give this a 30% uptake there. Let's preview the changes. Control Shift. I click this responsive mode icon, and this is what we have on tablet. So I think I like how it looks. So I'm going to exit the dashboard and I'll go inside pages. Let's view, right-click open link in new tab, and let's view the page now. So I'll go to Control Shift. I will switch to responsive mode. And let's look at it from the top to bottom on an iPad or any tablet. Let's see what it looks like on a Galaxy S9. And so you'll notice that right now it doesn't look bad, presentable or mobile screen. And that's because I intentionally left out the mobile responsive part. Now that you've learned how to make the different elements responsive on tablet, you will use the same exact principles to make it responsive on mobile screen. 37. Conclusion: So that's it guys, this marks the end of the class. I hope you enjoyed watching. Of course, this is the first in a series of classes where I'll be showing you how to use Elementor by building real-world landing pages that have been successful, landing pages of world-famous brands. In this class, we did lift. Next class, we'll be looking at another famous brand and will be reproducing their landing page using Elementor until next time I'm a boy, can bursa piece.